In late 2023, Webflow made some notable improvements to their CSS support with the inclusion of a few key features like aspect-ratio, and the introduction of variables which are expressed as CSS variables under the hood.
Javascript developers, rejoice.
Suddenly, cool stuff is much more possible, like dark/light mode switching and many more cool capabilities.
But there are still things you cannot do in the designer, and one of these is the ability to target elements contextually, as in focusing CSS on an element which is a descendent-of, child-of, sibling-of, or parent-of another element.
In website design, these contexts can govern a lot within your styling, and those controls are painfully absent from the designer.
Enter: the Dragon... custom code
Fortunately, Webflow provided a workable solution to this which is the ability to add custom <style> chunks directly into HTML Embed elements, and these styles would be immediately displayed in the designer.
CSS designers, rejoice.
And this could solve a huge range of issues, making pretty much every CSS feature you'd want accessible within Webflow.
You want contextual targeting, so that only the first paragraph after an H1 appears specially? Or so that every 3rd item in a list is styled a certain way?
Done.
So what's the gap?
CSS Standards, and the Browser Adoption Gap
Well, while you can use most these great CSS features in Webflow, you can't actually use some of them on your sites - and the barrier is browser adoption.
If even one semi-popular browser doesn't support a particular CSS feature, than using it on your site may well break your UX for a portion of your audience.
And that can cost you money.
The CSS :has() pseudoselector
One of the most notable of these gaps for the past few years was the CSS :has() pseudoselector which allows you to target an element which contains specific other elements.
In a practical sense, you'll find it to be one of the more common selector mechanisms you need to style your site effectively.
But until recently, you could not use it because Firefox didn't support it.
For any major site, that could cost you 2 to 3% of your desktop users, and clients simply aren't ok giving those clients up.
All of that changed this month when Firefox 121 was released Dec 19th 2023, and it now includes support for the :has() pseudoselector.
The new version is not widely installed yet, and I can't say whether the implementation is 100% tested and bug-free... but...
Exciting times. 2024 will be that much better.
