While major browsers like Chrome, Safari, and Firefox haven’t released new features recently, this update highlights excellent content from top web development educators.
Maintaining video state across different pages using view transitions
Chris Coyier illustrates how to preserve a video’s state across different web pages using CSS view transitions. While straightforward for same-page transitions, multi-page transitions require using JavaScript’s pageswap event to store video state in sessionStorage as a JSON string. This information can then be used to restore the state on pagereveal. This method also applies to audio and iframes, and despite a minor audio stutter, it offers a clever solution. Additionally, CodePen, founded by Chris, has launched a private beta for CodePen 2.0, allowing users to create multi-file projects and implement view transitions within the platform.
How to ‘name’ media queries
Kevin Powell presents a method for ‘naming’ media queries
. Although not as robust as @custom-media (
), which is not yet universally supported, Kevin’s approach offers an inventive workaround.
Adam Argyle recently noted that @custom-media is undergoing trials in Firefox Nightly. Until broader support arrives, understanding CSS cascade layers can help implement Kevin’s technique effectively.
Vale’s CSS reset
A well-crafted CSS reset often reveals valuable insights. Vale’s CSS reset, for instance, includes a useful rule like svg:not([fill]) { fill: currentColor; }, and offers many other beneficial additions for a custom reset.
How browsers work
For those curious about the inner workings of web browsers—from obtaining IP addresses and making HTTP requests to parsing HTML, constructing DOM trees, rendering layouts, and painting—Dmytro Krasun’s recent interactive guide, How Browsers Work, provides a fascinating exploration. This resource prompts reflection on the performance limitations of web development languages and the design choices behind various HTML, CSS, and JavaScript features.
How CSS layout works
Polypane also clarifies the core principles of CSS layout, covering topics such as the box model, lines and baselines, positioning schemes, the stacking context, grid layout, and flexbox. This information can be particularly helpful for CSS beginners. Experienced developers may also find it valuable for understanding how these foundational concepts relate to the rapidly evolving landscape of modern CSS features.
CSS masonry is (probably) just around the corner
Regarding layouts, Jen Simmons discusses the anticipated arrival of display: grid-lanes, also known as CSS masonry. Although not yet universally supported, all major browsers—Firefox, Safari, and Chrome/Edge—are currently experimenting with it, suggesting a potential for rapid adoption. Jen also offers polyfills for immediate use.
For those interested in an early dive, Sunkanmi Fafowora provides a guide to display: grid-lanes.
Theming animations using relative color syntax
For individuals passionate about design systems and structured approaches, Andy Clarke’s article on theming animations with CSS relative color syntax offers a way to connect artistic expression with logical organization. This resource is particularly relevant for those who frequently use CSS variables.
Modals vs. pages (and everything in-between)
Distinguishing between modals, pages, lightboxes, dialogs, and tooltips, and knowing their appropriate use cases, remains a challenge. The introduction of new CSS features like popovers and interest invokers further complicates this. Ryan Neufeld clarifies the modal vs. page debate and offers a decision-making framework for selecting the most suitable overlay type.
Text scaling support is being trialed in Chrome Canary
Operating system-level text scaling often doesn’t translate to web content. However, Josh Tumath reports that Chrome Canary is experimenting with a meta tag designed to enable web browsers to respect this OS setting. The tag, <meta name=”text-scale” content=”scale”>, is explored in more detail by Josh and warrants further investigation.
