Jasmine Web Starter

If you have used a particular web browser for sometime, you may have noticed that nowadays they are updated every few weeks, this is referred to as "ever green". Which can seem like a right royal pain sometimes when you're wanting to get online, but waiting for your device to update! But believe me, the browser companies are doing it with good reason.

Part of that reason is because the core web language standards also move forward, these updating standards are then taken by the browser companies to build into their web browsers.

Add that to the fact the big browser companies have started working together to provide us, the user, with a common set of features across all browsers. This work has been called Interop 2023 "a cross-browser effort to improve the interoperability of the web", also referred to as Baseline 2023.

Progressive Enhancement

So now we can start to incorporate new HTML tags and CSS properties within our websites, with the safe knowledge that efforts are being made so your website should work the same in whatever browser its being viewed with. That been said there will still be some of these newer options that as yet don't have full browser support, but don't let this put you off, and stop you looking into these new options. Because you can add features for the browser(s) that do currently support them.

This process is called "Progressive Enhancement" which basically means you have a base level of features for everyone, but if a users browser can support the newer features, then that user will get the better more enhanced experience.

Baseline 2023

There are two stages to Baseline. The first when a new feature becomes interoperable (available) across the major browsers, it's “newly available”. Then secondly after 30 months a feature will be deemed safe across all browsers, so is then “widely available”.

A great tool for helping you check the browser support status of HTML tags and CSS properties has been caniuse.com, which has just improved with the addition of a Baseline marker being added to new features within it. So you can now tell quickly whether a Web platform feature is “newly available”, or “widely available”.

This is great news as we have seen a lot of new updates available in CSS and some in HTML over the last year. As it means new options are opening up for us to build great new layouts, or for displaying information in a more interesting and dynamic way. Some of the features that have been released mean that its now, much quicker and easier to build layouts and also components/patterns, that may or maybe not have all the same contents in each component, with less CSS than we have needed in the last few years.

But not only that, as HTML and CSS expands with new features, it could also mean you may be able to support a feature natively without the need for a third party addin or dependency. Allowing you to remove some of those old solutions that were maybe written in JavaScript, meaning less files to manage and maintain, which is always good news, right!

An added advantage to having less files to load, is it allows users to view your page information quicker and potentially more devices can be supported.

New Properties

Now we know that so far in our docs we have only briefly touched on some of the CSS properties that are in our templates CSS file, so you may feel talking about what's new is a step too far for you yet. But we wanted to share with you how excited we are at the many new CSS features that have been released or finally supported by the major browsers this year.

Plus we hope it may inspire you to go learn and research further, or start a discussion with your developer/designer on how you can start to streamline and enhance your website with CSS.

Further Resources

If you want to learn more:

Google has released a web page with a good overview of some of these new CSS and HTML features on their CSS Wrapped 2023 blog post.

This .fyi page tests and evaluates browser conformance to the web standards, and provides the results in an easy to read table Interop-2023

Google have written a blog post outlining the integration of baseline2023 into caniuse and some of the features that became part of it this year.