Diagram illustrating the CSS clamp function with examples of minimum, preferred, and maximum sizes across different screen widths.
Do you need 5 media queries to make your font look good depending on screen width?
One line of CSS is all you need:
font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
CSS is declarative. You describe intent. The browser negotiates the result.
That's why centering a div can feel unreliable — you're not giving instructions, you're making a suggestion.
#css #webdev #frontend
We relied on JavaScript for styling, layout, and state management because CSS couldn’t keep up. But CSS has evolved (fast). It’s finally time to drop the hacks and let CSS do the job it was meant to do.
youtu.be/GTCJ082hj-w
Two website designs show a fixed header. One lacks scroll-margin-top, causing overlap; the other adjusts spacing with it, preventing overlap.
Ever had such an issue when your sticky header covers anchor headings?
An easy fix is: scroll-margin-top
The early days of the world wide web were wild times, filled with gaudy colors and blink and marquee tags. Everything was positioned using creative employments of table tags. CSS and Javascript were just fantastical dreams. And ads... The complete and utter lack of ads.... It was glorious.
The Different Ways to Select “<html>” in CSS, by @dxnny.fun (@csstricks@mastodon.social):
https://css-tricks.com/the-different-ways-to-select-html-in-css/
#html #css #selectors
How many ways can you select <html> in CSS? @dxnny.fun says “challenge accepted” building off an exercise @css-only.dev did a little while back.
css-tricks.com/the-differen...
css-tip.com/root-selecto...
A bright red-orange background. Falling from the sky like a safe tossed off a skyscraper is a large, brass-colored cube that looks like it is made of metal or stone. Embossed on the slightly cracked front is a chunky question mark with four bolts around it, like the question boxes in the Mario universe. It is, judging from the size of the person running away from its anticipated point of impact, the size of a small house. The painting is signed "Chris Silverman".
#notesArt
🦖 skew()
✅ Widely available (from Jul 2015)
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/transform-function/skew
The skew() CSS function defines a transformation that skews an element on the 2D plane. Its result is a <transform-function> data type.
#webdev #CSS
CSS3 is when I stopped paying attention to CSS, and now I find out CSS5 supports insane things like if statements, variables, and calc()?!??
Bro why does my stylesheet parser have to be TURING-FUCKING-COMPLETE???
I feel like such a genius every time I pull off a neat hack with :has(). Especially if it targets an element in the DOM hierarchy that would have been previously inaccessible with CSS alone.
I love CSS.
team i'm FIRED UP about these gnarly gotchas with Anchor Positioning in CSS.
If Christopher Nolan was a developer
🎮 Game developers, we heard your feedback and we’ve added a complete game input icon set from @kenney.nl including the brand-new Switch 2 console icons. Find them all in the app!
Screenshot of two cards. The first one has some wavy lines.
A little something I coded a while back on @codepen.io.
The wavy lines are #CSS gradient lines, distorted with an #SVG #filter.
codepen.io/thebabydino/...
Chrome only. You can find the Firefox & Safari bugs in description.
Safari Technology Preview 238
- #css :open pseudo-class
- #html customizable <select> element 🎉
And more
Today, I learned about the `::part()` pseudo-element! I'm surprised to see it's baseline widely available, because I've poked around web components before, and I don't remember seeing this.
developer.mozilla.org/en-US/docs/W...
Bramus standing in front of a slide from his talk that says “But what about the little triangle?”
Bramus kicked us off with a dive into CSS anchor positioning. Any time I drop into this spec I learn something new about it. I had no idea you could animate them! #SotB26
Modern CSS is just lovely. Theme switcher with a single <html> data attribute to ideate on variations during prototyping, nice color spaces and maths, layouts and smooth animation and even transitions. Love it.
CSS is getting native randomness 🎲
random() and random-item() are coming with:
- per-element randomness
- step-based ranges
- shared value options
- zero JS required
I wrote an overview of the feature, how it works, and what browsers support it.
alvaromontoro.com/blog/68092/n...
#css #webdev
One thing I didn't mention in my talk is border-shape, which will be the solution for this in the future.
It's still early stage, though. Also needs anchored queries.
bsky.app/profile/una....
No help because of browser support, like you said, but here's my take on it codepen.io/mrdanielschw...
CSS shape() landed in Firefox 148. It's similar to path(), but allows the full expressiveness of CSS…
Potentially Coming to a Browser “:near()” You, by @dxnny.fun (@csstricks@mastodon.social):
https://css-tricks.com/potentially-coming-to-a-browser-near-you/
#css #functions
You've got 99 problems but not getting the latest CSS news ain't one
Thank you both for mentioning all of this!
Ultimately, I think this is the best approach codepen.io/mrdanielschw...
A scale.xs number design token in Penpot, with the value of round({base} * pow({multiplier}, -1)).
Incredible. This is such serendipitous timing too. Look what I discovered works in @penpot.app last week…
🎉 New Blogpost 🎉
Building Typographic Scales in CSS with :heading(), sibling-index(), and pow()
www.alwaystwisted.com/articles/bui...
What if we could create a typographic scale for headings with one line of CSS?
One rule to scale them all.
#CSS #FrontEnd #WebDev
