CSS media types или различные стили для различных медиа носителей

Posted on Октябрь 31, 2007
Filed Under media types, css |

Что такое CSS media types

Большинство людей знают, что CSS делает HTML страницы более симпатичными на экране. Однако, CSS позволяет определять отображение (воспроизведение) страницы и в менее традиционной обстановке. Например, вы можете использовать CSS для того, чтобы рассказать screenreader’у о том, как читать страницу, или вы можете использовать CSS, чтобы телефон не загружал фоновое изображение 1000×1000px фотографического качества.

Короче говоря, используя CSS media types можно задать разные CSS таблицы для различных устройств.

Какие CSS media types существуют?

CSS2 в настоящее время определяет 10 медиа типов:

All
стили будут применятся для всех устройств
Aural
синтезаторы речи
Braille
тактильные дисплеи Брайля
Embossed
для принтеров, использующих рельефную азбуку Брайля
Handheld
ниши телефоны и другие карманные девайсы
Print
для всеми любимых принтеров
Projection
презентации, демонстрируемые с помощью проекторов
Screen
для цветных дисплеев высокого разрешения, таких как экраны наших
настольных ПК и ноутов.
Tty
устройства с выводом символов фиксированных размеров (старые  LCD
мониторы, терминалы, старые карманные устройства).
tv
для цветных дисплеев низкого разрешения разрешения, ограниченной
прокруткой и возможностью воспроизведения звука.

Я думаю из всей этой экзотики можно запомнить только All,Handheld,Print и Screen.

Как их использовать

Есть два способа указать тип носителя: в  HTML и в CSS.

В HTML

Чтобы определить медиа тип в HTML, вы можете использовать media=”" атрибут в ссылке на ваш CSS файл:

<link rel="stylesheet" media="screen, print" href="stylesheet.css" />

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

Если вы хотите определить различные CSS для различных типов носителей, вам придется разделить их в разные файлы CSS.

В CSS

Обертывая (части) ваш CSS в @media {} конструкцию, вы можете определить мадиа тип для этой части вашего CSS:

@media screen {
body {color:#f00;}
}
@media print {
body {color:#000;}
}

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

@import url("print.css") print;

Media types в будущем: CSS3

CSS3 добавляет некоторые интересные вещи по media types, которые переименованы в media querie. А media querie состоит из типа и функциональности носителя, таких, как ширина, высота, соотношение или цвет. Например, вы можете задать не только “экран с высоким разрешение”, но и “экран с высоким разрешением и не менее 800px в ширину”. Это дает гораздо более широкий спектр вариантов.

Вольный перевод оригинала.

Comments

4 Responses to “CSS media types или различные стили для различных медиа носителей”

  1. Авэмария on Ноябрь 15th, 2007 5:24 am

    Спасибо за статью, я тут как раз вникаю в суть цэ-эс-эс

  2. oqbo on Ноябрь 18th, 2007 10:44 am

    Присоединяюсь к Авемария. Про такой трюк с css я и не знал!

  3. Галко on Ноябрь 22nd, 2007 6:55 am

    Да ладно не знал, на каждом гашу в сети эта аббревиация встречается)

  4. Иван Важник on Ноябрь 30th, 2007 6:17 am

    ну так одно дело встречать, адругое знать что это значит :)

Leave a Reply




Please copy the string ovOPQn to the field below: