Just another WordPress.com site

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:

CSS3 Checklist
A browser support checklist providing an overview of the different browsers and their compatibility with CSS3 features.
html5Test.com
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.
CanIUse.com
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!


HTML5

I’m excited to experiment with the new features offered in the current HTML5 spec. Especially those related to forms and adding functionality without the need for additional lines of JavaScript. Once implemented with more cross-browser compatibility – you can use these features to make your forms more user-friendly! I did discover that the incredibly simple DOCTYPE declaration for HTML5 didn’t affect my site’s functionality in Firefox, but when I replaced XHTML elements with some of the new HTML5 elements (i.e. header, section, article, footer) I started seeing some crazy things in the browser because I was in version 3.6 – it is supported in Firefox’s recently released 4.0 version.
*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.


CSS3

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:

CSS3Please.com
A generator where you can see real-time application of CSS3 features.

FontSquirrel.com
Love their @font-face kits!

5StepstoHTML5.com
An overview of HTML5 in a site created with HTML5 & CSS3!


**My Assignment: Create a one-page website using HTML5 & CSS3 – Theme: Seasons


Link to ‘Seasons’ Website:

For browsers that support new HTML5 elements Click here
For browsers that don’t Click here
For Internet Explorer users Click here 😛

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s