Menu Search
Jump to the content X
X

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): Modernizr.

Box Shadows Link

View the demo | Final Code

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 code 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 Modernizr steps in. Modernizr is a JavaScript file that, when loaded on your page, adds classes 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: Link

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 Link

View the demo | Final Code

Rounded corners used to be tricky business. With the CSS3 border-radius 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 Webkit and Opera pre-alpha 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 modules 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 guest. You’ll need to use images, complicated CSS and extra markup.

RGBA Link

View the demo | Final Code

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 Colour. (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 support 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 24ways 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 ‘rgba‘ 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 PNG instead of a color so browsers like IE and Opera still get that little extra, or the design equivalent of jazz hands.

What Now? Link

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?

Smashing Book #5

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement
  1. 1

    Wonderful Post.
    Though all the browsers doesn’t support CSS3, It is the right time to explore CSS3.
    It’ll become standard soon..
    Very useful.
    Thanks
    :)

    0
    • 2

      Yes, I definitely agree with that. The earlier we start using it, the more we’ll perfect it and by the time it becomes standard, we already have the advantage over those who will just start learning it.

      0
  2. 3

    Don Rogers @creativelydone

    February 16, 2010 9:32 am

    Great post. I think it would be great if IE played nice, but it doesn’t. I shoot for having a site look ok in IE and how I want it to look in the compliant browsers ie Firefox, Chrome, Opera… I always tell my clients this is how is and set them up with a better browser. I try to put something informing the users with links to other options on a clients site. looking forward to seeing more CSS3 being used in the future.

    0
  3. 6

    Good post that covers good (present) cross browser compatibility.

    Although it is good to be exploring this new standard, it should be pointed out that it still isn’t finished / finalised, and would use on major projects with caution. Same goes for HTML5.

    You can follow the progress of all proposed and finalised standards for CSS3 here:
    http://www.w3.org/Style/CSS/current-work

    0
    • 7

      Thanks for sharing that link Branny.

      Yes, we know that it still isn’t finalized but it definitely is nearing completion. Also, that’s why the use of Modernizr. :)

      0
  4. 8

    When we say CSS3, first we think about IE. I think that designers should use as many CSS3, and should not be adjusted at any cost to IE. It’s time that Microsoft is finally move in step with the times…

    Nice post! Keep it like this! Cheers!

    0
    • 9

      Awesome Article, yeah am totally agree with you. We shouldnt care for IE at all.

      0
    • 10

      I think we should still “support” IE, but not to the same extent as we do modern browsers.

      I define support for IE as making sure the page looks alright. The branding will be there, the color scheme and layout are mostly the same, the content is still completely accessible, etc.

      I will support IE and still browser-test in it, but it will not be a pixel-perfect replica of how a Webkit browser renders the page.

      0
      • 11

        Of course we still must take care that the design looks in IE (almost) like in other browsers.

        What I wanted to say is that we do not have to watch every detail to be shown in IE as in other browsers, which includes use of IE hacks.

        0
      • 12

        Milos, while I agree with you that compromises should be made with IE, we must remember that it’s not Microsoft we’re punishing, only our users.

        0
      • 13

        how do u communicate that to your clients? how do you tell them that the design won’t look as good on IE8 as on a ‘webkit browser’?

        0
      • 14

        Well, you can explain to them that browsers aren’t all made the same and they work just a bit differently. You definitely don’t have to use technical jargon though, that will just confuse them even more.

        0
  5. 15

    Very informative article, wise words. I love the power of CSS3!

    0
  6. 16

    This is what.. 10% of css3?

    0
    • 17

      I didn’t even touch what CSS3 and Modernizr can do. I just tried to relate how you’d use these tools for design effects that should be familiar to most people.

      Look at Modernizr’s table of contents to see what you can really do with it, including some great HTML5 stuff.

      0
  7. 18

    I agree with you. I only did simple things with Modernizr on purpose to relate to stuff we’re hopefully familiar with by now.

    Modernizr really goes beyond CSS3 and into HTML5, which is a huge reason I use it. It not only changes how I style sites, but also mark them up. If I were trying to support IE in a similar way as I did above, an IE-specific style sheet would definitely be the way to go.

    0
  8. 19

    My advice: use it now!

    0
  9. 21

    If you are making a site that will be used by 80% IE users, it might be worth your time to make it look pixel perfect in all browsers.

    However, I’ve never designed a site to be used by more than 50% IE users, so that number is relative to each specific project. With at least 50% of my viewers in modern browsers, I always take my time to make sure they have the best experience possible using design effects they might not normally see in a site designed to the lowest common denominator (IE).

    0
    • 22

      CSS3 is definitely something that you should use. Maybe in the beginning, just use it for effects that won’t matter even if they can’t see it. For instance, drop shadows look nice and it wouldn’t really affect the site that much if the IE users can’t see it.

      0
  10. 23

    I wouldn’t call this passing support on IE. I still support some IE versions with my designs, but not to the same extent as modern browsers. I’d rather spend 20% of the time making IE look 80% great rather than making IE display every little drop shadow, rounded corner, or border image.

    0
  11. 25

    I wouldn’t say CSS3 is “out.” It’s still a work in progress and browser makers are implementing it in modules to transition into full support. Rather than simply CSS3 support as ON or OFF, it’s in a transition stage to being fully supported.

    Check out CSS3’s progress.

    0
  12. 26

    It will be some work to clean up your code once the CSS3 spec is finalized and all browsers support it, but you will be ahead of the curve. If you don’t use CSS3 right now, when the spec is finished and implemented, you’ll have to play catch up for adding CSS3 to your designs.

    I’d rather remove a couple harmless browser specific properties (-webkit-, -moz-, and -o-) and have my design look good in a growing percentage of browsers right now.

    0
  13. 27

    Very important post. Thank you. It is time to finally leave IE6 support (2010!). According to your remarks I have to start implement some new CSS3 properties.

    0
  14. 29

    Wow… CSS3 may really change the way we interact with websites. Even though Flash will remain the best, at least for a couple of years to come, I would love to see more possibilities of CSS3. Thanks for the great article, Kevin.

    And, what style have you adopted for images in this site, Jad. The glow on image hover looks awesome

    0
    • 30

      Flash will remain best for some things, but as far as embedding videos and audio are concerned, you would be crazy not to use the HTML5 element with a Flash player fallback. That way, your videos work on the iPhone and iPad and also hog up much less CPU with browsers that support HTML5.

      It’s an interesting topic and Mark Pilgrim does a great job of going into depth with it.

      0
      • 31

        Yep.. i totally agree with you, Kevin. When it comes to viewing videos, Flash sucks. It not only is power hungry and drains most of the memory but also crashes most of the times which is severely annoying. I hope HTML5 and CSS3 will enhance the way we see videos.

        0
  15. 32

    IMO, we’re still way too early. Personal pages — yes but professional work IMO is not prime-time yet. If you can devote time to monitoring your CSS3 websites and makes changes as necessary fine – but really? now? You have time for those headaches? You want to manage an extra IE stylesheet?

    0
    • 33

      I think it’s a great time to use CSS3 but I also agree that while because it still isn’t prime-time, we should really not try to overuse it. There are some great uses for it now though!

      0
  16. 34

    Nice examples, personally I don’t see any reason why one shouldn’t use CSS3. I used css3 borders and it really saved my time (and bandwidth).

    0
  17. 35

    With things like border-radius, the last statement in your declaration should be the standard spec. THis way, when vendor specifics are dropped, your style will still render.

    As per the above example:

    -khtml-border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;

    When -khtml, -moz and -webkit are dropped, the correct style is still there and works.

    0
  18. 37

    I agree that CSS3 is something we can begin using today, but I have to echo some of the other comments here that visual effects like border-radius and box-shadow, while very helpful and a substantial time saver for us all, are just the start of what CSS3 can offer. Sadly, those visual effects seem to get the most attention.

    New selectors that will allow us to create cleaner, leaner markup and still hook into what we need to use CSS to provide styling, as well as the ability to enhance the user experience through behaviors and animation effects currently residing in the world of Flash or Javascript are two other aspects of CSS3 that are very exciting and could potentially impact our work in a much more profound way than border-radius will.

    Don’t get me wrong, I love border-radius and now that I use CSS3 for that effect, there is no going back, but there is so much more to CSS3 that we should be excited about and using today!

    0
    • 38

      Hey Jeremy, I definitely agree with you about the uses of CSS3. There are definitely a lot more uses that we can start implementing today, but as Kevin mentioned, he barely just scratched the surface with this post and he just wanted to explain that we can already start using it today.

      We would definitely love to see a more in-depth post of it, and we might even do one in the future.

      0
  19. 39

    Great article. I think you should rename the article “You Should Use CSS3 Right Now”.

    0
  20. 41

    it’s nice, thanks for that !!!!

    0
  21. 42
  22. 43

    Extremely useful. Thanks for sharing.

    0
  23. 44

    unfortunately most users still use IE & oftenly we are not the ones who can decide whether to use degration or not so unfortunately we cannot use CSS3 for quite a long time unless someone can kixx Microsofts buttons

    0
  24. 46

    Interesting article, but it takes too hard of a line I think and lacks some information that would make CSS3 a truly viable prospect. Internet explorer is indeed the worst web browser ever built, but its got some hidden tricks in its more recent versions (IE7+). Many (not all) of the pseudo-selectors such as :first-child, attribute value selectors, and even the coveted :hover on non “a” tag elements are available. Beyond this, Microsoft has had numerous filter methods in place sine IE5.5 for gradient backgrounds, a good enough shadow implementation, a hard edge drop shadow, opacity support, and even some minor CSS transformation.

    So, do a little looking around IE filters, and write those IE conditionals to include IE only stylesheet alternatives before looking at bloating a page with yet another JavaScript library or writing off CSS3 as a viable means of creating websites. The biggest enemy to moving forward isn’t necessarily all versions of IE, but primarily IE6 and I highly recommend that we all encourage those users to catch up to modern times rather than feed into support for a dead browser.

    0
    • 47

      Hey Dave, well said. Personally, I’ve never looked much into IE and it’s filters. Maybe you should write a tutorial on it? I’m sure more people would be interested in reading and learning more about it.

      0
  25. 48

    I think cutting off support for IE is a mistake. This is a nice article and I have taken some information from it that will be useful to me, so I thank you for that. I am from a rural area and see a lot higher percentage of people using ie than any other format out there so for me to survive locally I HAVE to design for ie6.

    Keep up the good work.

    K

    0
  26. 49

    Nice post, CSS3 and HTML5 are definitely the future, IE6 is dead, we should start to use them now !!!

    0
  27. 50

    Thanks for this article. I am already using box-shadow on many websites I code.

    0
  28. 51

    I know what you mean Josh. But that was before, it was a little enjoyable but also, sometimes, it can just be downright annoying when you are trying to fix a bug and you just can’t find a solution to it.

    0
  29. 52

    You’re welcome Arjun. I never heard of Modernizr as well until this post. A big thank you to Kevin!

    0
  30. 53

    Definitely! I really can’t wait until all browsers start supporting HTML5 and CSS3 and they become the standard. That would be really awesome!

    0

↑ Back to top