CSS: @media (are you ready for the new mobile users generation?)

Tweet

As said before, 2011 and 2012 will be the tablets years. Recently we have witnessed the wide spread of new generation devices increasingly used to surf the web. Because of that, web developers have been aware of possible restyling of old web sites needed to satisfy the new mobile users. It's really a matter of determining your audience. Is people visiting your site using mobile devices? Are you really interested in developing a new look for your site just to satisfy that portion of your audience?
That is quite an interesting point. I suspect that before jumping to conclusions, we need to analyse our audience, know who they are, what they want, what they expect from our web site, and how they want to browse the web site. Basically we need to know if we really need to make those changes to the structure of the site and if it's worth working on it, after all.

At-Rules

I don't know if you already have used CSS at-rules. Basically they enclose a set of CSS rules and apply them to a specific item. We have talked about one of them in the @font-face article. The at-rules are quite interesting and become handy when dealing with different medias. The usual scenario was when we needed to create a specific style for printing pages. However the @media rule can be used to style pages according to different situation.

@media

@media is used to specify the target media types of a set of rules. We can group media types using comma and the set of rules is surrounded by curly braces.
The syntax is as follow:

@media <media types>
   {
       /* media rules */
    }

The <media types> can be:

• all - for all devices
• braille - for braille devices
• embossed - for braille printers
• handheld - for handheld devices
• print - for documents viewed in print preview
• projection - for projected documents (using projectors)
• screen - for pc screens
• speech - for speech synthesizers
• tty - for fixed-pitch character grid devices (e.g. teletypes)
• tv - for televisions

As you can see, we should probably focus on handheld, tty and tv because they are what we need for new generation web browsing capable devices.

As a side note, it is possible to set the media type directly in the link to the external stylesheet:

<link href="print.css" media="print" rel="stylesheet" type="text/css">

Compatibility

As usual, compatibility is really a mess here. I still do not understand why we should get literally mad with writing thousands of stylesheets when we could use rules introduced in CSS 2. Why are we talking about CSS3 when browser do not fully comply to CSS2?
Anyway, the only media types that - almost - work with every browser are print and screen. That means troubles as usual.
For instance, Firefox implements only print and screen. But - as you may understand - Firefox is not really popular as handheld device browser.
There's a lot of debate around the fact that mobile browsers can handle @media rules. There are even  discussion groups where people report their experience with different devices, with different browsers. And - let me say - it's all a bit confusing.
In the end, is it all worth it? Should we just register a new domain and develop a specific web site for mobile devices?

Let me know what you think about it.