HTML5 and CSS3 – Not Just a Fad

HTML5 is the latest version of Hypertext Markup Language and is fast becoming supported by more and more of the latest browsers.  But what makes it so enticing is its ability to be viewed on mobile devices and across all the versions of browsers that are currently released.  Gone will be the days of browser detection and serving up CSS style sheets for each browser type, or hacks to “make it work” or “get it close enough”.  The official line is that HTML5 will be complete by 2014, and that’s a bare month away, so if you haven’t implemented it yet, it’s time to get acquainted with it now and add some cool elements to your website.  HTML5 is going to be a must for those who want to develop apps and iOS-friendly websites.  Apple actively supports and encourages HTML5 and CSS3 by showcasing some of the best examples of its use on its site, this could be to discourage Flash development since it’s not viewable on Apple devices.   However Google is embracing it by rolling out an HTML5 friendly version of YouTube, while Firefox is resisting some of the HTML5 features despite the fact that it loads faster than its older brother because it implements “WebSockets.”

HTML5 allows front end developers to simplify their code even more than ever.  The doctype is simple ex: <!doctype html>, and designers no longer have the need for excessive body attributes and antiquated tables.  HTML5 uses simple new wrappers to allow you to use CSS3 to position and style those elements.  Like <header>, <footer>, and <nav> to start out with a few.  Using a <div> with the new CSS3 concept “clearfix”; designers can freely float 2 columns inside the <body> and won’t experience any dropped content or strange wrapping and placement issues seen in older HTML and CSS.   In the past divs moved around due to offset margins and errors in setting absolute width for your floated content and since some browsers added borders and padding to content this caused issues across different browsers, and a lot of headaches for developers implementing to exacting design standards.

The audio and visual support in HTML5 is outstanding, that’s the reason Google rebuilt YouTube in HTML5. HTML5 makes it is easy to add audio and video to websites without the need for an outside plug-in.  The ‘canvas’ element makes it possible for you to bypass Photoshop and make your 2D images and directly place them in your code.  Even editing the content on your website is simplified using the ‘contenteditable’ attribute.  You can quickly change your text by adding the attribute contenteditable=”true” to any element.

Mobile phone applications will be much more accessible if written in HTML5 because you will not have to write applications for a specific brand of phone because it works universally across all phone platforms.  This same flexibility will allow your applications to be responsive and therefore viewed by all the new tablets hitting the market in 2014.  In combination with CSS3, HTML5 can be the answer to many design concerns across browsers that have plagued developers for many years.  Cascading Style Sheets (CSS) offer increased flexibility in the presentation of website content.  If implemented correctly, they can allow designers to update the site’s look and feel on a regular basis, keeping content fresh and interesting, and make many things of the past that were difficult easy to implement.   HTML5 can be implemented into past versions of HTML gradually so old markup can stay in place as you develop the new features.

Something new to CSS3 is ‘border-radius’ settings which allow designers to make rounded corners on squares where this was a huge undertaking in the past.  Clearfix styles, while not new to CSS3 have come to be more widely used and important for building’ stands-compliant’ web pages.  Clearfix lets us move all internal content around and it automatically clears the extra space afterwards.

