I especially like the way they test your browser for its ability to handle the various components you are reading about. Take an hour or so to go through this tutorial. It’s the best read you’ll have for the week.

Another good tutorial is The Best HTML5 Slides Ever, but you’ll need to view it in Safari. It doesn’t work well in the standard Firefox and forget about IE.

Related articles by Zemanta

• Link Relations in HTML5 (zeldman.com)
• A Primer on HTML 5 – By Nick Armstrong (slideshare.net)
• HTML5 Helpful Links (last-child.com)
• The Best HTML5 Slides Ever (ajaxian.com)

The speakers were

• Ben Galbraith, Co-founder at Ajaxian.com
• Brad Neuberg, Developer at Google
• Chet Haase, Adobe Flex SDK team member
• Michael Carter, Founder at Orbited Project & Official Contributor for W3C HTML5

First off, HTML5 was defined as not just an HTML4+ spec. It also includes all of the advances since HTML4.0. These include:

• CSS3
• webGL
• geolocation
• web workers
• web storage
• web sockets
• canvas, SVG

Canvas vs. SVG

You can roughly think of these as Adobe Flash replacements.

Both canvas and SVG can be used to build dynamic images, charts, animation, and more. Canvas has more adoption at this point and is faster. However, the canvas is built and then keeps no memory of the objects it contains. SVG is more structured and knows what it contains. These sub objects can be further manipulated. SVG has the potential of being much more powerful than canvas in the long run. Microsoft‘s IE9 has demonstrated great potential with SVG.

CSS3 Advancements

There’s been an extended argument about where CSS or JS should be used on a web site. Some developers argue CSS shouldn’t be used for interactivity, such as drop down menus. However, the CSS transformations available in CSS3 are going to throw a major monkey wrench into this argument. They are blurring the boundaries and can do a much better job than javaScript.

Apple and Safari have pushed the development of transformations as they introduced the animation of pages when you switch an iPhone from portrait to landscape mode. This is just the tip of the iceberg. An example last night showed a CSS only version of itunes’ coverflow animation. Check out the CSS3 3D transformations.

Web Workers

Web workers technology should solve an existing problem with javaScript functions that run for extended periods. One example was a JS transformation of an image. It rotated the image and added reflections. However, the image would stop rotating when a user clicked on a button to add/change the functionality. Web Workers allows these functions to operate consistently.

There was another example with a movie of a guy holding a piece of cardboard and rotating it randomly. The user could click on various movies and watch them appear on the cardboard in the movie.

You can participate

One thing mentioned often in the meeting was the open structure for developing the specifications. Anyone can participate by joining the mailing lists, irc (irc.freenode whatwg), and making requests, suggestions, and comments.

They are especially interested in knowing what problems you have that are not solved by the existing specs. What changes would particularly affect you and how would you solve the problem.

For instance, I asked if the phone manufacturers are looking at the HTML5 web forms and using the new input types to intelligently autofill forms. For instance, they know an input is asking for a phone number, should a phone insert your number automatically? What about your other contact information?

Currently, this interaction is not in the spec. This is the kind of comment/suggestion they need to make the final specifications.

Related articles by Zemanta

• Opinion: HTML5 is less than it’s cracked up to be (infoworld.com)
• Microsoft gets behind SVG — finally (asserttrue.blogspot.com)
• SVG in IE9 Roadmap (blogs.msdn.com)
• Google and Adobe cozy up on Flash for Chrome browser (infoworld.com)
• Microsoft embraces HTML5 specification in IE9 (infoworld.com)
• HTML5: Tool of Satan, or Yule of Santa? (24ways.org)
• Going beyond Flash, Adobe shows off Web tech (news.cnet.com)

There’s a little attribute in HTML links that is starting to get a bit of attention lately. The “rel” attribute is a sparsely defined attribute that applies some meta information about a link’s relationship to other documents. Unfortunately, this information is usually hidden from your users. Let’s take a light-hearted stab at turning it into a visual element.

Rel attribute usage

While the W3C originally considered the rel attribute to describe the relationship of pages to each other, i.e. next, previous, directory, and start. The attribute has been adopted by the Microformat community for its inherit usefulness. The rel attribute is now used for tags, to define your relationship to someone, and even to tell search engines not to bother following a link.

The opportunities to use the rel attribute are seemingly endless. There are more proposals to define people you don’t like and links for voting.

