link media attribute
The media attribute on the link element:
- allows you to specify the media for which the linked resource was created, thus that resource will apply ⁄display only in that media
- media is a specific attribute → can be applied ONLY on the next HTML5 elements: link, source, style
- media values (the media they represent):
- all (apply to all media: screen, print..)
- screen (computer screens)
- print (computer screens but in print preview mode and while printing)
- braille (braille tactile feedback devices)
- embossed (paged braille printers)
- handheld (old small screen devices; does not apply to smartphones)
- projection (projectors)
- speech (speech synthesizer)
- tty ( teletypes, terminals)
- tv (television-type devices)
Examples
| <link | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 3. | media | = | all, braille, embossed, handheld print, projection, screen, speech tty, tv | < rel="stylesheet" href="print.css" media="print"> |
Video demonstration link media attribute
HTML5 link media attribute Tutorial
| min | video details |
|---|---|
| 00:14 | this video tutorial presents the media attribute and 3 of its values: all, screen, print on a link element; note: the rest of the attributes cannot be demonstrated with the present tools |
| 00:22 | if media attribute is omitted or its value is all → the linked resource applied to all media |
| 00:26 | A) media attribute is omitted |
| 00:26 | when media attribute is omitted, the linked resource applies to all media |
| 00:33 | tests: on screen: ok, the linked resource, main.css, applied on print preview: ok, main.css applied |
| 00:42 | B) media attribute has the value: all |
| 00:47 | when media attribute has the value all, the linked resource 'main.css' applied to all media |
| 00:53 | tests: on screen: ok, main.css applied on print preview: ok, main.css applied |
| 01:03 | in both media, screen, print , the page looks the same because the linked resource, main.css, applied in both cases |
| 01:18 | C) media attribute has the value: screen |
| 01:20 | when the media attribute has the value: screen, then the linked resource, main.css, applies to screen media only |
| 01:24 | tests: on screen: ok, main.css applied on print preview: ok, main.css DID NOT apply |
| 01:34 | D) media attribute has the value: print |
| 01:37 | when the media attribute has the value: print, then the linked resource, main.css, applies to print media only |
| 01:42 | tests: on screen: ok, main.css DID NOT apply on print preview: ok, main.css applied |
| 01:55 | With media attribute you can specify different styles for different media: main.css applies on screen, while print.css applies on print |
| 02:03 | tests: main.css applied on screen: ok print.css applied on print preview: ok |
| 02:36 | different display of the same page in 2 different media; the font size, the font-family and the background are different |