Является ли css-спрайт хорошей техникой?

Ответ 1

Да, это хорошая техника.

Вы можете уменьшить количество HTTP-запросов, и это метод оптимизации страницы.

Первое правило в

Лучшие практики для ускорения веб-сайтов по Yahoo

является

Свернуть запросы HTTP

80% времени отклика конечного пользователя проведенных на front-end. Большая часть этого время связано с загрузкой всех компоненты на странице: изображения, таблицы стилей, скрипты, Flash и т.д. Сокращение количества компонентов в turn уменьшает количество HTTP запросы, необходимые для отображения страницы. Это ключ к более быстрым страницам.

CSS Sprites - предпочтительный метод для уменьшения количества изображений Запросы. Объедините свой фон изображений в одно изображение и использовать CSS-фоновое изображение и свойства фоновой позиции для отобразить желаемый сегмент изображения.

Один из способов уменьшить количество компоненты на странице упрощают дизайн страницы. Но есть ли способ создавать страницы с более насыщенным контентом а также достижение быстрого ответа раз? Вот некоторые методы для уменьшая количество HTTP-запросов, при этом поддерживая богатую страницу конструкции.

Когда вам нужно изменить размеры изображений внутри спрайта, вам нужно пересчитать смещения для изображений. Но я не думаю, что это огромная ноша.

Поддерживается практически всеми современными браузерами.

Это также хорошая статья о CSS-спрайтах

CSS Sprites: что это такое, почему Theyre Cool и как использовать их

Ответ 2

Он работал для IE 6 Safari Opera 8+ и FF2 +. Вы должны прочитать следующее:

Сжатие Gif

В нем объясняется, как сжаты GIF (и другие файлы изображений). Например, отображение одних и тех же данных в "строках" вместо "столбцов" значительно сокращает использование пространства.

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

Другим плюсом является то, что вы можете использовать один спрайт для "красного" дизайна и другого спрайта для "синего" дизайна.

Однако есть один недостаток:

Большинство браузеров кэшируют спрайты изображений. Таким образом, вы можете столкнуться с проблемами при обновлении спрайта.

Ответ 3

Его отличная техника, но вы должны быть очень осторожны, как вы это делаете, чтобы она работала правильно в каждом браузере.

Это может быть сделано и является хорошим оптимизирующим кончиком, но, как всегда, обратите внимание, как он работает в IE, Firefox и Chrome, когда вы это делаете.

Концы заключаются в том, что его нельзя использовать всегда, и вы должны придерживаться наименьшего общего знаменателя для поддержки кросс-браузера css.

Ответ 4

Сделано правильно, он должен работать нормально во всех браузерах (даже IE6).

Самый большой, о котором я могу думать, это то, что если у вас слишком много изображений в одном спрайте и нужно изменить размеры только для одного из них, это может заставить вас изменить много CSS (поскольку смещения для других изображений, вероятно, также изменится)

Ответ 5

Один недостаток, с которым я столкнулся, заключается в том, что CSS-спрайты, похоже, не корректно печатаются во многих браузерах.

Ответ 6

Конечно, поскольку он сохраняет много запросов на http, это очень важно для загрузки вашего сайта.

Посмотрите эту страницу:

http://www.tutorialrepublic.com/css-tutorial/css-sprites.php

У этого есть большое объяснение и все, что вам нужно знать о CSS Sprite.