---
title: "The State of CSS 2024 results are out"
publication: "Frontend Focus"
issue: 665
published_at: "2024-10-23"
canonical_url: "https://frontendfoc.us/issues/665"
---

Plus the future of CSS, and the future of your CMS? |       

Together with [![Clerk\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_220,h_64/e_make_transparent/co_white,e_outline:5/j3vhv1hnwqeffgkzzlvu.png)](https://go.clerk.com/IXSYRE2)        

🚀 **Frontend** Focus 

#​665 — October 23, 2024 | [Read on the web](https://frontendfoc.us/issues/665)      

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1729686722/svh6vsywdeqgg91jxngf.png)](https://kizu.dev/tree-counting-and-random/)  

[Possible Future CSS: Tree-Counting Functions and Random Values](https://kizu.dev/tree-counting-and-random/) — A look at two possible CSS features ([tree counting functions](https://www.w3.org/TR/css-values-5/#tree-counting) and [randomness](https://www.w3.org/TR/css-values-5/#randomness)) from the Level 5 spec, how we can prototype them now, and a look at what their use cases may be — via interactive demos. 

Roma Komarov   

[How Should `<selectedoption>` Work?](https://jakearchibald.com/2024/how-should-selectedoption-work/) — A new HTML element! We’re getting a way to style and customize `<select>` elements in certain situations, via `<selectedoption>`. But there are concerns on sync and state issues, and Jake seeks feedback on the practicalities of the intended behavior. 

Jake Archibald   [![\](https://copm.s3.amazonaws.com/5d03f17b.png)](https://go.clerk.com/IXSYRE2) 

[Build a Daily Workout Tracker with Clerk, Convex, and Expo](https://go.clerk.com/IXSYRE2) — "Daily Reps" is a workout tracker app to set daily goals & track progress, resetting daily. Built with React Native & Expo, it uses Clerk for user management & Convex for real-time data, offering a powerful cross-platform fitness tracking solution. 

Clerk sponsor   

📊 [The State of CSS 2024 Survey Results](https://2024.stateofcss.com/en-US/) — Sacha Greif notes how 2024 may go down as something of a turning point between classic CSS and ‘new CSS’ — what with the many new features and tooling introduced in recent years now reaching a level of widespread browser support, and more importantly, usage. Lots of interesting data points to dig into here (_shoutout to the 34 people who said they test their sites on a smartwatch_). 

Devographics   

[So, Your CMS Blew Up. Any Decent WordPress Alternatives Out There?](https://tedium.co/2024/10/20/wordpress-cms-alternatives-content-strategy-advice/) — No matter which side of the debate you find yourself, I think it’s fair to say the mess with WordPress has been universally frustrating in some way or another. As such, Ernie — in his typical engaging style — outlines some CMS alternatives that you may at least have on your radar _if_ things go further south. 

Ernie Smith     

⚡️ Quick Links 

- 🎉 [Svelte 5](https://svelte.dev/blog/svelte-5-is-alive), the latest release of the popular, compiled frontend UI framework, has been released.
- 🤖 Opera has [unveiled Opera One R2](https://blogs.opera.com/desktop/2024/10/opera-one-r2-the-best-opera-browser-to-date/), its newest browser oriented around being 'AI-ready'.
- 🦊 [Firefox Nightly will now automatically](https://www.mozilla.org/en-US/firefox/133.0a1/releasenotes/) try to use a secure HTTPS connection whenever possible when loading a page, as it does in private browsing mode.
- 📖 [This encyclopedia of commonly used technical developer terms](https://devpedia.pages.dev/) is a handy glossary, with things explained succinctly.     

📙 **Tutorials, Articles & Opinion** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1729686901/mvmzv3hrnimxhsgie5nc.png)](https://webkit.org/blog/16026/css-masonry-syntax/)  

[Help Choose the Final Syntax for Masonry in CSS](https://webkit.org/blog/16026/css-masonry-syntax/) — The WebKit team shares a detailed update on where the CSS Working Group is at with the planned introduction of masonry-style layout support in CSS. A lengthy post that highlights design principles, performance considerations, complexity concerns, and more (_plus how you can share your thoughts_). 

WebKit   

[Where Web Components Shine](https://daverupert.com/2024/10/super-web-components-sunshine/) — Dave shares a quick-fire list of the specific pros and cons of using web components today — highlighting strengths, such as low memory usage, style encapsulation, and quick prototyping — along with pointing out challenges, including accessibility concerns. 

Dave Rupert   

[Prompt, Run, Edit, and Deploy Full-Stack Web Apps with bolt.new](https://bolt.new/?utm_source=fe_focus&utm_medium=secondary) — StackBlitz recently released in-browser AI web development agent: [bolt.new](https://bolt.new/?utm_source=fe_focus&utm_medium=secondary)! Give it a try today. 

StackBlitz sponsor   

[Smarter than 'Ctrl+F': Linking Directly to Web Page Content](https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html) — A [powerful feature](https://caniuse.com/mdn-html_elements_a_text_fragments) of the modern web platform that allows for precise linking to specific text within a web page without the need to add an anchor. 

Ahmad Alfy   

[CSS `min()` All The Things](https://www.smashingmagazine.com/2024/10/css-min-all-the-things/) — Experimentations with the CSS `min()` function, exploring its flexibility with different units to determine “_if it is the be-all, end-all for responsiveness_”. 

Victor Ayomipo   

[How Microsoft Edge is Replacing React with Web Components](https://thenewstack.io/how-microsoft-edge-is-replacing-react-with-web-components/) — As part of their [WebUI 2.0 project](https://thenewstack.io/from-react-to-html-first-microsoft-edge-debuts-webui-2-0/), the _Edge_ browser team is on a mission to swap out React UI components with native web platform components, largely for performance reasons. 

Richard MacManus (The New Stack)   

[Hyper-Responsive Web Components](https://www.trysmudford.com/blog/hyper-responsive-web-components/) — Dives into the nuance of getting an embeddable call-to-action sign up component working in as many places as possible (_any position, and viewport, any amount of content_). 

Trys Mudford   

▶[Please, Don’t Use Viewport Units for Font Sizes](https://www.youtube.com/watch?v=G1buM51f09s) 
Kevin Powell   

[Practical Accessibility Tips You Can Apply Today](https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/) 
Kevin Andrews  

🔧 **Code, Tools & Resources** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/jdu5wpgkj1d4pvoouuw9.jpg)](https://github.com/Amer-Jabar/khoshnus)  

[Khoshnus: A Library to 'Bring Life' to SVG Text](https://github.com/Amer-Jabar/khoshnus) — A library for ‘bringing life to static text in an artistic way.’ Essentially it takes SVG text and animates it into existence on your page. 

Amer Jabar   [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1729687926/ehggho4ut8eapipe5xyt.png)](https://www.kvin.me/css-springs) 

[CSS Spring Easing Generator: Make Generating Spring Easings More Intuitive](https://www.kvin.me/css-springs) — The tool allows you to customize two main settings: perceptual duration (in milliseconds) and bounce (%). You an also select from three presets and the code is generated as CSS variables for use with CSS animations. 

Kevin Grajeda   

[AuthKit: The World’s Best Login Box — Powered by WorkOS & Radix](https://www.authkit.com/?utm_source=cpff&utm_medium=newsletter&utm_campaign=q32024) — AuthKit is a complete solution for authentication, authorization, and user management. It’s free up to 1 million MAUs and comes standard with RBAC, bot protection, MFA, and more. 

AuthKit sponsor   

[HEX·P3: Quickly Convert HEX Colors to the Display P3 Color Space](https://hexp3.com/) — The resulting code uses the relatively new CSS `color()` function with the `display-p3`, which according to the spec, ‘enables more vibrant greens and reds than the sRGB color gamut’. 

Wojtek Witkowski   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1729670486/pplgrsitrwusrkwxlfun.png)](https://github.com/MarketingPipeline/Emoji-Fallback.js)  

[Emoji-Fallback.js: Provide Support for Emojis on All Browsers](https://github.com/MarketingPipeline/Emoji-Fallback.js) — Replaces emoji characters with emoji _images_ on devices that don't have emoji support. 

Jared Van Valkengoed   

[elva: A Multilingual, Clean, Starter Theme for Eleventy](https://github.com/scottsweb/elva) — [Eleventy / 11ty](https://www.11ty.dev/) is a popular Node.js-powered static site generator – [Demo here.](https://elva.scott.ee/) 
Scott Evans    

📬 

**Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). 

--- 

**Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). 

--- 

**Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. 

--- 

Published by Cooper Press Ltd.
Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86).
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom 

[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)  

[Ipx.](https://frontendfoc.us/open/665/*|UID|*?ipx=t)