Have you ever noticed that websites are constantly changing? Consider Figma, Atomic.io or Gravit Designer as an example. Would you believe that 5 years ago we would be using web browsers to create complex designs? Although we didn’t use the term web application 10 years ago it is now commonplace.
Websites evolve with web technology, in both design and functionality. Let’s look at CSS’s evolution in the last few years. What CSS properties should we be paying attention to? And how are they evolving in cross-browser support.
- How do detect browser support?
- Use feature queries to find out if CSS features are possible and what if any fallback options may be required
- Browser Support CSS feature queries are not supported in Internet Explorer
@supports(display:flex) .foo display:flex;
In the code above,
@supports() verifies that
display.flex is being supported by the browser and styles
.foo. To account for this, we can also use
Font-DisplayDoes ? Describes what happens when custom fonts load (display empty spaces, fallback fonts, …)
- Opera support This only works with the latest version of Chrome, and Opera upcoming versions. However it will work in all browsers (everything is fine)
It is more important to perceive performance than loading times. A website that appears slow will make visitors impatient and cause them to hit the Back button. Custom web fonts may take some time to download so the visitor is often left without any information and is unable to comprehend the contents of the webpage. This is called FOIT – Flash of Invisible Text.
Font-Display: allows you to change this.
Autoshows nothing until you load the font.
?swapfallback shown until custom font loaded
-fallbackIf the custom font does not load after 100ms the fallback font will be shown.
?optionalis similar to
and :fallback. However, the browser might decide to quit if it takes too long for the font to be downloaded.
3. CSS Variables
- What CSS variable?
- CSS Variables Makes CSS theing simpler
- Browser Support does not work with Opera Mini and Internet Explorer/Microsoft Edge while prefixed
root brackets are used to declare CSS variables. Every variable starts with two dots, followed by the variable name. This can include dashes as well (e.g
-brand-color:). The value is then declared as an ordinary property value.
Instead of declaring the CSS property value as usual, we would declare this CSS variable. This allows us to change sitewide styles using one line of CSS. It is very similar to pre-processors, but CSS variables are natively supported and therefore more efficient. Bye LESS, bye SASS!
const rootEl = document.documentElement; rootEl.style.setProperty('--brand-color', 'blue');
Will-Change:Does: Prepares the browser for an element likely to change later.
should-change:Stops animation flickering
- Browser Support: Works in all major browsers, not IE and Microsoft Edge
The web browser must “repaint” the display when a transition occurs or an animation is performed. Complex animations can cause animation flickering or laggy performance.
This is not pretty.
will change: basically tells the browser “hey, this is how you’ll look later”. This way the browser is aware of the change beforehand and will not flicker or animation lag.
-auto: Standard optimisations are used
?scroll-positiondeclares the element off-screen
ContentsThe contents of the said element will change so it should not be stored in cache by the browser
...CSS properties that can change
will-change. absorbs any performance lags by prepping for animation before it occurs. Overuse could cause adverse effects on website perf.
HTML standards and CSS standards can take a while to become web-standards. Cross-browser support is often difficult. These four CSS features, except for
font display:, are being widely used by modern browsers. Even then, most of the CSS features are safe to use (i.e., they can be used and won’t cause any problems, but they will bring us some benefits down the road when they are supported).