Container Queries, :has() and Anchor Positioning: Modern CSS That Changes Web Design

Much of what makes a website feel polished, such as a card that rearranges itself, a form field that highlights when something is wrong, or a tooltip that stays next to its button, used to need extra JavaScript. Three CSS features now handle these jobs inside the browser. They are called container queries, the :has() selector and anchor positioning. You do not need to remember the names. You need to know what they make possible and whether your customers' browsers can use them.

Container queries: components that adapt to their own space

Ordinary responsive design changes the layout according to the width of the whole screen. That breaks down when the same product card appears in a wide grid on one page and a narrow sidebar on another. A container query lets the card look at the space its parent gives it and rearrange itself, for example placing the photo beside the text when there is room and above it when there is not.

MDN lists the container-type property as Widely available, working across browsers since February 2023. This is safe, mature technology. For a business, the benefit is consistency: one card design reused across the home page, search results and blog, without separate fixes for each place. Our guide to responsive design covers the older approach.

:has(): styling a block by what it contains

For years, CSS could style an element only by what surrounded it, never by what was inside it. The :has() selector reverses that. A form row can turn red when its field contains an error. A product tile can show a badge only when it contains a sale price. A card can get a different layout when it has no image.

MDN reports that :has() has been available across browsers since December 2023, and lists it as Widely available. The practical gain is less code and fewer mistakes. Developers no longer write a script that watches the page and adds styling labels by hand, so there is less to maintain.

Anchor positioning: tooltips and menus that stay put

Anchor positioning tethers one element to another. A help bubble stays beside its question mark, a dropdown opens under its button, and both move to the other side automatically when they would run off the screen. Previously this needed a script library to measure positions all the time.

It is the newest of the three. Web.dev reported in January 2026 that Firefox 147 added support, which made anchor positioning Baseline Newly available, meaning it works in the current versions of all major browsers. Newly available is different from Widely available: people on older phones and older browser versions may not have it yet.

What to ask for, and what to avoid

• Ask for a fallback. Anchored tooltips and menus should still be usable, perhaps just placed less cleverly, in older browsers.
• Prefer built-in browser controls. A menu or popup built with the browser's own popover feature also supports keyboard use and closing with the Escape key.
• Do not trade clarity for cleverness. A tooltip must never be the only place a price, deadline or warning appears, because phone users cannot hover.
• Do not rebuild a working site just for this. If your pages are clear and quick, none of these features is urgent.

Practical examples for a business website

1. A school admissions page where a fee card sits in the main column on desktop and in a narrow side box on phones, using one design.
2. An enquiry form that marks only the row with a problem, and shows a green tick when the row is valid.
3. A course listing that shows a "New" label only on cards that contain a start date.
4. A price table with a small hint beside "GST extra" that opens next to the text, not at the page edge.

Each of these can work with a lighter page, since the browser does what a script used to do. Less script usually helps speed, which links straight to Core Web Vitals and, in turn, to how people and search engines judge your site.

How a project benefits at VS Tech Builders

We use these features where they remove code, and where the fallback is acceptable, on business websites built with Next.js and Tailwind CSS. To judge whether a new feature is safe before relying on it, we check the Baseline status explained in our article on Baseline. When you ask a studio for a quote, ask which of these techniques it uses, and ask what a customer on an older phone will see. A clear answer is a good sign.

If you are planning a redesign and want advice on which of these are worth including, talk to us. We will tell you if a simpler approach is enough.

Sources

Checked on 3 November 2026. Technology changes quickly; always confirm details with the official source before you act on them.

• container-type — MDN Web Docs
• :has() — MDN Web Docs
• CSS anchor positioning — MDN Web Docs
• New to the web platform in January — web.dev

Frequently asked questions

What is a CSS container query?

It is a rule that lets a component change its layout based on the space available in its parent, not the whole screen width. A product card can sit sideways in a wide area and stack in a narrow one. MDN lists the feature as Widely available, working across browsers since February 2023, so it is safe to use.

Is the CSS :has() selector safe to use in 2026?

Yes. MDN reports that :has() has worked across browsers since December 2023 and classes it as Widely available. It lets a developer style a block according to what it contains, such as highlighting a form row with an error, which reduces the JavaScript a site needs.

Does anchor positioning work in every browser?

Web.dev reported in January 2026 that Firefox 147 added it, making anchor positioning Baseline Newly available across the major browsers. Because it is new, some people on older browser versions may still lack it, so tooltips and menus should have a usable fallback instead of failing.

Do I need to redesign my website to use these features?

No. They are tools for developers, and they can be added gradually to forms, cards and menus during normal updates. If your website is already clear, fast and easy on phones, there is no urgency. They matter most when you are building or rebuilding pages and want less code.