---
title: "A very !important email"
publication: "Frontend Focus"
issue: 534
published_at: "2022-03-23"
canonical_url: "https://frontendfoc.us/issues/534"
---

Plus is that XHTML you're still writing? |            

[![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/)   

Frontend Focus 

🇺🇦 #​534 — March 23, 2022 | [Read on the web](https://frontendfoc.us/issues/534)       

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1647960749/reicdfiq6ftqlax2dxsv.png)](https://twitter.com/stevenpemberton/status/1505839184287870981)  

[CSS Co-Designer: '`!important` Was Added for One Reason Only: Laws in the US'](https://twitter.com/stevenpemberton/status/1505839184287870981) — This tweet got plenty of attention this week — Steven Pemberton shared how `!important` was added to the spec due to US laws “_that require certain text to be in a given font size_”. He adds that anything else is probably _"misuse."_ [Ernie Smith digs into this a little more here](https://midrange.tedium.co/issues/an-important-distinction-1097492). 

Steven Pemberton   

[Write HTML the HTML Way (and Not the XHTML Way)](https://css-tricks.com/write-html-the-html-way-not-the-xhtml-way/) — Sure, you may not use XHTML (anymore), but when writing HTML you may be more influenced by XHTML than you think. _You are very likely writing HTML, the XHTML way_. Guilty as charged here: we still like our `<br />`s.. 😁 

Jens Oliver Meiert   [![\](https://copm.s3.amazonaws.com/42e6819e.jpg)](https://frontendmasters.com/courses/cypress/?utm_source=frontendfocus&utm_medium=email&utm_content=cypress) 

[Testing Your Web Apps with Cypress](https://frontendmasters.com/courses/cypress/?utm_source=frontendfocus&utm_medium=email&utm_content=cypress) — Join Steve Kinney on this detailed course covering Cypress: A fast, easy way to write end-to-end tests for your client-side apps. Learn about the selector engine, test runners, assertion library, and more. 

Frontend Masters sponsor   

[Prepare for the Future with Google Analytics 4](https://blog.google/products/marketingplatform/analytics/prepare-for-future-with-google-analytics-4/) — Google Analytics user? Universal Analytics is sunsetting next year and will stop processing new hits on July 1, 2023. Here’s how to prepare _now_ by moving over to Google’s next gen solution, Google Analytics 4. This move is undoubtedly driven by the broad change in data protection laws (e.g. the GDPR) and user expectations of privacy in recent years. 

Russell Ketchum (Google)   

[Windows High Contrast Mode, Forced Colors Mode and CSS Custom Properties](https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/) — CSS Custom Properties can be used for far more than just a bit of fun color theming. Eric explains here how this modern CSS is a powerful piece of assistive tech that can help create flexible, maintainable and adaptive digital experiences. 

Eric Bailey     

**⚡️ Quick bits:** 

- Microsoft's Edge browser now [automatically generates image labels](https://www.theverge.com/2022/3/18/22984474/microsoft-edge-automatic-image-labels-accessibility-feature) for screen readers.
- Firefox 100 is getting [AV1 hardware decoding support](https://www.ghacks.net/2022/03/21/firefox-100-is-getting-av1-hardware-decoding-support-on-windows/) on Windows.
- Here's an update on [how Mozilla and Open Web Docs are working together](https://hacks.mozilla.org/2022/03/mozilla-and-open-web-docs-working-together-on-mdn/) on MDN.    

📙 **Tutorials, Articles & Opinion** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1647946782/fkf4j8u9yprhn8nltbhq.png)](https://web.dev/building-a-loading-bar-component/)  

[Building a Loading Bar Component](https://web.dev/building-a-loading-bar-component/) — Shares a foundational overview of how to go about building a color adaptive and accessible loading bar using the `<progress>` element. 

Adam Argyle   

[HTML and CSS in Emails: What Works in 2022?](https://designmodo.com/html-css-emails/) — Dives into what HTML and CSS features work for email templates, and how we can make them work for all email clients. 

Daniel Schwarz   

[Streamline and Evolve Your Workflows With Shortcut](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=evolve) — We bring the flow to your software team's workflow. Plan, collaborate, build, and measure success with Shortcut. 

Shortcut (formerly Clubhouse.io) sponsor   

[Optimizing SVG Patterns to Their Smallest Size](https://css-tricks.com/optimizing-svg-patterns/) — Some radical ways to go about optimizing SVG patterns so that they contain as little code as possible without affecting the overall image quality. 

Bence Szabó   [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1647953878/t09u9gu1vui88ixh5zup.png)](https://www.smashingmagazine.com/2022/03/claymorphism-css-ui-design-trend/) 

[Claymorphism: Will It 'Stick' Around?](https://www.smashingmagazine.com/2022/03/claymorphism-css-ui-design-trend/) — This design trend has been picking up steam (you may have noticed the rising popularity of colorful inflated 3D graphics in web illustrations), so here’s a look at the idea in more detail, and how you can recreate the effect with CSS. 

Adrian Bece   

[Implementing a Delay for a Cookie Consent Banner with JS](https://dariusz.wieckiewicz.org/en/implementing-js-delay-for-cookie-consent-banner/) — Here’s how to go about creating an ‘ideal’ cookie consent banner — chiefly one that doesn’t cause cumulative layout shift (CLS) issues. 

Dariusz Więckiewicz   

[6 Challenges Wix Faced While Building a Super CI Pipeline](https://buildkite.com/blog/6-challenges-wix-faced-while-building-a-super-ci-pipeline?utm_campaign=CPress&utm_source=ppc&utm_medium=CPress&utm_term=Super-CI-pipeline&utm_content=DevOps) 

Buildkite sponsor   

▶[Making a ’90s Style Website with Microsoft FrontPage 98](https://www.youtube.com/watch?v=tqydVNaLR1w) — Ah, that brings back memories.. 
Michael MJD   

[Building Table Sorting and Pagination in JavaScript](https://www.raymondcamden.com/2022/03/14/building-table-sorting-and-pagination-in-javascript/) 
Raymond Camden    

Jobs  

[Senior Web Developer (Node/ReactJS) - Remote](https://apply.workable.com/komoot/j/DCC51EA91D/apply/) — Millions get inspired and plan adventures with our apps. To help us make [komoot.com](https://www.komoot.com) the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team. 
Komoot   

[Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-frontend&utm_content=frontend) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. 
X-Team   

[Build Your Career from Anywhere](https://topt.al/8ycA42) — Join Toptal and get access to exclusive remote work opportunities for the top companies on the planet. 
Toptal    

🔧 **Code, Tools & Resources** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1647962648/phrpc0phfddhj2x2o0jd.png)](https://styles.master.co/)  

[Master UI Styles: A 'Virtual CSS' Engine](https://styles.master.co/) — This small CSS framework (less than 13KB) [just hit 1.0](https://github.com/master-co/styles/releases/tag/v1.0.0). It claims to do away with the need to “_memorize arcane class names_”, allowing you to stylize HTML with unlimited CSS style variants. 

Master   

[sysend.js: Send Messages Between Open Pages or Tabs in Same Browser](https://github.com/jcubic/sysend.js) — A small library that abstracts a mechanism for sending messages between pages open in the same browser. Supports cross-domain communication and is based on localStorage and the BroadcastChannel API. Here’s [a demo](https://jcubic.pl/sysend.php) (if you open it twice.) 

Jakub T. Jankiewicz   

[Chrome Extension CLI: The CLI for Building Your Next (or First?) Chrome Extension](https://github.com/dutiyesh/chrome-extension-cli) — Want to get building an extension for Chrome as quickly as possible? This tool aims to get you on the right path ASAP. 

Dutiyesh Salunkhe   

[prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) — An official Pretier plugin from Tailwind to automatically sort classes based on Tailwind’s [recommended class order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted). 

Tailwind Labs    

📬 

**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://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc).
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom 

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