LGND Campfire - February 24, 2023
These two features have revolutionalized CSS layout over the past 6 years, finally giving us the tools to do true layout on the Web.
Many developers are still confused and think that these are competing features. In reality, they are even more powerful when used in combination.
This is a feature that developers have been asking for almost 10 years. All the major browsers support this features as of Valentine‘s Day when Firefox added in support in version 110.
This feature is going to further revolutionize layout as it gives us the power to change layout based on the size of the containing element, not the viewport.
Many are referring to this as the “Parent selector” but it is more like a conditional selector. It looks to see if a certain condition is met on the page and then allows the developer to target elements to modify. It gives us superpowers that we did not previously have.
As of today (2/24/2023), the :has() selector is only supported in Chrome, Safari, and Edge.
Adobe led the way with adding Photoshop like filters to CSS that allows us to manipulate images and other content with CSS.
We have tools that will allow us to create flexible content for all screens sizes.
Reduced Motion Examples
Focus Styles
We are no longer limited to just one solid color with HTML text.
The inspiration for this presentation was an article by Mattias Ott, Better Bridges.
This presentation is using the following modern techniques.