~frontendfocus | Issue 667 - Are you using container queries yet? (17)

i-html: A Drop-In Web Component That Allows for Dynamically Importing HTML Inline — Described as being ‘similar to an iframe’, except that the HTML is ‘adopted’ into the page. The benefits and use cases are explained in detail here.

Orbit: A Framework to Create Radial Interfaces with CSS — Includes various CSS classes and Custom Elements for designing ‘radial’ or circular graphics and designs. The docs includes plenty of examples for this niche framework.

VS Code Theme Generator: An Online Tool to Generate and Customize VS Code Themes — The UI lets you preview the theme as you work and you have the ability to have granular control over the tokens in the syntax highlighting.

A Friendly Introduction to Container Queries — It’s been a couple of years now since the “biggest missing piece in the CSS toolkit” first started landing in browsers, but despite container queries being a highly requested and now well supported feature, Josh opines that we aren’t really using it all that much (however...). Here he goes into why take up may be low, reintroduces...

Exploring the Browser Rendering Process — A technical look at what actually occurs between typing a URL in your browser and the moment a page is displayed. It’s a solid explainer of the browser rendering process (told in an interactive way).

Should Masonry Be Part of CSS Grid? — As the conversation around just how best to add Masonry layout to CSS continues, Ahmad explores the leading options and shares his take. This post looks at both masonry as both a part of CSS Grid and as its own display type. As is typical with Ahmad’s work, there's lots of good code examples and visuals...

The Details and Summary Elements Are Getting An Upgrade — A quick look at proposed changes to make the <details> element more customizable and interoperable between browsers.

Eleven HTML Best Practices for Login and Sign-up Forms — Andrey notes that “even popular sites fail to implement” the best practices highlighted in this recently updated article (such as autocomplete, focus states, validation, etc). There’s a quick checklist towards the end here.

Mastering Interaction to Next Paint (INP) — A look at what this Core Web Vitals metric is measuring, how to diagnose it, and, most importantly, how to fix it so your site interactions nice and responsive.

What Do Survey Demographics Tell Us? — Miriam looks over the latest State of CSS survey results, and shares her thoughts on the findings and whether we’re asking the right questions.

Clarifying the Relationship Between Popovers and Dialogs — An attempt to clear up any potential confusion you may have here, along with summarizing the key mental model to takeaway.

What’s the Deal with WebKit Font Smoothing? — On whether or not we should add this one line of CSS to our projects.

skellyCSS: A Lightweight CSS Framework to Quickly Implement Skeletons Into Your Projects — For showing gray placeholder content often seen during page load. There’s also a web components library based on the framework.

Web Visual Editor: A VS Code Extension to Edit HTML Files Visually — Works similar to the browser devtools, providing a live preview of visual changes with element selection, copy/paste elements, zoom in/out, drag elements, and more. A key difference to the well known Live Preview is that changes in the preview then reflect back in the code.

Prompt, Run, Edit, and Deploy Full-Stack Web Apps with bolt.new — StackBlitz recently released in-browser AI web development agent: bolt.new! Give it a try today.

AuthKit: The World’s Best Login Box — Powered by WorkOS & Radix — AuthKit is a complete solution for authentication, authorization, and user management. It’s free up to 1 million MAUs and comes standard with RBAC, bot protection, MFA, and more.