Keep selector conflicts to a minimum
The new @scope rule is here! It’s a better way to keep our component styles contained – without relying on third-party tools or extreme naming conventions.
Scoped styles have always been the primary goal of CSS.
Selectors scope declarations to matched elements.
Those selectors can be combined to create more specific scopes –
each modified by its relation to others.
But the @scope feature,
already available in Chromium browsers,
will make that functionality even more powerful.
<dialog> and popover
Elements and windows that pop up on the screen are one of the most common patterns on the web. With use cases spanning from alerts and brief forms requesting data, to the now ubiquitous cookie settings prompt, these layered UI patterns are used frequently by developers.
From image sharing sites to online stores, image galleries are a common pattern on the web. Images can be very data heavy, and loading images can make the page take a long time to load. In addition, users have high expectations around the usability of galleries, so it’s common to…
One of the goals when writing CSS is to build component parts that will adapt well to different (and unexpected) contexts. Ideally, a component can be placed inside any “container” element without it feeling broken or out of place. How can you accomplish this in a complex layout like a…