YouTip

## HTML <link> media Attribute The `media` attribute of the `` tag specifies the target device or media type for which the linked document (usually an external CSS stylesheet) is optimized. By using the `media` attribute, you can deliver tailored styles to different devices—such as desktop screens, mobile devices, or printed paper—without changing the HTML structure. --- ## Browser Support The `media` attribute is fully supported by all major modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer * Safari * Opera --- ## Syntax ```html ``` The `value` of the `media` attribute can consist of media types, operators, and media features (similar to CSS Media Queries). --- ## Operators You can combine multiple expressions using logical operators: | Operator | Description | | :--- | :--- | | `and` | Combines multiple media features or types. All conditions must be true. | | `not` | Negates a media query. If the query would otherwise be true, it becomes false. | | `,` (Comma) | Acts as an `OR` operator. If any of the comma-separated queries are true, the stylesheet is applied. | --- ## Media Types (Devices) These values specify the general category of device the document is designed for: | Value | Description | | :--- | :--- | | `all` | **Default**. Suitable for all devices. | | `print` | Intended for paged material and documents viewed on screen in print preview mode. | | `screen` | Intended primarily for color computer screens, tablets, smartphones, etc. | | `speech` | Intended for speech synthesizers (replaced the deprecated `aural` type). | | *Deprecated* | *The following types are deprecated in modern standards but may still be found in legacy code: `aural`, `braille`, `handheld`, `projection`, `tty`, `tv`.* | --- ## Media Features (Values) Media features describe specific characteristics of the user agent, output device, or environment. Most features can be prefixed with `min-` or `max-` to express "greater than or equal to" or "less than or equal to" constraints. | Feature | Description | Example | | :--- | :--- | :--- | | `width` | Specifies the width of the target rendering area (viewport). | `media="screen and (min-width: 500px)"` | | `height` | Specifies the height of the target rendering area (viewport). | `media="screen and (max-height: 700px)"` | | `device-width` | Specifies the physical width of the device screen. *(Deprecated in favor of `width`)* | `media="screen and (device-width: 500px)"` | | `device-height` | Specifies the physical height of the device screen. *(Deprecated in favor of `height`)* | `media="screen and (device-height: 500px)"` | | `orientation` | Specifies the orientation of the viewport. Values: `portrait` or `landscape`. | `media="all and (orientation: landscape)"` | | `aspect-ratio` | Specifies the width-to-height ratio of the viewport. | `media="screen and (aspect-ratio: 16/9)"` | | `device-aspect-ratio` | Specifies the device-width to device-height ratio. *(Deprecated)* | `media="screen and (device-aspect-ratio: 16/9)"` | | `color` | Specifies the number of bits per color component of the output device. | `media="screen and (color: 3)"` | | `color-index` | Specifies the number of colors the device can display. | `media="screen and (min-color-index: 256)"` | | `monochrome` | Specifies the bits per pixel in a monochrome frame buffer. | `media="screen and (monochrome: 2)"` | | `resolution` | Specifies the pixel density of the target device (in `dpi` or `dpcm`). | `media="print and (resolution: 300dpi)"` | | `scan` | Specifies the scanning process of television devices. Values: `progressive` or `interlace`. | `media="tv and (scan: interlace)"` | | `grid` | Queries whether the output device is a grid (like a TTY terminal) or bitmap. | `media="handheld and (grid: 1)"` | --- ## Code Examples ### Example 1: Separate Stylesheets for Screen and Print This is the most common use case. It loads a standard stylesheet for screen viewing and a optimized, ink-friendly stylesheet for printing. ```html ``` ### Example 2: Responsive Design using Viewport Width You can load different stylesheets depending on the width of the user's browser window. ```html ``` ### Example 3: Combining Multiple Conditions You can target specific device orientations and screen sizes together. ```html ``` --- ## Considerations and Best Practices 1. **Performance & Non-blocking Downloads**: Browsers will download *all* linked stylesheets regardless of the `media` attribute value to ensure they are available if the environment changes (e.g., rotating a tablet or resizing a window). However, stylesheets that do not match the current media query are downloaded with a lower priority and do not block the initial rendering of the page. This significantly improves First Contentful Paint (FCP). 2. **HTML5 vs. HTML 4.01**: In HTML5, the `media` attribute accepts any valid CSS media query. In older HTML 4.01 specifications, only basic media types (like `screen` or `print`) were officially supported. Modern web development fully embraces the HTML5 standard. 3. **Maintenance**: While splitting CSS into multiple files via `` is excellent for performance optimization on large sites, for smaller projects, keeping media queries inside a single CSS file using `@media` rules may be easier to maintain.