More Syntax - Tasty Web Development Treats episodes

996: 10 New CSS and HTML APIs thumbnail

996: 10 New CSS and HTML APIs

Published 15 Apr 2026

Duration: 00:31:29

Recent CSS/HTML advancements include the CSS Masonry API for dynamic layouts, HTML in Canvas for enhanced accessibility, named container queries for modularity, experimental APIs like CSS Random Number, and challenges in browser support alongside niche design applications.

Episode Description

Wes and Scott talk about the latest CSS and browser features, including the Grid Lines API for masonry layouts, HTML in Canvas, name-only container qu...

Overview

The podcast discusses recent updates and experimental features in CSS and HTML that aim to enhance web design flexibility and interactivity. Key highlights include the CSS Masonry API (Grid Lanes), which enables dynamic, Pinterest-style layouts by allowing elements to fill gaps in grids, though its availability remains limited to Safari and experimental in Chrome/Firefox. The HTML in Canvas API introduces the ability to embed HTML elements within <canvas>, preserving accessibility while enabling effects like pixelation or distortion, though it requires manual JavaScript rendering. Additionally, named container queries in CSS allow developers to scope styles to specific elements using container names, offering a more modular alternative to class-based scoping, though browser support is still emerging. These updates reflect a shift toward more integrated, accessible solutions for complex layouts and animations.

The discussion also covers broader implications of these features, such as challenges in browser adoption and documentation for experimental APIs like named container queries. Innovations like the CSS Random Number API, which generates random values for dynamic styling, and pseudo-selectors for search highlights (::search-text, ::current) show potential for creative UI interactions. Furthermore, canvas-based interactivity with DOM elements, akin to Houdinis capabilities, allows pixel-level manipulation while maintaining accessibility. However, limitations in fallback behavior and the need for explicit JavaScript rendering complicate implementation. The podcast emphasizes the importance of long-term, evergreen techniques, such as native CSS scoping and canvas interactivity, over time-bound trends.

Additional topics include sticky positioning improvements in Chrome 148 for both horizontal and vertical directions, multi-column layout fixes with properties like column-wrap, and border-shape APIs for creating custom shapes without SVGs or masks. The Element-Scoped View Transitions API allows granular control over animations for individual components, improving dynamic UI interactions. Challenges persist in areas like lazy loading and search result rehighlighting, where browsers lack native support for maintaining state after content updates. Overall, the session underscores a growing focus on progressive enhancement through modern CSS and JavaScript APIs, alongside the need for developers to explore and adapt to these evolving tools.

Recent Episodes of Syntax - Tasty Web Development Treats

1 Jun 2026 1009: 54% AI-Generated and Climbing State of AI

A survey highlights rising AI adoption in web development, with 18% of developers using AI to write 75% of their code, mixed perceptions of its quality, prominence of ChatGPT and emerging tools like Claude/Gemini, enterprise integration trends, challenges like tool costs and unclear "local model" misconceptions, and ongoing debates about job displacement, creativity, and software quality.

27 May 2026 Diffs, Trees, and VS Code 2.0

The text explores the development of code editing tools like diffs and trees for AI-driven code review, challenges with GitHub's performance, introduces scalable solutions like Code Storage, and emphasizes optimizations such as virtualization, GPU acceleration, and AI delegation to handle large-scale code processing efficiently.

25 May 2026 1007: 8 Tech Choices to Lock In Before Agentmaxxing

Establishing a clear foundation through meticulous planningdefining schemas, using TypeScript types, organizing routing/authentication upfront, and standardizing UI/CSSprevents long-term complexity, avoids AI-generated clutter, and ensures scalable, coherent development.

20 May 2026 1006: Can AI Make Good Design?

AI in design balances task automation and template-based efficiency with limitations in originality, nuance, and ethical authenticity, requiring human oversight to address creative, contextual, and user-centric needs.

18 May 2026 1005: Programatic and Skill based Video Creation with Remotion

Recommended: Interesting video creation tool

Remotion, a React-based video generation tool, has grown from a niche developer tool to a mainstream platform through AI integration, enabling non-technical video creation, while balancing open-source access with monetization, exploring advanced APIs, and addressing challenges in rendering, AI collaboration, and dynamic content integration.

More Syntax - Tasty Web Development Treats episodes