CSS эффективность: Используйте один файл стилей для нескольких носителей


С увеличением числа устройств, отображающих информацию, в CSSбыло введено такое понятие как тип носителя. Большинство разработчиков используют несколько файлов для связки CSS, предназначенных для разных типов носителей, таких как screen, print, или handheld. Эти фалы затем связывают либо через элементы ссылок с mediaатрибутом или через объявление @importс одним или более определением типа носителя.

Напомню типы носителей:

  • all- все типы. Значение по умолчанию.
  • aural- речевые синтезаторы для воспроизведения текста вслух.
  • braille- устройства Брайля для слепых людей.
  • handheld- наладонные компьютеры.
  • print- печатающие устройства.
  • projection- проектор.
  • screen- экран монитора.
  • tv- телевизор.

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

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

  • это увеличивает количество запросов HTTPот браузера к серверу;
  • усложняет установку нескольких CSSфайлов;

Некоторые даже разбивают свои файлы стилей CSSна отдельные не только для задания параметров для различных носителей, но даже для отдельных секций и модулей на сайте. Я пробовал делать такие разбиения но понял, что мне они совсем не подходят, хотя кому то может показаться удобным иметь множество файлов. Каждому своё, но мне кажеться работать и удобнее и быстее с одним глобальным файлом стилей.

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

ат-правило @media

Правило @mediaпозволяет группировать параметры свойств CSSдля каждого отдельного типа носителя. Все параметры вне @mediaприменяются для всех типов носителей, для которых применяется сам файл стилей.

Посмотрите на пример файла стилей, который использует правила @media:

body {
color:#444;
background-color:#fff;
}
@media screen, projection {
body { background-image:url(background.png); }
}
@media print {
body { color:#000; }
}
@media handheld {
body { color:#0f6517; }
}

Предполагая, что все правила в этом примере применяются ко всем типам носителей, следующее будет применено:

  • для типов screenи projectionцвет текста будет тёмно серый и фон будет содержать повторяющееся изображение;
  • для типов printцвет текта будет чёрным на белом фоне;
  • пользовательские агенты используюшие тип handheldотобразят тёмно зелёный цвет на белом фоне;
  • для всех остальных типов носителей цвет текста будет серым на белом фоне;

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

Реклама
Поделиться
Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!

2 комментария

  1. YoYurec16/03/2010

Добавить коментарий

2 × пять =