> Quick question: how many of these have you actively used in production?
> Container Queries
They aren't useful yet because:
1. Using them requires a wrapper element which can dirty up the HTML
2. While we were waiting for container queries to arrive, we also got new rules that made fluid layouts easier to implement which handle a chunk of container queries use cases.
Container queries will become more useful when elements can query their own size, rather than their size inside a designated parent.
> Style Queries
A solution in search of a problem. Current selectors are acceptable for most current use cases. May be useful for customizable widget/dashboard style layouts.
> CSS Layers
Nice, but they currently place too many demands on the developer to understand what layers currently exist. These will become more useful as browser dev tools make debugging them easier to reduce the burden on the developer to keep the layers in their mind while coding/debugging.
> Subgrid
Very useful when you need things aligned, especially in things like card layouts. The only thing holding this back is developers who are too reliant on 3rd party framework/libraries, e.g. bootstrap developers relying on grid column classes and tailwind developers building things with margin/padding everywhere. This will take time for developers to shift to, but those developer who limit themselves inside their own framework/library bubbles may never use them.
> Native Selector Nesting
Very nice quality-of-life improvement.
> Anchor Positioning
Only supported by one browser. I have no idea why this was even in the article to begin with. But it will completely remove the need for some JS placement/layout logic that keeps getting reimplemented all the time with pop-ups (pave the desire paths and all that). It also has the potential to make margin notes easier.
> :has, :is, :where
:has is super powerful as a parent selector
:where is great for simplifying repetitive css
> Logical Properties
If you maintain the discipline required to use these aliases over {top/left/down/right}, or if you have a linter to remind you, all of a sudden you're now able to support RTL languages without needing to spend time and money to make a different site for them.
> Scroll-Linked Animations
> View Transitions
Both will be abused by marketers and "designers" who don't understand accessibility, but both will also greatly simplify micro-interactions on proper websites that aren't trying to be a "marketing experience".
Only enterprises are going to care about ESR editions, so they're likely already using older code. Any time they are going to need something like :has, they're probably going to achieve it with js anyway.
@property will be nice, but almost every initial use-case will be animation related. That said, I'm happy it's reaching baseline support since more powerful features can be built on top of it.
> Container Queries
They aren't useful yet because:
1. Using them requires a wrapper element which can dirty up the HTML
2. While we were waiting for container queries to arrive, we also got new rules that made fluid layouts easier to implement which handle a chunk of container queries use cases.
Container queries will become more useful when elements can query their own size, rather than their size inside a designated parent.
> Style Queries
A solution in search of a problem. Current selectors are acceptable for most current use cases. May be useful for customizable widget/dashboard style layouts.
> CSS Layers
Nice, but they currently place too many demands on the developer to understand what layers currently exist. These will become more useful as browser dev tools make debugging them easier to reduce the burden on the developer to keep the layers in their mind while coding/debugging.
> Subgrid
Very useful when you need things aligned, especially in things like card layouts. The only thing holding this back is developers who are too reliant on 3rd party framework/libraries, e.g. bootstrap developers relying on grid column classes and tailwind developers building things with margin/padding everywhere. This will take time for developers to shift to, but those developer who limit themselves inside their own framework/library bubbles may never use them.
> Native Selector Nesting
Very nice quality-of-life improvement.
> Anchor Positioning
Only supported by one browser. I have no idea why this was even in the article to begin with. But it will completely remove the need for some JS placement/layout logic that keeps getting reimplemented all the time with pop-ups (pave the desire paths and all that). It also has the potential to make margin notes easier.
> :has, :is, :where
:has is super powerful as a parent selector
:where is great for simplifying repetitive css
> Logical Properties
If you maintain the discipline required to use these aliases over {top/left/down/right}, or if you have a linter to remind you, all of a sudden you're now able to support RTL languages without needing to spend time and money to make a different site for them.
> Scroll-Linked Animations > View Transitions
Both will be abused by marketers and "designers" who don't understand accessibility, but both will also greatly simplify micro-interactions on proper websites that aren't trying to be a "marketing experience".