Действительно ли css-спрайт является хорошей техникой? [закрытый]
Удостоверьтесь, что у Вас есть установленный php5-cli и тип 'php-a' в командной строке.
5 ответов
Да, это хороший метод.
Вы можете уменьшить количество HTTP-запросов, и это метод оптимизации страницы.
Первое правило в
ускоряет работу веб-сайтов
Минимизирует HTTP-запросы
80% времени ответа конечного пользователя составляет потратил на фронтенд. Большая часть этого время связано с загрузкой всех компоненты на странице: изображения, таблицы стилей, скрипты, Flash и т. д. Уменьшение количества компонентов в очередь уменьшает количество HTTP запросы, необходимые для отображения страницы. Это ключ к быстрым страницам.
CSS-спрайты являются предпочтительным методом для уменьшения количества изображений Запросы. Объедините свой фон изображения в одно изображение и используйте CSS background-image и свойства background-position для отобразить нужный сегмент изображения.
Один из способов уменьшить количество компоненты на странице для упрощения дизайн страницы. Но есть ли способ для создания страниц с более богатым содержанием при этом достигается быстрый отклик раз? Вот несколько приемов для уменьшение количества HTTP-запросов, при этом все еще поддерживая богатую страницу дизайны.
Когда вам нужно изменить размеры изображений внутри спрайта, вам необходимо пересчитать смещения для изображений. Но я не думаю, что это большая нагрузка.
Это поддерживается почти всеми современными браузерами.
Это также хорошая статья о спрайтах CSS.
Спрайты CSS: что они такое, почему они Круто, и как их использовать
Он работал для IE 6 Safari Opera 8+ и FF2 +. Вы должны прочитать это:
В нем объясняется, как сжимаются GIF (и другие файлы изображений). Например, отображение одних и тех же данных в «строках» вместо «столбцов» значительно сокращает использование пространства.
Кроме того, вы предварительно загружаете все изображения, и нет никакой задержки, если вы меняете изображения местами.
Еще одним плюсом является то, что вы можете использовать один спрайт для «красного» дизайна и другой спрайт для «синего» дизайна.
Однако есть один недостаток :
Большинство браузеров кэшируют спрайты изображений. Так что при обновлении спрайта у вас могут возникнуть проблемы.
Это отличный метод, но вы должны быть очень осторожны с тем, как вы это делаете, чтобы он работал правильно в каждом браузере.
Это можно сделать, и это хороший совет по оптимизации, но как всегда, обратите внимание на то, как он работает в IE, Firefox и Chrome, пока вы это делаете.
Минусы в том, что его нельзя использовать всегда, и вы должны придерживаться наименьшего общего знаменателя для кроссбраузерности css поддержка.
Все сделано правильно, он должен нормально работать во всех браузерах (даже IE6).
Самый большой недостаток, о котором я могу думать, это то, слишком много изображений в одном спрайте, и вам нужно изменить размеры только для одного из них, это может привести к необходимости изменения большого количества CSS (поскольку смещения для других изображений, вероятно, также изменятся)
Один недостаток, с которым я столкнулся, заключается в том, что спрайты CSS не печатаются должным образом во многих браузерах