CSS3

The beauty about working on a site that is specifically targeted for one the most popular mobile devices around (aka the iPhone) is that the vendor with the least CSS support (*cough* IE *cough*) doesn’t exist on it (purely because of its inadequate CSS support in this case).

Depending on the browser matrix you have to work with and the platforms you’re coding for, utilizing Level 3 (and some Level 2.1 in IE’s case) selectors simply isn’t realistic, although properties on the other hand can be used to progressively enhance an elements appearance in this particular context.

But what if a site was created to serve one specific handheld device in which Safari (along with its sufficient CSS3 support) was the default browser? Well, this is what Facebook has done with it’s iPhone-specifc UI. By peaking into their stylesheet you’ll notice that they’re implementing a number of Level 3 selectors, properties and property value additions. They include the:-

• User-select property (Webkit prefix)
• Negation Pseudo-class Selector
• RGBA color values (in conjunction with ‘background-color’ and ‘text-shadow’ properties
• Text Overflow property
• Box-sizing property (including Mozilla and Webkit prefixes)
• Border-image property (Webkit prefix)
• Text-shadow property
• Border-radius property
• Multiple Backgrounds
• Opacity

For comedy value, try viewing the site in IE.

Having this sort of free reign on selectors and properties is an interface developers dream in this day and age, and hopefully in a couple of years we’ll be able to structure a stylesheet with some similarly advanced features.

Over at Design Shack they’re four posts into the five-post Introduction to CSS3, which covers Borders, Text Effects, the User Interface and (coming soon) Multiple Columns. A nice intro to the subject if our own examples are too complicated for you :p

The new owners of the Fonts and Web Fonts modules, Jason Cranford Teague and John Daggett, say that only about 20% of the Web Fonts module is required for CSS (it is currently part of the SVG charter), and propose simplifying it before merging with the Fonts module. They hope to have a working draft of the new spec in August.

As this is my first post, I’d like to introduce myself. My names James and I’m currently working as a senior User Interface Developer for Teachers TV. Like many of you guys, I’m fanatical about web standards and about creating the leanest, most semantic markup possible. I too am excited about the new possibilities with the arrival of CSS3, and am keen to contribute as much as I can to this great site. My first post is regarding a new method of creating Tooltips that I devised while coming up with a solution for a recent project.

Up until now, there were a few options in existence; ugly Javascript-based methods, or solutions that use blank anchor tags (for IE6 compatibility). Another possibility is to ignore IE6 altogether and make use of the hover pseudo class in conjunction with the parent element that contains the tooltip text. I had to think out the box a bit on this one, but have come up with a completely new CSS3-based solution.

My solution degrades gracefully in browsers that don’t support the CSS3 elements I’ve used and is a lot more elegant than former methods since it utilises an element’s title attribute, rather than creating additional markup within a parent element.

Let’s start with the HTML (Note: the following example is based on use of icon background images for the divs, hence the fixed dimensions):-

<div title="Tooltip text for first div"></div>

<div title="Tooltip text for second div"></div>

In short, my method is achieved by making use of the :before (or :after) pseudo element and content property, combined with the :hover pseudo class.

First off I grab the value of the divs title attribute by using the content property’s attribute function. Notice how I set the generated content to display:none -I’ll make it visible on :hover.

div:before{
	content:attr(title);
	display:none;
}

I now combine both the :hover class and :before pseudo element together, to specify values for the generated content when the div is hovered over.

div:hover::before{
	width:200px;
	display:block;
	background:yellow;
	border:1px solid black;
	padding:8px;
	margin:25px 0 0 10px;
}

One of the problems I came across at this stage, was that when having two elements floated left to each other and you hover over one of the elements, although the tooltip displays, it renders underneath the adjacent element. It is a simple case of layering the generated content over the div; my immediate thought was to specify a layering value in the above statement. However, after referring to the relevant W3C spec, it was apparent that in line with their recommendations, user agents ignore the position property in an instance such as the above statement, therefore rendering a z-index value useless.

The solution was to specify the z-index and position properties in a separate statement dealing exclusively with the :hover pseudo class.

div:hover{
	z-index:10;
	position:relative;
}

This meant that it now works! It of course works in every browser above IE7 including Safari 3, Firefox 2.0.0.12 & Opera 9.5b

Obviously there’s nothing you can do to stop the default behaviour of standards compliant browsers regarding rendering of title attributes, so when leaving your cursor on my method for too long, the default browser behaviour will overlay the generated content CSS effect

Live example of the final product

One of the selectors new to CSS3 is the :target pseudo-class, which can be used to apply rules to an element with a fragment identifier; that is, an anchor name or an id. For example, let’s assume you have a section heading with an id of ‘chapter_2′:

<h3 id="chapter_2">The Title of the Chapter</h3>

You could create a direct link to that element by using the fragment identifier at the end of the URL:

http://www.example.com/index.html#chapter_2

And, with the :target selector, apply a background to that element to indicate clearly where you have arrived:

h3:target { background-color: #ff0; }

Pretty useful, right? Not a killer feature, but useful nonetheless. It can be made even more useful, however, with a little bit of ingenuity; how about, for example, a pure CSS image gallery?

Take a look at this example (in a browser which supports :target; Mozilla, Webkit or Opera browsers will do the trick). Clicking the links allows you to browse through the different images, and it’s done with minimal markup and no scripting.

The first step is to create a list, with the image, name, and link in each list item; for example:

<li id="one">
	<p><a href="#one">One</a></p>
	<img src="images/one.jpg">
</li>

Each list item needs an id, which will provide the anchor, and the link href is to its own id; this allows :target to work its magic! All the images are absolutely positioned on top of each other, and using the selector simply changes the z-index value so the targeted image is on top:

img { position: absolute; }

li:target img { z-index: 100; }

Easy! Of course, this is only a very simple example; with even more ingenuity, this could be expanded to become a very useful tool.

Update: I’ve just seen that Daniel Glazman came up with a very similar proposition before I did: CSS-only tabs.

There’s a good article online at Vitamin, Stay On :Target, about the CSS3 :target pseudo selector, which provides a good explanation and some working examples. :target is supported by all current browsers, except – well, I don’t need to say it, do I? – so you can start using it straight away.