Now Playing Tracks

My Approach To Implementing HTML5 and CSS3

HTML5 and CSS3 present some exciting possibilities when it comes to web development. However, both are merely recommendations to the W3C and have not been officially adopted as a standard. In actuality, it could be years before they are officially adopted.

This presents a bigger problem for HTML5 than CSS3 when it comes to actually using them in a professional sense. While some of the better modern browsers do support HTML5, there is no guarantee that what gets built now will still render the same years from now, next month, or even tomorrow. Until it is adopted, the specs can change along the way.

However, there are elements of HTML 5 that can be used now, as they will degrade gracefully no matter what happens to the specs, and I do plan incorporating some of it in our sites moving forward.   Apple, Google, Microsoft and others encourage developers to start using as much HTML as we can. It is especially useful when it comes to using their mobile devices. But on the other hand, the W3C is encouraging developers to NOT use HTML5 until there is a final version of the specification.

While in the same boat, CSS3 offers a bit more to play with. There are some very useful and nifty things that can be done with CSS3 now, and I do plan on implementing some into the sites that we build.

There has been a mentality shift in the web world about going from the graceful degradation approach to a progressive enhancement approach. Graceful degradation is building for the most advanced browsers and accepting the shortfalls of the lesser browsers as long as the content was “presentable”. Progressive enhancement is taking the “content is king” approach.

 As defined by Wikipedia:

“Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.”

So in the spirit of progressive enhancement, I plan on implementing many features of HTML5 and CSS3 when and where they make the most sense.

Some HTML5 I plan using:

  1. Simpler Doctype
  2.  Simpler script tag
  3. Block Level Linking (a link can encompass multiple items. Think buckets. There is often an image, a heading, and possibly a read more link. You used to have to wrap each one individually, creating much more code.)
  4. Newer and better form attributes that degrade gracefully
  5. Audio and video tags to ease implementation of multimedia without having to embed; also better for mobile devices.
  6. …and more.

Some CSS3 that I plan on using:

  1. Text shadow
  2. Box shadow
  3. Box sizing
  4. Columns
  5. Border radius
  6. @font-face (font-squirrel will generate code and supply fonts)
  7. …and more

Now is a great time to get used to some of these features. While it is not practical to go all out and implement full-on HTML5/CSS3 sites for our clients, it is a great idea to start implementing as much as can be supported.  Our goal is to make our client’s content available to as many people as possible. That means making sure that it is readable no matter what device or browser a person may be using. HTML5 and CSS3 can both hinder and aid in that goal. It’s up to us to make sure we understand where that line is and to balance it to our best ability. Plus, we do not want to find ourselves playing catch-up when it is all finalized and fully supported, even if it will be 2022. ;)

To Tumblr, Love Pixel Union