PatientsLikeMe Tech Blog

CSS Tricks You Can Use Once You Ditch IE6

• 4 Comments
• Posted June 1st, 2010 by Adam Darowski
• Filed Under: design, markup and style
• Tags: css, html, internet explorer

Not long ago, I tweeted:

Underrated CSS selector: input[type=text] { style: here; } (targets only inputs with the type=”text”, leaving radio buttons & submits alone)

That generated a response that went something like “not if you need to support IE6!”. Personally, I think an unstyled form element is perfectly acceptable for IE6. But this also got me thinking… what types of CSS tricks can we freely use once we don’t have to worry about IE6 anymore? IE7 is no superstar, but it does have support for more advanced CSS selectors and image usage.

I enlisted the help of my fellow sheet-stylist, Cris Necochea, to build this list:

1. Transparent PNGs

   Right now, we have to export two versions of our sprite graphics—one for IE6 (a transparent gif with a white matte) and one for everybody else (a transparent png with all the alpha-channel sweetness you’ve come to love). This is annoying, tedious, and—with IE6 out of the way—no longer necessary (for some of us).

2. Attribute Selectors

   Oh, I love these. Attribute selectors inspired the tweet that kicked off this post. Here are some examples:

   input[type=input] {
     width: 100%;
   }
   
   abbr[title=and] {
     font-family: Baskerville, "Goudy Old Style", Garamond, Georgia, serif;
     font-style: italic;
     border-bottom: none;
   }
   
   a[rel=external] {
     font-weight: bold;
   }
   

   What do each of these do?

   • The first will target input text fields. This will leave submit buttons and radio buttons alone. Now you don’t have to do ugly things like <input type="text" class="text" />
   • The second was inspired by Jeremy Keith’s approach to styling ampersands (which was inspired by Dan Cederholm’s post about using the best available ampersand). Now you can have ampersands as pretty as all the cederhomies out there (myself included).
   • Lastly, we can use this example to style external links differently (as long as you use the rel attribute for each).

   Want more? CSS-Tricks has a great resource on all the possibilities with attribute selectors.

3. Child selector (>)

   You can use the child selector to select elements that are a direct child of another element. For example:

   div#header > ul {
     list-style: none;
   }
   

   That will target any ul that is a child of the div with the id “header”. This will not target any ul within div#header that is nested inside another element (such as another div). It has to be a direct child.

4. Adjacent sibling selector (+)

   Let’s start with an example. This one is a bit tricky to explain:

   h1 + p {
     margin-top: 0;
   }
   

   This will take any p that immediately follows an h1 and remove the top padding. As the name implies, it must be an adjacent sibling. Note that the styles target the second element (the p), not the first (the h1).

5. General sibling selector (~)

   This one is a lot like the adjacent sibling selector, but the siblings don’t need to be adjacent. So, take this:

   h1 ~ p {
     margin-top: 0;
   }
   

   What this will do is target any p that is the sibling of an h1. An example use case might be if you have a bunch of lists and each is separated by an h2. You could easily target either the lists or the headers without the need to add class names.

6. :first-child, :first-letter, and :first-line

   :first-letter and :first-line are pretty self-explanatory. :first-letter is ideal for things like drop caps. :first-line can help you get that treatment where the first line of a block of text is a bit bigger than the following lines.

   :first-child is a bit more complicated—and powerful. Here’s how it looks in action:

   ul li:first-child {
     font-weight: bold;
   }
   

   This would make the first item in a ul appear bold. A more widely-used use case might be:

   ul li {
     border-top: 1px solid red;
   }
   
   ul li:first-child {
     border-top: none;
   }
   

   This would put a red border above each list item, but remove the border for the first item. This way the borders are only used for separation. Handy. (Note that :last-child is still not supported in IE7.)

7. max-width, min-width, max-height, and min-height

   Because sometimes you just want to set a minimum. Now you can (without the need to jump through hoops of IE6 hackery).

8. Class chaining

   This would confuse the heck out of IE:

   div.alert.warning {
     color: red;
   }
   

   This would find any div with both the “alert” and “warning” class names and color the text red. While you can debate whether or not class chaining makes for manageable CSS, it is at least a viable option now.

9. Pixels for font sizing

   Everybody has their own favorite method of font sizing. Sizing with pixels has pretty much been frowned upon by the standards community for one major reason (among others)—IE6 wouldn’t let users resize type set in pixels. Without IE6, pixels now become an option along with keyword sizing and em sizing.

There’s nine. Got any more for me?