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

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

Creating a table that scrolls with a fixed header and footer

I had a challenge today to create a table with a fixed header and foot. My first reaction was… oh no…. I pictured all sorts of hacks to make it work. I tried position: fixed, I tried extra divs, I tried this, I tried that, I even prayed to the Venus of Willendorf statue on my desk for a solution. When all else failed, I turned to the best resource for standards-based programming, my mother. Above the din of the Jerry Springer show on television, she yelled “What the hell do I know about tables?”

With Mom and my Venus drawing blanks, it was time to hit the message boards, the Standardista search, and Yahoo! Fortunately, Scott Swabey found this really cool approach: Fixed, Non-Scrolling Table Header and Footer by Brett Merkey.

Thinking Outside the Box

It’s pretty simple. Place the table in a div with overflow:auto. Then use absolute positioning to move the thead and tfoot outside the div. Voila, scrolling body with the thead and tfoot static.

Now, I can sleep happily knowing that the table can scroll, the venus has made me pregnant, and my mom was able to finish watching “I slept with my brother’s teacher’s husband!”

— This was originally published on www.tdrake.net

@media 2006

@media2006 logoThe blogs are buzzing with news of the @media2006 conference in London. I was one of the lucky attendants last year and I can tell you it was worth every penny. The discussions were great, the people were great, the food was… well it was England after all!

Seriously, don’t hesitate to attend this conference. Yes, I’m talking to my fellow North American programmers. Cross the pond and get on with the show.

Big thanks to the @media crew for acknowledging the attendees of last year’s event by giving us a few bucks off the reasonable ticket cost.

— This was originally published on www.tdrake.net

Microsoft IE7 updates the select box

Microsoft has just announced IE7 will handle the select input as a modern browser should. It will now allow developers to use z-index to avoid overlapping and perhaps more artistic forms. Søren Madsen put together the utopia of form design, something every designer should look at and dream of possibilities.

SELECT element in IE7 – An Overview

In IE6, the HTML SELECT element was implemented through the Windows Shell ListBox and Combobox controls. Some key features were missing in the old version of the SELECT element, such as proper support for z-index, TITLE support, and zoom. Web developers had to write complex CSS and scripts to workaround these issues.

In IE7 however, we re-implemented the SELECT element to make IE7 more standards-compliant. This new version does not use any Shell controls any more. In fact, it is implemented totally through the MSHTML framework, including styling, UI interaction, and rendering. Thus the SELECT element in IE7 is more of an HTML element than the former legacy control.

IEBlog

Form design is frustrating.

Form elements are up to the browser for final presentation unless you get into some tricky CSS and JS solutions and those are not necessarily cross-browser solutions. One particular problem I’ve experienced was with the nicetitles javascript that creates a nice popup box with the text of a title attribute on hover. I tried to use this on an insurance quote form to give the visitor better feedback on what was needed. IE6 would place the inputs on top of the popup window. I then tried moving the popup farther to the side to avoid this and that just looked hokey. So, I gave up on the idea. It would be interesting to test this now with IE7.

I’m also intrigued by the ability to use the title attribute on the select object. Normally, I would place the title on the label. However there may be times when the visual design requires hiding the label. Placing a title on the select would be a great way of letting people know the page may refresh or whatever action the select box leads to.

With rumors floating of an IE7 Beta2 developer release within a few weeks, we should begin looking for pages to test these new attributes on.

–This was originally published on www.tdrake.net