We’ve Got Some New CSS Features!
CSS has been evolving a lot lately, partly because more companies are contributing to the development of new features and properties. Microsoft has been playing an important role in this due to the fact that now their Edge browser is based on Chromium, so they’re finally making it a priority to stay on top of the latest web standards.
Recently, a lot of new features have been confirmed to be fully compatible with the latest versions of the most used browsers (Edge, Chrome, Safari, Firefox, and Opera), and this of course is good news for web developers, since they won’t have to be performing magic tricks to make their styling compatible with some not-so-frequently updated browsers.
Features that had been in the works not so long ago have finally crossed the barrier of compatibility. And we know how Safari is the new Internet Explorer of the web development community. Well, this time Apple decided to also take a stand and join the rest of the modern browsers, meaning that even Safari supports these new functionalities.
Some of the soon-to-be supported features are:
- @container
- Accent Color
- Subgrid
- hwb()
- color-mix()
@container (Container Queries)
Instead of adapting to the viewport, elements that use this property will be able to adjust their size according to the space that is available around them. This will be great for complex layouts in which the size of each individual component is a priority over the size of the entire layout. Sadly, this is not a stable release for any browser just yet, but you can try it out by using the dev version of your preferred browser.
Learn more about container queries.
Accent Color
The property accent-color will allow web developers to choose the accent color they prefer for elements such as forms. The browser will make sure that there is good enough contrast between the accent color and the rest of the elements’ visual identity. This is a stable release for all major browsers, so you can go check it out now!
Learn more about accent color.
Subgrid
Subgrid has been supported by Firefox for a while now, but its support is finally being brought to the rest of the browsers. It makes grid lines readily available for children and grandchildren elements. It’s still only supported in the dev versions of the rest of the browsers.
hwb() (Hue, Whiteness, Blackness)
hwb() is a more human-centered way of thinking about colors. It works similarly to other color values in CSS, for example:
hwb(200 100% 80%)
This means that hue is 200, whiteness is 100% and blackness is 80%.
This is only available on Firefox and Safari at the moment.
color-mix()
color-mix() will allow you to mix any two colors of your choice. For example:
:root { --gray: color-mix(black, white); }
But you can also be more specific, with percentages:
:root { --dark-blue: color-mix(blue 40%, black 60%); }
This is only available in the dev version of Firefox and Safari at the moment.
These are not the only new properties/features that are being brought to CSS this year. There’s many more:
- Viewport Units
- Typography
- @layer
- Form Compatibility
- <dialog>
- And even a few more!
Find a more in-depth explanation of these on State of CSS 2022.
