Evergreen Browsers vs Published Websites
Published:
Its a fact that todays web browsers in three weeks time will be updated with new features and bug fixes. This three week cycle keeps the modern web browser fresh hence the name evergreen.
But what does this update cycle mean for a website? What effect will it have as we are just about to design and build a "New website".
Well we can play it really safe taking on board what current browsers support there is for CSS features and only use the parts that have great cross browsers support, but really how often are a websites core features updated. Its the website content that gets added to or refreshed mostly.
Alternatively we can take the above view, and then push ourselves a little more by adding some extra features that might only have one or two browser vendors support today, but know that others will follow in their update cycles over time.
Note: If you already have the benefit of a website with analytic data then this can really help you focus on what features would be safe for your current users.
We really just need to weight up if the feature will break older non supporting browsers or not, while being an enhancing feature within the new ones. This approach is referred to as 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.
But how do you decide on this Base level well the good news is we can get a little help
The Baseline initiative is a joint effort by Google, Microsoft, Apple, and Mozilla to categorise browser support for web standards. Baseline provides clear information about which web standards features are ready to use in websites. It designates new features into two categories:
Newly available – Means a feature is supported by the latest versions of all core browsers releases.
Widely available – Means a feature has been supported across browsers for at least 30 months. The feature can be used by most sites without worrying about support.
We use the Baseline project to determine which browser features to use in production. If a feature is widely available according to Baseline, we can use it everywhere without worrying about it.
This covers the core browser set
- Chrome (Desktop and Android)
- Edge
- Firefox (Desktop and Android)
- Safari (macOS and iOS)
We can safely say that a good base level are features included in the Widely available category, and features within the Newly available category could be used as Progressive Enhancement. As long as they fail nicely for browsers that don't support that feature or that interact poorly with defined CSS properties within the used baseline.
This feature approach is much better than saying I only support this version of browser, or I only ever test using a Chrome browser on this operating platform, as this clearly may not be where your customers and users are meeting your website for the first time.
The only thing that still holds some people back in this type of thinking is that the website will look different for some users. Though lets take a step back a moment, because in reality that customer might be seeing your website for the first time on the device that they have chosen to use. So ask yourself, what's the most important thing here? Well to us its that the website performs well for them on that visit, as really they neither know or care how someone else is seeing the same information.
Making sure that your content is available to the widest set of users can only be good for business growth, and everyone likes a little extra free if its available, making it a win win all round.
The key part is to always test on different browser sets, services like BrowserStack can be really useful, as for a monthly fee you get access to remote devices and browsers to test out and debug websites. Another approach could be to use Playwright to run automated tests across browsers before publishing the website.
This is how we have been working for most of this year with our own work, and going forward we have plans to publish more CSS based content into the JasmineWS website. However as we do, we plan to show what category the properties are from.
How do I find the Baseline status of a feature?
You can use Caniuse and MDN as both websites have Baseline flags
Another useful view is the Web Platform Status where you can search by CSS properties
As always we hope this offers food for thought that you can bring to your own work and websites. Should you have any questions or have a view regarding this approach reach out to us using the contact form.