--- title: "A CSS 'if' function isn't here yet, but what can we do today?" publication: "Frontend Focus" issue: 649 published_at: "2024-06-26" canonical_url: "https://frontendfoc.us/issues/649" --- Conditional CSS, morphing time, plus the advantages of modern CSS. | Together with [![The Software House\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_624/e_make_transparent/co_white,e_outline:32/qtubtiuy4m6xjke6e3ek.png)](https://hubs.la/Q02y4VFx0) 🚀 **Frontend** Focus #​649 — June 26, 2024 | [Read on the web](https://frontendfoc.us/issues/649) [![\](https://res.cloudinary.com/cpress/image/upload/v1719398516/kjxldwdy0nww767iex78.gif)](https://minus-ze.ro/posts/morphing-arbitrary-paths-in-svg/) [Morphing Arbitrary Paths in SVG](https://minus-ze.ro/posts/morphing-arbitrary-paths-in-svg/) — This is a detailed look at morphing SVG paths to create a rather pleasing animation effect. This goes deep on the math to keep things smooth, dealing with sub-paths, and more. There's demos and code here too. Alexandru-Gabriel Ică [Inline Conditionals in CSS, _Now_?](https://lea.verou.me/blog/2024/css-conditionals-now/) — Last week we shared news about a recent CSS Working Group [resolution to add an `if()` function to CSS](https://lea.verou.me/blog/2024/css-conditionals/). But that may be some time off from being a working reality — so what can we do in the meantime? Lea takes a look. Lea Verou [![\](https://copm.s3.amazonaws.com/3c0662b3.png)](https://hubs.la/Q02y4VFx0) [Last Chance! The State of Frontend 2024 Survey Ends Soon](https://hubs.la/Q02y4VFx0) — Time is running out. Thousands have shared their opinions, but we still need yours. Whether you're a novice or a leader, your input is vital. Help us finalize this crucial report for the frontend community – it’s now or never! The Software House sponsor [Uniting Web and Native Apps With 4 Unknown JavaScript APIs](https://www.smashingmagazine.com/2024/06/uniting-web-native-apps-unknown-javascript-apis/) — A look at some ‘under-the-radar' web features, such as the Screen Orientation API and Device Orientation API, and how they can be used to create user friendly, robust PWAs. Juan Diego Rodríguez [The Results from the _State of JavaScript 2023_ Survey](https://2023.stateofjs.com/en-US) — The results of this popular annual JavaScript developer survey are now finally with us. It shares [what features devs are actually using](https://2023.stateofjs.com/en-US/features/), the [shifts in library popularity over time](https://2023.stateofjs.com/en-US/libraries/#tools_arrows), [what build tools folks are using](https://2023.stateofjs.com/en-US/libraries/build_tools/), and much more. [→ _Via [JavaScript Weekly](https://javascriptweekly.com)_] Devographics ⚡️ Quick Links - 💻 This site brings together a collection of [the innovations by women in the fields of computer science and technology](https://nowebwithoutwomen.com). - 🧭 Version 197 of Safari Technology Preview is [out now, with fixes a-plenty](https://webkit.org/blog/15687/release-notes-for-safari-technology-preview-197/). - 🏎️ ...and [here's what's new in DevTools in Chrome 126](https://developer.chrome.com/blog/new-in-devtools-126), including several improvements to the Performance panel. - 🦊 Firefox is set to experiment with [integrating AI services](https://blog.nightly.mozilla.org/2024/06/24/experimenting-with-ai-services-in-nightly/) in the browser. - 🖼️ Google's ['Material Design' graphical style](https://x.com/WebDesignMuseum/status/1805575417908314523) is now ten years old. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1719314038/qloohgfopwvxfozhh9fx.png)](https://www.youtube.com/watch?v=su6WA0kUUJE) ▶[Web Design Engineering with the New CSS](https://www.youtube.com/watch?v=su6WA0kUUJE) — A near hour long talk from the latest CSS Day conference exploring how we can use the power of ‘new CSS’ to our advantage along with how to engineer designs that are accessible, resilient, and true to the inherently fluid nature of the web. Matthias Ott [A Rant About Frontend Development](https://blog.frankmtaylor.com/2024/06/20/a-rant-about-front-end-development/) — An opinionated (and expletive peppered) take on the current state of front end development, touching upon CSS strategy, server-side rendering, an over reliance on JavaScript, and more. No surprise to see this one [attract plenty of discussion](https://news.ycombinator.com/item?id=40746173) over on Hacker News. Frank M Taylor [What Do Developers Want in a Design Handoff? We Asked Them](https://zeroheight.com/blog/what-do-developers-want-in-a-design-handoff-we-asked-them?utm_source=fe-focus&utm_medium=secondary) — We spoke with industry experts about what makes an ideal design handoff. Read our latest post on zeroheight’s blog! StackBlitz sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1719311778/vvqnvz4cnojiesucnq9s.png)](https://verpex.com/blog/website-tips/how-to-create-cut-out-shapes-using-the-clip-path-property) [How to Create Cut-Out Shapes using the `clip-path` Property](https://verpex.com/blog/website-tips/how-to-create-cut-out-shapes-using-the-clip-path-property) — A look at how to easily invert an existing shape created using the `clip-path` CSS property. Temani Afif [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1719318670/hlqrw5rx7haz7r5hnmul.png)](https://frontendmasters.com/blog/pure-css-circular-text-without-requiring-a-monospace-font/) [Pure CSS Circular Text (Without Requiring a Monospace Font)](https://frontendmasters.com/blog/pure-css-circular-text-without-requiring-a-monospace-font/) — How to create circular text (animated too if you want) with just pure CSS. A nice decorative element. Amit Sheen [Using the CSS `cap` Unit](https://ishadeed.com/article/css-cap-unit/) — A look at how Ahmad solved a spacing design problem with the CSS `cap` unit. Ahmad Shadeed [Popovers Work Pretty Nicely as Slide-Out Drawers](https://frontendmasters.com/blog/popovers-work-pretty-nicely-as-slide-out-drawers/) — Another neat use-case for the `popover` attribute. Chris Coyier [What is 'Mixed Content'?](https://frederikbraun.de/mixed-content.html) — If you’ve ever seen ‘mixed content’ mentioned in the DevTools, now you know what that means. Frederik Braun [CSS Tip: An `em` isn’t an 'm', But an `ex` is an 'x'](https://blog.frankmtaylor.com/2012/01/25/css-font-size-an-em-isnt-an-m-but-an-ex-is-an-x/) — Interesting trivia! Frank M Taylor [A Brief Introduction to Keyboard Accessibility](https://afixt.com/a-brief-introduction-to-keyboard-accessibility/) Karl Groves [Adding Vertical Screen Size Media Queries to Tailwind](https://justin.searls.co/posts/adding-vertical-screen-size-media-queries-to-tailwind/) Justin Searls [Catching Compromised Cookies at Slack's Scale](https://slack.engineering/catching-compromised-cookies/) Slama, Grubin and Li (Slack) [Opinions for Writing Good CSS](https://www.andrewwalpole.com/blog/opinions-for-writing-good-css/) Andrew Walpole 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1719321217/vj7kqmml1i4ppjfhvbwl.gif)](https://bvadata.com/html_spinner_examples.html) [HTML-Spinner Examples](https://bvadata.com/html_spinner_examples.html) — If you want an alternative to spinner images, this might do it for you. The spinner is a custom, self-contained web component that you can treat like any inline HTML tag. No dependencies or frameworks, flexible, and works across all browsers. [GitHub repo.](https://github.com/bwva/HTML-SpinnerElem) Bruce Van Allen [Free Site Report: What % of Your Competitors’ Sites Outperform Yours?](https://www.storefrontgrader.com/?utm_source=frontendfocus&utm_medium=email&utm_campaign=storefrontgraderQ3-june) — Get a free storefront report that reveals how your site stacks up on speed, SEO, accessibility, and more. Elastic Path sponsor [Parvus 2.6: Accessible Lightbox with No Dependencies](https://github.com/deoostfrees/Parvus) — Ok, it does say not to use overlays on pages but if you really have to, use this! There’s [a CodePen example.](https://codepen.io/deoostfrees/pen/GRqdEPY) Benjamin de Oostfrees [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1719398195/o3pkgdjj3pc44r5r0v5a.png)](https://github.com/sadmann7/sortable) [Sortable: A Sorting Component for Tables, Forms, etc.](https://github.com/sadmann7/sortable) — Built with Next.js, it uses shadcn/ui and Radix UI for the components and dnd-kit for the draggable behavior, which you can try out on [a few simple demos](https://sortable.sadmn.com/). Sadman Sakib [KAPLAY: A JavaScript Library for Making Games](https://kaplayjs.com/) — Dubbed as the “spiritual successor” to the unmaintained Kaboom.js (which it’s also a fork of), this project boasts an easy to use API that you can try out in their [online playground](https://play.kaplayjs.com/). KAPLAY [AI CSS Animations: Build CSS Animations with AI](https://www.aicssanimations.com/) — Describe your animation with a text prompt (or use your mic) and this tool will generate the keyframes-based CSS for you. Premium access allows you to save and edit existing animations. AI CSS Animations [Neobrutalism Components: A Collection of Styled Tailwind Components](https://www.neobrutalism.dev/) Samuel Breznjak 📬 **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/649/*|UID|*?ipx=t)