Five CSS design browser differences I can live with

Although this idea isn't new (and just for the record I know I didn't invent it), when I teach my design philosophy at workshops and conferences I'm often surprised to hear that the notion that people using different browsers (even up-to-date ones) might intentionally see differences in visual design sounds new.

The belief that all browsers should see the same design often requires us to resort to presentational markup, forked CSS and JavaScript DOM wizardry. It may come from:

• a deeply embedded feeling that the web shares print's need for pixel perfection
• the desire of brand stewards to control every aspect of a design
• a misunderstanding among clients and managers perhaps reinforced by
• an old fashioned workflow that has its roots in print design and pre-press

Thinking about alternatives

Please allow me to clear up a common misconception. When I talk about designs not looking exactly the same in all browsers I am not talking about making bad designs for people using older or abandoned software. I would never accept that. Or that a design should look poor or broken. Or that a person could be denied access to content or services if they are using a less capable browser. What I am talking about is creating a visual design that looks best to people who are using modern software and at the same time thinking carefully about what a person using less capable software will see. This approach is simply based around thinking about alternatives. It's little different to the way that I hope we have been taught to think about web accessibility.

You might be thinking that it's strange for me as a visual designer first, that I would promote an approach where some people see a lesser design that others. But I'm also a pragmatist and I know that in my business, I would rather ask my clients to spend their money wisely on things that will improve their business, than to waste it on hours of unnecessary development.

Not everyone will agree with this approach and of course if you do agree, how far you take it will depend on several factors and your own circumstances. I have my limits too. So here are five examples of CSS design differences that I can live with and do live with every day.

CSS pseudo elements

I love to play with typography and CSS pseudo-elements offer far greater control over type without requiring unnecessary, presentational markup. For this design, I want to style the first line of the first paragraph following a heading in the main content areas in small-caps, while at the same time increasing the font-caps and letter-spacing to draw a reader's attention to that area of content.

.content-main h2 + p:first-line { 
font-variant : small-caps; 
font-size : 1.5em; 
letter-spacing : 1px; 
}

Current browsers (left) Internet Explorer 6 (right)

People using Internet Explorer 6 will see a regular first line. I can live with that. Using the first-child, I also sometimes like to add visual emphasis to the first paragraph of text in a given area, for example the first paragraph in the secondary content area of the demonstration file should be bold.

.content-sub p:first-child { 
font-weight : bold; 
}

All major browsers have now implemented first-child and people using Internet Explorer 6 will see a normal paragraph. I can live with that. It's hardly a reason to avoid using first-child.

Adjacent selectors

In the same vein, in my designs I often like to visually emphasize and separate the first, often most important, paragraphs of text that follow a heading. It's a simple device, but I find it improves readability and scalability enormously. Using the + combinator in an adjacent selector, I style specific paragraphs without needing unnecessary class or id attributes. Of course people using Internet Explorer 6 will again see a normal paragraph, but guess what? I can live with that.

.content-main h2 + p { 
margin-bottom : 20px; 
padding-bottom : 20px; 
border-bottom : 1px solid #bfbfbf; 
}

Current browsers (left) Internet Explorer 6 (right)

Border-radius

Unless rounded corners are an integral part of a design and not simply a visual flourish, it makes sense to avoid unnecessary markup (directly in the document or inserted by DOM scripting) and to use border-radius instead. Opera and Internet Explorer will see square corners instead of round ones, but I can live with that.

#nav-sub { 
border-radius : 10px; 
-moz-border-radius : 10px; /* Mozilla */
-webkit-border-radius : 10px; /* Webkit */
}

Firefox & Webkit (left) Internet Explorer 7 & Opera (right)

Attribute selectors

If you love to add those tiny icons to links, perhaps an external link icon, a PDF icon or possibly an RSS icon for feeds, why add additional class attributes such a class="alternate" when you can just as easily use the more meaningful rel attribute?

a[rel="alternate"] { 
padding-left : 20px; 
background : url(a-rss.png) no-repeat 0 50%; 
}

People using browsers that did not implement CSS attribute selectors will simply not notice what they are missing, so they can live with that too.

Shadows

Drop shadows come in and out of vogue more often than Madonna. CSS offers an easy way to add a subtle shadow to text that can be particularly effective if you place white text over a darker background. I wish all browsers would implement text-shadow, but until they do I'll have to live with that.

#nav-main a { 
text-shadow : #000 1px 1px 1px; 
}

Opera & Webkit (left) Internet Explorer 7 (right)

I often also opt for utilizing the box-shadow property instead of making a compound of additional elements, attributes and images. Not every browser will see these browser generated shadows, but unless they are an integral part of a design, I can live with that too.

#nav-sub { box-shadow : 0 0 5px #888; 
-webkit-box-shadow : 0 0 5px #888; 
}

Webkit (left) Internet Explorer 7 (right)

Exactly what modern CSS was designed to do

I know that it is highly unlikely that every browser will ever support every CSS property. You should learn to live with that.

I would never accept a design that looks poor or broken or that a person would be denied access to content or services if they are using a less capable browser. But each of these CSS properties helps me to reduce unwanted markup and make my designs less reliant on presentational elements or attributes; exactly what modern CSS was designed to do.

I can and do live with these differences. Could you?

Andy Clarke. 24/09/08 | Tweet this | Short URL: http://forabeautifulweb.com/s/70.