Some new properties that Front End Developers love about CSS3 aren’t just for aesthetics, but even include animation effects and make life simpler.  By using these styles designers have greater control of typography, navigation, and even box styles that were hard to achieve with images and lots of finesse in the past.

  • box-shadow:  This adds a neat shadow effect to page elements. 4 parameters which set the position  left/right, up/down, shadow blur and color.  (Note that box shadows are not considered additional space to the original width/height.)  This new attribute makes box shadows happen without the designer having to use an image or JavaScript plug-ins.
  • text-shadow:  Provides beautiful drop shadows behind your page text. To utilize text shadow you choose a CSS style that applies to text and include the following  line in the CSS code ‘text-shadow: 0px 2px 3px #555;’  The first number is the x-offset, the second number is the y-offset, and the third number is the blur, while the hex number (#555) is the color of the shadow.  To create the letterpress effect, you need to add a shadow that’s lighter than the color of the text to make this work correctly.  So in the CSS attribute you set the text color to say #222 with the  shadow as #555.
  • transform:  To rotate text for Webkit and Firefox (as of 3.5), you can take advantage of the ‘transform’ property to handle the rotation. Currently each browser requires its property prefix for now, but it is in the works for CSS3.
  • border-radius:  Rounded corners have taken a long time to become accepted standards. Few years ago many web 2.0 designers were crafting background images just to fit rounded corners in with CSS. But using CSS3 border-radius you can manipulate the curve of each border on any element, including form fields or div boxes, it comes in so handy!
  • border-image:  Rather than using out of the box colors and outlines CSS3 lets you use images for the borders now, so you can make even better looking boxes and elements.
  • opacity:  Seems like a simple property which many designers don’t consider. Opacity expects a single numerical input ranging from 0 to 1.0 (0% – 100%). This effect works great as a hover animation, or to place emphasis on a pop-up modal requiring the user’s attention, while letting them see they haven’t left the page they are interested in.
  • @font-face:  Another beautiful example of some complex CSS styles and typography. Web designers are now able to work with their own custom fonts by defining them as variables inside CSS elements. The process is a bit confusing, but Zen Elements has outlined the process in a very simplistic manner.  This allows for easier font additions, to add a new font, simply upload the file to your server, link to the CSS file and create a font family!
  • box-sizing:  By default box-sizing will set all of your elements as ‘content-box’.  This means width, padding, and borders are all included into the max width. But set to ‘border-box’ then designers can define a max width (say 20px) and added padding/borders will include them into this, thus removing space inside the object. It’s a fantastic property once you master its resourcefulness.
  • background: Overlaying multiple backgrounds can be applied to a page reducing load time and making the background responsive to the size of the screen.  Gone are the days of giant background images eating up bandwith to load!
  • resize:  Using ‘div{resize: both;}’ in the CSS on a div works in Safari to provide a small resizing triangle that allows users to resize the div in the browser.  This is a neat new trick compliments of      CSS3!

These properties have their good and bad sides and may not be needed on every website you design but they are time savers and leaps ahead of old ways of doing things.  I have only included a few examples here I found to be time savers, and I expect I will post more on this subject in the future as I work more with HTML5 and CSS3 in the future.

Another core piece of added syntax worth mentioning in attribute is ‘selectors’.  With CSS3 you can now define styles based on HTML5 attributes (such as; type, href, title) and even provide specific values.  So for example you could target links with a defined title attribute and give them a set of back ground icons, or a specific style.

ul li[title^=”ico”] {background: url(‘my-icon.gif’);}

By adding the caret symbol before the equal sign signifies an operator which defines all the list items holding the prefix ico.  You can alternately replace the caret(^) with the dollar sign ($) to change the target to the suffix area of your title.  CSS3 can add background images where you set the titles as ‘firstico’ or ‘bookico’.  There is so much out there on attribute selectors the uses seem endless,  use them in the places where previously spans and hard coded inline style names were used in the past.  At it’s core HTML5 and CSS3 make building a website across browsers more simple than ever, with less stress.  Using the new CSS3 selectors and properties will give you advantages in the long run.

As well as pleasing the end user with your website design, you want search engines crawlers and bots to rank and read your website correctly and it’s never been easier to construct navigation, and footer sections in line with all modern browsers on the market.  If you build it with HTML5 and CSS3 the bots and crawlers can strip the actual content and rank your site better than ever before.

Once you become familiar and comfortable using HTML5 you will likely be led down the same path as I to use jQuery animation modules that can make the user experience more aesthetically pleasing.  I will blog about jQuery next month and tell you why I believe it will overtake JavaScipt in the next year and make it pretty much obsolete.  (Given time.)


  1. W3C Working Group Notes on CSS3
  2. HTML5 Showcase on
  3. Definition of “WebSockets” on Wikipedia
  4. Create a Letterpress Effect with CSS Text-Shadow by Chris Spooner
  5. HTML5 Visual Cheat Sheet by Di Antonio Lupetti in Design & Dev
  6. 10 HTML5 Demos to Make You Forget About Flash by Henry Jones on WDL
  7. Responsive Web Design: What It Is and How to Use It Ref. Smashing Magazine – By      Kayla Knight
  8. Text Rotation with CSS by Jonathan Snook