The CSS3 :target pseudo-class

Some years ago, in 2005, I attended a workshop about CSS. Andy clark told us about the near future and showed us an example of a completely CSS driven web page. We all thought that there was some kind of javascript there but Andy said that the secret was the CSS3 :target pseudo-class.

You can run this jsFiddle http://jsfiddle.net/jurquizu/Wtr4g/ for a live example.

The idea behind the :target pseudoclass is that the target element of an anchor can have its CSS rules. For example the anchor link "#info" is targetting the paragraph with id "info". When we click this link, the CSS selector p#info:target is triggered and all its rules are applied.

HTML

view plainprint?

1. <p>Click on the link to show the hidden paragraph: <a href="#info">show me</a>.</p>  
2. <p id="info">This is the hidden paragraph.</p>  

Click on the link to show the hidden paragraph: show me.
This is the hidden paragraph.

CSS

view plainprint?

1. /* here's pseudoclass-target in action */  
2.   
3. p#info {  
4.     display:none;  
5. }  
6.   
7. p#info:target {  
8.     display:block;  
9.     border:2px solid red;  
10.     background-color:yellow;  
11.     width:250px;  
12.     text-align:center;  
13. }  

/* here's pseudoclass-target in action */

p#info {
    display:none;
}

p#info:target {
    display:block;
    border:2px solid red;
    background-color:yellow;
    width:250px;
    text-align:center;
}

Adding behavior to CSS?

It's been already stated that it is a good practice to separate Presentation (CSS), Structure (HTML) and Behavior (Javascript) when building a web site. But this concept has not been always clear.

Recently, CSS3 has been adding features to enhance its ability to add behavior by means of new properties like transition or the :target pseudo class. Doesn't this break the forementioned separation concern? Even previous CSS versions had features that made it possible to mix behavior in the presentational layer. Do you remember the vendor specific behavior property of IE and the associated .htc files? What about the :active or :hover pseudo classes?

All these features try to add a visual change (rotation, scaling, changing color...) that is related to behavior (activating a link, targetting an element, hovering over anything...) and all this is done via CSS! Shouldn't this be done via Javascript? In fact JavaScript was designed to be the layer of interactivity.

Well, that is why there is a bit of controversy (http://snook.ca/archives/javascript/css_animations_in_safari/). To smooth things out let me share with you some ideas.

• Most browser vendors are accepting CSS3 standards. Then, why not accept the transition property?
• Transitions and animations in CSS3 have blurred the distinction between presentation and behavior as separate layers, but they are easy to create and fun.
• Some animated transitions are presentational and have nothing to do with behavior such as a flashing banner or a fading title.
• Sometimes there is no clear border between presentation and behavior.

All in all, as long as you have a clear understanding of the benefits resulting from the separation of concerns, I don't think it is a mistake to take advantage of the improvements in CSS3 even though these benefits blur the distinction between presentation and behavior.

jQuery Mobile

Once decided that jQuery will be my choice to write javascript code, I faced the challenge to find an easy way to write mobile applications. To my surprise I came across jQuery Mobile, a javascript framework for creating websites optimized for the most popular mobile devices. This framework adds a layer on top of jQuery and meets some needs that developers of mobile devices have.

Before the appearance of these javascript frameworks, developers had to program websites for each particular device. This caused a lot of work for the creation and maintenance of these mobile sites. However, jQuery Mobile abstracts the specific logic of each device, so programmers can focus on what really matters.

jQuery Mobile works. While this is a very new project, a few months of life, it is giving a lot of talk, consolidating itself increasingly as the framework for the creation of star websites for mobile phones and tablets.

jQuery Mobile Features

• Ease of Use: eases the development of user interfaces for mobile devices.
• HTML5 markup driven support: When using this framework, we will forget to type JavaScript code. By using HTML tags, the rendering time will be processed by jQuery Mobile.
• Multiple platforms supported: jQuery supports many devices and technologies, such as: IOS, Android, Blackberry, Palm WebOS, Symbian, Windows Mobile, etc..
• Small size: All compressed library weighs less than 12K.
• Custom Themes: The framework presents some utilities for managing themes. You can also create custom themes.

You can find more info and an example at http://www.codeforest.net/jquery-mobile-tutorial-basics

There's a great book and online course you can purchase at http://www.sitepoint.com/books/mobile1