I can't stop thinking about Rekindle (the website in the image) and e-ink optimization. I think it's because, honestly, it'd just be awesome if all websites looked like that (with color of course). Simplicity and web perf FTW! Anyway, go read What's !important #10! 🤘

Although we've done so much great stuff with clients over the years, our proudest achievement here in the studio is @piccalil.li by a long shot set.studio

Wrapping my brain around @layer! Somehow I missed this "new" CSS rule (introduced in 2022).

Alternatives to the !important Keyword: "Cascade layers, specificity tricks, smarter ordering, and even some clever selector hacks can often replace !important with something cleaner, more predictable, and far less embarrassing to explain to your future self." #CSS css-tricks.com/alternatives...

And since sign() has a good support you can replace your first clamp() with: --cmp: sign(var(--left) - var(--right));

And is it even possible for CSS if() to compare two numbers? Seems not. color: if(sibling-count() <= var(--comp): red); (--comp is a number)

Using CSS to accomplish weird outcomes is fun. 😎

100% CSS repeat() function codepen.io/propjockey/p... Repeat anything, strings, sets of animation properties to help manage parallel array properties, calc() partials, polygon partials, shape partials, text-shadows, anything!

I'm not a CSS expert, but expert CSS educators are my favorite. Their design skills, ability to take full advantage of the web platform, AND general enthusiasm for building for the web is unmatched by other types of developers!

Now it's lazy and bouncy! 😆 Demo: codepen.io/t_afif/full/... via @codepen.io Too much bouncing? Well, drag it slowly! 🫠 cc @bram.us

CSS random() and random-item() are almost here. In this @css-tricks.com's article, I explore the challenges of achieving randomness in CSS, the evolution of solutions over time, and the significance of the new native random functions. Just a random article to read 😅 css-tricks.com/the-importan...

Today's lunch video is "Dos & Don’ts of Anchor Positioning" - "New resources to make #CSS Anchor Positioning easier, and some demos to help you understand how anchor positioning works. We'll also look at what new capabilities are in the pipeline." www.youtube.com/watch?v=OEvV...

🆕 On the blog: How I built @calibreapp.com's new dynamic hexagonal world map, in just 10kb. calibreapp.com/blog/buildin...

CSS tip: make sure that selected text remains readable. Style `::selection` to at least disable text effects like drop shadows, gradient fills, etc. A decent chunk of your users treat text selection as a reading aid, highlighting words or paragraphs to keep track of their position in the text.

CSS's light-dark() now accepts images, making it simpler to define alternate values for a dark color scheme. Here's how it works:

2 things about @kevinpowell.co's new CSS Demystified course. 1. I was terrified of layers and the course gives a great intro. No longer terrified. 2. His joy and excitement are contagious -- an instant mood lifter every lesson. For anyone learning CSS: courses.thecascade.dev

TIL! Who knew you could change the "src" of an #html <img> using #css: img { content: url(whatever.png) } NO PSEUDOS! https://codepen.io/jon/pen/MYjRQje Seems to work in all current browsers too. How did I miss this?

Web Weekly 190 just went out! 🥂 This one covers `image-set` for backgrounds, Wakamai Fondue v1.0, `field-sizing` for textareas, selects and input fields, CSS quirks in the shadow DOM, and container style queries in Firefox Nightly. Read it online: https://webweekly.email/...

Firefox 150 just landed & includes new web platform features like: 🎉 sizes="auto" on images 🎉 light-dark() image support 🎉 CSS revert-rule 🎉 ariaNotify() 🎉 Media pseudo-classes like :playing None of these are baseline yet, so check MDN for support. developer.mozilla.org/en-US/docs/M...

Genuinely what the internet used to be! We need more of this! I'm doing the same with my site, I've gone back to hand-coding the entire thing using only HTML and CSS, it feels really nice.

Yeah idk what happened but I just learned about this yesterday.

