/css/ - CSS Masters

the bokeh and aurora demos look so cool but i am a bit worried about using it for anything besides small animations since the lack of fallbacks is a total pain. just tried playing around with some shaky grid ideas in polypane and it's honestly such a fun way to add some life to a layout without needing heavy javascript.

article: https://polypane.app/blog/experimenting-with-the-new-pure-css-random-function/

Found this talk from MediaCampAthens and realized i've been overcomplicating things. Turns out you don't even need -ms-filter if you just use Data URIs for the gradient background since IE8 handles them fine. I've been wasting time on complex unnecessary hacks when a simple image swap would've worked. Still hate working with IE8 though

https://lea.verou.me/2009/03/css3-colors-today-mediacampathens-session/

really weird way to check for rgba support by just hijacking the first script tag's style property and seeing if it sticks. using arguments. callee to cache the result is a pretty clever little trick though. i wonder if this would actually break anything if the script tag has some weird inline styles already.

https://lea.verou.me/2009/03/check-whether-the-browser-supports-rgba-and-other-css3-values/

the thing about overflow: hidden not actually working to clip the container contents is driving me crazy. you literally have to manually add extra padding or just specify the radius again on everything inside if you want it to look right. its so much extra work for something that should be automatic. im still trying to figure out why nobody bothered fixing this yet.

link: https://lea.verou.me/2009/02/css3-border-radius-today/

been looking at a client's codebase today and it's honestly exhausting. they've basically turned tailwind into a giant list of magic numbers that nobody can maintain. i found a component with text-13.5px leading-22.3px mt-7px all shoved into one class string. it's such a total disaster for anyone trying to actually follow a design system. if you're just slapping random pixel values in brackets every time you need a tweak, you aren't really using the framework. you're just writing inline styles with extra steps and more syntax noise. at some point, it's easier to just use a standard utility or define a theme constant in the config. i hate seeing these massive strings of arbitrary values because they hide the actual layout logic. does anyone actually know which specific values in their project are coming from the config versus just random bracketed junk?

i'm tired of hunting through the tailwind config every time a designer changes a hero image height. using aspect-4/3 is way faster when i'm just prototyping a quick layout. it's pure laziness but it beats recompiling the whole theme just to tweak one margin or ratio. anyone still bother with custom aspect values in their config?

finally found the fix for that annoying double tap zoom on buttons. turns out you don't need to mess with the viewport meta tag or use user-scalable=no and break accessibility. just use

.button {  touch-action: manipulation;}

to disable the extra gestures. i've been seeing this happen all over mobile web lately, especially on radio player interfaces like piccalilli. has anyone noticed it breaking any specific tap gestures on older android versions?

more here: https://piccalil.li/blog/stop-buttons-triggering-zoom-when-theyre-double-tapped/?ref=main-rss-feed

it's getting way too easy to ignore margins when you can just use gap on a flex container. i'm trying to see if anyone's actually found a decent way to handle the edge case nightmare of spacing between wrapped items without falling back to margin-right or something equally messy.

.container {display: flex;flex-wrap: wrap;gap: 1.5rem;}

anyone still using negative margins for this?

the way :host overrides :root with those local variables is such a headache for design systems.
>If you redeclared the variables in a normal div, it wouldn't be surprising that the values didn't inherit.
it's basically forcing us to use direct element selectors like ui-card { -card-font: fantasy; } just to get anything to change. i hate having to target the tag specifically instead of just hitting :root, but i guess it makes sense if you think about how inheritance actually works. it's basically a specificity trap

https://daverupert.com/2026/08/how-to-pierce-your-shadow-belly-button/

finally found some decent refs for anchor positioning and those new invoker commands. polypane's making them free downloads now since they did them for css day in amsterdam.
>always forgetting the exact syntax for Grid areas
it's pretty much what i always forget too, but i don't know if i need a whole A5 card for it when i can just google it. i'm a liar actually having them as physical cards on my desk might be nice. anyone else still using paper references?

found this here: https://polypane.app/blog/cheatsheets-for-flex-grid-anchor-positioning-and-invoker-commands/