Then, as styles load, are loaded or defined, they can be placed within a layer, allowing a preservation of style override importance but without the meticulously managed loading orchestration. With the entry file can pre-define layers, and their order, ahead of time. Entire methodologies exist to assist developers in managing this importance, such as ITCSS. This led to meticulously managed entry stylesheets, where developers needed to load less important styles first and more important styles later. Cascade layers #īrowser support: chrome 99, Supported 99 firefox 97, Supported 97 edge 99, Supported 99 safari 15.4, Supported 15.4 Sourceīefore the discovered order of loaded stylesheets was very important, as styles loaded last can overwrite previously loaded styles. Unsurprisingly, the state of CSS 2022 is dramatically impacted by the Interop 2022 work. This is an exciting and ambitious list that I can't wait to see unfold. They planned to deliver the following web features for developers:

This year, browsers met together to discuss the features and priorities they intended to work on, uniting their efforts.

Big congratulations to the teams here! Interop 2022 # Test scores were raised across the board, demonstrating upgraded stability and reliability. The goals for 2021, driven by developer feedback via surveys, were to stabilize current features, improve the test suite and increase passing scores of browsers for five features: Before studying the Interop efforts, it's important to look at Compat 2021’s efforts. Fresh in 2022 2022 and beyond 2022 Browser compatibility subgrid (prefers-reduced-data) hwb() Media query ranges lch, oklch, lab, oklab, display-p3, etc color-mix() scroll-start color-contrast() :snap-target Relative color syntax snapChanging() and snapChanged() Gradient color spaces toggle() accent-color anchor() inert Color fonts v1 Viewport unit variants :has() Browser compatibility #Ī primary reason so many CSS features are set to cooperatively release is due to the efforts of Interop 2022.

Simple css website syntax