Josh W. Comeau shows how his blog's sticky header effect works using pure CSS blocker elements, no JavaScript needed.

@firefox.com 150 release notes for developers (Stable) 🎉 sizes="auto" on images 🎉 light-dark() image support 🎉 CSS revert-rule 🎉 ariaNotify() 🎉 Media pseudo-classes like :playing I also have a polyfill for the last one :) github.com/schalkneethl... developer.mozilla.org/en-US/docs/M...

Responsive images are tough and often implemented incorrectly. With sizes=auto the browser will figure things out. Chromium supports it, Firefox 150 in two weeks, Webkit in tech preview. I can't wait for this! https://developer.mozill...

The best of the best from the last two weeks, right here 👇

light-dark() isn't just for colors anymore. It now handles: 1. Images 2. Gradients 3. Image-sets And even more. ATTENTION: this is a super new, experimental feature that is not widely supported.

sorry everyone but the bsky outage made me spend the day on Xitter, Mastodon, and Threads so now instead of being a progressive in an echo chamber I'm a Nazi Linux evangelist in a parasocial relationship with a Taco Bell marketing intern.

CSS nesting and `:has()` are two months away from being Baseline Widely Available (i.e. available in Chrome/Edge/Firefox/Safari for 30 months).

The yearly WebAIM report is out and the overall accessibility state of the web is getting worse again. "Home pages with ARIA present had significantly more errors (59.1 on average) than pages without ARIA (42 on average)" Man, this makes me sad. https://webaim.org/proje...

Catch the latest updates in Chrome 147 → goo.gle/4twxerO Learn how to build non-rectangular borders with the CSS border-shape property and nest ongoing view transitions.

A new way to style gaps in CSS  |  Blog  |  Chrome for Developers #css #frontend

Drag and drop added, this time with a bit of random rotate on the picked up elements ☺️

Managing two states in #CSS (a la the Checkbox Hack) is great and all, but using radio buttons for multiple states opens up a bunch more options. Oodles of examples from @amitsheen.bsky.social: css-tricks.com/the-radio-st...

CSS contrast-color is newly baseline, but it falls short in some areas. Here's how it works, and what to look out for:

designers please learn to code. i promise it is not hard unless you try learning it from one of those weird youtube people who make it exponentially more difficult than it needs to be for absolutely no reason. start with basic html and css and you can make your own cool shit in a matter of hours.

Will this help me in my quest to make a six-way triforce switch for image comparison? Maybe...

Poking at the CSS if() Function a Little More: Conditional Color Theming | CSS-Tricks #css #frontend

ok hear me out. If we put a unique `container-name` on the root of all of our components... that's... perfect scoping, via: @container unique-name { button {} .whatever {} } That's platform-level CSS modules. That's the scoping we need! frontendmasters.com/blog/name-on...

After shape() and border-shape, another great feature in the CSS Shape world is on the way. I will be missing all the hacky-gradients-math-stuff I was doing 😅

#css capable of more and more every year. things that were real headaches keep entering the "worth doing and won't cost your sanity" zone of ui ux

Just had an enlightenment about CSS View transitions. They are much more powerful than I thought AND much easier to use! You really only have to give your element a unique view-transition-name. This has to be consistent across all pages the element appears on. That’s it!

Frontend News #22 ❤️ Detect at-rule support in CSS 👉 pointer-box-offset property 🦄 Creative ways are to select the HTML element 😍 x86 CPU architecture in CSS Featuring @bram.us, @robinrendle.bsky.social, @tylersticka.com, @dxnny.fun, @rebane2001.bsky.social. 🙏 cssw.io/frontend-new...

YES. The more CSS and design people I add to the feed, the better it gets. The vibes are immaculate.

bless the CSS people. my tech news feed is all AI but the CSS people are still styling and just doing their thing because its fun and they love it and they make neat things. my heroes.

Your CSS specificity wars are over. @ layer lets you control the cascade without !important hacks. The problem with CSS: Specificity decides what wins.