Unleashing the Power of CSS by Eckles Stephanie;

Author:Eckles, Stephanie; [Stephanie Eckles]
Language: eng
Format: epub
ISBN: 978-1-925836-56-1
Publisher: SitePoint
Published: 2022-04-06T23:00:00+00:00

Dealing with Partial Browser Support

Because Firefox has been rolling out support for :has() in parts, Bramus Van Damme cautions that, when we’re using the @supports method, we should include a relative selector to check if full support is available for all types of :has() selectors.

The Future of :has()

While we’ve seen that :has() is very useful in and of itself, it’s also an excellent sidekick to other modern features.

For example, any time a count of something could affect a layout—for example, given a wider or narrower parent—there will be a use case for :has() combined with container size queries!

When container style queries are also available, use of :has() will help with toggling custom properties. Those might be based on count or the presence of children—such as a logo in a navigation block. We’ll then be able to use those custom property values with the style query.

A bit further into the future will be CSS scope, at which time :has() will allow scoping to be even more precise.

Given that :has() is a brand-new property, its “best practices” are yet to be established, and there are endless opportunities to explore. Grab a browser that supports it and start experimenting!

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.