The state of client-side web technology continues to evolve. CSS4 and HTML 5.1 has arrived bringing plenty of new features to explore.
Veteran web designers have seen a steady stream of upgrades to the core toolbox languages over the years. Much of this has brought stability and ease of use to their day. But not all has been easily accessible.
Recent updates in CSS4
There are some interesting new selectors available in CSS4.
Some of the new possibilities include:
- The use of optional and required selectors in form input fields rather than using the asterisk (*) symbol as a signal the field is required.
- Recognising links that are on a different domain and styling accordingly.
- For sliders that have a range, those values can be targeted independently.
For more information on the new selectors the W3C resource has the specification document.
For practical example you can find these on the CSS4-selectors website, I have found this to be a reliable resource across multiple variations of CSS.
Variables are now included right in native CSS
As well as these new selectors the latest version of CSS sees the introduction of CSS variables. This is probably the biggest change of all and brings power back to raw CSS without the need for preprocessors like Sass or Less that use variables as a major selling point.
In fact, CSS4 variables are possibly more powerful that preprocessor variable. Here is why:
- Support for cascading just like other CSS values.
- Be less reliant on third parties and more native writing of code.
- Use variables in conjunction with media queries making routine responsive design tasks easier to perform, something not possible with Sass.
Recent updates in HTML 5.1
This latest version of HTML sees new features added and obsolete features lost.
- The semantic nature of HTML5 web is developed even more with the introduction of details and summary tags.
- The lack of implementation of media controls – used to synchronise media elements across a page – has lead to this feature being dropped.
- The browsers context menu can have functionality with the new menu item tag.
- While CSS4 sees the introduction of range features, HTML5.1 has lost this due to lack of implementation by browsers.
Better support for images in responsive design?
One of the most interesting developments with HTML5.1 is the introduction of the picture tag. What this means for web designers are they can now use the best possible image available depending on the screen size.
With this tag, an entirely different image can be used on a mobile view without creating a media query based alternative design.
What about users with older browsers
If your thinking “this is all good but it will be a long time before typical users catch up by upgrading their browsers”, well I have good news for you:
The WC3 are releasing their standard specs incrementality. This means browser vendors can adapt more quickly.
Traditionally standard specs in web design have been released as one monster document. This would then be interpreted by the browser vendor (Internet Explorer, Chrome etc) and reflected in the next major release of the browser. Then, of course, some users would upgrade but many would not.
We have now reached a time when browser vendors are moving to an evergreen model of upgrading. These browsers update automatically without the user needing to be technically saved enough to do this themselves. This means browsers are now more likely to be supporting the latest cool features as well as patching security flaws.
This may not seem to be the most exciting aspect of the recent updates to the state of HTML and CSS – but this is probably the best news of all to me. I’ve been a developer for a long time now and browser support until recently has been a continuous game of catch-up.
In a fast moving industry like web design, I have not been able to confidently use a newly introduced feature without knowing the majority of my clients and their customers are going to experience this the way it was intended.
The website canIuse.com has become like a good friend over the years as it advises exactly which browsers will allow the use of which technology. This has been a very useful resource.
For the web designer that is keen to experiment they can be more confident the feature they want to use is available or probably soon will be. Meanwhile the tool caniuse it remains the go-to tool for identifying browser support especially at the cutting edge, what more common bugs found with any CSS or HTML features, new or old are documented here too.
Progressive enhancements – where features still work, albeit in a less modern style, should still be used for those who cannot access this.