Four New CSS Property You Need to Start Implementing…and Why

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.

1. 1.

  • 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 not (display:flex).

2. Font-Display:

  • What Font-Display Does ? Describes what happens when custom fonts load (display empty spaces, fallback fonts, …)
  • Why Font-Display Improves Performance
  • 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.

  • Auto shows nothing until you load the font.
  • ?swap fallback shown until custom font loaded
  • -fallback If the custom font does not load after 100ms the fallback font will be shown.
  • ?optional is 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!

You can also change this variable’s value dynamically with JavaScript. A code snippet like the one below is required:

const rootEl = document.documentElement; rootEl.style.setProperty('--brand-color', 'blue'); 

4. will-change

  • What Will-Change: Does: Prepares the browser for an element likely to change later.
  • Why 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.

Acceptable values

  • -auto: Standard optimisations are used
  • ?scroll-position declares the element off-screen
  • Contents The 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.

Conclusion

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).