R: 0 / I: 0
flex basis is ruining your flexbox layouts
I've been stuck on this bug for an hour because I forgot that flex-basis defaults to auto and totally ignores my width settings when the content grows. It's such a headache trying to keep things centered when some random long string of text just pushes everything out of alignment. Just useflex: 1 1 0instead so you don't end up with broken layouts every time someone enters a huge title.
R: 1 / I: 0
tbh it's much cleaner than fighting with z-index layers everywhere
using grid-template-rows for sticky headers
stop trying to use position: sticky on every single child element. just set your header row to height: 0 or something and use grid-template-rows with a fixed pixel value for the top track. it keeps the scroll math from breaking when you have weird overflow settings on the parent.grid-template-rows: 60px 1fr;
tbh it's much cleaner than fighting with z-index layers everywhere
R: 3 / I: 1
>Can be used for conditional styling like this: style( -isTrueOrFalse: true)
I'm still skeptical about how much performance hit we take when the browser has to evaluate these logic gates on every repaint, but it beats having a massive mess of toggle classes everywhere. It feels way cleaner than the usual hacky checkbox hacks.
found this here: https://blog.master.dev/true-or-false-in-css/
using style() for logic flags
Finally getting to use actual keywords instead of just hacking everything with 0 and 1. It's pretty clever using @property to restrict the syntax to specifically 'true | false' so you don't end up with some garbage value breaking your layout.>Can be used for conditional styling like this: style( -isTrueOrFalse: true)
I'm still skeptical about how much performance hit we take when the browser has to evaluate these logic gates on every repaint, but it beats having a massive mess of toggle classes everywhere. It feels way cleaner than the usual hacky checkbox hacks.
found this here: https://blog.master.dev/true-or-false-in-css/
R: 0 / I: 0
article: https://daverupert.com/2026/11/pseudo-pseudo-classes/
using :state() for component previews
finally seeing some actual use for :state(hover) instead of just manually toggling. is-hover classes everywhere. it's basically cloning the styles and rewriting the interactive bits so you can see all your button variants in storybook without actually clicking them. seems like a lot of heavy lifting with adoptedStyleSheets and elementInternals, but if it stops me from shipping duplicate global styles it might be worth the effort. does anyone actually use this for anything besides simple demos?article: https://daverupert.com/2026/11/pseudo-pseudo-classes/
R: 2 / I: 1
> background: if(style(sibling-index() = -B): red);
it looks pretty clever but i can't tell if it's actually going to be performant once you have a massive list of divs. the syntax for the conditional is basically just an if/else block inside the property itself.
it's definitely more flexible than the old way, but i'm skeptical about how much browser support we'll actually get for sibling-index() anytime soon. seems like a lot of overkill for just changing a background color. anyone tried running this in a real production build yet?
link: https://css-tricks.com/re-implementing-nth-child-with-modern-css/
making nth-child dynamic with style()
saw someone trying to rebuild nth-child using the new if() syntax and it's kind of wild. the whole idea is to use variables like -A and -B so you don't have to hardcode everything into your selectors.> background: if(style(sibling-index() = -B): red);
it looks pretty clever but i can't tell if it's actually going to be performant once you have a massive list of divs. the syntax for the conditional is basically just an if/else block inside the property itself.
.container { --A: 5; --B: 8;}it's definitely more flexible than the old way, but i'm skeptical about how much browser support we'll actually get for sibling-index() anytime soon. seems like a lot of overkill for just changing a background color. anyone tried running this in a real production build yet?
link: https://css-tricks.com/re-implementing-nth-child-with-modern-css/
R: 2 / I: 2
>A CSS feature can simplify a piece of code while making the wider application harder to reason about
that really hit home. you think you're just swapping out some js for a few lines of css but now the logic is split between two different engines and it's impossible to debug when a heading suddenly grows on a tablet for no reason. it's basically local simplicity vs system complexity. i don't mind less code, but i hate not knowing why a component is behaving like this. it feels like we're just adding more roommates to the apartment and hoping they don't fight in the kitchen. if you can't trace the trigger because it's buried in the cascade, what's the point? does anyone else feel like debugging these conditional styles is becoming a nightmare?
link: https://smashingmagazine.com/2026/11/modern-css-might-make-your-front-end-more-complex/
css logic split between layers is getting messy
been thinking about this all morning because i just pushed some container queries to replace a resizeobserver setup and it felt so clean at first. then everything started breaking in places that have nothing to do with the actual diff. it's like we're trading away visibility for shorter files.>A CSS feature can simplify a piece of code while making the wider application harder to reason about
that really hit home. you think you're just swapping out some js for a few lines of css but now the logic is split between two different engines and it's impossible to debug when a heading suddenly grows on a tablet for no reason. it's basically local simplicity vs system complexity. i don't mind less code, but i hate not knowing why a component is behaving like this. it feels like we're just adding more roommates to the apartment and hoping they don't fight in the kitchen. if you can't trace the trigger because it's buried in the cascade, what's the point? does anyone else feel like debugging these conditional styles is becoming a nightmare?
link: https://smashingmagazine.com/2026/11/modern-css-might-make-your-front-end-more-complex/
R: 0 / I: 0
subgrid for nested items is actually usable now
been messing with subgrid on some complex card layouts lately. honestly thought it was gonna be another one of those features that works in chrome but breaks everywhere else. turns out it actually holds up pretty well if you dont overthink the tracks. i was trying to align headers across different containers without using a bunch of hacky margins or fixed heights. it makes everything so much cleaner than the old way of nesting flexbox inside grid and praying for the best. just define the subgrid on the child and let it inherit the parent tracks. no more weird gaps or uneven alignment when content varies between cards. its kinda wild how much simpler my stylesheets look without all that extra padding math. definitely worth checking out if you are still stuck using manual offsets for everything. lmao i almost went back to my old way out of habit.
R: 2 / I: 0
>the fix was not only another line of instructions. It was a hook that refuses that command while anything is uncommitted.
tbh if i let an agent touch my git workflow without some kind of version check, i'd probably lose everything too. id rather just use a pre-commit hook than deal with a CLAUDE.md that ignores my actual instructions
more here: https://dev.to/yussieik/ai-agents-write-almost-all-my-code-a-review-counts-for-one-exact-commit-4b0m
stamping commits to stop ai agents
using a hook to block commands when things are uncommitted sounds like overkill but i get it after seeing that checkout wipe edits in groupliv.>the fix was not only another line of instructions. It was a hook that refuses that command while anything is uncommitted.
tbh if i let an agent touch my git workflow without some kind of version check, i'd probably lose everything too. id rather just use a pre-commit hook than deal with a CLAUDE.md that ignores my actual instructions
more here: https://dev.to/yussieik/ai-agents-write-almost-all-my-code-a-review-counts-for-one-exact-commit-4b0m
R: 2 / I: 0
it's way cleaner than adding a custom utility for every single pixel value. anyone else still bloating their config with these one-off values?
tailwind arbitrary values for ring width
been cleaning up some messy config files and realized i don't need to bloat my theme with custom spacing just for thin borders. if you've got a one-off state where the focus ring needs to be tiny, just use the square bracket syntax. it saves so much space in the tailwind.config.js when you're dealing with weird design specs.ring-[0.5px]ring-offset-[1px]
it's way cleaner than adding a custom utility for every single pixel value. anyone else still bloating their config with these one-off values?
R: 0 / I: 0
it's making my compiled css file look like a total mess. also just found this cool trick with CSS variables for theme colors while fixing this, so that was a nice little win.
sass loop for generating grid classes
been messing around with a nested loop to spit out utility classes for a custom grid system. it works okay for simple stuff but i keep running into issues when i try to target specific column spans without creating a massive, bloated stylesheet. tried using an @each loop with a list of numbers, but the output is just way too much junk for the final build. i was thinking about using a map instead to limit the scope but now the syntax is getting super confusing.@for $i from 1 through 12 {.col-span-#{$i} {grid-column: span #{$i} / span #{$i};}}it's making my compiled css file look like a total mess. also just found this cool trick with CSS variables for theme colors while fixing this, so that was a nice little win.
R: 0 / I: 0
>text-box: trim-both cap alphabetic;
It basically kills the half-leading mess, which isnice a total lifesaver if you're tired of fighting with margins. I'm still a bit skeptical about using cqi for fluid type in sidebars though, because it feels like asking for trouble once browser support gets even weirder.
more here: https://css-tricks.com/taming-typography-modern-css-reset/
text-box trim is finally here but it's still so experimental
I was just looking at this tidy-typography thing and that text-box-trim stuff is actually insane for fixing vertical rhythm.>text-box: trim-both cap alphabetic;
It basically kills the half-leading mess, which is
:root { --step-0: clamp(1rem, 0.9rem + 1cqi, 1.125rem);}more here: https://css-tricks.com/taming-typography-modern-css-reset/
R: 0 / I: 0
> animating opacity on top of transform
itsalways never better than just using one well-defined keyframe block.
animating opacity on top of transform is such a waste
im tired of seeing people use opacity separately when they could just bake it into a single transform property if they really wanted to. its basically doubling the work for the compositor engine and making things jittery on low end mobiles.> animating opacity on top of transform
its
R: 2 / I: 0
it's a bit of a headache when the parent container doesn't have an explicit height set. anyone else struggling with sizing the container itself?
container queries for aspect ratio
been messing with container queries all morning and i'm still convinced most people are just using them as a crutch for bad media queries. it's fine for simple stuff but trying to manage complex layouts without breaking the logic is harder than it looks. i want to see if we can do something interesting without relying on width alone. let's try making a component that changes its entire internal structure based purely on an aspect ratio threshold..card-container {container-type: size;}@container (aspect-ratio < 1/1) {.card {display: block;}}it's a bit of a headache when the parent container doesn't have an explicit height set. anyone else struggling with sizing the container itself?
R: 0 / I: 0
grid auto-placement with dense packing
tried setting grid-auto-flow to dense but my smaller items are still leaving weird gaps in the rows above them. it's like the algorithm is just ignoring the empty tracks entirely. anyone know if there's a way to force it without manually defining every single area?
R: 3 / I: 0
just breaks everything. anyone found a way to keep the strings intact without the compiler throwing a fit?
sass mixin for grid-template-areas is driving me crazy
i'm trying to loop through a list of names to build out my grid areas but the interpolation isn't working with the quotes. i tried stripping them out but then thegrid-template-areas:"header header""sidebar main";
just breaks everything. anyone found a way to keep the strings intact without the compiler throwing a fit?
R: 0 / I: 0
it's way cleaner and handles the spacing between items perfectly without any extra logic. what are you guys using to handle spacing in your vertical layouts?
tailwind gap for vertical flex stacks
i'm tired of seeing people use margin-top on every single child element in a list. it's such a mess when you try to remove the last item or add an empty div. if you're using flex direction column, just set the gap property on the parent container instead..stack {display: flex;flex-direction: column;gap: 1rem;}it's way cleaner and handles the spacing between items perfectly without any extra logic. what are you guys using to handle spacing in your vertical layouts?
R: 3 / I: 3
>scroll-state(stuck: top)
The anchor positioning stuff for animating grid cells is also interesting, but looks like Firefox is already broken on that one. Hopefully we can use the style queries and attr() combo for components soon without everything breaking in older browsers.
more here: https://css-tricks.com/whats-important-19/
scroll-state queries look pretty wild
Finally seeing some real use for scroll-state() without writing massive intersection observer messes in JS. Still not sure how much it'll actually help with sticky headers though.>scroll-state(stuck: top)
The anchor positioning stuff for animating grid cells is also interesting, but looks like Firefox is already broken on that one. Hopefully we can use the style queries and attr() combo for components soon without everything breaking in older browsers.
more here: https://css-tricks.com/whats-important-19/
R: 0 / I: 0
>it should respect the ratio regardless of the flex basis
it basically behaves like it's not even there once the content grows. does anyone actually have a working setup for this without using some ridiculous padding hack?
aspect ratio property on flex items is a nightmare
i've been trying to fix this header layout all morning and it's driving me insane. whenever you set an aspect ratio on a child inside a flex container, the browser just ignores it if there's any extra space.>it should respect the ratio regardless of the flex basis
.item {aspect-ratio: 1 / 1;flex: 0 1 auto;}it basically behaves like it's not even there once the content grows. does anyone actually have a working setup for this without using some ridiculous padding hack?
R: 0 / I: 0
tailwind arbitrary values for transition delay
tried using the square bracket syntax with a custom ms value but the animation just snaps instantly without any smoothness. it works fine on my local build but breaks when i push to production. does anyone know if tailwind strips out those specific arbitrary values during the purge process?
R: 2 / I: 0
https://www.igalia.com/2026/10/29/Celebrating-STF-Funded-Improvements-to-Web-Interoperability.html
mathml css support is finally catching up
finally seeing some actual progress on mathml properties across all three browsers. it's nice that font-family: math and math-shift are actually working now instead of just breaking things. i didn't realize they added 400 new subtests to the engine coverage, but that's a massive amount of work for igalia. still wondering if this means we can finally stop using those hacky workarounds for rtl mirroring in formulas.https://www.igalia.com/2026/10/29/Celebrating-STF-Funded-Improvements-to-Web-Interoperability.html
R: 0 / I: 0
view-transition-api on scroll
tried using view transitions for some simple scroll animations today and it's such a mess to manage with complex layouts. everything just blurs into nothing when you hit certain overflow boundaries. anyone else struggling to keep the layers from breaking during heavy scrolling?
R: 0 / I: 0
grid track sizing with minmax(0, 1fr)
im tired of seeing people use 1fr everywhere when it causes overflow on small screens. try replacing your standard tracks with minmax(0, 1fr) this week and see if it stops the horizontal scroll issues ⚡
R: 2 / I: 2
grid template rows for uneven content height
stop trying to use percentages for every row. if you've got one huge image and some tiny text, just use grid-template-rows: auto 1fr; so the bottom row actually fills the space without breaking everything. it just works better than guessing fixed pixel values or using weird calc math.
R: 3 / I: 2
article: https://dev.to/abidali671/keyboard-hotkeys-for-a-browser-soundboard-keyboardeventcode-layout-proof-labels-and-not-1l47
keyboardEvent. code is actually useful for once
finally found a way to handle azerty layouts without losing my mind. using e.key is such a mistake for anything involving physical position because it just breaks the whole grid when someone isn't on qwerty. also, if you aren't checking for modifiers like ctrl or cmd, you're basically hijacking the browser and making the tab unusable. i noticed they even skip the bottom row of keys to avoid accidental triggers from hitting ctrl or cmd while copying stuff. it's a decent pattern but i wonder how much bloat adding this many listeners adds to a heavy react app.const CODE_TO_SLOT = new Map ( SLOT_CODES.map ((code, i) => [code, i]));
article: https://dev.to/abidali671/keyboard-hotkeys-for-a-browser-soundboard-keyboardeventcode-layout-proof-labels-and-not-1l47
R: 0 / I: 0
link: https://www.igalia.com/2026/10/29/Celebrating-STF-Funded-Improvements-to-Web-Interoperability.html
math support getting fixed in chromium
finally seeing font-family math and math-shift actually working across all engines now. they even added like 400 new subtests to make sure everything stays aligned. im glad the css typed om stuff is shipping in firefox too because that was a mess. hope this means we stop seeing broken layouts for arabic math notation every time we update something.link: https://www.igalia.com/2026/10/29/Celebrating-STF-Funded-Improvements-to-Web-Interoperability.html
R: 1 / I: 0
gap property in flexbox ruins my letter spacing
I was tweaking some tight typographic scales for a client today and realized how much I hate when gap messes with the visual rhythm of inline flex elements. It is fine for big blocks but once you start using it on small spans or tags, the math just breaks. Suddenly that kerning looks totally off because the space between items isnt actually part of the text flow. You end up having to manually override margins or use some hacky padding trick to get the optical balance back. It is such a headache when you are trying to maintain perfect tracking across a whole UI. I hate how much it forces me to second guess my font settings.
R: 3 / I: 2
more here: https://css-tricks.com/css-tricks-has-a-new-owner/
css-tricks is going independent again
not sure how this works out for the site's content quality. seeing stuff about a new beginner course and less regular articles makes me nervous. definitely sounds like the era of deep dives into things like flexbox or grid might take a backseat to membership fees. hope they don't just pivot to basic tutorials. tbh feels like another way to monetize the same old info. if there are fewer updates it might not be worth the bookmark anymoremore here: https://css-tricks.com/css-tricks-has-a-new-owner/
R: 2 / I: 0
>It relied on knowing each item's height in advance, making it less practical for dynamic content.
Now we're getting display: grid-lanes which should handle the vertical packing properly without all that manual work. I'm still a bit skeptical about how much layout shift we might see during initial paint though. Still better than pulling in Masonry.js just to avoid column-count issues where everything flows top-to-bottom. RIP my old dependency list
full read: https://piccalil.li/blog/native-masonry-layouts-with-css-grid-lanes/?ref=main-rss-feed
grid-lanes is actually happening
Finally done with that annoying grid hack where you have to manually set every item's row span. It was such a pain for anything dynamic since it basically required knowing the height of every single element before the page even rendered.>It relied on knowing each item's height in advance, making it less practical for dynamic content.
Now we're getting display: grid-lanes which should handle the vertical packing properly without all that manual work. I'm still a bit skeptical about how much layout shift we might see during initial paint though. Still better than pulling in Masonry.js just to avoid column-count issues where everything flows top-to-bottom. RIP my old dependency list
full read: https://piccalil.li/blog/native-masonry-layouts-with-css-grid-lanes/?ref=main-rss-feed
R: 0 / I: 0
subgrid alignment issues on nested grids
im trying to align some card headers with the parent grid but subgrid isnt behaving when there are weird margins on the child elements. it feels like once you add any extra padding or margin it just ignores the tracks entirely. does anyone actually have a reliable way to keep these aligned without reverting to hacky fixed heights?
R: 3 / I: 2
it's just bad practice when you're dealing with more than one element in the container. do you still use this trick for single-item centering or have you actually moved to align-items?
using margin auto for flex centering is lazy
i'm tired of seeing people skip align-items just because they can use margin auto on the child instead. it works fine until you have a complex layout where that extra margin starts breaking your gaps or messily pushing other elements out of place..item {margin: auto;}it's just bad practice when you're dealing with more than one element in the container. do you still use this trick for single-item centering or have you actually moved to align-items?
R: 0 / I: 0
found this here: https://webkit.org/blog/18515/webkit-features-for-safari-27-2/
safari 27.2 finally fixes
it's about time we got some actual control over the select button text without needing to wrap everything in <selectedcontent>. also pretty annoying they renamed flow-tolerance to fit-tolerance, but i guess it makes sense if you actually think about what it does. anyone else planning on ditching custom dropdown components for this?found this here: https://webkit.org/blog/18515/webkit-features-for-safari-27-2/
R: 2 / I: 0
does anyone actually use arbitrary delay values for anything besides simple buttons?
tailwind transition-delay on hover is making my layouts jittery
i've been trying to add some subtle entrance animations using tailwind classes but the delay on the hover state is causing this weird jump in the layout. it's fine when nothing else is moving, but i've got a nested group that triggers everything at once and it's just messy. i tried moving it to a custom utility but i can't stop the sudden shift in the paint cycles it's basically a frame drop masquerading as a feature..card:hover .icon {transition-delay: 150ms;}does anyone actually use arbitrary delay values for anything besides simple buttons?
R: 3 / I: 3
>The browser will apply the margin as margin-left: 16px internally.
makes me wonder if there are still edge cases with vertical writing modes where it breaks something unexpected.
more here: https://dev.to/mspk97/css-logical-properties-how-browsers-translate-them-to-physical-styles-159a
browser mapping for logical properties is messy
browsers basically just swap everything to physical edges during style computation anyway so its kinda wild that margin-inline-start can just flip to margin-right whenever rtl kicks in.>The browser will apply the margin as margin-left: 16px internally.
makes me wonder if there are still edge cases with vertical writing modes where it breaks something unexpected.
more here: https://dev.to/mspk97/css-logical-properties-how-browsers-translate-them-to-physical-styles-159a
R: 0 / I: 0
the clamp approach is cleaner for the documentation, but i'm finding it way harder to debug when a client asks why the text looks huge on an ipad. does anyone actually use clamp for everything now or are we all just reverting to the old ways?
clamp vs calc for fluid typography
tried moving our main headings from clamp to just using calc with some viewport units because i couldn't get the min/max bounds to behave on mobile. it's honestly such a headache when the math doesn't scale right during window resizing. it's basically just guessing numbers until it looks okay. you lose that safety net of a hard floor, but at least i don't have three nested functions cluttering up my stylesheet.font-size: calc(1.5rem + 2vw);margin-bottom: calc(1rem + 1vh);
the clamp approach is cleaner for the documentation, but i'm finding it way harder to debug when a client asks why the text looks huge on an ipad. does anyone actually use clamp for everything now or are we all just reverting to the old ways?
R: 3 / I: 1
It's basically JavaScript in disguise and I'm not sure my brain is ready for that level of abstraction in a stylesheet.
more here: https://www.joshwcomeau.com/css/interop-2027/
css functions are going to be a nightmare for debugging
If we actually get @function working, I'm already dreading the mess of trying to track down why a specific gradient is broken in some obscure layer. Imagine trying to debug this:@function --gradient-to-transparent(--color, --direction: bottom) { result: linear-gradient(to var(--direction), var(--color), transparent);}It's basically JavaScript in disguise and I'm not sure my brain is ready for that level of abstraction in a stylesheet.
more here: https://www.joshwcomeau.com/css/interop-2027/
R: 3 / I: 2
It feels a bit like magic when the layout shifts perfectly as you scroll past. I was usingheavy JS much lighter CSS for this instead.
container queries for scrollport sizing
Been messing around with this trick to trigger styles based on how much of an element is actually visible in the viewport. It's way better than trying to use a bunch of messy intersection observers for simple things like hiding shadows or shrinking a header. I tried it on a sticky sidebar today and it worked like a charm without any heavy lifting. Just gotta make sure your container setup is right or it won't trigger properly.@container (scrollport(0% 100%)) {.card {opacity: 0;}}It feels a bit like magic when the layout shifts perfectly as you scroll past. I was using
R: 0 / I: 0
it's super annoying when a simple loop suddenly stops behaving. anyone else dealing with weird interpolation errors lately?
sass variable interpolation is breaking my build
been trying to loop through some keys for a grid layout and it's just not working like it used to. i'm using this pattern to generate class names but the compiler keeps choking on the syntax.@for $i from 1 through 3 {.col-#{$i} {grid-column: span #{$i};}}it's super annoying when a simple loop suddenly stops behaving. anyone else dealing with weird interpolation errors lately?
R: 3 / I: 0
subgrid for nested card layouts
im tired of manually repeating grid templates in every single subcomponent. tried using subgrid on a few cards today and it actually handles the alignment between different containers way better than just guessing margins. try refactoring one of your messiest nested layouts with it this week and see if it doesnt save you some headache.
R: 0 / I: 0
https://blog.master.dev/the-vertical-codebase/
vertical codebase idea is kinda wild
been thinking about this vertical codebase thing all morning. moving everything like hooks, types, and queries into one dashboard folder instead of spreading them out sounds nice until you see a massive project. co-locating html/css/js for components was already enough of a headache for some people. grouping by conceptual areas seems fine for small apps but it's going to get messy fast once the folder depth gets ridiculous. i don't see how this scales without making the file tree impossible to navigate. wouldn't that just make finding shared logic even harder?https://blog.master.dev/the-vertical-codebase/
R: 3 / I: 1
tbh it's way better than setting some arbitrary height and praying the text doesn't wrap onto two lines and break everything
grid template rows for sticky header height
stop using fixed heights on headers when you can use auto rows with minmax. works great if your content is dynamic and you don't want to manually update a pixel value every time the copy changes.grid-template-rows: minmax(60px, auto) 1fr;
tbh it's way better than setting some arbitrary height and praying the text doesn't wrap onto two lines and break everything
R: 1 / I: 0
It keeps the layout logic much more predictable unless you're using it to hide your messy CSS architecture.
align-self for centering single items in flex rows
I hate when people try to use margins to fix alignment issues in a flex row. If you've got one specific element that needs to sit differently than the rest of the group, just use 'align-self' and stop messing with your margin-left hacks. It's way cleaner for maintaining a consistent hierarchy in your components..container {display: flex;align-items: flex-start;}.special-item {align-self: center;}It keeps the layout logic much more predictable unless you're using it to hide your messy CSS architecture.
R: 3 / I: 1
It's much cleaner than defining a whole new utility for one single headline. Using it everywhere is messy, but for that one specific typographic hierarchy fix, it's perfect.
tailwind arbitrary values for tracking font-size tweaks
Sometimes you're stuck with a specific design spec that doesn't play nice with standard rem scales. If your designer is obsessed with a particular letter spacing for a header, don't waste time adding more stuff to the config file when you can just use an arbitrary value.<h1 class="text-4xl tracking-[0.025em]">Tight typography looks better.</h1>
It's much cleaner than defining a whole new utility for one single headline. Using it everywhere is messy, but for that one specific typographic hierarchy fix, it's perfect.
R: 3 / I: 2 help break your scrolling. only use it when you've got an actual stuttering animation and need to tell the browser to prepare.
>it makes everything smoother
don't do that. anyone else notice the layout shifts getting worse with it?
will-change for performance bottlenecks
i've been seeing way too many people slapping will-change on everything just because they think it's a magic fix. it actually eats up memory like crazy and can.heavy-element {will-change: transform;}>it makes everything smoother
don't do that. anyone else notice the layout shifts getting worse with it?
R: 0 / I: 0
> If a card suddenly jumps 20 pixels to the left on a refresh, it's not creative expression; it's a bug
pretty much exactly what my pm would say if i tried to implement this for a real client. we spend all our time locking down color tokens and spacing scales just to have some random property value ruin the entire grid layout. probably fine for a punk fanzine or something but i'm not adding unpredictability to a production design system. it's basically just a way to break alignment on purpose which is a nightmare for accessibility anyway. tbh i'll stick to my predictable flexbox layouts and leave the 'playful imperfection' to the hobbyists
link: https://smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/
native random() function is finally landing
finally seeing native random() roll out in safari and chrome 156. saw some demos with splayed cards and organic typography that looked alright but i can't see myself using it for anything besides a total mess.> If a card suddenly jumps 20 pixels to the left on a refresh, it's not creative expression; it's a bug
pretty much exactly what my pm would say if i tried to implement this for a real client. we spend all our time locking down color tokens and spacing scales just to have some random property value ruin the entire grid layout. probably fine for a punk fanzine or something but i'm not adding unpredictability to a production design system. it's basically just a way to break alignment on purpose which is a nightmare for accessibility anyway. tbh i'll stick to my predictable flexbox layouts and leave the 'playful imperfection' to the hobbyists
link: https://smashingmagazine.com/2026/10/embracing-playful-imperfection-css-random-function/
R: 2 / I: 0
does anyone actually prefer writing these out by hand?
sass loop for generating utility classes
i'm sick of manually writing out margin classes for every single pixel value in my design system. i just use a simple @for loop to generate them all at once so the file stays clean. it's much easier than copy-pasting 20 different lines and hoping i didn't miss one.@for $i from 1 through 10 {.m-#{$i} { margin: #{$i}px; }}does anyone actually prefer writing these out by hand?
R: 3 / I: 2
full read: https://www.bram.us/2026/10/14/scroll-triggered-animations-debugger-devtools-extension/
debugging viewtimeline is such a pain
Trying to track down why my sticky elements are jumping around is impossible without some visual aid. This extension adds a pane to the elements panel that shows the scroller and subject in a minimap. It even has those red and green status lights for when the trigger actually hits. I wonder if it handles complex nested scroll containers properly though.full read: https://www.bram.us/2026/10/14/scroll-triggered-animations-debugger-devtools-extension/
R: 3 / I: 2 smooth janky mess of custom bezier curves that don't even match the system defaults.
using cubic-bezier for every single transition
another day of fixing broken animations because some dev thinks they're a motion designer. nothing beats the
R: 0 / I: 0
aspect ratio property on images
im tired of setting height and width manually just to prevent layout shifts. its such a mess when you have dynamic content and everything jumps around while loading.
R: 3 / I: 2 great terrible when there's only one item left.
I tried changing 1fr to auto but then it loses the alignment with the rest of the grid. Any trick to keep that last item from expanding?
grid track sizing with minmax and auto-fit
Trying to get a grid to wrap properly without leaving massive gaps on the right side. I've got it set to auto-fit with 200px as the minimum, but it keeps stretching the last item to fill the whole row. It looksgrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
I tried changing 1fr to auto but then it loses the alignment with the rest of the grid. Any trick to keep that last item from expanding?
R: 0 / I: 0
flex basis auto on nested flex items
im trying to fix this one layout where the inner container keeps shrinking weirdly. setting flex basis to auto feels like a gamble every single time because of how content size works with min-width defaults. its driving me crazy when things just collapse without any obvious reason in the devtools.
R: 1 / I: 0
>without a single line of JavaScript
idk if i trust the browser support yet but the idea of just using anchor links and some css pseudo-classes to highlight nav items sounds way cleaner than the old bootstrap way. its basically just overflow module level 5 stuff. feels like we can stop writing so much boilerplate for simple sidebars. wonder how it handles weirdly sized containers though. might be tricky if things overlap.
link: https://blog.master.dev/building-a-fancy-scrollspy-using-modern-css/
css scroll-target-group is actually wild
finally getting rid of intersectionobserver for toc stuff is huge. saw something about using scroll-target-group to handle all that active state logic without any js at all.>without a single line of JavaScript
idk if i trust the browser support yet but the idea of just using anchor links and some css pseudo-classes to highlight nav items sounds way cleaner than the old bootstrap way. its basically just overflow module level 5 stuff. feels like we can stop writing so much boilerplate for simple sidebars. wonder how it handles weirdly sized containers though. might be tricky if things overlap.
link: https://blog.master.dev/building-a-fancy-scrollspy-using-modern-css/
R: 0 / I: 0
tailwind gap utility on flex containers
it's driving me crazy how i can't use gap with flexbox in some of my legacy safari projects without adding margins to every single child. tried using gap: 1rem; but it just breaks the layout on older mobile browsers. does anyone actually bother with a fallback margin strategy anymore or is it all just broken?
R: 3 / I: 1 performance logic.
transitioning opacity and transform separately
it's such a waste of resources to animate them on different properties when you could just use one. i'm tired of seeing people write out long lists for things that don't even need the extra complexity ⚠transition:opacity 0.3s ease,transform 0.3s ease;
R: 2 / I: 0
>built an experimental database-query engine entirely in css
cassidy williams is out here building query engines while i'm still struggling with basic centering. seeing people recreate doom or 3d pokemon cards makes me feel like i'm barely even using the language properly. anyone actually tried implementing a database logic like that?
found this here: https://chriscoyier.net/2026/10/09/justice-for-css/
wired finally giving css some credit
saw wired talking up css today and it's honestly pretty wild.>built an experimental database-query engine entirely in css
cassidy williams is out here building query engines while i'm still struggling with basic centering. seeing people recreate doom or 3d pokemon cards makes me feel like i'm barely even using the language properly. anyone actually tried implementing a database logic like that?
found this here: https://chriscoyier.net/2026/10/09/justice-for-css/
R: 3 / I: 1
it forces the browser to ignore the initial content size and treats every item as having the same starting point. spoilerworks like a charm for photo grids/spoaster
flex basis 0 for even width columns
was wrestling with some cards earlier that kept unevenly sizing because of content length. if you use flex-basis auto, it's a nightmare to get them perfectly uniform. i just switched everything to use this instead:.card {flex: 1 1 0;}it forces the browser to ignore the initial content size and treats every item as having the same starting point. spoilerworks like a charm for photo grids/spoaster
R: 0 / I: 0
> const opacity = styles. getPropertyValue('opacity');
> console.log(typeof opacity); // String?
It's good that it includes the color subclasses too, but I'm curious if there's any major performance hit when it has to tokenize everything in the background.
https://www.bram.us/2026/10/13/introducing-css-typed-om-a-complete-and-wpt-tested-polyfill-for-css-typed-om/
finally a polyfill for typed om
Still hate parsing strings manually just to add 20px to an element width. This new polyfill looks decent since it covers things like CSS. px() and handles the unit conversion without all that regex mess.> const opacity = styles. getPropertyValue('opacity');
> console.log(typeof opacity); // String?
It's good that it includes the color subclasses too, but I'm curious if there's any major performance hit when it has to tokenize everything in the background.
https://www.bram.us/2026/10/13/introducing-css-typed-om-a-complete-and-wpt-tested-polyfill-for-css-typed-om/
R: 3 / I: 1
>
don't call it utility-first when it's just magic numbers scattered everywhere. anyone else just giving up and using plain css for anything complex?
tailwind arbitrary values are just lazy
it's basically just writing inline styles but with more friction. if you're doing this for something that isn't a one-off hack, you're making the config unreadable.>
text-[#f0f0f0]mt-[13px]don't call it utility-first when it's just magic numbers scattered everywhere. anyone else just giving up and using plain css for anything complex?
R: 3 / I: 2
tbh the compiler errors are way too vague about where the interpolation failed
sass variable interpolation is such a headache
was trying to dynamically build a class name using a loop but forgot that you can't just drop the variable in there without the #{} syntax. it's so easy to mess up when you're rushing through a stylesheet. honestly just use css variables if you don't want to deal with this nonsense.theme-#{$color} {background: $color;}tbh the compiler errors are way too vague about where the interpolation failed
R: 2 / I: 1
makes the actual component files so much cleaner without all thatbloat extra logic **and i stopped forgetting my map keys
sass map-get is way too much typing for simple lookups
been messing with some nested color themes and realized i'm just wasting time manually digging through maps when i could use a simple loop to flatten them into utility classes instead of using 'map-get' every single time. it's way easier to just iterate once and generate the whole set at the start of my build.@each $name, $color in $theme {.text-#{$name} {color: $color;}}makes the actual component files so much cleaner without all that
R: 2 / I: 1
at least we have overflow: hidden to hide the mess
aspect-ratio on flex items is breaking my layout
tried to use aspect-ratio: 1/1 on some flex items today and it just nuked the height of everything in the container. works fine when they're in a grid but flexbox behaves like it's from 2010 whenever you try to be clever. honestly just use grid if you want things to actually behave.at least we have overflow: hidden to hide the mess
R: 0 / I: 0
im tired of seeing devs ignore security risks because some bot is busy arguing about variable names. if the thing isnt checking for sql injection or flagging missing tests on hot paths, its basically useless noise. im skeptical about how much context you actually need to feed a prompt before it starts hallucinating style preferences again.
article: https://dev.to/ayraix/ai-code-review-that-actually-helps-instead-of-nitpicking-506i
ai code review bots are just glorified linters if you do it wrong
>Developers had muted it.im tired of seeing devs ignore security risks because some bot is busy arguing about variable names. if the thing isnt checking for sql injection or flagging missing tests on hot paths, its basically useless noise. im skeptical about how much context you actually need to feed a prompt before it starts hallucinating style preferences again.
article: https://dev.to/ayraix/ai-code-review-that-actually-helps-instead-of-nitpicking-506i
R: 1 / I: 0
>it looks so much smoother
makes the element feelflat tactile without adding extra pixels to the layout box. does anyone else still bother with borders for this?
inset box shadows for depth
i've stopped using separate borders for that pressed look on buttons. it's way cleaner to just use an inset shadow with a tiny offset instead of messing with border-width or padding.>it looks so much smoother
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
makes the element feel
R: 0 / I: 0 permanent systemic without more data.
subgrid support in safari
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.parent {display: grid;}.child {display: grid;grid-template-rows: subgrid;} 
R: 0 / I: 0
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.
tailwind arbitrary aspect ratio values
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.
R: 3 / I: 2
>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.
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?
grid-template-rows with auto-fit is acting weird
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?
R: 0 / I: 0
it's driving me insane. anyone found a fix that doesn't tank the subpixel rendering?
tailwind scale-105 animation jitter
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?
R: 3 / I: 1
article: https://polypane.app/blog/css-only-floating-focus-with-anchor-positioning/
anchor positioning for focus tracking
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/
R: 0 / I: 0
tried setting flex-grow: 1 on the parent but now everything just stretches weirdly.
align-self on flex items with auto margins
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.
R: 3 / I: 0
gap property for flexbox margins
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;} 
R: 3 / I: 1 nice annoying because it makes the edges look weird if your blur radius is too high. i saw this snippet for a button state:
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/
making buttons look 3d with inset shadows
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 isbutton: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/
R: 1 / I: 0
link: https://dev.to/greatness_10xxx7/essential-dom-manipulation-techniques-for-dynamic-web-applications-a7f
documentfragment for batching updates
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
R: 3 / I: 1
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 doingvoodoo 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/
tan(atan2()) is such a cursed way to do math
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
https://blog.master.dev/fallbacks-for-css-progress/
R: 3 / I: 1
>Detect when elements overlap with CSS
it's honestlyabout 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
detecting element overlap with css
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
https://piccalil.li/the-index/200/?ref=main-rss-feed
R: 0 / I: 0 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.
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.
tailwind container padding issues
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 basicallytheme: {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.
R: 0 / I: 0
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?
tailwind configuration for arbitrary values is a mess
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?
R: 0 / I: 0
grid track sizing with minmax
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.
R: 3 / I: 1
more here: https://polypane.app/blog/understanding-the-fundamentals-of-css-layout/
whitespace collapse is finally coming
been thinking about that old hack where you set font-size to 0 just to kill the gaps between inline-blocks. it's so annoying to maintain. seeing white-space-collapse: discard mentioned as a future thing makes me wonder if we can actually stop messing with margin behavior and negative margins for every little layout tweak. i'm still struggling with finding the offset parent when things get nested too deep. honestly, the whole normal flow stuff is such a headache once you start adding absolute positioning into the mix. does anyone actually use the font-size: 0 trick anymore or is it just dead?more here: https://polypane.app/blog/understanding-the-fundamentals-of-css-layout/
R: 2 / I: 0
>button:focus, a:focus {
/Highlighting on focus/
}
it's kind of a hacky workaround though. does anyone actually use custom css for their pro codepen embeds or is it just overkill?
full read: https://www.matuzo.at/blog/improving-the-keyboard-accessibility-of-codepen-embeds
codepen embeds are such a mess for focus states
finally found a way to stop those embedded pens from being invisible when tabbing through. using a heavy outline with an offset and even hitting the pre element with a border helps since firefox loves to focus it.>button:focus, a:focus {
/Highlighting on focus/
outline: 5px solid #f23c50;
outline-offset: 2px;
transform: rotate(0);
}
it's kind of a hacky workaround though. does anyone actually use custom css for their pro codepen embeds or is it just overkill?
full read: https://www.matuzo.at/blog/improving-the-keyboard-accessibility-of-codepen-embeds
R: 1 / I: 1
article: https://www.bram.us/2026/08/27/feature-detecting-undetectable-css-features-with-supports-named-feature/
finally some relief for flexbox gap detection
it's such a headache trying to figure out if properties actually work together since checking display flex and gap separately just tells you they're parseable without confirming the actual effect. i wonder if using named-feature will actually stop us from having to write those weird hacks for when implementations overlap.article: https://www.bram.us/2026/08/27/feature-detecting-undetectable-css-features-with-supports-named-feature/
R: 1 / I: 0
https://www.matuzo.at/blog/the-dark-side-of-the-grid
grid accessibility pitfalls
been thinking way too much about how easy it is to mess up semantics when using grid. i was just messing around with some new layouts and realized how quickly you can totally break the tab order if you start playing with visual placement. it's such a trap for accessibility, especially since we're so used to just letting the browser handle things. definitely makes me second-guess my more complex templates.https://www.matuzo.at/blog/the-dark-side-of-the-grid
R: 3 / I: 1
found this here: https://www.bram.us/2026/08/20/the-future-of-css-target-multiple-classes-with-the-class-prefix-selector/
prefix selectors might actually save us from attribute selector hell
finally someone's fixing those slow class=" btn-" hacks that absolutely tank performance. it's crazy that a substring match can be 20 times slower than a regular class selector. i'm hoping. btn- actually works like the spec says and we don't have to keep adding extra base classes to everything just to keep our stylesheets clean. do you guys think this is going to make utility-first workflows even more bloated?found this here: https://www.bram.us/2026/08/20/the-future-of-css-target-multiple-classes-with-the-class-prefix-selector/
R: 0 / I: 0 perfect a total nightmare for typographic consistency.
I ended up just reverting to manual margins like it's 2014.
subgrid is making my font-size hierarchy look terrible
I've been trying to use subgrid for this complex card layout but it's completely breaking my vertical rhythm. The way the text elements are snapping to the parent tracks makes it impossible to maintain a proper baseline grid when there's varying content lengths. It's.card {display: grid;grid-template-rows: subgrid;}I ended up just reverting to manual margins like it's 2014.
R: 2 / I: 2 clunky too busy.
>not the easiest concepts to illustrate as simply as this!
It's nice to see something that doesn't rely on heavy math or complex vectors for once. my eyes are bleeding from too many bezier curves
article: https://blog.master.dev/code-snacks/
lauren basser's animations are actually pretty slick
Saw those 'code snacks' earlier and the shadow DOM one is actually great for visualizing the hierarchy. It's way better than trying to explain it with just text or a messy diagram. I'm still not 100% sold on how they handled the working directory animation though, looks a bit>not the easiest concepts to illustrate as simply as this!
It's nice to see something that doesn't rely on heavy math or complex vectors for once. my eyes are bleeding from too many bezier curves
article: https://blog.master.dev/code-snacks/
R: 3 / I: 1
>I don't want to think about Likes, man.
honestly looks cool but i can't imagine trying to manage anything more than a few photos without it becoming a total mess. anyone tried using 11ty with that image plugin yet?
https://robinrendle.com/notes/v19/
personal ide site is getting weird
the new v19 update is basically just an ide now with folders and file navigation. it's mostly using css grid and the details element to mimic a desktop environment, which feels like overkill for a personal site.>I don't want to think about Likes, man.
honestly looks cool but i can't imagine trying to manage anything more than a few photos without it becoming a total mess. anyone tried using 11ty with that image plugin yet?
https://robinrendle.com/notes/v19/
R: 3 / I: 0
article: https://polypane.app/blog/experimenting-with-the-new-pure-css-random-function/
css random function is wild
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/
R: 0 / I: 0 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/
ie8 gradients are actually easier than i thought
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 onhttps://lea.verou.me/2009/03/css3-colors-today-mediacampathens-session/
R: 0 / I: 0
https://lea.verou.me/2009/03/check-whether-the-browser-supports-rgba-and-other-css3-values/
checking rgba support with js
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/
R: 3 / I: 3
link: https://lea.verou.me/2009/02/css3-border-radius-today/
border-radius clipping is still such a pain
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/
R: 0 / I: 0
tailwind arbitrary values are getting out of control
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?
R: 3 / I: 1
tailwind config vs arbitrary values for aspect ratio
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?
R: 3 / I: 1
more here: https://piccalil.li/blog/stop-buttons-triggering-zoom-when-theyre-double-tapped/?ref=main-rss-feed
ios safari zoom annoyance
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
R: 3 / I: 1
anyone still using negative margins for this?
flexbox gap for single row items
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?
R: 0 / I: 0
>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/
shadow-piercing component variables are annoying
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/
R: 3 / I: 2
>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/
polypane cheatsheets are actually decent
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/
R: 3 / I: 0
seems fine for old stuff but i don't see how this helps with modern feature detection. anyone still checking for -moz-opacity or anything like that?
https://lea.verou.me/2009/02/check-if-a-css-property-is-supported/
checking property support with js
don't use document. body for this because it might not even be loaded yet. using 'head' or a script tag is much safer since they're always there. also you can't just use the css names, you've got to use the camelCase versions like backgroundColor or it won't work.function isPropertySupported(property) { return property in document.head.style;}seems fine for old stuff but i don't see how this helps with modern feature detection. anyone still checking for -moz-opacity or anything like that?
https://lea.verou.me/2009/02/check-if-a-css-property-is-supported/
R: 2 / I: 1
>Because anchor names are by default global, they need to be scoped to a specific cell's subtree.
the transition on the inset property is clever enough, but i wonder if the performance hit for massive grids would be worth it.
anyone tried this on a production site yet?
link: https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/
anchor positioning for grid animations
using anchor names globally sounds like a nightmare for any real project. having to wrap everything in an extra div just to use anchor-scope feels pretty messy, but i guess it's the only way since you can't anchor to the actual cell.>Because anchor names are by default global, they need to be scoped to a specific cell's subtree.
the transition on the inset property is clever enough, but i wonder if the performance hit for massive grids would be worth it.
.cell { anchor-scope: --a; anchor-name: --a;}.content { position-anchor: --a; inset: anchor(inside);}anyone tried this on a production site yet?
link: https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/
R: 0 / I: 0
>the idea is to give us control: developers draw the target area around elements without effecting the surrounding elements or forcing us to make all those gnarly layout hacks.
It'd be so much cleaner than my current mess of absolute positioning and negative margins. If pointer-box-offset: 0.5rem; actually works without breaking my font kerning or line-height, I'm sold. Still skeptical about how it handles overlapping elements though. It sounds almost too good to be true for fixing those tiny sidebar arrows.
more here: https://robinrendle.com/notes/pointer-box-offset/
pointer-box-offset is actually kind of genius
Finally, something to stop me from having to mess with padding just to fix tiny hit targets on icons. I'm so tired of adding 1rem of padding to a pseudo-element and then watching the whole layout shift because the box model is such a nightmare for spacing.>the idea is to give us control: developers draw the target area around elements without effecting the surrounding elements or forcing us to make all those gnarly layout hacks.
It'd be so much cleaner than my current mess of absolute positioning and negative margins. If pointer-box-offset: 0.5rem; actually works without breaking my font kerning or line-height, I'm sold. Still skeptical about how it handles overlapping elements though. It sounds almost too good to be true for fixing those tiny sidebar arrows.
more here: https://robinrendle.com/notes/pointer-box-offset/
R: 2 / I: 1
>It essentially makes even padding on an element (like a button) doable without magic numbers
Temani's tool looks useful, but I'm wondering if it'll be a headache to manage forevery all our custom font weights.
https://blog.master.dev/better-centering-with-css-text-box/
text-box properties for button padding
Finally getting rid of those magic numbers for vertical padding on buttons.>It essentially makes even padding on an element (like a button) doable without magic numbers
Temani's tool looks useful, but I'm wondering if it'll be a headache to manage for
https://blog.master.dev/better-centering-with-css-text-box/
R: 0 / I: 0
>I'm not going to keep my knowledge to myself.
it's basically just a list of interesting facts and updates to the spec. i've seen most of this before but there might be some useful tricks tucked in here if you have time. still can't believe people are still finding new things to talk about with something this old. does anyone actually use these workshop notes for anything besides a quick ref?
link: https://www.matuzo.at/blog/another-collection-of-interesting-facts-about-css-grid-layout
more grid trivia for the pile
found some more random stuff about grid layout while scrolling. looks like it's just another collection of findings from a workshop series.>I'm not going to keep my knowledge to myself.
it's basically just a list of interesting facts and updates to the spec. i've seen most of this before but there might be some useful tricks tucked in here if you have time. still can't believe people are still finding new things to talk about with something this old. does anyone actually use these workshop notes for anything besides a quick ref?
link: https://www.matuzo.at/blog/another-collection-of-interesting-facts-about-css-grid-layout
R: 1 / I: 0
> many of us are using them wrong
It feels like we're still stuck in that mindset where everything is tied to the viewport. I'm still mostly just using @media for my layout breaks.
link: https://smashingmagazine.com/2026/09/stop-treating-css-container-queries-traditional-media-queries/
container queries aren't being used right
I was just reading about how only 41.4% of us are actually using container queries despite the high awareness. People keep trying to treat them exactly like media queries instead of focusing on the component size itself.> many of us are using them wrong
It feels like we're still stuck in that mindset where everything is tied to the viewport. I'm still mostly just using @media for my layout breaks.
link: https://smashingmagazine.com/2026/09/stop-treating-css-container-queries-traditional-media-queries/