[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

File: 1791997894397.jpg (143.76 KB, 1024x1024, img_1791997886889_ri7cfkif.jpg)ImgOps Exif Google Yandex

2e83d No.2325[Reply]

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/

2e83d No.2335

>>2325
>without a single line of JavaScript

I just tried this on a documentation site I'm rebuilding and it's pretty much magic. The container sizing was a bit wonky at first because of some weird padding, but once I fixed the overflow, the whole thing worked.



File: 1792120435945.jpg (229.17 KB, 1024x1024, img_1792120426837_ygk69joz.jpg)ImgOps Exif Google Yandex

36dab No.2332[Reply]

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?


File: 1791709857112.jpg (50.33 KB, 1024x1024, img_1791709848921_y0zhg816.jpg)ImgOps Exif Google Yandex

7c0ad No.2304[Reply]

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 ⚠ performance logic.

transition:opacity 0.3s ease,transform 0.3s ease;

7c0ad No.2310

>>2304
>performance logic

I had a designer at my last gig who insisted on this exact mess for every single hover state in the nav. It made the codebase look like a total disaster and honestly, the way they were stacking properties felt so heavy. Just use all keyword if you're going to be lazy with it.

7c0ad No.2326

>>2304
>Just use all keyword if you're going to be lazy with it.
had a dev do this for a whole landing page once and the recalc style time was killing me on mobile because they were animating like twenty different properties individually

7c0ad No.2330

File: 1792062864744.jpg (215.18 KB, 1024x1024, img_1792062850088_vafgqksx.jpg)ImgOps Exif Google Yandex

>>2326
>the recalc style time was killing me on mobile
recalc style doesn't even touch those properties though. if you're animating opacity and transform you're already on the compositor thread so it shouldn't matter how many you list.



File: 1791587650532.jpg (185.42 KB, 1024x1024, img_1791587642091_jmbree16.jpg)ImgOps Exif Google Yandex

9a6cd No.2296[Reply]

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/

9a6cd No.2319

>>2296
calling that a 'database-query engine' is such a stretch. it's just clever use of checkboxes and sibling selectors to toggle visibility for certain elements. anyone with a basic grasp of the
inputtype="checkbox":checked ~. data
logic can see it's just fancy state management, not actual data processing. why do people act like we've invented something new every time someone finds a way to use :has()?

9a6cd No.2328

>>2319 calling it fancy state management misses how much logic is actually being handled by the selectors. you'd expect a proper sql parser if we were talking real databases, but the way it mimics relational filtering is still pretty impressive tbh.



File: 1791838895848.jpg (223.64 KB, 1024x1024, img_1791838886758_towwu92n.jpg)ImgOps Exif Google Yandex

4447d No.2311[Reply]

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

4447d No.2323

>>2311
>it forces the browser to ignore the initial content size

did this same thing on a dashboard build last month because the user names were all different lengths. it saved me from having to manually set widths for every single profile widget. was losing my mind

4447d No.2324

>>2311
>it forces the browser to ignore the initial content size

setting it to 0 breaks things if you have long words or huge images that need more room. i usually just use
min-width: 0
with auto instead so nothing gets squished weirdly. its much safer for responsive stuff.

4447d No.2327

File: 1791999245856.jpg (197.52 KB, 1024x1024, img_1791999230317_16ur8e0e.jpg)ImgOps Exif Google Yandex

>>2324
>i usually just usemin-width: 0with auto instead
just use
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
for the grid container so you dont even have to mess with flex properties on the items.



File: 1791961207215.jpg (219.78 KB, 1024x1024, img_1791961198748_isdmech7.jpg)ImgOps Exif Google Yandex

cd1da No.2322[Reply]

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/


File: 1791673159600.jpg (171.06 KB, 1024x1024, img_1791673150746_te61uu1r.jpg)ImgOps Exif Google Yandex

d3469 No.2302[Reply]

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?

d3469 No.2313

>>2302
The magic numbers aren't the problem if you actually define a design system for them first. I'm fine with arbitrary values when I'm just tweaking a margin, but anything that needs to be consistent should definitely be in the theme config.

d3469 No.2320

File: 1791941465012.jpg (280.88 KB, 1024x1024, img_1791941449359_yzh4nbtj.jpg)ImgOps Exif Google Yandex

>>2302
I had this same meltdown on a landing page last week because the designer sent over a Figma file with totally random pixel values for every single padding. I tried using Tailwind Config to map them all but it was just a nightmare of renaming variables. Ended up just sticking to some standard classes and letting the edges be slightly off spoilerit actually looks better

d3469 No.2321

>>2320 I wouldn't just let the edges be off, you should probably just use a global CSS file for those weird padding values so they at least stay consistent across the whole site. the designer will never notice anyway



File: 1791507938847.jpg (188.52 KB, 1024x1024, img_1791507929984_0x4xdjh0.jpg)ImgOps Exif Google Yandex

a9781 No.2289[Reply]

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

a9781 No.2307

>>2289
>just use css variables if you don't want to deal with this nonsense

I spent two hours debugging a broken grid layout on a client project last week because I missed that exact syntax in a nested loop. Everything looked fine until the build failed and gave me some garbage error about an undefined property. It's such a total time sink when you're just trying to finish a quick component.
I ended up deleting the whole scss file and rewriting it in plain css

a9781 No.2309

File: 1791797242196.jpg (194.9 KB, 1024x1024, img_1791797227363_7s7amul0.jpg)ImgOps Exif Google Yandex

>>2307
>Everything looked fine until the build failed and gave me a garbage error about an undefined property.

sass errors are basically just vague riddles __designed to ruin your afternoon_

a9781 No.2318

File: 1791927487169.jpg (168.25 KB, 1024x1024, img_1791927471611_tfhmk5u4.jpg)ImgOps Exif Google Yandex

>>2309
They really are. I still find myself staring at a screen for ten minutes wondering why my loop is suddenly broken.



File: 1791465352298.jpg (153.97 KB, 1024x1024, img_1791465343089_xdlcuq7w.jpg)ImgOps Exif Google Yandex

6458f No.2287[Reply]

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 bloat extra logic **and i stopped forgetting my map keys

6458f No.2303

File: 1791703776665.jpg (278.15 KB, 1024x1024, img_1791703760575_me8jytng.jpg)ImgOps Exif Google Yandex

>>2287
I did this exact same thing on a huge branding project last month because my client kept changing their primary brand colors every week. Manually updating map-get calls across fifty different component files was driving me insane and making the stylesheets look like total garbage. Now I just let the loop handle the heavy lifting so I can focus on fixing the kerning in the headers instead of debugging broken variable names.

6458f No.2317

>>2303
>Manually updating map-get calls across fifty different component files was driving me insane
died a little watching you struggle with that. just use css variables and call it a day.



File: 1791385696648.jpg (160.93 KB, 1024x1024, img_1791385688772_j31287a1.jpg)ImgOps Exif Google Yandex

76490 No.2283[Reply]

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

76490 No.2297

File: 1791588228262.jpg (249.87 KB, 1024x1024, img_1791588212139_3kk1gmz0.jpg)ImgOps Exif Google Yandex

>>2283
>works fine when they're in a grid

Did you check if you have any flex-basis or min-height settings interfering with the calculation? I've seen it happen when someone forgets that flex items default to auto and just stretch everything into a mess.

it's always the min-height for me

76490 No.2316

>>2297
>I've seen it happen when someone forgets that flex items default to auto and just stretch everything into a mess.

The default stretch is usually fine, but the real headache is usually
min-width: 0
on those items. I just ran into this while messing with some new card components and they kept expanding past their container boundaries until I fixed it. it's always that one missing property



Delete Post [ ]
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]
| Catalog
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]