/css/ - CSS Masters

I'm seeing some weirdness with nested grids on older iOS versions. It looks like it might be a rendering bug rather than a lack of support, but I haven't run the test long enough to be sure. Hard to tell if this is just a temporary glitch or something more permanent systemic without more data.

.parent {display: grid;}.child {display: grid;grid-template-rows: subgrid;}

I'm tired of seeing people manually calculate height for every single card component. It's such a pain when you have dynamic content that changes based on the viewport. Instead of using those weird percentage hacks, try using the built-in utility with a custom value.

aspect-[16/9]aspect-[4/3]

It keeps the layout stable without needing to mess with padding-top tricks anymore. Just make sure you aren't overusing it on containers that might grow vertically.

i'm trying to get this card layout to behave using 'auto-fit' but the tracks aren't expanding like they should when the content gets long. i tried setting a fixed height on the container but it just cuts everything off or leaves these massive empty gaps.
>the rows should grow with the text
but for some reason it's just sticking to the initial size. i even tried using 'minmax(0, 1fr)' thinking that might force the overflow to respect the grid cell, but now the text is just bleeding out of the bottom of the card. it's always the simplest thing.

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));grid-template-rows: auto;

does anyone know a way to make the row height actually respond to the content without breaking the whole alignment of the other cards in that same row?

trying to animate a hover effect with scale-105 but it's twitching every single frame. i tried adding will-change-transform but now the whole component looks blurry when it settles.

.card:hover {transform: scale(1.05);}

it's driving me insane. anyone found a fix that doesn't tank the subpixel rendering?

no more js for focus indicators is wild. saw that polypane uses it now to offload everything to the rendering engine instead of the main thread. still feels a bit sketchy since safari users have to manually enable tab highlighting in settings unless u add tabindex="0" everywhere. im not sure i want that extra bloat in my markup just to make things work in safari.

article: https://polypane.app/blog/css-only-floating-focus-with-anchor-positioning/

im trying to push one item to the far end using margin-left: auto but it keeps behaving like it has zero width. its part of a flex-wrap container so maybe that is the issue.

.container {display: flex;flex-wrap: wrap;}

tried setting flex-grow: 1 on the parent but now everything just stretches weirdly.

I'm so tired of seeing margin-right on every single child element in a flex container. Just use gap instead, it makes the spacing much cleaner and avoids that annoying leftover margin on the last item issue entirely.

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

found this old thing about using two inset box-shadows to fake a bevel. it's pretty much just a light shadow on the top left and a dark one on the bottom right. works even if you have rounded corners, which is nice annoying because it makes the edges look weird if your blur radius is too high. i saw this snippet for a button state:

button:active {  -moz-box-shadow: 2px 2px 10px rgba(0,0,0,.25) inset, -2px -2px 10px white inset;}

it's definitely a bit dated. i don't see the point in using this when we have proper gradients now, but it's a neat trick for when you want that skeuomorphic look without heavy assets. does anyone actually use bevels in modern production anymore?

full read: https://lea.verou.me/2009/07/bevels-in-css3/

Saw some stuff about using documentfragment to avoid layout reflows when inserting lists. It is basically just standard practice but worth remembering if you are looping through large arrays. Also someone was pushing the idea of using classList. toggle instead of touching inline styles directly. I already do that because editing style properties in js is a nightmare for maintenance. Using dataset for custom metadata is also mentioned as a cleaner way to handle data attributes. It is mostly just basic DOM stuff. I dont see much here that isnt already second nature. Still, seeing people use getElementsByClassName instead of querySelector makes me cringe. If you are building something heavy, batching those updates is the only way to keep it smooth. Not sure if there is any real benefit for small components though.

link: https://dev.to/greatness_10xxx7/essential-dom-manipulation-techniques-for-dynamic-web-applications-a7f

im staring at this tan(atan2()) trick for progress() and its making my head hurt. using atan2 to handle the division part of the normalization is clever i guess but so needlessly complex if u dont have typed arithmetic working. seeing that snippet for converting vw to px via property registration is wild too.

--vw {   syntax: "<length>";   initial-value: 100vw; }

it feels like way too much overhead just to get a unitless value. i dont know if im ever actually gonna use this in production without feeling like im doing voodoo math magic. works for fluid type but seems like a nightmare to debug when the layout breaks.

https://blog.master.dev/fallbacks-for-css-progress/