--- title: "Lea Verou shares CSS variable secrets" publication: "Frontend Focus" issue: 549 published_at: "2022-07-06" canonical_url: "https://frontendfoc.us/issues/549" --- Plus are you sure that's really a number input? | #​549 — July 6, 2022 | [Read on the web](https://frontendfoc.us/issues/549) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1657107088/kbcbean7qmfqguobhh6f.png)](https://www.youtube.com/watch?v=ZuZizqDF4q8) ▶[CSS Variable Secrets](https://www.youtube.com/watch?v=ZuZizqDF4q8) — An excellent, informative hour-long talk from the recent CSS Day conference that’ll give you a _much deeper_ understanding of CSS custom properties. Lea is a great speaker, but **if you can't watch a video right now, the [associated slides here](https://projects.verou.me/talks/dynamic-css-secrets/) work quite well on their own**too. Lea Verou [On the 'Standard' 8px Body Margin](https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/) — All browsers add an 8px margin on the body element (it’s part of the W3C-recommended default stylesheet) — here’s the rather thorough origin story “_for a style no one wants_”. Miriam Suzanne [![\](https://copm.s3.amazonaws.com/1de48e8a.png)](https://frontendmasters.com/courses/data-visualization/?utm_source=frontendfocus&utm_medium=email&utm_content=datavis) [Get Started with Data Visualization](https://frontendmasters.com/courses/data-visualization/?utm_source=frontendfocus&utm_medium=email&utm_content=datavis) — Join Anjana Vakhil in this detailed video course and take your first steps with data visualization. Learn about use-cases, available tooling, how to best work with data, complete example exercises, and much more. Frontend Masters sponsor [Releasing Color.js: A Library That Takes Color Seriously](https://lea.verou.me/2022/06/releasing-colorjs/) — It’s always fantastic to see Lea (mentioned above) involved with a project, and this new one, built along with ‘father of SVG’ Chris Lilley, feels incredibly well-honed if you need to work with color spaces, CSS color specs, and the like. Lea Verou and Chris Lilley **⚡️ Quick bits:** - Firefox 102 (released last week) has a new privacy feature that [strips parameters from URLs](https://www.bleepingcomputer.com/news/security/new-firefox-privacy-feature-strips-urls-of-tracking-parameters/) that can be used to track your navigation. - [A quick video looking at what new developer features](https://www.youtube.com/watch?v=amf9pjrz0xo) are heading to Chrome soon. - Version 148 of Safari Technology Preview for macOS is out now. [The release notes are here](https://webkit.org/blog/12992/release-notes-for-safari-technology-preview-148/). - 🤡 Forget the browser.. Microsoft PowerPoint can [▶️ work quite well as a canvas](https://www.youtube.com/watch?v=eHCxgy4Gxkw) for JavaScript games too.. 😁 - Tailwind UI now has [a set of rather nice looking](https://tailwindui.com/templates) site templates. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1657109710/vwuydafgi3vhelowh9lw.png)](https://ryanfeigenbaum.com/dark-mode/) [The Complete Guide to the 'Dark Mode Toggle'](https://ryanfeigenbaum.com/dark-mode/) — Best practices for implementing a color mode switcher on your website using custom variables, `prefers-color-scheme`, and more. There’s a demo too. Ryan Feigenbaum [Are You Sure That’s a Number Input?](https://kilianvalkhof.com/2022/css-html/are-you-sure-thats-a-number-input/) — Explains how not _all_ inputs that accept digits should be inputs with `type="number"`. Kilian Valkhof [Reimagining Front-End Web Development with `htmx` and Hyperscript](https://nomadiq.hashnode.dev/reimagining-front-end-web-development-with-htmx-and-hyperscript) — “_to create an interactive front end for your website you need JavaScript. Not just vanilla JS, mind: we’re in 2022, and to create an acceptable UI you need to be using a framework like React or Vue.js. Right? Wrong._” Owen Jones [Code Where You Need It, Retool When You Don’t](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) — The fast way for devs to build/share internal tools. Teams at companies like Amazon, DoorDash, & Peloton collaborate around custom-built Retool apps to solve internal workflows. Retool sponsor [The Case for 'Null' in Design Systems](https://adhocteam.us/2022/07/05/null-in-design-systems/) — When it comes to design systems “_sometimes an intentional absence of content is what’s needed_”. This post explores why. Eric Bailey [Inverted Media Queries and Breakpoints](https://ryanmulligan.dev/blog/invert-media-queries/) — A look at using the `not` keyword to negate a media query breakpoint and apply CSS rules. Ryan Mulligan [The 'Off by Default' Web](https://paul.kinlan.me/the-off-by-default-web/) — Musings from Paul on permissions on the web and the use of the [Feature-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy) HTTP header. Paul Kinlan [WCAG SC 1.4.4 Resize Text & 1.4.10 Reflow](https://yatil.net/blog/resize-text-reflow) — Confused about the relationship and how to test for the WCAG 2.1 Success Criteria 1.4.4 Resize Text and 1.4.10 Reflow? While these two success criteria seem related, they cover different use cases, as explained here. Eric Eggert [Stop the Screen Going to Sleep with JavaScript](https://mikevdv.dev/blog/2022-06-23-stop-the-screen-going-to-sleep-with-javascript) — An explanation of how to use the Screen Wake Lock API. Michael Walter Van Der Velden [Implementing a Masonry Layout with Tailwind CSS Columns](https://prototypr.io/post/masonry-layout-css-tailwind) Graeme Fulton Jobs [Senior Software Engineer at This Dot Labs (Remote, Worldwide)](https://www.thisdot.co/job/senior-software-engineer-javascript-remote) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more. This Dot Labs [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/v1657109607/ot9esrerif477rk37nxv.png)](https://gimli.app/tailwinddx.html) [Tailwind DX: A Chrome DevTools Extension Enabling Smart Tools for Tailwind CSS](https://gimli.app/tailwinddx.html) — Adds an extension to your DevTools CSS panel that works similarly to the regular CSS features, allowing you to live edit the page using Tailwind utility classes. Joakim Hjertvik [D3.js 7.5 – Now with Density Contours](https://observablehq.com/@observablehq/plot-density) — Rather than linking to the (rather plain) [release](https://github.com/d3/d3/releases/tag/v7.5.0), this interactive demo shows what’s actually new. All of [Mike Bostock’s notebooks](https://observablehq.com/@mbostock?tab=notebooks&type=public) are worth a look, to be honest – they provide a handy way to learn D3.js from the one who knows it best. Mike Bostock and the D3.js Contributors [Project Management for Today's (And Tomorrow's) Software Teams](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=tomorrow) Shortcut (formerly Clubhouse.io) sponsor [Sigma.js 2: High Performance Interactive Rendering of Large Networks of Graphs](https://medialab.sciencespo.fr/en/news/sigmajs-version-2-finally-released/) — The story of how a complete rewrite came together through several years of work on this library for doing _very_ large scale rendering of graphs in the browser. [GitHub repo.](https://github.com/jacomyal/sigma.js) Guillaume, Alexis, et al. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1657099458/oxyoeyhjvhvvvy7aumrn.png)](https://codepen.io/shshaw/pen/bGROdEP?editors=0110) [Checkbox Accent Color Pixel Art](https://codepen.io/shshaw/pen/bGROdEP?editors=0110) — A neat demo in which a pixellated Mario (and other Mushroom Kingdom stuff) is created out of `` elements and the `accent-colour` CSS property. (_As a lifelong Nintendo fan, this stuff is catnip to me_). Shaw Codepen [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/mx6si7nlzl6czibjaq2d.jpg)](https://min-max-calculator.9elements.com/) [Min-Max-Value Interpolation Tool](https://min-max-calculator.9elements.com/) — Calculate the `clamp` formula necessary to interpolate between two values in a given viewport range. 9elements [Content Wind: Lightweight Template to Build a Markdown Driven Website with Nuxt, Tailwind, and Iconify](https://github.com/Atinux/content-wind) Sébastien Chopin ✨ **QUICK RELEASES** [Next.js 12.2](https://nextjs.org/blog/next-12-2) [LostGrid 9.0](https://github.com/peterramsing/lost) – Powerful grid system built in PostCSS. [📅 TUI Calendar 2](https://github.com/nhn/tui.calendar) – JavaScript calendar with all the trimmings. [resvg-js 2.1](https://github.com/yisibl/resvg-js) – High-performance Rust-powered SVG renderer and toolkit. [JZZ 1.5.2](https://github.com/jazz-soft/JZZ) – MIDI library for Node.js and browsers. [css-spinner 2.0.3](https://github.com/loadingio/css-spinner) – 12 small, elegant pure CSS spinners. [vue-tel-input 6.0](https://github.com/iamstevendao/vue-tel-input) – Telephone number input for Vue apps. 📬 **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|*) [Ipx.](https://frontendfoc.us/open/549/*|UID|*?ipx=t)