10 Things CSS3 & HTML5 Will Teach Us

While we are all squirming in our seats waiting for the official release and support of HTML5 and CSS3, I’d thought I’d share with you some interesting things about both. We can all look at a boring list of the features of both, but they don’t really tell us how front end development is going to change. Although I’m super excited about how much easier it’s going to make my coding, I’m also somewhat nervous as there’s going to be a HUGE learning curve (especially for CSS3), even if it’s just to our coding habits. Here are 10 great things that both CSS3 and HTML5 are going to teach us very soon.

1. Effects Aren’t Just For Photoshop & Images Anymore

As it is now, every time we want to do some cool effect, what do we have to do? We have to open up Photoshop and save it as an image. This is normally fine, but can slow both our development and loading times. With CSS3, we can now do many of these things without using an image:

  • Opacity – we can now control the opacity of an color (or an image without making it a PNG)
  • Drop Shadow – with the box-shadow style we can now add fancy drop shadows to our divs and text!
  • Rounded Corners – Probably the feature I’m looking forward to the most, with border-radius we can have easy rounded corners WITHOUT images, we can even control which and how many of the corners are rounded.

2. Who Said Web Typography Was Boring?

CSS3 also brings many improvements to text and will probably change the way we use fonts.

  • Freedom From Web Fonts – although not new, @font-face is now easier to use any font on our computer!
  • Cutting Text – How many times have we had to add overflow:hidden to hide that extra text? Most of the time it cut off a line of text partially, or did it in an unsightly way. Now with text-overflow will automatically cut the text for you, and add a nice “…” to the end of the line, indicating more text somewhere else
  • Supercalifragilisticexpealidocious – No longer will long words from our favorite “Mary Poppins” stick outside our container, but will now move to the next line, thanks to word-wrap

3. Why Have One When You Can Have More?

Another feature I’m looking forward to; with CSS3, you’ll now be able to have MULTIPLE backgrounds for one element!! What does this mean?  It means you can kiss 20 nested divs on complicated layouts buh-bye.

4. Get Rid of Your Content Divs

CSS3 will now support multi-column content areas without having to float divs side by side. Great for blogs or content heavy sites and my favorite, cleaner code! You’ll be able to control this by either defining a width for each column, or the number of columns you want in a given space. I see a lot of potential for this feature.

5. Fancy Borders Make Great Neighbors

With CSS3 we’ll now be able to use images for borders! While this conjures up plenty of horrible looking images in my head (think blinking animated gif borders), I can see many possible and interesting uses of this feature. Gradients are also now supported! Somehow these border features are given me a bad flashback of Web 2.0 however….

6. Youtube Like It’s 1999

With HTML5 you can now easily embed videos without relying on flash plugins and all that other junk that was so 1999…I’m interested to know how this works exactly. Supposedly it’s going to be as easy as adding a link or image element!

7. Say Bye-Buh To Divs and Helllllooo To Cleaner Code

HTML5 will now allow us to get rid of the <div id=””> for some elements and allow us to just use the name. For example:

<div id="header">

Now becomes:

<header>

The biggest change in HTML5 (to me), this is going to take some getting used to. Why? With this comes some limitations, and there are certain tags you have to use. New tags include: section, aside and article (<section><aside><article>). I’m VERY interested to see how this changes the way we do HTML.

8. Draw All Over My Stuff

Not really sure what real use this new element will be, but in HTML5 you’ll be able to use a canvas feature; essentially a web app that allows anyone to draw all over the website. Someone please tell me why this one is important?

9. What Do These Things Mean For Me?

If you thought HTML and CSS was tricky now, you better start boning up on your code-ucation (ok this post is getting ridiculously dorky today). It’s going to be even MORE important than before to adhere to standards as we’re now getting into the big leagues: there’s going to start being a lot more messups if our code isn’t clean and/or validated. I’m wondering myself how all of those old tabled layouts are going to appear after HTML5 comes out. (HTML5 is supposed to be backwards compatible, but I’m praying it destroys tabled websites)

10. When Can I See This Stuff?

Most of it you can see now in all modern browsers. Personally, I don’t use any of them (except opacity when absolutely necessary) because you have to use several rules and hacks to get them to display correctly in every browser. I’m waiting until it officially comes out so you can use:

opacity: .05;

instead of:

opacity:0.4;
filter:alpha(opacity=40); <---stupid IE as always

What features are you looking forward to in CSS3 and HTML5?