Playing around with HTML5 & CSS3
I LOVE all the new features in HTML5 and CSS3! I created a page using some of the features that are easy to implement now and still allow a website to function in various browsers. (with a few vendor prefixes and IE workarounds)
**I’ve included links to the website at the end of this article.
There are many websites that offer information on browser compatibility for HTML5 and CSS3 so you can begin experimenting with both and have an idea about what features are best to try now and which have little or no support.
A few sites I recommend:
A browser support checklist providing an overview of the different browsers and their compatibility with CSS3 features.
Determines what browser you’re using and ‘scores’ it based on how many HTML5 features are supported. It gives you a breakdown of each feature and your browser’s level of support. It has a tab for viewing how other browsers rank as well.
Covers both HTML5 and CSS3 and provides a customizable filter to target compatibility info on specific features in specific browsers – you can even specify previous/current/future versions of each browser!
*While it’s very important to learn how to use these new features – it’s equally important to remember that most of them are still in the experimental stage and you should be cautious about using them on client sites until there is more cross-browser support.
So what about CSS3? My favorite features of CSS3 are the ability to use web fonts, gradients and those wonderful rounded corners you get with border-radius. Yay for CSS3!! I also added drop-shadows and played around with the opacity settings on some of my images.
*Something else I discovered along the way!: You can change the opacity of images embedded within the HTML document with the CSS3 “opacity” property but if you insert an image in your CSS file with the “background-image” property and then try to change its opacity, you will end up changing the opacity of the entire section within which the image was inserted.
A couple of ways around this:
You can create a psuedo-element within the HTML document and then reference it in CSS to insert the background-image. This will allow you to apply opacity to the image, but then provides some positioning challenges within the page.
(not semantically correct, but an option)
Another option is using relative and absolute positioning within CSS to create pseudo-parent/child elements that prevent the entire element from applying the opacity setting. See: ImpressiveWebs.com for more info on this workaround. (thanks @wddatft)
While HTML5 still lacks basic compatibility – CSS3 is fairly easy to implement into your sites now, if you use the new features sparingly and as an enhancement, rather than an integral part of your design. I can see myself using the CSS3 features I mentioned earlier in a lot of my future projects and look forward to playing around with the other features I haven’t used yet.
Here are a few websites I found helpful on HTML5 & CSS3:
A generator where you can see real-time application of CSS3 features.
Love their @font-face kits!
An overview of HTML5 in a site created with HTML5 & CSS3!
**My Assignment: Create a one-page website using HTML5 & CSS3 – Theme: Seasons