Как добавить стили [CSS] для других устройств

This page is a translated version of the page Adding stylesheets for other output devices and the translation is 83% complete.

Other languages:

Deutsch • ‎English • ‎Nederlands • ‎español • ‎français • ‎português • ‎português do Brasil • ‎български • ‎русский • ‎فارسی • ‎हिन्दी • ‎অসমীয়া • ‎বাংলা • ‎中文（台灣）‎

Задействование стилей CSS предоставляет возможность использовать какой-либо набор директив (стилей) в зависимости от того, какое именно устройство используется для просмотра данной веб-страницы.

Типы медиа устройств

Признанными типами медийных устройств являются следующие:

all - пригодны для всех устройств
aural - пригодны для синтезаторов речи
braille - предназначены для тактильных устройств обратной связи Брайля
embossed - предназначены для страничных принтеров Брайля
handheld - предназначены для карманных устройств
print - используется для форматирования печатуемых страниц
projection - предназначен для [стилизации] проекционных презентаций, как, к примеру, проекторов или печати на прозрачной пленке.
screen - предназначен преимущественно для цветных компьютерных экранов.
tty - предназначен для медийных устройств, использующих сетку знаков с фиксированным шагом, таких как телетипы, терминалы или переносные устройства с ограниченными возможностями дисплея. Авторы [стиля] не должны использовать с этим медиа типом пиксели в качестве единицы измерений.
tv - предназначен для устройств телевизионного типа (с низким разрешением экрана, цветом, звуком и ограниченной прокруткой экрана).

Примеры

Вы можете назначить какой-либо тип стилевой CSS декларации используя следующий синтаксис

@media print {
  body { 
    font-size: 12pt;
    font-color: #000000; 
  }
}

Для назначения более чем одного декларационного стиля более чем одному медийному типу:

@media print, handheld{
  body { 
    font-size: 12pt;
    font-color: #000000;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}

Эти директивы можно использовать в главном [стилевом] CSS файле или в отдельном стилевом файле согласно данного медийного типа. Ссылка на конкретный стилевой CSS файл должна быть включена в разделе шаблона между тегами <head> и </head> ( нижеследующий код взят из [поставляемого с] Joomla! шаблоном Beez):

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/beez/css/print.css" type="text/css" media="Print" />

The recommended way to include a stylesheet is:

<?php
$document = JFactory::getDocument();
 $tpath = $this->baseurl . '/templates/' . $this->template;
$document->addStyleSheet( $tpath . '/css/print.css', 'text/css', 'print'); // arguments: $path, $type, $media
?>

This way, you ensure the stylesheet will be added to the document and is accessible to plugins (e.g for combining and compressing stylesheets).

Как добавить стили [CSS] для других устройств

From Joomla! Documentation

Типы медиа устройств

Примеры