You Can Use CSS3 Right Now

Advertisement

CSS3 makes a designer’s work easier because they’re able to spend less time hacking their CSS and HTML code to work in IE and more time crafting their design. It is the future of web design and can be used today.

This article will hopefully show you to care a little less about making everything pixel perfect in IE. It will inspire you to spend more time making your designs exquisite in the rest of the browsers while serving up a working and perfectly accessible website for IE.

From the examples below, you’ll see that CSS3 will make cross-browser support easier to accomplish and help you get websites out the door faster, assuming you’ve accepted that websites do not have to look exactly the same in each browser. The actual use of CSS3 comes down to one word (and I’m pretty sure it’s not even a real word): Modernizr1.

Box Shadows

View the demo2 | Final Code3

If you want a section to stand out above the rest of the page, you could put a drop shadow behind it. This will give it a 3D look and naturally attract your viewer’s eye.

Drop shadows using images can take some complicated and inflexible code4 to tame. The box-shadow CSS3 property enables you achieve the same effect in one line of code.

Speaking of code, here is the HTML for this example:

<div id="shift">
  <h4>Shift In Thinking</h4>
  <blockquote>
    <p>It's okay if a design looks slightly different in one browser than it does in another. Once the designer and decision makers accept this, and <strong>embrace</strong> it, it's then that the concept of progressive enrichment can be fully leveraged.</p>
  </blockquote>
  <p class="author"><a href="http://handcraftedcss.com"><strong>Handcrafted CSS</strong> by Dan Cederholm</a></p>
</div>

We want that div to have the box shadow. Let’s flex our CSS3 muscles:

div#shift {
  box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}
/* Information on the syntax at https://developer.mozilla.org/En/CSS/-moz-box-shadow */

Well that was easy. We’re done right?!

Not quite. In an ideal world, that would be all we need. No current browser supports that rule alone so we need to add a couple more:

div#shift {
  -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
  -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
  box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
}

Those extra rules target the only browsers that currently support box-shadow: Firefox 3.5 and Webkit browsers like Safari and Chrome.

So let me get this straight. You’re targeting only a small number of browsers. What about IE?

That’s where Modernizr5 steps in. Modernizr is a JavaScript file that, when loaded on your page, adds classes6 to the html tag in your code. It will add these classes based on what the viewer’s current browser supports and doesn’t support. For example, if the viewer’s browser can use box-shadow, it will add the class ‘boxshadow’ to your page. If it can’t, Modernizr will add the class ‘no-boxshadow’.

How do we make that work in our example?

Modernizr allows us to confidently declare a backup styling for older browsers that don’t support CSS3’s box-shadow. This plays perfectly into the hands of graceful degradation.

We’ll declare an alternate style for lesser browsers:

div#shift {
  border: 4px solid #bbb;
  border-left: 0;
  border-top: 0;
}

.boxshadow div#shift {
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
    border: 0; /* don't forget to get rid of the border too */
}

First, we tell the browser to put a light grey border on the right and bottom of the div. This will give the illusion of a drop shadow. We write this rule first because that is the worst case scenario. If the viewer’s browser doesn’t support box-shadow or doesn’t have JavaScript turned on, they’ll get the grey border. If it does support box-shadow, Modernizr will add the ‘boxshadow’ class to the html tag and the second set of styles will be used.

Look at the results:

Webkit

Webkit screenshot showing the box-shadow working

IE6

IE6 screenshot showing the box-shadow not working

Is the difference noticeable? Yes.

Do your visitors check your site out in different browsers to see how the designs compare? Not likely. The only one that does that is you.

Rounded Corners

View the demo7 | Final Code8

Rounded corners used to be tricky business. With the CSS3 border-radius9 property, your design’s need for smooth corners just got easier.

How much easier though?

Try one line of code easier (well almost…). Here’s the HTML:

<div id="cool-kids">
  <h4>CSS Is Cool Again!</h4>
  <blockquote>
    <p>CSS has never been more exciting than it is right now. I’m even prepared to say CSS is “cool” again, both for the more experienced front-end developers as for the new designers discovering CSS every day now.</p>
    <p>But&hellip;</p>
    <p>Remember when Javascript became popular? Remember when Flash became popular? Every time we’re been given new toys, some people aren’t ashamed to use it in a way you can barely call constructive. I’m thinking of Geocities websites, loaded with glowing blocks of text, moving images, bad color usage… In the wise words of Stan Lee: With great power there must also come great responsibility! A sprinkle of CSS animations is better than a bucket load. Apply with care.</p>
  </blockquote>
  <p class="author"><a href="http://24ways.org/2009/css-animations"><strong>CSS Animations</strong> by Tim Van Damme</a></p>
</div>

Now sprinkle on the CSS:

div#cool-kids {
  background-color: #D9DBE6;
  padding: 30px;
  border-radius: 20px;
}

Unfortunately, that doesn’t work quite yet. Only nightly builds of Webkit10 and Opera pre-alpha11 support border-radius out of the box. I’ve never seen a client actually use a Webkit nightly build and the only visitors that will use it probably are web designers. We’ll need to add a bit of extra CSS for the rest of us:

div#cool-kids {
  background-color: #D9DBE6;
  padding: 30px;
  -khtml-border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px; /* Sam Brown's bulletproof rounded corners http://sam.brown.tc/entry/412/bulletproof-rounded-corners-with-border-radius */
}

Those three extra rules target specific browser rendering engines. Until the CSS3 modules12 are finalized, we’ll have to use those extensions of the border-radius rule. Don’t worry because they all use the same syntax. It’s inconvenient at worst to duplicate code, but still better than the image-based alternative.

