Posted by 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?
Post Tags: CSS, freelance, HTML
About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?.If you enjoyed this post, please share it!
This is a great post of importance.
I enjoyed #7 the best. Clean code its interesting so no need to type div id would work with classes as well. Instead of Embed they would like you to use that’s clean.
Destroying tables unlikely, many still like to use them for data only and design-the latter unacceptable . I think they are going to be around for a long time. I agree with you though.
Nice run-through. I agree with a lot of the points, but can only imagine that it will take a long time for HTML 5 and, more importantly, CSS 3 to be implemented widely. It’s almost as if someone should make a package to make these features cross-browser in the meantime by parsing the syntax… Hmm.
Your assumption about the canvas element is incorrect, though. The canvas element allows the web coder to draw on the page, not any random visitor. With Javascript, of course, you can give the user some control to interact with a canvas element, but that is completely up to the coder. Here’s a good reference link: http://carsonified.com/blog/dev/html-5-dev/how-to-draw-with-html-5-canvas/
Have to say, though, I think this is probably your best blog post thus far.
The canvas element lets you to sort of make “images on the fly.” So any shapes, icons, play/stop buttons and etc. won’t need the likes of images. Very powerful in complex web applications.
@Sunny & @Isaac I will have to check more into the canvas thing then, it does sound useful now
if you want an example of something awesome that uses the canvas element, check this out:
https://bespin.mozilla.com/
The new semantic HTML5 tags (header, footer,nav) are great, but don’t throw out the div quite yet as there are still times where you may want to use a non-semantic tag for css/js hooks. Specifically, the <div id=”wrapper”> is still here to stay.
I’m really excited about both CSS3 and HTML5. I’ve done a bit with css3 and can’t wait for it to be fully supported.
In #8 you say that you don’t understand the point behind the canvas element, specifically its ability to allow the user to draw stuff over the top.
The huge benefit of canvas will be the ability to generate graphs and charts on-the-fly on the client-side from data that is available on the page. For example a table containing stats can be turned into a pie chart displayed with canvas. This is really great as it means you don’t have to generate the chart on the server, and it can be updated in real-time.
With regards allowing the user to draw on top of a diagram that you’re showing with canvas, imagine that you are showing an idea or a design to someone, then imagine that they can scribble over that design to show you what they (dis)like and you can then use scripting to get those annotations back to you. Wouldn’t that be great? You could even overlay the canvas over the top of an entire page and get user feedback with them being able to draw circles around the bits they are talking about and you’d know exactly what they are referring to!
There’s loads that you could do with canvas
I wonder how long it will be before everyone in the world is using a CSS3 + HTML5 browser?
I think I am looking forward to 1 and 3 the most of all of them. The video “tag” addition will be nice also.
Hoping Microsoft gets off its duffy and gets IE up to speed quick enough. I wonder how long we will have to put hacks in to make CSS3 properties work in older versions of IE once it takes off more.
@Dylan It does sound interesting. I’ll really have to check it out.
@Ben and @Keith Probably a good 10 years to both of your questions
As fast as the web is, it still moves pretty slow in terms of trends.
Omg, it’s getting “humanly-impossible” to wait any longer for the border-radius stuff. Of course, all CSS 3 and HTML 5 is gonna make the web development a lot easier for everyone (except those retrograde ones, ofc).
Nice post, have a nice day. Cya.