--- title: "Getting to grips with container queries" publication: "Frontend Focus" issue: 637 published_at: "2024-04-03" canonical_url: "https://frontendfoc.us/issues/637" --- Plus the problems with in-app browsers, a new drag and drop framework, and visualizing the DOM in 3D. | Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/tailwind-css/?utm_source=email&utm_medium=frontendfocus&utm_content=tailwindcss) 🚀 **Frontend** Focus #​637 — April 3, 2024 | [Read on the web](https://frontendfoc.us/issues/637) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1712137761/vbqkfnzdkqd8vnob2hyj.png)](https://ishadeed.com/article/css-container-query-guide) [An Interactive Guide to CSS Container Queries](https://ishadeed.com/article/css-container-query-guide) — This is a detailed explainer on [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries), exploring the problems they solve, how they work, and how we can use them in our workflows. Lots of code and visuals to help things along too. Well worth bookmarking. Ahmad Shadeed [![\](https://copm.s3.amazonaws.com/c3ea8e7c.png)](https://frontendmasters.com/courses/tailwind-css/?utm_source=email&utm_medium=frontendfocus&utm_content=tailwindcss) [Tailwind CSS: Write Efficient, Utility-First CSS](https://frontendmasters.com/courses/tailwind-css/?utm_source=email&utm_medium=frontendfocus&utm_content=tailwindcss) — Join Steve Kinney for this detailed video course exploring Tailwind CSS. You'll build real-world components like modals, forms, and page layouts — becoming proficient in creating stunning, responsive, and maintainable UI. Frontend Masters sponsor [Introducing Babylon.js 7.0](https://babylonjs.medium.com/introducing-babylon-js-7-0-a141cd7ede0d) — This new version of the [popular 3D web rendering engine](https://www.babylonjs.com) is now here, adding Apple Vision Pro support, improved WebXR support, improved ragdoll physics, procedural geometry, and more. Babylon.js [A Web Designer’s Accessibility Advocacy Toolkit](https://www.smashingmagazine.com/2024/02/web-designer-accessibility-advocacy-toolkit/) — A collection of strategies and selling points to help you encourage and advocate for accessibility in your work, including useful scripts you can use as starting points. Yichan Wang ⚡️ Quick Links - 🎷 [Version 6.5 of WordPress](https://wordpress.org/news/2024/04/regina/), dubbed 'Regina', is out now. - 🍏 Apple now has a [dedicated YouTube channel](https://www.youtube.com/@AppleDeveloper) for all of its dev content. - 🧭 [Here are the release notes](https://webkit.org/blog/15243/release-notes-for-safari-technology-preview-191/) for Safari Technology Preview 191. - 〰 Did you know you can [use <`hr`> elements](https://developer.chrome.com/blog/hr-in-select/) within <`select`> dropdowns? - 🌐 If you're feeling particularly nostalgic for some early web culture, [here's a site with over 25,000 little website buttons](https://hellnet.work/8831/) from the GeoCities archive. 📙 **Tutorials, Articles & Opinion** [Infinite-Scrolling Logos in Flat HTML and Pure CSS](https://www.smashingmagazine.com/2024/04/infinite-scrolling-logos-html-css/) — Remember the long-deprecated HTML `` element? If you need a horizontal auto-scrolling solution nowadays, you’ll no doubt turn to CSS. This post demonstrates one technique that uses as little HTML as possible. Sylvester Bistrović ['In-App Browsers are Still a Privacy, Security, and Choice Problem'](https://www.theregister.com/2024/03/27/inapp_browsers/) — The Open Web Advocacy (OWA) group wants to prevent in-app browsers from being used to “_thwart competition and flout user choice_”. Thomas Claburn [Learn Modern UI Engineering with Web Components and Web Standards](https://bluespire.com/p/web-component-engineering?utm_source=frontendfocus&utm_medium=email&utm_campaign=wcec-2&utm_content=sponsor-link) — 13 modules, 170+ videos, and an interactive learning app guide you from novice to expert with the latest web standards. Blue Spire sponsor [How to Kill the Cascade](https://robinrendle.com/the-cascade/017-how-to-kill-the-cascade/) — “_We’ve always needed local resets. And now, with the magic of `@scope` and `all: revert-layer;`, we finally have them._” Robin Rendle [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1712147219/xmhtgpv23yej6bzzqymf.png)](https://fosdem.org/2024/schedule/event/fosdem-2024-2410-keyboard-interactions/) ▶[Keyboard Interactions](https://fosdem.org/2024/schedule/event/fosdem-2024-2410-keyboard-interactions/) — Here's a roughly 15-minute talk covering the technical aspects of measuring keyboard interactions in Chromium and how they affect the [Interaction to Next Paint](https://web.dev/articles/inp)metric. Patricija Cerkaite [The Curious Case of the CSS Monochrome Media Query](https://blog.stephaniestimac.com/posts/2024/03/css-monochrome-media-query/) — This is a little known [media-query feature](https://caniuse.com/mdn-css_at-rules_media_monochrome) designed to target e-ink devices (such as e-readers), but it seems a tad unloved right now in terms of real-world utilization. Stephanie Stimac [Why I Care Deeply About Web Accessibility And You Should Too](https://dev.to/schalkneethling/why-i-care-deeply-about-web-accessibility-and-you-should-too-274a) — A web accessibility evangelist makes the case. Schalk Neethling [The Power of `:has()` in CSS](https://css-tricks.com/the-power-of-has-in-css/) Chris DeMars [How to Optimize Cumulative Layout Shift (CLS) on Shopify Sites](https://performance.shopify.com/blogs/blog/how-to-optimize-cumulative-layout-shift-cls-on-shopify-sites) Sia Karamalegos [Everything You Need to Know About Captioned Videos](https://meryl.net/the-complete-guide-to-captioned-videos/) Sumner Davenport 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/kafwy3vfdomva77zx10k.jpg)](https://wicky.nillia.ms/cally/) [Cally: Small, Feature-Rich Calendar Components](https://wicky.nillia.ms/cally/) — A collection of open-source calendar components for selecting single dates or date ranges. Framework-agnostic, themeable, localizable, and accessible. [Repo here](https://github.com/WickyNilliams/cally). Nick Williams [Atlassian's _Pragmatic Drag and Drop_ Framework](https://atlassian.design/components/pragmatic-drag-and-drop/about) — A performance-focused drag and drop library that can be used to power experiences on any frontend stack. There’s a live demo on the page along with [▶️ a recording of a talk](https://www.youtube.com/watch?v=5SQkOyzZLHM) by Alex Reardon walking through the motivations for creating it and how it works. Atlassian [🎹 Fast, Reliable, Multi-Format Barcode Scanning for Web Apps with STRICH](https://strich.io/?ref=frontend-focus) — Reliably scan barcodes in your web app! Easy integration, free demo app and free 30-day trial. STRICH sponsor [Journey.js: A Zero-dependency Library to Create Interactive & Accessible Guided Tours](https://github.com/williamtroup/Journey.js) — The live [examples](https://www.william-troup.com/journey-js/examples/index.html) are fairly rudimentary, but the focus on accessibility and built-in support for 51 languages are pluses. William Troup [DOM3D.js: A 3D DOM Viewer in a GitHub Gist](https://gist.github.com/OrionReed/4c3778ebc2b5026d2354359ca49077ca) — Some code you can copy and paste into your browser console to get a 3D view of the DOM – sort of (move your pointer to navigate the monstrosity it creates). The effect is _very_ odd at first, but it’s fun to try. Orion Reed [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/mbzirxdp4ljal2bhrp50.jpg)](https://github.com/github/relative-time-element) [`` 4.4: Format Timestamps as a Localized Relative Time](https://github.com/github/relative-time-element) — Supply this web component with a standard formatted date and time and it’ll render the right text to suit. GitHub [magick.css: A Minimalistic, Mostly Classless CSS Framework](https://github.com/wintermute-cell/magick.css) — See it in action on the author’s website [here](https://css.winterveil.net/). It has a ‘brutalist’ look (helped by the font choice) and is inspired by similar ‘classless’ frameworks you may have seen in recent years. Julius Kawatziklis 📬 **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/637/*|UID|*?ipx=t)