/css/ - CSS Masters

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/

finally figured out how to check if things are overlapping without writing a massive intersection observer mess.
>Detect when elements overlap with CSS
it's honestly about time wild that we can do this natively now, but i'm still skeptical about how it'll perform on huge layouts with tons of moving parts.

https://piccalil.li/the-index/200/?ref=main-rss-feed

been wrestling with the default container behavior all morning. it's so annoying when you want that standard gutter but tailwind just leaves the edges raw on mobile. i tried using the padding utility on every single page but then i realized i'm basically duplicating rewriting the same classes everywhere. i ended up messing with the theme config to add some default horizontal padding directly into the container class. it's a bit of a hack because it makes the centering look weird if you aren't careful with the max-width.

theme: {container: {center: true,padding: '2rem',},}

now my nested components are behaving much better though. i also stumbled onto this cool trick using CSS variables to sync the container padding with my main layout margin so everything stays perfectly aligned without extra math. it's a total lifesaver for keeping the rhythm consistent across different viewports. definitely worth a look if you're tired of adding px-4 or px-6 to every single div in your project.

i'm tired of seeing people treat tailwind like it's magic. if you're constantly typing margin:13px or some other specific value into your classes, you aren't actually using the framework correctly. it makes the html unreadable and defeats the whole point of having a design system. just add it to the theme config once.

theme: {extend: {spacing: {'13': '13px',}}}

it's pure laziness at this point. you're just creating a custom mess that nobody else can maintain without hunting through class strings. anyone else seeing these massive single-line divs in every repo lately?

i'm tired of seeing everyone just use 1fr for everything like it's some magic fix. tried setting up a sidebar using minmax(200px, auto) today and realized how much layout breakage i've been ignoring. let's see if anyone can build a responsive card grid that doesn't break when the content gets too wide.