Jump to content
  • 0

CSS-спрайты

Vlad

Asked by Vlad,

 Share

Question

17 answers to this question

Recommended Posts

  • 0
PavelTkachev Explorer

PavelTkachev

Posted
Posted

А чем выгодны спрайты по сравнению с base64-кодированием и последующем сжатием css файла с помощью gzip?

При использовании спрайта будет два обращения в серверу, а при кодировании внутри css - одно.

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted
  On 3/12/2015 at 7:32 AM, PavelTkachev said:
А чем выгодны спрайты по сравнению с base64-кодированием и последующем сжатием css файла с помощью gzip?

Простотой реализации (не нужен сервер, не нужно ПО, которое будет перекодировать/пережимать в случае изменения CSS) + base64 не работает в старых браузерах (уж не знаю интересуют ли они). 

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted
  On 3/12/2015 at 4:06 AM, Vlad said:

Сделал такой пример. Локально во всех браузерах всё работает хорошо, но на JSFeddle сердечко скачет. В чём может быть дело?

 

http://jsfiddle.net/webref/Lp9kzon3/

 

Может, дело в неродном браузерном масштабе? У меня на родном масштабе всё ОК, но при чуть уменьшенном масштабе в Хроме удалось поймать «рывки» (и, что хуже, полоски от соседних картинок). Но я бы на рывки забил — при неродном масштабе такие странности простительны. А вот от полосок надо бы добавить просвета между картинками, имхо.

 

 

 

  On 3/12/2015 at 7:32 AM, PavelTkachev said:
чем выгодны спрайты по сравнению с base64-кодированием и последующем сжатием css

 

Возможностью параллельной загрузки. Любые тяжелые ресурсы, внедренные прямо в файл, задерживают парсинг и отрисовку оставшейся его части, что особенно ощутимо на мобильных. А отдельный файл может грузиться параллельно в отдельном потоке. Поскольку у браузеров минимум 2 одновременных соединения на домен, два параллельных запроса оказываются быстрее одного очень долго обрабатываемого.

Link to comment
Share on other sites
  • 0
Sergik+ Explorer

Sergik+

Posted
Posted
  On 3/12/2015 at 8:14 AM, SelenIT said:

 

  On 3/12/2015 at 8:13 AM, Sergik+ said:
инлайн svg самое то

А как же кеширование?

 

Имхо, нет серебряной пули, бывает оптимальное решение конкретной задачи...

 

К сожалению тоже пришел к такому выводу, везде есть проблемы небольшие.

Link to comment
Share on other sites
  • 0
SelenIT Explorer

SelenIT

Posted
Posted

Всё равно, имхо, даже для этой извроптимизации лучше грузить исходный svg в параллельном потоке. AFAIK, часто его вообще сразу заворачивают в скрипт, которому можно поставить async/defer и всё прочее нужное...

Link to comment
Share on other sites
  • 0
PavelTkachev Explorer

PavelTkachev

Posted
Posted
  On 3/12/2015 at 9:40 AM, SelenIT said:
AFAIK, часто его вообще сразу заворачивают в скрипт, которому можно поставить async/defer и всё прочее нужное...

 

Расскажите подробнее

Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted
  On 3/12/2015 at 4:46 PM, Sergik+ said:
Насколько велика необходимость в кэшировании svg, у меня сейчас даже css в несколько раз больше ?

Вы наверное про хайлоад никогда не слышали. Люди за каждый лишний байт борются.

Link to comment
Share on other sites
  • 0
Sergik+ Explorer

Sergik+

Posted
Posted
  On 3/13/2015 at 8:05 AM, Great Rash said:

 

  On 3/12/2015 at 4:46 PM, Sergik+ said:
Насколько велика необходимость в кэшировании svg, у меня сейчас даже css в несколько раз больше ?

Вы наверное про хайлоад никогда не слышали. Люди за каждый лишний байт борются.

 

Кучу конф пересмотрел, даже среди профи не все однозначно.

Например нужно ли собирать весь js и css в один файл или нет ?

С svg много играюсь последнее время и считаю что это одно из самых

некритичных мест в хайлоаде.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept