https://t.co/c1J30DDuxt

You won’t need to use display grid/flex for align-content anymore 🙂 That means you can be more intentional with the layout algorithm and avoid unintended side effects when you just want this centering feature

This is amazing → https://t.co/PgCBx2jqPE An AI emoji generator, built by @pondorasti using @nextjs, @replicate, and @vercel ▲ 100% free & open-source too 🤩

You can prevent layout shift from numbers by using tabular numbers in CSS which uses numbers of the same size supported by most fonts. 🔥

🧵 The H/1-liness of H/2 I’ve been asked a few times—mostly in workshops—why H/2 waterfalls often still look like H/1. Things are done in sequence rather than in parallel. Let’s unpack it!

✍️ Conditional CSS with :has and :nth-last-child A modern look at how to combine CSS :has, :nth-last-child, and style queries to create dynamic components. https://t.co/GDrZ3XPB22

(`line-height` is an inherited prop, so you need to set it on everything:) ```css * { box-sizing: border-box; line-height: calc(1em + 1ex); } ``` Anyway, thinking of this because there’s now a `lh` unit in CSS: * https://t.co/vgFUnCmMNv *

@carneiroDotDev https://t.co/1V3NXtbXOj it is awesome! @excalidraw

`text-wrap: balance` in action 🎬

Future UI && CSS Tip! 🔮 Use anchor positioning to tether an element to multiple anchors 🤓 .link { left: anchor(--a1 center); bottom: anchor(--a2 center); } With some "magic", you could define links and let the browser draw them for you🔥 @CodePen link && expl. below! 👇

Do you know why signals are all the rage now? Solid has them, preact, and now angular is working on them. This is why I think it's the future... https://t.co/yZ7OCOX4Yy

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog https://t.co/vbVw8I1AyE

10 powerful ways to use CSS variables 1. tokens 2. house props 3. adaptive props 4. pseudo-private props 5. partial props 6. mixin props 7. swappy props 8. style query props 9. meta lang props 10. typed props. Oh my! Read all about em here https://t.co/rN0VZ68bqq

CSS Tip! 👀 Create interactions like this with the scroll-linked animations API && scroll-snap 🚀 article { view-timeline-name: --vt inline; } img { animation-delay: cover 40%; animation-end-delay: cover 50%; animation-timeline: --vt; animation: spin; } Exciting! 🔥

Never seen such an example of a table of contents 🤩

CSS Tip! ✨ Trigonometric functions (sin, cos, etc.) are landing in CSS 🙌 Use them in animations & layouts 😯 How about these images laid out along a sine wave using scoped custom properties? img { translate: 0 calc(sin(var(--index) * 50%)); 👈 } @CodePen link below! 👇

11 ways ChatGPT saves me hours of work every day, and why you'll never outcompete those who use AI effectively. A list for those who write code: 1 of 16

CSS Tip! ✨ Use CSS :has() on the :root to check for a condition on the page 🧐 For example, this pure CSS Minesweeper game 🤯 :root:has([id*="bomb"]:checked) body { --show-fail: 1; } If a bomb gets :checked, game over! 😭 @CodePen link below! 👇

Modals UX.👇🏽 Not many people like modals. They are disruptive, annoying and require immediate attention. Users dismiss them immediately, often before even realizing what they are all about. So how do we fix that?

Future CSS Tip! 🔮 Combine scoped custom properties with the scroll-linked animations API 🔥 .blind{ animation:open; animation-timeline:scroll(root);👈 } keyframes open{ to{translate: 0 calc(var(--i) * -100%);}👈 } Love using this meme for demos 😅 @CodePen link below! 👇