|
36 posts total
12
 I wrote a new article: “Indirect Cyclic Conditions: Prototyping Parametrized CSS Mixins” https://kizu.dev/indirect-cyclic-conditions/ In my quest to push forward what is possible with custom properties in #CSS, I discovered another application of cyclic dependencies. Combined with a prior technique based on custom cascade layers, we are now even closer to something that resembles native CSS mixins.  #CSS color what's the difference between adjusting lightness, adding white, and adding black? feel it out, here in this Codepen column @argyleink The mix-solution gets rid of chroma "for free", but you don't control the curve! Relatedly, I wish you could do stuff like `calc(sin(l * pi) * c)` in rcs, but this crashes the browser😅. However it works fine if "l" is replaced with an external var(--l) 🤷 Putting AI in your product? You're gonna need #CSS gradient text animations (if you want to be cool) So here, a recipe!  @argyleink surprise surprise, it doesn’t work on iOS Safari. 🙄 Really cool effect when it does work though. 😊 5 #CSS snippets every front-end developer should know in 2024 I wrote it earlier this year; https://nerdy.dev/5-css-snippets-every-front-end-developer-should-know-in-2024 Wildest #CSS media query I've written in a while `@container (inline-size >= calc(100cqi - 120px))` yep, `calc()` in a MQ! WHY? Video: https://nerdy.dev/carousel-adaptive-anchor-positioning-with-calc-in-a-container-query Safari Technology Preview 210 has some nice features: - `::details-content` (see https://developer.chrome.com/blog/styling-details) - Preview support for Scroll-Driven Animations (see https://scroll-driven-animations.style/) This is only a personal selection. Full changelog: https://webkit.org/blog/16406/release-notes-for-safari-technology-preview-210/  @DavidDarnes @noleli everyone needs a shit-hot design engineer but nobody wants to pay for one 🔥 Remember Internet Explorer’s Page Transitions? THEY’RE BACK BABY! 👾 Demo: https://ie-page-transitions.netlify.app/ To configure these, use the meta tags from the olden days + load up the library. Works in IE 5.5–7.0, Chrome 126+, and Safari 18.2 (buggy).
Show previous comments
CSS Wrapped 2024 is here! Just like last year, we – the Chrome DevRel team – have published CSS Wrapped, our end of year overview covering many of the new #CSS and Web UI features that landed in Chrome and The Web Platform in 2024. 👉 https://chrome.dev/css-wrapped-2024/ is the place to be! Do you ever use CSS Scroll Snap? It's awesome, and there's even a Level 2 version of the spec coming with a `:snapped` pseudo selector and `scrollsnapchange` and `scrollsnapchanging` events. 🎉 Have you tried it on the <html> element though? It should work, but there's a host of issues. Todays wish is for Safari to improve support for CSS Scroll Snap on the <html> element. https://johannesodland.github.io/2024/12/14/web-wish-14-scroll-snapping-in-the-viewport.html 🎁 Psst... Day 1 is tomorrow (or perhaps later today? Timezones and such)! Tell your friends!   @argyleink @fcalderan finally! Is it a chrome only feature or other browsers plan to implement it too?  @argyleink Throughout these 7 years #Google has killed 147 products and services: https://killedbygoogle.com 😞 UI Workshop ✅ scroll driven animations https://nerdy.dev/i-put-a-workshop-on-chrome-developers-youtube @argyleink I was just re-reading the MDN docs on why there will not be CSS4… what’s changed? “There will never be a CSS3 or a CSS4; rather, everything is now just "CSS" with individual CSS modules having version numbers.”  proposed a #CSS `scroll-state` query for easily knowing which direction the user is scrolling want it? **give it a vote or comment!** 12
|
Gregory's Server
@kizu Thanks! What a xmas gift! Looking forward to explore your techniques in the coming days. ”Please do not apply this technique in production“ – well… we'll see about that 😅
@kizu this is so cool! a third of the way into your article, i was already thinking about the ways it could be used in production. and then that Firefox bug had to be there 😔
thank you for all the work you put into this!
@kizu Okay I had to read the examples a couple times but now I understand it (the quote from the spec helped — who'd have thought! :D). This is really, really clever, and interesting. Thank you for sharing, and happy holidays!