You don’t have to be a web standards aficionado to appreciate how the updated HTML5 and CSS3 specifications benefit website performance — and relieve headaches for those who craft them. Although practical use of some features has been inhibited by the high percentage of users still surfing with outdated browsers, others have been making it mainstream and can safely be used today. Even on Internet Explorer.
HTML5: what’s new?
The biggest difference between HTML5 and everything that came before it is the focus on accessibility. If the web standards landscape of the past was like the wild west, then HTML5 is a socialist state: backwards compatibility, agreed-upon browser standards, even clearly defined error handling.
Beyond a change in philosophy, HTML5 brings a lot of fun tools to the table. Let’s take a look.
Elements enabling web apps
You’re right to be excited if client-side form validation sounds amazing. In HTML5, logic can happen on the user’s end, meaning they can even interact with forms (and apps in general) offline.
The introduction of native video and audio elements is also a huge step forward, especially with these media being largely under the domain of proprietary softwares like Flash — in spite of the astronomical chunk of web traffic they account for.
Drag and drop? You can make any element draggable; it’s as simple as setting “draggable=‘true’” within the tag.
If you’re unsure how safe an element is, check this database. (http://html5please.com).
Inspired by the unofficial convention of organizing content semantically via class name, HTML5 gives us tags like <header>, <footer> and <aside> that have actual structural meaning.
This gives both browsers and human readers a hint at the intention for the content, and ends the headache of unclear closing tags — not to mention the need for messy-looking inline commentary.
CSS3: changes and improvements
In an attempt to step around the need for dramatic specification upgrades, CSS3 is designed as a series of twenty or so modules which evolve independently based on developer needs. This has allowed more practical modules like transitions and media queries to leap quickly into common use, while less critical ones like flexible box layouts have languished in a development zone.
Transitions and animations
The function of media queries seems simple on the surface: find out how wide a viewport is, and serve up a different chunk of CSS based on the answer.
Yet beyond simply encouraging a flexible design outlook, media queries encourage the developer to make fewer assumptions about what device a user will happen to log in with; you could say that media queries lie at the heart of the “mobile first” design revolution.
As quickly as new and exciting ways to surf the web roll out these days (think smartwatches), this is an important shift of viewpoint — we no longer live in a world where it’s either a desktop computer or a phone, with nothing in between. The screen size is unpredictable. It’s why mobile sites fell out of fashion.
Where it’s all going
Looking forward, we can expect that HTML5 will continue to evolve, allowing us to structure pages in an increasingly device-agnostic manner. Semantic soup and CSS floats won’t be missed. Beyond that, increased support for client-side logic has much to promise in the realm of web apps.
Given the trend of adopting developer practices into the official W3C recommendations, it also seems likely that features used in code preprocessors like SASS will soon enter the CSS3 specification, allowing increasingly flexible and logic-driven presentation. In fact, “hard programming” concepts like variables and blocks are already being drafted into CSS3 as we speak.
What does it all mean? Faster development time. And faster apps.