Css link media types

Note: Several sections of this specification have been updated by other specifications. Please, see «Cascading Style Sheets (CSS) — The Official Definition» in the latest CSS Snapshot for a list of specifications and the sections they replace.

The CSS Working Group is also developing CSS level 2 revision 2 (CSS 2.2).

7.1 Introduction to media types

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

Certain CSS properties are only designed for certain media (e.g., the ‘page-break-before’ property only applies to paged media). On occasion, however, style sheets for different media types may share a property, but require different values for that property. For example, the ‘font-size’ property is useful both for screen and print media. The two media types are different enough to require different values for the common property; a document will typically need a larger font on a computer screen than on paper. Therefore, it is necessary to express that a style sheet, or a section of a style sheet, applies to certain media types.

Читайте также: Python built in time

7.2 Specifying media-dependent style sheets

There are currently two ways to specify media dependencies for style sheets:

@import url("fancyfonts.css") screen; @media print < /* style sheet for print goes here */ >

   Link to a target medium  The body.

7.2.1 The @media rule

An @media rule specifies the target media types (separated by commas) of a set of statements (delimited by curly braces). Invalid statements must be ignored per 4.1.7 «Rule sets, declaration blocks, and selectors» and 4.2 «Rules for handling parsing errors.» The @media construct allows style sheet rules for various media in the same style sheet:

@media print < body < font-size: 10pt >> @media screen < body < font-size: 13px >> @media screen, print < body < line-height: 1.2 >>

Style rules outside of @media rules apply to all media types that the style sheet applies to. At-rules inside @media are invalid in CSS2.1.

7.3 Recognized media types

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types the names of media types are normative, but the descriptions are informative. Likewise, the «Media» field in the description of each property is informative. all Suitable for all devices. braille Intended for braille tactile feedback devices. embossed Intended for paged braille printers. handheld Intended for handheld devices (typically small screen, limited bandwidth). print Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media. projection Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media. screen Intended primarily for color computer screens. speech Intended for speech synthesizers. Note: CSS2 had a similar media type called ‘aural’ for this purpose. See the appendix on aural style sheets for details. tty Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the «tty» media type. tv Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Media type names are case-insensitive.

Media types are mutually exclusive in the sense that a user agent can only support one media type when rendering a document. However, user agents may use different media types on different canvases. For example, a document may (simultaneously) be shown in ‘screen’ mode on one canvas and ‘print’ mode on another canvas.

Note that a multimodal media type is still only one media type. The ‘tv’ media type, for example, is a multimodal media type that renders both visually and aurally to a single canvas.

@media and @import rules with unknown media types (that are nonetheless valid identifiers) are treated as if the unknown media types are not present. If an @media/@import rule contains a malformed media type (not an identifier) then the statement is invalid.

Note: Media Queries supercedes this error handling.

For example, in the following snippet, the rule on the P element applies in ‘screen’ mode (even though the ‘3D’ media type is not known).

Note. Future updates of CSS may extend the list of media types. Authors should not rely on media type names that are not yet defined by a CSS specification.

7.3.1 Media groups

This section is informative, not normative.

Each CSS property definition specifies which media types the property applies to. Since properties generally apply to several media types, the «Applies to media» section of each property definition lists media groups rather than individual media types. Each property applies to all media types in the media groups listed in its definition.

CSS 2.1 defines the following media groups:

The following table shows the relationships between media groups and media types:

Relationship between media groups and media types Media Types Media Groups continuous/paged visual/audio/speech/tactile grid/bitmap interactive/static braillecontinuoustactilegridbothembossedpagedtactilegridstatichandheldbothvisual, audio, speechbothbothprintpagedvisualbitmapstaticprojectionpagedvisualbitmapinteractivescreencontinuousvisual, audiobitmapbothspeechcontinuousspeechN/Abothttycontinuousvisualgridbothtvbothvisual, audiobitmapboth

Источник

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

Источник

CSS Media Queries

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than the print media type.

CSS3 Introduced Media Queries

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

Browser Support

The numbers in the table specifies the first browser version that fully supports the @media rule.

Media Query Syntax

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Unless you use the not or only operators, the media type is optional and the all type will be implied.

You can also have different stylesheets for different media:

CSS3 Media Types

Value	Description
all	Used for all media type devices
print	Used for printers
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that «reads» the page out loud

Media Queries Simple Examples

One way to use media queries is to have an alternate CSS section right inside your style sheet.

The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

Example

The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):

Example

More Media Query Examples

For much more examples on media queries, go to the next page: CSS MQ Examples.

CSS @media Reference

For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.

Источник