What about IE?

To be frank, nothing in your layout is going to break if IE displays straight corners. The chances of a viewer poking their eye out on one of your sharp corners is very slim, so stop worrying about it. If you really want IE support, be my guest13. You’ll need to use images, complicated CSS and extra markup.

RGBA

View the demo14 | Final Code15

RGBA is another way to declare a color in your CSS. The A stands for Alpha transparency. You can make the color partially transparent by adjusting that value, much like how the “opacity” slider works in Photoshop. If you want more information on what an RGBA color is, read through Working With RGBA Colour16. (Take notice of how that blog’s design uses RGBA colors too)

How can I use RGBA in my designs?

Let’s start with some HTML code, shockingly similar to our other examples:

<div id="ignorance">
  <h4>Ignorance is Bliss</h4>
  <blockquote>
    <p>That’s because in the real world, people using the Web don’t find a Web site that they like, then open up another browser to check that it looks they same. They simply buy what they came to buy, read what what they came to read, do what they came to do, then get on with their lives in blissful ignorance of what they might be seeing in another browser.</p>
  </blockquote>
  <p class="author"><a href="http://24ways.org/2009/ignorance-is-bliss"><strong>Ignorance is Bliss</strong> by Andy Clarke</a></p>
</div>

We want to make the div‘s background color semi-transparent so it shows though a little of what is behind it.

div#ignorance {
  background-color: rgba(76,157,11,0.55);
}

Essentially, the only web browsers that don’t support17 RGBA color are Opera and Internet Explorer (go figure). We’ll need to add a backup for them:

div#ignorance {
  background: #9BC772; /* A color sample of the RGBA color from the demo with a background pattern*/
  background: rgba(76,157,11,0.55);
}

What we’re saying to the browser is this: use the hex code, and if you understand what RGBA is, use that instead. IE and Opera will safely ignore the RGBA color and display the hex color. We have to use the background shorthand property because IE won’t properly pick up the background color if we just use background-color.

What’s the point in using RGBA if not everyone is going to be able to see it?

As it stands right now, IE and Opera won’t see any of the alpha transparency goodness that makes designs like 24ways18 stand out. What if we made the background a semi-transparent PNG instead of a flat color?

div#ignorance {
  background-color: #9BC772;
}
.rgba div#ignorance {
  background-color: rgba(76,157,11,0.55);
}
.no-rgba div#ignorance {
  background: url(images/green-55.png);
}

Here’s what’s happening above:

  • Every browser starts off with a flat background color. This is the worst case scenario and the design will still look alright with the hex color. This will work even with JavaScript turned off.
  • If Modernizr adds the ‘rgba19‘ class to our page, we’ll use the RGBA version of our color we want.
  • If our browser isn’t RGBA compatible, Modernizr will add the ‘no-rgba’ class. We can style the background using a beautifully simple alpha transparent PNG20 instead of a color so browsers like IE and Opera still get that little extra, or the design equivalent of jazz hands.

What Now?

Using a combination of Modernizr and CSS3 properties, we made the design look beautiful and still remain backwards compatible.

There’s no reason you can’t do the same with your client and personal projects. Design for the best browser available and make the design work for lesser browsers; not the other way around.

I don’t want to hear you say “I’ll use this when it works in IE” one more time. Thanks to Modernizr, that isn’t a valid excuse anymore. What other uses of Modernizr and CSS3 can you think of to make your life easier?

Footnotes

  1. 1 http://modernizr.com
  2. 2 http://kevinholesh.com/sandbox/css3-now/shadow
  3. 3 http://kevinholesh.com/sandbox/css3-now/shadow.txt
  4. 4 http://www.alistapart.com/articles/cssdropshadows
  5. 5 http://modernizr.com/
  6. 6 http://www.modernizr.com/docs/
  7. 7 http://kevinholesh.com/sandbox/css3-now/corners
  8. 8 http://kevinholesh.com/sandbox/css3-now/corners.txt
  9. 9 http://www.w3.org/TR/css3-background/#the-border-radius
  10. 10 http://webkit.org
  11. 11 http://labs.opera.com/news/2009/12/22/
  12. 12 http://www.css3.info/modules/
  13. 13 http://www.devwebpro.com/25-rounded-corners-techniques-with-css
  14. 14 http://kevinholesh.com/sandbox/css3-now/rgba
  15. 15 http://kevinholesh.com/sandbox/css3-now/rgba.txt
  16. 16 http://24ways.org/2009/working-with-rgba-colour
  17. 17 http://css-tricks.com/rgba-browser-support
  18. 18 http://24ways.org/
  19. 19 http://www.modernizr.com/docs/#rgba
  20. 20 http://kevinholesh.com/sandbox/css3-now/images/green-55.png

↑ Back to top Tweet itShare on Facebook

Advertisement
  1. 1

    Do you ever wish you could throttle the developers of IE? Lol.

    Great post.

    0
  2. 52

    I like the new css3 but have one problem my css won’t validate now.

    0
  3. 103

    This post doesn’t even scratch the surface of what’s possible with CSS3 and Modernizr. I tried to get you thinking about what you could do with some creative thinking. Take a look at the table of contents of what Modernizr supports. I only touched on three of those.

    0
  4. 154

    Thanks for that link Kevin. I didn’t even know Modernizr supported all of that. Definitely useful!

    0
  5. 205

    Hi Kevin, I understand what you mean. I’m sure that there are definitely some people and companies that can’t take full advantage of CSS3 due to their audience and industry, but definitely start learning it now though. :)

    0

↑ Back to top