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


/*this is for all browsers*/
#main p {color:black;}
/* this is for Internet Explorer */
#main *p {color:red;}
/*this is ignored by IE7 and will target IE6 */
#main _p {color:green;}


This set of hacks allowed us to control IE7 and IE6. However, IE8 does not recognize the * hack. Special IE8 rules will either need to be defined with conditional comments, the Microsoft proposed meta tag, or some new hack to be discovered. Let’s hope the mature version of IE8 will reduce the need for these hacks.

For more information on the above hacks, visit an earlier post: IE7 Hacks

Download Internet Explorer 8

You can download Internet Explorer 8, Beta 1 from the Microsoft Developer site. However, here are a few things to keep in mind:

1. This installation takes some time, about 15 minutes, and will require a restart of your computer.
2. It will replace your existing Internet Explorer and is not available as a stand-alone browser.
3. It renders in standards-mode as a default. You’ll see a button to render in IE7 mode. This is helpful to see the changes between the versions.
4. Many sites will have significant layout issues in the standard view. You may need to re-evaluate your conditional comments to specify IE7 instead of greater than IE6
5. IE8 is ignoring the * hack! This means you can use the underscore hack for IE6, the * hack for IE6 and IE7 and … um… I don’t know yet for IE8.

Is IE8 better than IE7?

• Internet Explorer 8 passes the Acid2 Test.
• It understands CSS attribute selectors and generated content.
  IE8 handles my international test page fine.
• It understands :hover on non-links but is still buggy. Here’s a good test page with multiple CSS3 styles.
• It seems to have more integration with social platforms, maps, etc. Perhaps this is a nod towards Flock?

It’s still really early to find all of the bugs and benefits of the new browser. The team needs to be commended for the fast development and their willingness to listen to criticism and change the default behavior at such a late point. I look forward to the more mature releases.

Updates

• Leave it to Hedger Wang to find and document the first IE8 bug: See how IE8 breaks

I have decided to go way, way, way outside the box with my hack. I’m hacking the lexicon, the dictionary, the world of slang. I’m bypassing the world of code and trying to use the social network world to add a new word to our vocabulary.

Paxilled

Pronunciation: ‘paks-seld’

Function: adjective

1. Resembling the common side-effects of Paxil® medication: blurry, anxious, confused.

   Sample Uses

   The new Tarantino film left me paxilled

   The site launched with a crowded, paxilled navigation menu

   The lensbaby gives photos a paxilled effect

2. Medicated with Paxil.

   Sample Uses

   Susan is happier with her paxilled hubby.

Uses

• Flickr Images / Paxilled Group
• Technorati Del.icio.us Results
• Yahoo Search results
• Wikipediadeleted 3/27/2007 by some paxilled editors

This hack is about the web’s social network capability. Consider this an invitation to use the word and publish it.

Here’s what you can do:

• Visit www.paxilled.com for the full definition and links to progress results.
• If you use Flickr , add the tag “paxilled” to images that are… paxilled. These could be images that are blurry, confused, hectic, anxious… The image could be perfectly normal but represent a paxilled person, place or thing.
• Join the new Flickr photo group: paxilled
• Use paxilled in a blog post and add the tag “paxilled”. Use paxilled in other types of publications.
• Use paxilled in your daily conversation.
• Add paxilled to wikipedia, urban slang dictionary, or any other online resource center that you think may be appropriate.

If you have something online, share it with a comment on this post.

Internet Explorer 7beta2 is not treating transparent png background images correctly. It sees “background-position: 0 0″ as “background-position: 0 100%”. Come to think of it, I have only tried a vertical sprite, this may be the same for a horizontal sprite.

What’s the solution?

You could create a series of rules in your IE7 style sheet to measure your new sprites from the bottom up, instead of top down. But this doesn’t solve some of the other odd issues with IE7 and transparent png images. I’ve seen the images load upside down and I’ve seen the images move when you scroll the page and the image hits the bottom of the browser. I thought I was going crazy or that I had some sort of mutated version. But this pseudo-animation works on other computers.

Our IE6 style sheet replaces our pretty alpha transparent png graphics with a simpler index transparent gif version. We replaced our re-measured rules in the IE7 with this set and it has solved our problems. It would be great to take advantage of IE7′s ability to use alpha transparent png images, but this bug is just driving me nuts. I’ve also been in contact with the IE7 team. They are dedicated to building the best browser possible within their constraints and hopefully this will be figured out before the final launch of IE7.

One other note of advice. Creating alpha transparent png images via the save as command in Photoshop on a Mac gave us the worst results. Those images did some very funky things on the page. Fireworks created better images.

c’est fini!

I don’t know if it is official or not, but I can say that the Microsoft engineers are interested in what developers have to say and have worked on this bug. I believe it has been fixed and will be all good to go with the final release of IE7. I can’t confirm or deny this, but I am pleased with their response to my initial post and followup.This bug has officially been officially fixed as of Release Candidate 1 and you can use your transparent png sprites without a worry in the world!

We are using conditional comments to import either ie6.css or ie7.css to control our hacks.



So far, the ie6 style sheet is 342 lines long, including lots of whitespace and comments. A good portion of that is for re-assigning gif background images instead of png. The rest is an assortment of invoking hasLayout, box model changes, and the ever-popular z-index bugs.

I copied this style sheet, commented everything out and began re-introducing the rules to build the IE7 style sheet. I ditched the gif and z-index hacks. The most common hacks are for hasLayout and double-margin float. I’m still using a set of hacks to re-configure my background images that are being measured from the bottom up.