But all of this flexibility comes at a small price. To remain valid, you need to tell the browser what these new rel values may actually mean. This is handled by linking to appropriate profiles. Just simply insert the profiles into your head tag. Multiple profiles may throw a validation error, but it’s ok. You don’t need to do this for the standard rel values.

We will be using the CSS3 attribute selector functionality to look at the value of the rel attribute and apply some style accordingly. First we’ll add some padding and a background image to any link that has a rel attribute. We’ll then use background positioning to display an icon that is appropriate for the link. It’s a fairly simple hack.

For more information on using attribute selectors, check out my previous posts:

• Progressive enhancement of links using the CSS attribute selector
• Attribute selectors to provide language information

Sample HTML Code

Sample CSS


a[rel] {padding-left:20px; background:url(rel-sprite.png) no-repeat 0 0; }
a[rel~="help"] {background-position: 0 -350px ;}
a[rel~="license"] {background-position: 0 -1347px ;}
a[rel~="no-follow"] {background-position: 0 -1200px ;}
a[rel~="tag"] {background-position: 0 -47px ;}


It’s all fun and games

I’ll be the first to admit this exercise has significant issues. I’m assuming the following elements are true:

1. All possible rel attribute values are accounted for in my CSS, if not there will be a blank space generated by the first rule
2. You can only have one relationship defined by XFN. Unfortunately, most people are defined by multiple values, i.e. rel=”met friend colleague”. This CSS does not account for multiple values.

So, the display of your rel attributes may be a bit off in the edge cases. Keep the spirit light and nobody will say anything… I hope. Have fun with your rel attributes. They’re just sitting there waiting to be used.

View the finished rel attribute style example.

Related Information

• Microformats Wiki: Profile URI’s
• Microformat: Rel Design Pattern
• Microformat: Tags
• Microformat: No Follow
• Microformat: Bookmark
• Microformat: XFN – Friends Network
• Microformat: XEN – Enemies Network
• W3C: Link Types
• Icon Buffet – The source of most icons used in this example

We have avoided using CSS3 rules for too long. It’s been difficult to justify using rules that won’t work for a significant portion of our audience, Internet Explorer 7 and below. However, Internet Explorer 8 is coming out soon and does work with the features we like.

I think it’s fairly safe to assume IE7 users will upgrade to IE8 within a short time. Those stuck with IE6 for one reason or another will slowly disappear as they are given new computers or their locked down environments are upgraded.

So, with the future of CSS3 functionality within reach, I’ve been energized to begin experimenting again. I’ll be writing a series of blog posts over the next few months that look at CSS3 functionality as a progressive enhancement. How can we continue to deliver a perfectly fine web site to IE6 and IE7 and mobile phones while enhancing the functionality of more modern browsers and devices?

Attribute Selectors

CSS attribute selectors are the golden ring on the web development merry-go-round. They can be daunting to learn, addictive to use, but then disappointing when you realize they are out of your grasp when you test in Internet Explorer. We can, however, begin using them to add additional functionality based on your pre-existing, semantic code. Attribute selectors give you power to write CSS that pinpoints the stuff you already code, without having to go back and add classes or ids. I’ve written previously about using attribute selectors to let your users know the language of a site they are about to visit. This trick relies on the rarely used hreflang attribute, which identifies the language of the site targeted in a link.

There are many other attributes in your HTML, from table headers, image src, link titles, and selected options. Think about all of those juicy attributes just waiting to be targeted. Also think about how you could actually do something useful with them.

Announce the file type of a link with CSS

I once worked for a company that had hundreds of thousands of static HTML pages in their intranet. With no content management system; it was impossible to make global changes. The only thing they shared was a common set of style sheets. Does this sound familiar? Follow along as we increase your site’s usability in a less than perfect, but efficient way.

First off, for accessibility, you need to let users know when a link will open a file, what type it is, and how large it is. This is best done by adding it to your HTML code:


Foo presentation (.pdf, 5kb)


That delivers the information to everyone, regardless of their browser. This, however takes time and is a daunting task for updating legacy code.

We can, however, use the atttribute selector to target the extension of the link to display the icon and insert the text describing the file type. Here’s the sample HTML code:

It’s a simple list of links for different types of files. We’ll be looking at the extensions: .zip, .pdf, .doc, .exe, .png, and .mp3. Feel free to extend this list to any extension you so desire. This would be especially helpful for a company that uses proprietary file types within their intranet.

Now, let’s look at the CSS:


