css3 – What is the @media selector in CSS for?

Question:

I would like to understand what the @media selector is for in CSS, as I have found it in several codes and wanted to know if it has a specialty.

Answer:

The @media known as media-query would be a condition to which you can specify a device, size, resolution, format, rotation, etc.

Usage is simple:

@media(<condição>) {
    <css desejado para a condição>
}

@media depending on the browser supports even more functionality, for example only supported in IE10+:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /*Aplica o estilo em navegadores IE10+ */
}

As soon as possible I will enumerate the properties for media-query that are unique to each browser/engine

logical operators

You can compose complex media queries using logical operators, including and , only and not .

  • The and operator is used to combine multiple features in the same media query , requiring each feature sequence to return true in order for the query to be true.

  • The only operator is used to apply a style only if the entire query matches, useful to prevent older browsers from applying selected styles. If you use the not or only operators, you must specify an explicit media type.

  • The not operator is used to negate an entire media query .

You can also combine multiple media queries into a comma-separated list, if any of the media queries in the list is true, the entire statement returns true, this is equivalent to an or operator.

@media types

  • all that will run on any device
  • print will run in print preview and at print time it will be rendered as in this format
  • screen intended for conventional monitors
  • speech intended for speech synthesizers.

Features for @media

  • width – Width of the viewport
  • height – Height of the viewport
  • aspect-ratio – Based on the aspect ratio of the width to height of the viewport
  • orientation – Viewport orientation (usually based on width and height)
  • resolution – Device pixel density
  • scan – Works according to the device scanning process (for example depending on frames)
  • grid – Whether the device uses grid or bitmap canvas
  • update – How often the output device can modify the appearance of the content (Level 4 Media Queries)
  • overflow-block – How the output device handles content that overflows the viewport along the block axis (Level 4 Media Queries)
  • overflow-inline – How far content that overflows the viewport along the inline axis can be scrolled (Level 4 Media Queries)
  • color – Number of bits per color component of the output device, or zero if the device is not "color-gamut" colored. Approximate range of colors that are supported by the user agent and output device (Level 4 Media Queries)
  • color-index – Number of entries in the output device's color lookup table, or zero if the device does not use this table
  • display-mode – The application's display mode as specified in the display member of the "manifest" (is a file) of the web application
  • monochrome – Bits per pixel on output device is monochrome frame buffer, or zero if device is not monochrome
  • inverted-colors – As user-agent or OS inverted colors are underlying or not (Level 5 Media Queries)
  • pointer – The main input engine is a pointing device, and if so, how accurate (Level 4 Media Queries)
  • hover – Primary input mechanism allows user to hover over elements (Level 4 Media Queries)
  • any-pointer – Any available input engine is a pointing device, and if so, whatever the precision (Level 4 Media Queries)
  • any-hover – Some input mechanism available allows user to hover over elements (Level 4 Media Queries)
  • light-level – Ambient light level (Level 5 Media Queries)
  • scripting – Whether or not scripting is enabled in your browser (eg javascript), you can use not to inform that the site only works with JS or enable alternatives if it doesn't (Level 5 Media Queries)

Note: Media-querys can also be applied to <link> elements, for example:

<link media="screen and (min-width: 900px)" href="arquivo.css">

And can also be applied in css added by @import , like this:

@import url("fineprint.css") print; /*aplica no preview de impressão ou no momento de gerar a impressão*/
@import url("bluish.css") projection, tv; /*aplica em projetos e televisores, provavelmente segunda tela conectada*/
@import "common.css" screen, projection; /*aplica tanto na tela principal quanto em projetores*/
@import url('landscape.css') screen and (orientation:landscape); /*aplica na primeira tela desde que a orientação esteja em landscape*/

Conclusion

So @media goes far beyond width and height, with @media you can combine various features, operators, create specific conditions and get different effects as needed.

Post Views: 2
Scroll to Top