Become Wordpress Professional - Your Ultimate Wordpress Guide

Friday, 22 March 2013

Media Types and Media Queries in CSS

CSS media types and media queries

What are Media Types?

One of the great benefits of using html and CSS to separate presentation and structure is the ability to present the same content in different ways to different devices. CSS allows us to do that through the use media types.
In this tutorial I want to take a closer look at media types and their recent extension media queries. Media types allow you to control which styles are served to user agents based on that user agents device type. This means that you can send one set of styles to screen devices, another set to a printer and yet another set to screen reader. This ability allows you to change the deign of your site based on the context of where it's viewed or restrict the use of certain media specific styles like page breaks to the devices that understand them. You can choose between three different type of syntax when declaring media types.

Media Query Syntax

  1. First you can use the @media blocks to group media specific styles together. This allows you to have multiple sets of styles, within a single style sheet.
  2.     @media screen {
  3. You can also use media type with the @import rule. you simply declare the media type after the location of the external style.
  4.     @import url("styles.css") screen;
  5. The third and probably most common syntax for declaring media types is actually part of HTML. when using the link tag to link to an external style sheet you can use the media attribute to specify which media type or types that you want the styles applied to.
Now as you can see the syntax, you can assign more then one media type to styles, by using the comma separated list.

Media Type

So what media types are available?, Well these are the current types that we have:
  • all : Which tells all user agents to apply the styles
  • braille : For feedback devices
  • embossed : Which is intended for paged braille printers
  • handheld : For mobile devices
  • print : For printers
  • projection : For projected presentation devices
  • screen : For screen devices
  • speech : For speech synthesizer such as screen readers
  • tty : For teletypes terminals
  • tv : For Televisions

Media Type Benefits

  1. Truthfully you probably won't use very many of these and support for the media types isn't universal. For example many mobile deceives choose to support the screen media type rather then handheld due to the browsing capabilities of those devices still being able to have your site one way on screen. However, controlling how the content prints and giving extra information to assisted devices is an amazing powerful capability for the designer to have.
  2. The other benefit we gain from media types is their forward looking nature.
  3. As new devices come online, those media types can be added to the specification and media specific properties can be created to help control how content is displayed and presented on those devices.

Media Type Shortcomings

As I mentioned earlier though some times media types alone can't give us the control to what we need and how content displays on various devices. The rise of smart phones and tablets have created a segment of mobile devices that are increasingly being used to consume online content but they only offer inconsistent support for handheld media types, preferring to support the screen media type.

That means these devices with their much smaller screen sizes would render the page using the same styles that are used for desktop browsers. To help deal with this issue, CSS3 introduce media queries.

What are Media Queries?

Media queries combine with media types and allow you to apply little conditional logics along with the media type it self. So that you can filter when styles are applied, based on thing like width, height, orientation and color.
Lets dig into the media queries a little deeper by taking a look at the syntax.
    link rel="stylesheet" href="desktop.css"
    media="[not | only] screen [and] (expression)"
First you can use the optional "only" or "not" keyword to filter out your media queries.
Only - Only is simply use to filter out media queries for being applied by non supporting devices. Conforming agents are just told to ignore it. So you'r only going to use it if you are trying to hide the media queries styles from older browsers.
Not - Not keyword negates the entire media query, so the styles would be applied to the devices that do not meet the media query expression.
Screen - From there you move on to declaring media type "(screen)" is normal.
And - You can then use the "And" keyword to add as many expression as you like.
Expression - Now these expression allow you to check fro certain media features and even allow you to check for ranges of values.

Media Features

Here is the list of the current features.
  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid
Other features like width and height are support currently and even allow you to add minimum and maximum prefix to set upper or lower limits on those values.

Media Query Syntax

Here is a more specific example of syntax to see for how you might use this in action. So this is the media query:
    link rel="stylesheet" href="desktop.css"
    media="only screen and (min-width:0px) and (max-width:480px)"
This is to be applied if the media device type is screen and width of the screen is between 0px and 480px. This would be ideal for mobile devices for smaller screens. As it would limit those styles from being applied unless these condition were met. Although media queries are still relatively new, they are widely supported among modern browsers and mobile devices. So many designers are beginning to add them to there styles right now.

Media Types vs Media Queries

So media types allow us to control when styles are applied based on the type on the device being used by the client. Media queries allow us to further refine the process by creating the more narrow focused for when styles are used by various media types.


Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.