HTML5 & CSS3 Web Standards

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.

Eyeing the future, experimentation is already underway towards native 3D image manipulation. For the meantime, the <canvas> tag lets you manipulate graphics on a 2D bitmap via javascript. CodePen (http://codepen.io/) is overflowing with cool implementations.

If you’re unsure how safe an element is, check this database. (http://html5please.com).

Semantic elements

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

Millennial coders may take rounded corners and transition effects for granted, but it wasn’t so long ago that most visual styling was left to the devices of background images and javascript hacks. Remember Flash intros? I hope not. At least these days when somebody kicks off their landing page with an animation it doesn’t crash your browser or demand that you update your proprietary software.

Modular structure

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

Easily the most common current use for CSS3 is transitions and animations. Controlling consistent site-wide details like hover styles with CSS makes updating brand identity a breeze (or at least much more practical), not to mention speeding up load times. Animations allow for life-like movements that make the experience more intuitive, even if the user happens to disable javascript.

Media queries

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.

Share on facebook
Facebook
Share on email
Email
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pocket
Pocket
Colby Albarado

Colby Albarado

Colby is a fullstack developer

Back to Home Page