So, how big is the IE7 style sheet? Right now, we are looking at 146 lines of code, including white space and comments. That’s still a hefty amount and I’m not done fixing bugs. Yes, IE7 is much better than IE6, but still a far cry from the others.

However, while doing some troubleshooting, it looks like, please tell me I’m wrong, lE7 is measuring the sprite from the bottom up instead of the bottom down.

Here’s an example on Yahoo! Tech. You should see in the top product header 4 out of 5 blue stars for Pro Reviews and 5 out of 5 red stars for User Reviews. In IE7b, there are tiny nubbins from the tips of stars.

Here’s the background image (.png) for the pro stars and the normal CSS for 4/5 stars:

.bigprostars4 span {width:100px; height:20px; top:0; background:url(/images/bg-pro-ratings.png) no-repeat 0 -50px;}


I began looking at the numbers, thinking they were off by a few pixels. After doing some testing of the positions, I realized that it was not measuring 50px down from the top, as other browsers handle sprites, but starting at the bottom of the image and measuring 50px up! Hence, displaying the tips of the small stars.

To fix this I added this style to the IE7.css (currently not live!) file:
.bigprostars4 span {width:100px; height:20px; top:0; background-position: 0 -400px;}

This is not a small issue. If you use sprites as extensively as I do, this involves opening every image and re-calculating the distance from the bottom up and inserting these numbers in an IE7 only style sheet. Please, please tell me that I need to get another cup of coffee and I’m just dreaming this.

Update (05-02): Is this a position:absolute issue in IE7?

I’m still seeing this bizarre activity in the sprites of absolutely positioned elements. The sprites of links and other objects that are not positioned are working fine. sigh…

Update: IE7 passes sprite test (05-07)

I’ve created a test page to see if I could narrow down the issues with IE7 and sprites. I was surprised to find IE7 passed my initial tests. It must be a unique combination of styles causing my problem.

IE7 has had a couple surprising problems for me. I have a topnav section that completely disappeared. The container div only has position:relative and inside are a number of floated elements. This actuall works great in all browsers… but IE7! No hacks for IE6, but hack for IE7! I went with the old adage, I think from Andy Budd, when all else fails float, if it’s already floated, unfloat. I added float:left to the container div and the topnav re-appeared from the IE7 void.

Munged Background Images

I’m using a series of positioning, text-indent, and background images on the site. Here’s a simplified version:


.targetdl dd {position:relative;}
.targetdl dd span {text-indent:-1000em; width:66px; display:block; position:absolute; top:5px; right:20px;}
.happy0 span {background:url(/images/happy0.png) no-repeat 0 -650px;}


IE7 shows the background image ok on some pages and on other pages, it shrinks the background image. I tried adding zoom:1 and font-size:100% to no avail. I’ll try line-height next. This is an odd bug, but not the first time I noticed it on IE7 betas. It certainly seems to be buggy with positioning.

De-bugging Strategy

Since I’ve already got a fairly solid ie6.css file, I’m going to use that as the basis of my IE7 CSS construction. After fixing the topnav, the rest of the ie6.css file is going into the IE7 css and rules will be removed one at a time. This should help me figure out what is still needed.

I’ll keep notes on this site as I find it a convenient place to remember them. Has anyone else come across some positioning bugs in IE7? Sorry, no screen shots or details at this time, we’re still pre-alpha stage.

I have a topnav consisting of an unordered list with a dropdown menu on one of the list elements. The dropdown is a nested unordered list with position:absolute and a z-index to sit on top of any page content below. Fairly simple so far…

However, in IE6, the menu is obscured by an h5, random images, and paragraphs on various pages. The z-index should make this list float on top of other elements, but it seems to be ineffective.

PPK summarized this problem on his post: Explorer z-index bug:

It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box.

This is a serious violation of the CSS specifications, causing headaches and a lot of misunderstanding of what z-index really does.PPK

While crediting Aleksandar Vacić for first reporting this bug, PPK doesn’t mention Aleksandar’s simple solution. Give the parent a position:relative and z-index:1..

Now, of course it isn’t always that simple. There’s also the issue of subsequent objects that also have a z-index and what happens if their parent is also positioned with a z-index. Please take some time to visit Aleksandar’s web site if you are having this conflict.

IE7 and more fun

According to PPK’s web site, this has not been fixed in IE7 Beta2Preview. We’ll see how this works out. I’ve noticed some positioning bugs in IE7 myself. This is something to consider when considering the z-index happiness of Andy Clarke

More solutions

Hedger Wang has an ingenious solution to the conflict between z-index on elements and subsequent select elements. He uses an iframe with z-index-1 that sits under the targeted element. I’ve used this negative z-index on some of the subsequent elements and it is helping. Fixing all of the pages will be a long journey , but at least there is light at the end of the tunnel.

Yet another hack/update

I had to remove the negative z-index from the container as it was keeping a link with background image/text-indent, display:block, etc from having any hover activity. It acted as if it were under a layer. Other links in the container were fine. You’ve got to love IE6

Yet another hack/update 4-30-06

We were using an iframe with the src=”/”. Can you guess what happened? Oh my goodness. We were loading the home page inside every other page on IE. So here’s the tip we learned… don’t use a page url for your invisible iframe, use an spacer.gif or something benign instead. Better yet, get rid of the iframe if you find other solutions. Which is what we ended up doing. We’ve messed with this thing for so long we’ve lost track of what’s doing what.

Related articles by Zemanta

• Microsoft to issue emergency patch for Explorer security hole
• Dump Internet Explorer. You are Vulnerable.
• Tech Note: IE6 Needs an Exorcism