tigt, 10 months ago

@ppk
supports[…selector…], actual-selector-to-apply-when-supported { … }

…works in browsers that don’t implement @supports or @supports (selector(…))

chris22smith, 11 months ago

@ppk I like to wrap any animations in a media query, like this:

@media@mastodon.social (prefers-reduced-motion: no-preference) { /* keyframe animations or transitions */ }

This means they only run if the user hasn't set a preference for reduced motion.

tigt, 11 months ago

@ppk You can get up to ≈5 separate stylable parts in an image’s fallback alt styling by messing with its width and its ::first-line, ::first-word, ::first-letter, and ::before/after

tigt, 11 months ago

@ppk Bumping specificity can be done with :not(#\ ) or :not(.\ ), since id and class cannot be set to a space in HTML

tylersticka, 11 months ago

@ppk It’s simple, but selecting all children of a pseudo class without that pseudo class is still kind of magic: https://cloudfour.com/thinks/our-surprisingly-simple-navigation-hover-effect/

Might be obsolete once Firefox ships :has support, though? 🤔

mastomuckle, 11 months ago

@ppk Using attribute selectors to select elements with ARIA roles and states, like *[role='button'] or li[aria-selected='true'].

swithinbank, 11 months ago

@ppk I just used .child:not(:where(.exception *)) to escape some styles in the presence of a specific parent selector. That's pretty powerful compared to the explicit reset you'd need before :not() and :where() were available.

davecross, 11 months ago

@ppk when working with 3rd party libraries or legacy code and I need to beat their specificity:

.that-class[class] {}

It’s a small thing, but gets the job done. Good place for a comment on why I needed to boost specificity too.

vasilis, 11 months ago

@ppk I really dislike the idea that the navigation should be the first thing in the HTML. The content should be the first thing, of course. So I always place the navigation in the footer, where it belongs, since it is metadata.

I do like a "skip to website menu" link at the top. For this you can use the target selector, which moves the navigation to the top at your request and leaves it idling the rest of the time.

Not really a trick, but it would be nice if is was published somewhere.

steveworkman, 11 months ago

@ppk can we have a big section on the lobotomised owl selector and the cool stuff you can do with that?

tennoseremel, 11 months ago

@ppk I don't think I have anything unique. I like to do :not([class]) when I have no access to layers (which at the moment is basically all the time). Kind of like this:

p:not([class]):not(:first-child) {
margin-top: 1em;
}

teacherbuknoy, 11 months ago

@ppk if you want to style links based on its URL (e.g. you want a blue color for all links that point to /blog and /blog/*), you can use the attribute selector like so:

a[href*=/blog] { ... }

And it will style all links with an href whose value contains the string "/blog" at least once.