> <i>Cross-browser support for nesting, :has(), container queries, and more¹</i><p>> <i>¹: More: linear() easing, subgrid, dynamic viewport units, color spaces, and @layer.</i><p>Of these: @layer has broad support from March 2022, dynamic viewport units from December 2022, but the rest have less than a year (a couple less than a <i>month</i>). You shouldn’t <i>depend</i> on any of these yet for general web content. It’s pleasant to find that no single browser is lagging behind: Chromium, Safari and Firefox are all first to implement at least one of these features by more than a year, and all last to implement at least one of these features.<p>(Also, a correction: the nesting link should be <a href="https://caniuse.com/css-nesting" rel="nofollow">https://caniuse.com/css-nesting</a>.)<p>—⁂—<p>> <i>1. Stylesheets should load as fast as possible (small file sizes)</i><p>> <i>2. Stylesheets should not re-download unless changed (proper caching headers)</i><p>There’s a fascinating contradiction in the midst of these two: inlining CSS (as in, from a <link rel=stylesheet> to a <style>) is unreasonably good for performance up to surprisingly large file sizes (I haven’t tried to get good numbers, but reckon it’s comfortably into the tens of kilobytes <i>transferred</i>).<p>If you have the ability to conveniently do it, try inlining all CSS files always, and get a feel for the performance differences. The results may surprise you.<p>> <i>4. Fonts should load as fast as possible and minimize layout shift</i><p>I would remind people that “as fast <i>as possible</i>” means just don’t use them. I would also remind <i>users</i> that you can disable web fonts: my experience is that the fallout is slight, and the advantages due to consistency significant.<p>—⁂—<p>> <i>Specify target browsers (browserslist) and have syntax lowering to compile modern CSS features to work with those browsers</i><p>Just remember that this is primarily about <i>syntax</i> features like nesting selectors or rgb(<i>r g b / a</i>) instead of rgba(<i>r</i>, <i>g</i>, <i>b</i>, <i>a</i>). Of runtime features, it can only help with a few, e.g. adding RGB approximations for wide gamut colours, or <i>kinda</i> supporting logical properties like margin-inline. Things like :has(), container queries and subgrid, it can’t help you with.