For as long as developers have written CSS code, we’ve been desperate to have a method to allow styling a parent element based child characteristics. That’s not been possible until now. CSS has introduced the :has pseudo-class which allows styling a parent based on a relative CSS selector!
Let’s have a look at a few use cases for :has in CSS:
/*
If an `a` element contains an image, set the `a`'s display
*/
a:has(img) {
display: block;
}
/*
If a `figure` has a `caption` with a `multiline` class
allow the `figure` to have any height
*/
figure {
height: 200px;
}
figure:has(caption.multiline) {
height: auto;
}
/*
Hide an advert containing `div` until ads load
and have been injected
*/
.ad-container {
display: none;
}
.ad-container:has(.ad) {
display: block;
}
/*
If we have an `article` element without a heading,
add top padding because `H1`s have top padding
*/
article:not(:has(h1)) {
padding-top: 20px;
}
Apple’s Safari is the first browser to support :has , though we should see others quickly follow suit as it’s part of the official CSS spec. Now that we have this new pseudo-class, do you think you’ll use it much? Or will you stick to your current workarounds?
Create Namespaced Classes with MooTools
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event…
fetch API
One of the worst kept secrets about AJAX on the web is that the underlying API for it,
XMLHttpRequest, wasn’t really made for what we’ve been using it for. We’ve done well to create elegant APIs around XHR but we know we can do better. Our effort to…
[ad_2]
Source link
