--- title: "Should you 'over-engineer' your CSS?" publication: "Frontend Focus" issue: 656 published_at: "2024-08-14" canonical_url: "https://frontendfoc.us/issues/656" --- Plus the W3C wants to hear from you. | 👋 **Hello!** Just a quick programming note — I'm taking a short summer break next week, so there will be no newsletter landing in your inbox next Wednesday. Usual service resumes on August 28th — _see you then_. __ _Chris Brandrick, your editor_ Together with [![WorkOS\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_514,h_98/e_make_transparent/co_white,e_outline:9/tdfxwgk852ui9leli4wm.png)](https://workos.com/?utm_source=fefocus&utm_medium=newsletter&utm_campaign=q32024) 🚀 **Frontend** Focus #​656 — August 14, 2024 | [Read on the web](https://frontendfoc.us/issues/656) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ykidfd6yslamajyua0cb.jpg)](https://frontendmasters.com/blog/relative-color-syntax-basic-use-cases/) [Relative Color Syntax — Some Basic Use Cases](https://frontendmasters.com/blog/relative-color-syntax-basic-use-cases/) — We now have broad support for the [relative color syntax](https://caniuse.com/css-color-function). Chris Coyier takes a look a this “_extremely powerful way to manipulate colors in CSS_” in relation to colors you're already using. Chris Coyier [The Puppeteer Browser Control Library Announces Official Firefox Support](https://hacks.mozilla.org/2024/08/puppeteer-support-for-firefox/) — As of version 23, the [Puppeteer](https://pptr.dev/) browser automation library now has first-class support for Firefox. Mozilla Hacks [![\](https://copm.s3.amazonaws.com/b586e74d.png)](https://workos.com/?utm_source=fefocus&utm_medium=newsletter&utm_campaign=q32024) [WorkOS: Start Selling to Enterprises with Just a Few Lines of Code](https://workos.com/?utm_source=fefocus&utm_medium=newsletter&utm_campaign=q32024) — WorkOS is a modern identity platform for B2B SaaS, offering flexible and easy-to-use APIs to integrate SSO, SCIM, and RBAC in minutes instead of months. It's trusted by hundreds of high-growth startups such as Perplexity, Vercel, Drata, and Webflow. WorkOS sponsor [How Google Handles JavaScript In Its Indexing Process](https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process) — At one point if you wanted Google to index your content it needed to be directly in the HTML and _not_ dynamically rendered with JavaScript. Things have since changed of course , but how much? Zecchini, Moore, Siddle, Ubl (Vercel) ▶[Start Over-Engineering Your CSS](https://www.youtube.com/watch?v=k_3pRxdv-cI) — An interesting talk from the recent CSS Day conference about purposely going “_over the top and embracing complexity_” as a way to deepen our understanding of CSS. Kevin Powell ⚡️ Quick Links - 🗳️ For the first time ever, the [W3C is conducting a community-wide survey](https://www.w3.org/news/2024/w3c-opens-community-wide-survey/) for those "_interested in the impact of web standards on humanity_". - 🦊 You can now try [vertical tabs and a new sidebar](https://blog.nightly.mozilla.org/2024/08/07/firefox-sidebar-and-vertical-tabs-try-them-out-in-nightly-firefox-labs-131/) in Firefox Nightly. - 🧭 Safari joins Firefox & Chrome, now [supports the `scrollbar-width` property](https://github.com/WebKit/WebKit/pull/31616). - 🅾️ Opera One is [now available on iOS](https://x.com/opera/status/1823270549465743822). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1723625118/dl6yw6cgxfdrircw63it.png)](https://www.youtube.com/watch?v=vi8pyS076a8) ▶[Japanese Web Design: Weird, But It Works. Here's Why](https://www.youtube.com/watch?v=vi8pyS076a8) — “_beneath the overwhelming user interface lies undeniable psychology_”. Phoebe Yu [HTML Web Components Can Have a Little Shadow DOM, As A Treat](https://scottjehl.com/posts/html-web-components-shadow-dom/) — Scott notes that some of the current discourse around Web Components “_tends to conflate a couple of things_”, chiefly around augmenting HTML via custom elements and how the Shadow DOM comes into play. Scott Jehl [Create Interactive Tutorials in the Browser](https://tutorialkit.dev/?utm_source=fe_focus&utm_medium=secondary) — TutorialKit enables you to create interactive tutorials instantly without building or managing any backend infrastructure. StackBlitz sponsor [`font-size` Limbo](https://sebastianlaube.de/en/blog/font-size-limbo) — Some nuanced thoughts on what font-size we should be reaching for as a default in 2024. [Geoff Graham at CSS-Tricks](https://css-tricks.com/font-size-limbo/) chimed in too. Sebastian Laube [The Anchor Element](https://heydonworks.com/article/the-anchor-element/) — An informative look at the humble HTML <`a`> anchor element, explaining what it is, how it works at the browser level, and how to use it correctly. Heydon has also taken [a look at the `abbr` element](https://heydonworks.com/article/the-abbr-element/), and [the `address` element](https://heydonworks.com/article/the-address-element/). Heydon Pickering [The Dying Web](https://endler.dev/2024/the-dying-web/) — A plea to us all to give Firefox a try, because open standards and privacy are “_more important than a few milliseconds of loading time_”. Matthias Endler opinion [How to Create an Auto “Text Typing Effect” with Vanilla JavaScript](https://webdesign.tutsplus.com/how-to-create-an-auto-text-typing-effect-with-vanilla-javascript--cms-108795t) Esther Vaati 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1723552934/if2it6qprnsyzwisarcm.png)](https://typlr.app/) [typlr.app: Create Fonts in the Browser](https://typlr.app/) — If you’ve never attempted to make your own font, this might be a cool place to start! This interactive tool allows you to customize each letter’s shape and kerning, and you can install it as a PWA. Evgeny Agasyants [ObsoHTML: Node and CLI Tool to Find Obsolete HTML](https://meiert.com/en/blog/find-obsolete-html/) — [ObsoHTML](https://www.npmjs.com/package/@j9t/obsohtml) is a Node.js script designed to scan HTML, PHP, JavaScript, and TypeScript files within a specified directory for obsolete or proprietary HTML attributes and elements. Should help keep things tidy. Jens Oliver Meiert [There Are Better Things to Code Than Forms](https://surveyjs.io/?utm_source=frontend_focus&utm_medium=email) — With the SurveyJS drag-and-drop form builder, you can generate and style dynamic, JSON-driven forms right in your JS app (Angular / React / Vue.js / jQuery). SurveyJS sponsor [tailwindcss-highlights: A Tailwind Plugin to Add Highlights to Text](https://github.com/jln13x/tailwindcss-highlights) — The term “highlights” here refers to an effect similar to a highlighter pen for marking up an actual paper document. Includes 20 variants of the effect, which you can see [here](https://tailwindcss-highlights.hubatsch.dev/). Julian ▶[Inter 4.0: A Big Font Update for UI Design](https://www.youtube.com/watch?v=XF08_a8hO8c) — Now with true italics, optical sizing changes, and stylistic alternatives. However, this [version 4.0 update](https://rsms.me/inter/) doesn’t appear to be on Google Fonts yet. Oliver Schöndorfer [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/phmppmfldq7rj90tyg2n.jpg)](https://slab-lang.org/) [Slab: A Programmable Markup Language That Simplifies The Creation of HTML](https://slab-lang.org/) — An alternative to tools like Pug, claiming to offer advantages like improved readability, built-in programming constructs, integration with JSON data, and an easy learning curve. Võ Minh Thu 📬 **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/656/*|UID|*?ipx=t)