While other technologies are searched, invented, and developed, there is something we can surely implement in today's world, with support going back to Firefox 3, Chrome 21 and so on: the CSS2-introduced @media tag.
Truly born as a media type, this tag allows for different stylesheets to be imported – or for different rules and behaviors to be described within the current one – when some condition happens. Their first usage was in fact built to provide the possibility to the user to print out the webpage in a friendly way.
No more dull colors, double sized paper or text so small as to be useless: the designer had the possibility to strip off everything from the website, leaving it barebones, allowing the user only to print a readable, hierarchical text with the vital images all following correct flow and alignments.
The syntax is pretty straightforward – but the values are not, since some of them have been deprecated.
Starting with @media followed by the not/all expression, type and again not/all plus its features contained within ( ) – this rule actually has tons of applications.
Let's find all the types together:
- All for types means that the following CSS will be applied to every instance of every medium available
- Aural was use to style content for screen readers – with properties as beautiful as voice-volume, voice-balance, voice-rate, speech and so on…Now almost deprecated, with lots of its values moved to the speech media feature
- Braille, for (you guessed it) Braille tactile machines
- Embossed – this time to output content on Braille printers. The world is a beautiful place
- Handheld – crazy to think there once was such a term used in CSS, while as of today we opt for the simpler "mobile"
- Print – the majority of the work was usually put here, other values were ignored, unless you were in a specific business
- Projection – was used for screen projectors and presentation – never had that much use
- Screen – one of the pillars along with print. It is used to describe the content on every screen, from mobile to desktop.
- Tty – was used to translate the content for fixed grid screens and machines, like server terminals.
- Tv – won't sound new, but was used to translate the content on TV screens
The above describe and address the content for different kind of screens. All of them had some properties that could be addressed specifically, for the content to behave only on the meeting of those requirements, so let's see them too!
(They are named media features)
- Aspect-ratio: Describes the ratio between width and height of the viewport, to only address those with the specified measure (remember as earlier explained there's a difference between the screen size and the actual viewable area, which is the viewport).
- Color: Number of bits to obtain a specific color on the final screen (bit depth basically).
- Color-index: the number of colors the device is capable of showing.
- Device-aspect-ratio: And here it goes. Apart from the viewport, this value is specifically for the whole screen too.
- Device-height and device-width truly explain themselves.
- Grid: Aim of the device, if it's a terminal or a complete bitmap one.
- Height refers to the viewport height.
- Max-aspect-ratio: The maximum ratio between width and height of the desired, affected device.
- Max-device-height, max-device-width, max-height, max-resolution and their min variations need no explanations.
- Monochrome indicates the desired bits per color in a monochrome display, with min and max properties added.
- Orientation is really interesting. It addresses the behavior and display of your website, with values as portrait or landscape.Overflow-block targets content that exceeds the viewport width.
- Resolution targets the desired (of course) resolution of the device you tailored your content for.Scan means the scanning process of the device – since a text-to-speech machine uses a different process than a web browser, as a quick example.Width – well, this needs no explanation.
Media queries in the next CSS installment, Media Queries Level 4, added an option called Update Frequency, targeting the speed of change of the output for the desired machine.