a[href$="zip"],
a[href$="pdf"],
a[href$="doc"],
a[href$="exe"],
a[href$="png"],
a[href$="mp3"] {padding-left:20px; background:url(bg-file-icons.png) no-repeat 0 0;}
a[href$="png"]{background-position: 0 -48px;}
a[href$="pdf"] {background-position: 0 -99px;}
a[href$="mp3"]{background-position: 0 -145px;}
a[href$="doc"]{background-position: 0 -199px;}
a[href$="exe"]{background-position: 0 -250px;}

a[href$=".zip"]:after{content: "(.zip file)"; color:#999; margin-left:5px;}
a[href$=".pdf"]:after{content: "(.pdf file)"; color:#999; margin-left:5px;}
a[href$=".doc"]:after{content: "(.doc file)"; color:#999; margin-left:5px;}
a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}
a[href$=".mp3"]:after{content: "(.mp3 file)"; color:#999; margin-left:5px;}
a[href$=".png"]:after{content: "(.png file)"; color:#999; margin-left:5px;}
a[href$=".exe"]:after{content: "(.exe file)"; color:#999; margin-left:5px;}


See the final test page.

Pattern matching in the attribute selector

We have some limited “regular expression” functionality in CSS3. We can search for an attribute’s presence and match a pattern within the attribute’s value.
Patrick Hunlon has a good summary of the pattern matching:

• [foo] — Has an attribute named “foo”
• [foo="bar"] — Has an attribute named “foo” with a value of “bar” (“bar”)
• [foo~="bar"] — Value has the word “bar” in it somewhere (“blue bar stools”)
• [foo^="bar"] — Value begins with “bar” (“barstool”)
• [foo$="bar"] — Value ends with “bar” (“I was at the bar”)
• [foo*="bar"] — Value has bar somewhere (“I was looking for barstools”)

Attach icons to anything with CSS

The CSS is simply looking to see if the desired extension is at the end of the link href. If so, apply the following styles.

Adding an icon to the link

First, we are match any of the desired file extensions. We then add a background image and some padding on the left side with a bulk rule. Then the background position on the sprite is adjust for each particular link type. Combining multiple icons into one background image reduces the number of files the user has to download, making your page faster. This will work with any browser that recognizes attribute selectors, including Internet Explorer 7. However, support for more obscure attributes may be spotty.

There’s another peculiarity with pattern matching. Some attributes are case sensitive while others are not. The href attribute is NOT case sensitive, so the above rules will also work if your image name was FOO.ZIP, foo.Zip, or foo.zip.

Adding the descriptive text

Now, we are going to add a bit of descriptive text to each link. We can’t describe the file size, but we can tell the user what type of file it is. This is using the :after(content:) functionality and is supported by Internet Explorer 8 (yeah!!!) but not Internet Explorer 7 and below (boo!!!).
We will also adjust the color and give it a bit of spacing.

A big step forward with a small chunk of work

There you have it. A small chunk of CSS coding has now added substantial usability to your legacy pages. While the CSS version is not as accessible as having the data in the actual link code, it’s a significant improvement over nothing at all. Further, there’s no harmful effect on browsers that do not understand the function. You’ve added information, but haven’t taken anything away. This is a win in my book. To save some time and effort, you could just download and use this package of CSS and icons from Alexander Kaiser.

This rather simple example of attribute selectors and pattern matching can open your eyes to many possibilities. There are a number of developers that have been expoloring this potential for the past few years. Take a look at some of these resources for more ideas and have some fun.

• CSS3 – Atribute Selectors Definition W3C
• CSS 3 Selectors Explained
• CSS: A Tribute to Selectors
• YUI: Selector Utility Use CSS3 selectors in JavaScript
• Dynamic File Type Notations
• Cool use for CSS attribute selectors – Hiding banner ads with CSS
• Showing Hyperlink Cues with CSS
• Showing Hyperlink Cues with CSS

XHTML2 introduces a new list item, the NL or Navigation List. Think of this as a cross between a DL and a UL. It is built similar to the UL but has a label tag.

You’ll also notice the image tag has been replaced with the more agnostic object tag.

Will you actually begin using XHTML2? Unfortunately, it’s not backwards compatible and browsers need a lot of evolving before they are ready for the new code. HTML5 is more likely the next evolution of HTML.

After working with XML for the past couple years, I would enjoy the structure of XHTML2. However, I also hate to think of the logistics of converting existing CMS sites and legacy sites to the new code. Not to mention the branching of CSS and/or JS for the new DOM elements.

I was waiting for the WCAG2 smack down at this week’s @media conference in London. The stage was set for some serious smack talk and WWF style-insults. Heck, Joe Clark was even mentioned at least a half dozen times.

But a surprising thing happened on stage. The presenters, Gez Lemon, Patrick Lauke, Andy Clarke, and Ian Lloyd didn’t explode in indignation. Rather, it was the opposite. The panel pulled out their hoses and began putting out the WCAG2 fires.  The new guidelines are not perfect and nobody was close to agreeing to them. They are overly complicated and confusing. This was agreed upon.

However, they also seemed to agree that the guidelines were not going to bring the four horsemen of the apocalypse to the web developing community either. The guidelines are deliberately vague and technology-agnostic to allow for future growth.  Gez Lemon pointed out a new part of the WCAG web site that allows you to print a condensed set of guidelines for your specific technology, i.e. XHTML, SMIL, CSS, etc.

On the other hand, the number of people in the room that had actually read the guidelines could be counted on two hands. Further, the number of people that had read not only the guidelines, but also the supporting documents could be counted on one hand doing a variety of gestures.

@Media and the state of web design

It was a bit of a surprise to see the less discussion web design  at this year’s conference. The panels also discussed accessibility, web 2.0,  microformats, DOM scripting, hand-held devices, CSS history, and internationalization. Dan Cederholm discussed his bulletproof web designs, Nate Koechly discussed contrasting design considerations for two Yahoo sites, and Andy Clarke discussed alternate inspirations for web design. There was also a great panel with Veerle Pieters, John Hicks, and Cameron Moll about good vs. great design.

At last year’s event, Joe Clark creating some buzz and inspiration with his impassioned plea for single-column zoom layouts. You could feel the energy as people began mentally designing their zoom layouts.

This year Clarke, as in Andy Clarke, set the stage for a renaissance in design.  Why concentrate on grids when the result is the same old layout with a bit more perfection? Instead, he suggested we take that grid and start playing hops scotch with it. Make a practice grid and begin placing different shaped boxes until something comes together that is exciting and new.

He further showed how you could get layout inspiration from newspapers, photographs, and fliers. A Japanese newspaper’s layout looked the most foreign to my eyes, as well as many others. Vertical and horizontal sections seemed scattered around the page. Clarke super-imposed the grid onto the page and introduced us to a new method of laying out a page.

Header, left column, right column, footer… yawn.  It’s easy, comfortable, and static. Clarke suggests breaking free of these standards and moving your content around the grid. Leave some open spage, add vertical bars and maybe even a framing device.

He further challenged us to abandon the concept of graceful degredation and move on to transcendental CSS design.  Echoing the points of Nate Koechly’s essay on Yahoo’s Graded Browser Support Grid, Clarke suggested we begin coding for the best browsers. We need to use CSS2 and possibly CSS3 elements. IE5 may not look as good as Safari, but his gloss-black pinto with wrong-way flames isn’t going to impress the ladies as much as his Audi S4 convertible either. Do we continue to downgrade the experience for everyone?  Or do we begin looking forward and push past today’s limits?  The introduction of IE7 this year will hopefully solve much of the existing troubles and allow us to make this move guilt-free.

@media and Internet Explorer

Eric Meyer began the conference with a keynote about the history of CSS, HTML, web design, and browsers. He set the stage for Internet Explorer discussions that would span several presentations. Further, he placed faces to the browsers, introducing many people to Tantek Çelik who has been credited with the IE5 Mac goodness and Chris Wilson, who has been credited with the IE Windows goodness and badness.

It’s easy to look at the problems we have with IE6, an outdated browser, and accuse the Internet Explorer team of being a bunch of hacks who couldn’t code their way out of a garbage sack.  Meyer reminded the older developers and taught the newer developers the history of the browser wars and how technically advanced IE6 was for its time.  In its day, it was a great platform for accessibility and contemporary table-based web design.

Fortunately, we have moved beyond the table-based days and other browsers have replaced Internet Explorer as the technology leader.  Microsoft is playing catch up and Chris Wilson came forward to pimp IE7. I also think many of the developers in the room will have a harder time kvetching about IE6, the broken browser from the behemoth beast of Redmond, after seeing an actual person on stage saying how proud he was to have worked on it. This geeky looking guy with a history of bad haircuts was also upset about the deadtime between IE6 and IE7 and promised to do his best to continue building better Internet Explorers in the future.

Wilson covered some of the required marketing points that most developers didn’t really care about. Security, blah, parental controls, blah, new controls, blah… better RSS support, blah…  I actually think IE7 does a great job with RSS, but Wilson didn’t discuss this very much.

He did grab our attention with a new feature, OpenSearch.  Developers can add a small metatag in the document head that will allow the user to add their site to the browser’s built in search bar. You can allow the user to search your site from a consistent location within the browser.  I couldn’t tell if your site remained in the list of sites to search from permanently or only while it was being viewed.  I’m going to look into the specs and try this as soon as possible.

Wilson also went over the list of bugs that have been fixed and took questions from people about future plans, backwards compatibility, and more.  He didn’t come across as the super-friendly, super-smart, super-man like Tantek, the ex-Internet Explorer leader. But he did put a human face to what many people considered their enemy and this is a good thing for the future of web design.

There are books you read that change your way of thinking (Designing with Web Standards), books your read for ideas (Usability: The Site Speaks for Itself), and books you keep within arm’s reach at all times. This book, HTML and XHTML: The Definitive Guide, is one that you should always keep on your desk.

I’m saying this from experience. I’m a self-taught web programmer and have read over well over a dozen programming books during the past few years. This is the book that traveled with me from job to job. It’s where I go to check on the proper use of tags and attributes. It’s a well laid-out reference book that is actually interesting to read.

Who should get this book

This book is for those working directly with HTML code. It does not discuss programming languages, JavaScript, or CSS to any extent. However, it clearly defines how to use valid markup to build sites. I have found it invaluable for building forms and complex data tables. It’s also a great foundation for those learning semantic markup from the beginning.

I remembered the vertical-align:middle style while working on a footer paragraph that included inline links and RSS buttons. I tried it with the submit button and it also worked perfectly. I’ve tested this in FF 1.5 and IE6. I have not tested it in Safari yet.

Code Examples

CSS:

form#foo button {vertical-align:middle; border:none; padding:0; background:none; cursor:pointer; *cursor:hand; /*alternate cursor for IE*/}


HTML

...





Resources

• W3.Org test (.pdf)
• W3.Org example
• Eric Meyer’s CSS2 test
• Standardista search for vertical-align

]]> http://www.last-child.com/using-vertical-align-for-images-and-buttons/feed/ 5 http://www.last-child.com/standards-based-web-development-resources-made-even-easier/ http://www.last-child.com/standards-based-web-development-resources-made-even-easier/#comments Sun, 26 Feb 2006 02:16:16 +0000 Ted http://www.last-child.com/standards-based-web-development-resources-made-even-easier/ Chris Pederick of the all mighty Web Developer Toolbar mentioned a great service today on his blog. Rollyo allows you to create your own personal search page that is super easy to build.

I’ve jumped at the chance to build a firefox toolbar to search the best standards-based resources available (and my site to boot.) I simply created a Rollyo page and then created the Firefox search plugin to use it.

I don’t have time to create the super-easy javascript link right now, but here’s how you can install it in two minutes.

1. Download these two files: standardistas.src, standardistas.gif
2. Place them in your program files/mozilla firefox/searchplugins directory
3. Restart Firefox.

Or…

Visit the new Rollyo – Standardista page and click on the Add to Firefox link on the right sidebar. This approach will give you a generic Rollyo icon in the search box.

Summary

In one simple search you can get the relevant information from all of these sites without having to swim through thousands of extraneous results.

• alistapart.com
• w3.org
• simplebits.com
• meyerweb.com
• stuffandnonsense.co.uk
• shauninman.c…
• splintered.co.uk
• stopdesign.com
• andybudd.com
• jasonsantamaria.com
• accessify.com
• clagnut.com
• 456bereastreet.com
• quirksmode.org
• tantek.com
• positioniseverything.net
• tdrake.net
• zeldman.com

I’ve added more standardistas to the list:

• sitepoint.co…
• tanfa.co.uk
• stylegala.co…
• kottke.org
• wpdfd.com

The Future

I begin working with Yahoo! in a week. I had planned on building a page using their search API in the near future. Go ahead and download this Firefox toolbar plugin. I will be adding this to the mozdev archive and when I make the new Yahoo! version, your toolbar will actually update itself. As Christopher Lowell would say: “How cool is that?!”

–This post was originally published on www.tdrake.net

]]> http://www.last-child.com/standards-based-web-development-resources-made-even-easier/feed/ 1 http://www.last-child.com/attribute-selectors-to-provide-language-information/ http://www.last-child.com/attribute-selectors-to-provide-language-information/#comments Sun, 26 Feb 2006 01:33:27 +0000 Ted http://www.last-child.com/attribute-selectors-to-provide-language-information/ Attribute Selectors for International Web Sites

Sébastien Guillon, recently wrote a post about using the CSS2 attribute selector and content rule
to let visitors know what to expect when clicking on a link to an international web site. Inspired by his approach, I’ve simplified some of the code and added background images to
represent the countries.

Guillon’s original project focused on adding a text description after the link in the site’s native language. To do this, he used a set of descending selectors to look at the page’s language declaration and the link’s hreflang attribute. I am assuming the site that hosts this CSS is in english. However, it would not be difficult for you to simply change the generated content if your site is written in French, Spanish,
Swahili, etc.

Sample list of international Yahoo sites

Europe

• Catalan
• Denmark
• France
• Germany
• Greece
• Italy
• Norway
• Spain
• Sweden
• UK
• Ireland

Now look at the final version with new CSS. Internet Explorer users will not see a difference, try Firefox or Opera. Internet Explorer 7 beta 2 shows the flags but does not show the generated content.

The hreflang Attribute

The hreflang allows the user/browser to define the language of a link’s targeted page to avoid presenting
unreadable information:

The hreflang attribute provides user agents with information about the language of a resource at the end of a link, just as the lang attribute provides information about the language of an element’s content or attribute values.

W3C.org

The hreflang attribute defines the language of the web site you are sending someone to. The language is defined with a two letter abbreviation, such as en, fr, sp… You can also define the locality of this language by adding the country code to this language. This is particularly helpful for languages that have dialects. A Mexican site would have this attribute: hreflang=”sp-mx”.

The Attribute Selector

CSS2 allows us to look for tags that contain specific attributes. We can look for blockquotes with cite attributes, tables with summaries, table cells with header attributes,
and our little friend, the link with an hreflang attribute.


/*English */
a[hreflang="en"]:after, a[hreflang|="en"]:after {content:"\A0(In English)";}


Breaking it down

This rule uses a combination of attribute selector and pseudo-class to transform the link from common to fabulous.

a[…]

Look for a link with an attribute

hreflang=”en”

The hreflang attribute must include the letters “en”. This allows the CSS to work on links that do not define a country variation

:after

This pseudoselector defines the space after the link

{content:”\A0(In English)”;}

After the link, place the following text: (In English)

hreflang|=”en”

The hreflang attribute must include the letters “en” within a hyphenated set, i.e. en-us, en-ca, …

Adding the flag

Now that we’ve notified the user about what language the link will be in, let’s tell them the country the site is from. Once again, we will look at the hreflang attribute for this information. This rule is not as neat and tidy. For each country, we are going to look for all of the possible language attributes. For instance, Canadian links could have hreflang=”fr-ca” and hreflang=”en-ca”.


/*Canada */
a[hreflang="en-ca"], a[hreflang="fr-ca"] {background:URL(flag-sprite.png) no-repeat 0 0; padding-left:35px;}


This time, we will give links that have Canadian country codes 35px padding to the left side and a background image of the Canadian flag that sits to the
left edge of the link’s text. This style sheet is using an image sprite to keep the server requests to a minimum. See the Alistapart.com article about using
image sprites for more information on this technique.

Et Voilà

There we have it. A set of international links with the country of origin and language clearly defined. All of this has been made possible by our friends, the
attribute selector, the pseudo-class, and the content style. Tune in next week as we learn how to make a cruise ship out of two
shoe-boxes and an XML schema.

Fine Print

This has not been tested in Safari, but it shouldn’t be a problem. The pretty and useful presentation elements will not appear in IE6, NN4, and probably
most alternative devices (My Treo shows the flags but not the added content). I do not know how assistive devices would render these styles, more than likely they would be ignored. This project falls under
the “build for the best, don’t hurt the rest™” protocol.

Resources

• W3C Selectors
• Exploiter les langues avec les pseudo-classes CSS
• A tribute to selectors – Andy Clarke
• Attribute Selectors Part II – Eric Meyers
• hreflang resources – Standardistas

]]> http://www.last-child.com/attribute-selectors-to-provide-language-information/feed/ 1