Preparing for IE7 – Hacks and Conditional Comments

CSS filters and Hacks are so 2005

I think the future of CSS is not in hacks but looking seriously into using conditional comments. I’m saying this as someone that is trying to figure out the best approach for retrofitting older conversions.

Conditional comments are IE statements that say if IE6 or any other version, use this additional CSS file. Non IE Win browsers will ignore the comment.


Or is the version less than or equal to IE6


The Curveball

IE7 is going to throw a curveball worthy of a World Series ring. While it is easy and more convenient to throw a “ * HTML ” statement into a CSS, we need to start seriously looking at separating our hacks into different style sheets and intelligently using filters and conditional comments to refer to them.

Microsoft has announced that the IE7 browser will ignore past “ * HTML “ filters that were used to send styles only to Internet Explorer and will respond to child selectors: “ HTML>body “ which were used to hide styles from IE. Therefore, IE7 will see the style sheets just as every other modern browser.

Will this be an issue?

If IE7 fixes its display problems, we may not have to make any changes to our legacy CSS. However, if IE7 brings new bugs to the table, we can no longer use filters to whisper in its ear. Conditional comments will be the answer.

I’m dreading the idea of inserting conditional comments into the head sections of HTML pages. I’d like to insert it into the main.css file that imports more sophisticated styles. I have been overwhelmed lately and haven’t been able to test any answers to this. Does anyone have a suggestion?

Imagine teasing someone that their CSS is “So 2005!” Did I just coin a term? Has Joe Clark already coined this one?

Resources

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

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.

I’ve added more standardistas to the list:

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

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