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 thenot
oronly
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 usenot
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.