--- title: "Three new CSS dynamic viewport units" publication: "Frontend Focus" issue: 570 published_at: "2022-11-30" canonical_url: "https://frontendfoc.us/issues/570" --- Plus working with color formats, and is Tailwind a 'leaky' abstraction? | Together with [![Bryntum\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_560,h_100/e_make_transparent/co_white,e_outline:7/hs9vs3jkbbbrfz0twgvk.png)](https://bryntum.com/products/gantt/) #​570 — November 30, 2022 | [Read on the web](https://frontendfoc.us/issues/570) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1669805818/bifpdcy4gq2zdpilrxs5.png)](https://web.dev/viewport-units/) [The Large, Small, and Dynamic Viewport Units](https://web.dev/viewport-units/) — These three new CSS units (`lvh, svh, dvh`) account for mobile viewports with dynamic toolbars. This post explains why we need such new units, how they interact with the viewport on mobile browsers, and highlights some caveats to be aware of. Support ships in Chrome 108. Firefox and Safari [already have support](https://caniuse.com/viewport-unit-variants). Bramus Van Damme [Color Formats in CSS](https://www.joshwcomeau.com/css/color-formats/) — Josh takes us on a tour of the slew of color formats at our disposal (hex, RGB, HSL, etc.), looking at how they work and how to get the best out of them. As with any of Josh's posts, there's a lot to dig into here. Josh W. Comeau [![\](https://copm.s3.amazonaws.com/8733a823.png)](https://bryntum.com/products/gantt/) [Fast and Flexible Gantt Chart Component for Your Web App](https://bryntum.com/products/gantt/) — Bryntum's suite of web components includes powerful Gantt and resource scheduling widgets used by thousands of businesses. The API is extremely flexible and allows you to configure everything from colors to details of the scheduling logic. Free 45-day trial. Bryntum sponsor [The BBC's 15 Web Principles: 15 Years Later](https://shkspr.mobi/blog/2022/11/the-bbcs-15-web-principles-15-years-later/) — Back in 2007 – _an eternity in web years_ – the BBC published a document showing their ‘15 Web Principles’. This post looks back at how such 'early-web-2.0 idealism' stacks up today. Terence Eden **⚡️ IN BRIEF** - In another blast from the past, [this piece from 1999](http://jimgray.azurewebsites.net/hpts99/papers/Duquaine.htm) calls HTML a "_strategic dead end_" and something which treats "_intelligent devices [..] as dumbed down display devices_". Eek! - There has been [plenty of thoughtful feedback](https://www.gov.uk/government/consultations/mobile-browsers-and-cloud-gaming-proposal-to-make-a-market-reference) to the UK's consultation on mobile browsers, app stores, and competition. - ICYMI last week, Josh Comeau's [interactive guide to all things Flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) is well worth a read. 📙 **Tutorials, Articles & Opinion** [Document Object Model (DOM) Geometry: A Beginner’s Introduction and Guide](https://www.smashingmagazine.com/2022/11/document-object-model-geometry-guide/) — Analyzes the methods and properties that make user interface solutions such as infinite scrolling, animating elements on scroll, or even the popular drag and drop achievable, and afterward, dives into some practical use cases for them. Pearl Akpan ▶[Stop Fighting with CSS Positioning](https://www.youtube.com/watch?v=86nTToBm2uQ) — A 20-minute look at using CSS positioning effectively, which often comes down to understanding CSS containing blocks, and how positioning influences it. Kevin Powell [The State of Notifications Report - User Preferences](https://www.courier.com/download-state-notification-report/?utm_campaign=cooper-press&utm_source=email&utm_medium=frontend-focus-11-30&utm_content=state-of-notifications) — What is preventing us from designing a notification system that facilitates a better experience? Courier.com sponsor [Tailwind is a Leaky Abstraction](https://jakelazaroff.com/words/tailwind-is-a-leaky-abstraction/) — “_Tailwind is a layer on top of CSS, but it doesn’t actually hide any complexity in the layer below. You still need to know CSS._” This one [generated a fair bit of discussion](https://news.ycombinator.com/item?id=33787218) on Hacker News. Jake Lazaroff [What Working with Tailwind CSS Every Day for Two Years Looks Like](https://www.themosaad.com/blog/two-years-of-tailwind-css) — ...and another take on Tailwind: “_I consider Tailwind CSS to be one of the boring established CSS solutions that enables me to be the most productive in building and maintaining projects of various sizes._” Mosaad [Building Conscious Design Systems](https://amyhupe.co.uk/articles/building-conscious-design-systems/) — Amy asks how we can focus less on artefacts in design systems, and work consciously to build inclusive design systems “_that put people at their heart_”. Amy Hupe [Newer Things to Know About Good Ol’ HTML Lists](https://css-tricks.com/newer-things-to-know-about-good-ol-html-lists/) Daniel Schwarz ▶[Why Japan's Internet is 'Weirdly Designed'](https://www.youtube.com/watch?v=z6ep308goxQ) — A fun watch. Sabrina Cruz [Is 'CSS Engineer' Now a Job Position?](https://helloanselm.com/writings/is-css-engineer-now-a-job-position) Anselm Hannemann 👍 [How Facebook Designed the 'Like' Button](https://www.fastcompany.com/90780140/the-inside-story-of-how-facebook-designed-the-like-button-and-made-social-media-into-a-popularity-contest) Will Swanson 🧑‍💻 JOBS [Software Engineer](https://www.stickermule.com/career/6de4ccd8-7e58-4b65-9a25-62354972bdbd) — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers. Stickermule [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/r09afaynkpchnjq33ddi.jpg)](https://wordmark.it/) [Wordmark: A Tool to Help You Choose Fonts for Your Projects](https://wordmark.it/) — Enter a word or phrase and this tool can show you the phrase using all the fonts installed on your system. You can then select to filter your favorites before deciding what to use. Wordmark [Metatags API: A Free API to Get Meta Tags/OpenGraph Tags from a URL](https://dub.sh/metatags) — Could also be a handy way to check that you've got _your_ OG tags right. steven tey [Shortcut Brings Product and Engineering Together. Try It for Free](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=together) Shortcut (formerly Clubhouse.io) sponsor [Lightning CSS: A Fast CSS Parser, Transformer, and Minifier](https://github.com/parcel-bundler/lightningcss/releases/tag/v1.17.0) — Version 1.17.0 is out with updated nesting syntax, support for @page margin rules, a fix for media query parenthesization, and more. Parcel [Imagator: An Online Tool to Compress, Convert, Flip, and Resize Images](https://imagator.co/) — A simple tool, but it works fully locally with no sign-ups and unlimited use for all features. Rithy Huot **🕰 ICYMI** (_Some older stuff that's still worth checking out_) - Josefine Schaefer takes a closer look at the factors you should take into consideration when [choosing a CMS in terms of web accessibility](https://www.smashingmagazine.com/2022/09/accessibility-times-headless/). - Here's a quick tip on how the CSS pseudo-class '`:out-of-range`' can be [used to style input elements based on value validity.](https://davidwalsh.name/css-out-of-range) - Ollie Williams shows [how to use cascade layers to manage custom styles](https://css-tricks.com/using-css-cascade-layers-to-manage-custom-styles-in-a-tailwind-project/) in a Tailwind project. - Amit Merchant shares [why we should be using the native HTML `` element](https://blog.logrocket.com/using-the-dialog-element/) and how to customize it. 📬 **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/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/570/*|UID|*?ipx=t)