Document

HTML media Attribute

Two different style sheets for two different media types (screen and print):

Definition and Usage

The media attribute specifies what media/device the target resource is optimized for.

This attribute is mostly used with CSS style sheets to specify different styles for different media types.

The media attribute can accept several values.

Browser Support

Syntax

Possible Operators

Value	Description
and	Specifies an AND operator
not	Specifies a NOT operator
,	Specifies an OR operator

Devices

Value	Description
all	Default. Used for all media type devices
print	Used for Print preview mode/printed pages
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that «reads» the page out loud
aural	Deprecated. Speech synthesizers
braille	Deprecated. Braille feedback devices
handheld	Deprecated. Handheld devices (small screen, limited bandwidth)
projection	Deprecated. Projectors
tty	Deprecated. Teletypes and similar media using a fixed-pitch character grid
tv	Deprecated. Television type devices (low resolution, limited scroll ability)

Values

Value	Description
aspect-ratio	Specifies the width/height ratio of the targeted display area. «min-» and «max-» prefixes can be used. Example: media=»screen and (max-aspect-ratio:16/9)»
color	Specifies the bits per color of target display. «min-» and «max-» prefixes can be used. Example: media=»screen and (min-color:3)»
color-index	Specifies the number of colors the target display can handle. «min-» and «max-» prefixes can be used. Example: media=»screen and (min-color-index:256)»
device-aspect-ratio	Deprecated. Specifies the device-width/device-height ratio of the target display/paper.
device-width	Deprecated. Specifies the width of the target display/paper.
device-height	Deprecated. Specifies the height of the target display/paper.
grid	Specifies if the output device is grid or bitmap. Possible values are «1» for grid, and «0» otherwise. Example: media=»handheld and (grid:1)»
height	Specifies the height of the targeted display area. «min-» and «max-» prefixes can be used. Example: media=»screen and (max-height:700px)»
monochrome	Specifies the bits per pixel in a monochrome frame buffer. «min-» and «max-» prefixes can be used. Example: media=»screen and (min-monochrome:2)»
orientation	Specifies the orientation of the target display/paper. Possible values: «portrait» or «landscape» Example: media=»all and (orientation: landscape)»
resolution	Specifies the pixel density (dpi or dpcm) of the target display/paper. «min-» and «max-» prefixes can be used. Example: media=»print and (min-resolution:300dpi)»
scan	Specifies scanning method of a tv display. Possible values are «progressive» and «interlace». Example: media=»tv and (scan:interlace)»
width	Specifies the width of the targeted display area. «min-» and «max-» prefixes can be used. Example: media=»screen and (min-width:500px)»

❮ HTML tag

Источник

HTML Tag

The tag defines the relationship between the current document and an external resource.

The tag is most often used to link to external style sheets or to add a favicon to your website.

The element is an empty element, it contains attributes only.

Browser Support

Attributes

Attribute	Value	Description
crossorigin	anonymous use-credentials	Specifies how the element handles cross-origin requests
href	URL	Specifies the location of the linked document
hreflang	language_code	Specifies the language of the text in the linked document
media	media_query	Specifies on what device the linked document will be displayed
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies which referrer to use when fetching the resource
rel	alternate author dns-prefetch help icon license next pingback preconnect prefetch preload prerender prev search stylesheet	Required. Specifies the relationship between the current document and the linked document
sizes	HeightxWidth any	Specifies the size of the linked resource. Only for rel=»icon»
title	Defines a preferred or an alternate stylesheet
type	media_type	Specifies the media type of the linked document

Global Attributes

Event Attributes

Related Pages

Default CSS Settings

Most browsers will display the element with the following default values:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Тег атрибут media

Две разные таблицы стилей для двух разных типов носителей (просмотр и печать):

Определение и использование

Атрибут media указывает, для какого носителя/устройства оптимизирован целевой ресурс.

Атрибут media в основном используется с таблицами стилей CSS для указания различных стилей для различных типов носителей.

Атрибут media может принимать несколько значений.

Поддержка браузеров

Синтакси

Возможные операторы

