CSS Weekly #632
📈 The current state of the web
👾 Is Pixel Perfect concept still relevant?
💪 Be more productive in DevTools Elements Panel
🧱 Responsive grid layout transitions

Featuring @httparchive, @amit_sheen, @chriscoyier, @sitnik_en, @leaverou. 🙏

#css #frontend

https://cssw.io/issue-632

Using `autocomplete="username webauthn”` can be enough to trigger the browser’s Conditional UI — focusing this input field opens a dialog that suggests stored passkeys alongside saved passwords.

The `autocomplete="one-time-code"` tells the OS to look for an incoming SMS and offer the code as a keyboard suggestion.

Are you using the HTML autocomplete attribute on fields for 2FA, one-time codes, and web authentication? 🔒

Please do—it massively improves the login UX.

If you want to see what they created, check out CSS Weekly's blog: https://css-weekly.com/blog 😉

My daughter entrusted me to take care of her toy pets while she's at school. Little does she know I have them churning out CSS and DevTools content.

Honestly, they're doing a much better job than AI ever could. 🐇🐈

#css #devtools

[👉 New Quick Tip on the Blog 👈]

How to debug Starting Style at-rule in Chrome DevTools, covering:
🧪 How to test existing transitions
🎨 How to tweak at-starting-style

https://css-weekly.com/how-to-debug-starting-style-at-rule-in-chrome-devtools

Guide to Starting Style at-rule: https://youtu.be/8AmccR91d80

Link to the Starting Style demo: https://codepen.io/ZoranJambor/pen/eYaEwez?editors=0100

Did you know that you can easily debug starting-style CSS at-rules in DevTools? 🏁

In the Elements Panel, find the element where the starting-style is applied, then click on the (starting-style) label to show the values in DevTools. 🔥

Have you already used the Starting Style at-rule?

Thanks so much to Backlog for sponsoring! 🙏

Looking for a Jira alternative your team will actually enjoy? Try Backlog. 👉 https://cssw.io/backlog-jira-alternative

CSS Weekly #631
🔥 Best of CSS in 2025
🧱 CSS Masonry
✂️ Use cases for overflow: clip
👉 Directional CSS with scroll-state(scrolled)

Featuring @Una 2x, @bramus 2x, @rachelandrew, @tunetheweb, @amit_sheen, @Yoav, @jensimmons, @ericwbailey, @w3c. 🙏

https://cssw.io/issue-631

Psst... 🤫

Here's something I've been working on for the past few months—a new home not just for the newsletter, but for all CSS Weekly content, from newsletter issues, videos, quick tips, to blog posts.

What do you think? 🙂

https://css-weekly.com/

I thought about playing with CSS and building some cool demos this weekend, but ended up playing in the snow with my daughter instead, building igloos. ⛄

How is your weekend going? Have you built anything? 🙂

A brief guide to CSS corner-shape property: https://youtu.be/oKcrTBjmOio

Demo on @CodePen: https://codepen.io/ZoranJambor/pen/ogLLLgr

🔥 Mesmerizing Corner Shapes using superellipse()

The corner-shape property is animatable, so you can easily create a mesmerizing scenes (such as this one) by specifying random values for the superellipse() CSS function.

Happy New Year, friends! 🎉

I've been off for a while, but I'm back and ready to dig back into CSS!

Are you excited to see how CSS continues to evolve in 2026, as I am? 🙂

Thanks so much to @certificatesdev for sponsoring! 🙏

Get certified today: https://cssw.io/get-certified-cyber-monday

CSS Weekly #630
🧱 Dive deep into CSS Masonry
🌒 Adjust perceived font weight in dark mode
🔥 Create an adaptive SVG favicon
📰 Use grid-template-areas

Featuring @patrickbrosset, @argyleink, @saronyitbarek, @kevinpowell. 🙏

https://cssw.io/issue-630