Как правильно определить типы носителей для нескольких таблиц стилей?

Question

У меня есть веб-страница, которую я знаю, просматривается в разных браузерах, с мобильными устройствами и т. Д. Я просто хочу добавить доступный для печати вид.

Ссылка текущая таблица стилей выглядит следующим образом:

<link rel="stylesheet" type="text/css" href="somefile.css" media="all" /> 

То, что я хочу сделать equivilent из «если печать, использовать эту новую таблицу стилей, иначе использовать оригинал.»

Чтобы сделать это, могу ли я просто добавить таблицу стилей печати, например?

<link rel="stylesheet" type="text/css" href="somefile.css" media="print" /> 

Другими словами, это имеет смысл иметь как «все», чтобы поймать любой тип устройства я не могу думать о, и «печать» для этого конкретного средства массовой информации?

Answer 1

От a W3 schools example:

@media screen { 
    p.test {font-family:verdana,sans-serif;font-size:14px;} 
} 
@media print { 
    p.test {font-family:times,serif;font-size:10px;} 
} 
@media screen,print { 
    p.test {font-weight:bold;} 
} 

Answer 2

spec ясно говорит о том, что all тип носителя означает, что таблица стилей подходит для всех типов носителей.

Если это правильно, вы можете использовать его.

Однако, скорее всего, это не совсем так (это действительно подходит для speech?), Так что вы должны установить основную таблицу стилей screen:

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

Вы также можете определить медиа тип в один файл css, чтобы указать, какие правила следует использовать, с каким типом носителя с использованием @media по правилам.