Значение	Описание
and	Определяет оператор AND
not	Определяет оператор NOT
,	Определяет оператор OR

Устройства

Значение	Описание
all	По умолчанию. Используется для всех устройств типа носителя
print	Используется для режима предварительного просмотра печати/печатных страниц
screen	Используется для экранов компьютеров, планшетов, смартфонов и т.д.
speech	Используется для чтения с экрана, который «читает» страницу вслух
aural	Согласованный. Синтезатор речи
braille	Согласованный. Устройства обратной связи по Брайлю
handheld	Согласованный. Портативные устройства (маленький экран, ограниченная пропускная способность)
projection	Согласованный. Проекторы
tty	Согласованный. Телетайпы и аналогичные носители информации, использующие сетку символов фиксированного шага
tv	Согласованный. Устройства телевизионного типа (низкое разрешение, ограниченная возможность прокрутки)

Значения

Значение	Описание
aspect-ratio	Задает соотношение ширины и высоты целевой области отображения. «min-» и «max-» можно использовать префиксы. Пример: media=»screen and (max-aspect-ratio:16/9)»
color	Задает количество бит на цвет целевого отображения. «min-» и «max-» можно использовать префиксы. Пример: media=»screen and (min-color:3)»
color-index	Задает количество цветов, которое может обрабатывать целевое отображение. «min-» и «max-» можно использовать префиксы. Пример: media=»screen and (min-color-index:256)»
device-aspect-ratio	Согласованный. Задает отношение ширины устройства/высоты устройства целевого отображения/написания.
device-width	Согласованный. Задает ширину целевого отображения/написания.
device-height	Согласованный. Задает высоту целевого отображения/написания.
grid	Указывает, является ли устройство вывода сеткой или растровым изображением. Возможные значения: «1» для сетки и «0» в противном случае. Пример: media=»handheld and (grid:1)»
height	Задает высоту целевой области отображения. «min-» и «max-» можно использовать префиксы. Пример: media=»screen and (max-height:700px)»
monochrome	Задает количество бит на пиксель в монохромном буфере кадров. «min-» и «max-» можно использовать префиксы. Пример: media=»screen and (min-monochrome:2)»
orientation	Задает ориентацию целевого отображения/написания. Возможные значения: «portrait» или «landscape» Пример: media=»all and (orientation: landscape)»
resolution	Задает плотность пикселей (dpi или dpcm) целевого отображения/написания. «min-» и «max-» можно использовать префиксы. Пример: media=»print and (min-resolution:300dpi)»
scan	Указывает способ сканирования телевизионного отображения. Возможные значения: «progressive» и «interlace». Пример: media=»tv and (scan:interlace)»
width	Задает ширину целевой области отображения. «min-» и «max-» можно использовать префиксы. Пример: media=»screen and (min-width:500px)»

Мы только что запустили
SchoolsW3 видео

Источник

What is the utility of the media attribute in the Link tag?

Is there any advantage or improvement to us using the media attribute in the link tag? If so?, then I don’t need to use the @media rule in my CSS, using the media attribute will be enough to set the breakpoints for my web page, right?

5 Answers 5

An advantage of using the media attribute in a link tag that was not mentioned is that by including styles this way we can avoid CSS render blocking.

Let’s say I have a page that the very basic style is set inline, but I also have styles for tablet ( 768px ) in an external file and some others styles that are only applied on tablets.

I have recorded the rendering process for both cases with media attribute in link tag and without with Google Chrome DevTools. In order to see this working, I have added network throttling to Slow 3G and CPU slow down to ( 20x slowndown )

This is the first version not using media attribute in the link tag:

        h1 
blocked render
   

• First render at 1100ms
• The style rendering is deferred until all css are downloaded and parsed (CSS render blocking)

The second version using media attribute:

        h1 
Not render blocked under 768px
   

• First render at 2000ms
• The style is rendered because the browser knows that the links tags are only applied to screens wider than 728px

So using media attribute helps us to prevent render blocking and improve the critical rendering path. For further information please read the article in Developers Google Render Blocking CSS

Источник