Hübschere Webseiten dank modernem CSS

Selector Nesting

Previously:

.example { font-family: system-ui; font-size: 1.2rem; } .example > a { color: tomato; } .example > a:hover, .example > a:focus { color: ivory; background-color: tomato; }

Selector Nesting

Finally, we can write:

.example { font-family: system-ui; font-size: 1.2rem; & > a { color: tomato; &:hover, &:focus { color: ivory; background-color: tomato; } } }

Selector Nesting

.parent-rule { /* parent rule properties */ :hover { /* child rule properties */ } } .parent-rule { /* .parent rule properties */ &:hover { /* child rule properties */ } } .card { /* .card styles */ .featured & & & { /* .featured .card .card .card styles */ } }

Selector Nesting

Scoping with Host Context Selector

/* Selects a shadow root host, only if it is a descendant of the selector argument */ :host-context(h1) { font-weight: bold; }

Scoping with Host Context Selector

Part Selector

custom-element::part(foo) { /* Styles to apply to the `foo` part */ }

Part Selector

CSS Cascade Layers

/* establish a layer order up-front, from lowest to highest priority */ @layer reset, defaults, patterns, components, utilities, overrides; /* import stylesheets into a layer (dot syntax represents nesting) */ @import url('framework.css') layer(components.framework); /* add styles to layers */ @layer utilities { /* high layer priority, despite low specificity */ selector { /* ... */ } } @layer defaults { /* higher specificity, but lower layer priority */ } /* un-layered styles have the highest priority */

CSS Cascade Layers

Understanding the cascade

More fine-grained control over the cascade.

CSS Cascade Layers

View Transitions

::view-transition { /* ... */ } ::view-transition-new(pt-name-selector) { /* ... */ } ::view-transition-old(pt-name-selector) { /* ... */ } ::view-transition-group(pt-name-selector) { /* ... */ } view-transition-name: ident; view-transition-class: ident;

View Transitions

function handleClick(e) { // Fallback for browsers that don't support this API: if (!document.startViewTransition) { updateTheDOMSomehow(); return; } // With a View Transition: document.startViewTransition(() => updateTheDOMSomehow()); }

View Transitions

Container Queries

.post { container-type: inline-size; } /* Default heading styles for the card title */ .card h2 { font-size: 1em; } /* If the container is larger than 700px */ @container (min-width: 700px) { .card h2 { font-size: 2em; } }

Container Queries

.post { container-type: inline-size; container-name: sidebar; } @container sidebar (min-width: 700px) { .card { font-size: max(1.5em, 1.23em + 2cqi); } } /* Alternative */ .post { container: sidebar / inline-size; }

Container Queries

cqw1% of a query container's width
cqh1% of a query container's height
cqi1% of a query container's inline size
cqb1% of a query container's block size
cqminThe smaller value of either cqi or cqb
cqmaxThe larger value of either cqi or cqb

Container Queries

Logical Properties

block-size: 300px; max-block-size: 1000px; min-block-size: 0; inline-size: 150px; max-inline-size: 500px; min-inline-size: 0; margin-block: 10px 20px; margin-block-start: 10px; margin-block-end: 20px; margin-inline: 10px 20px; margin-inline-start: 10px; margin-inline-end: 20px; padding-block: 10px 20px; padding-inline: 10px 20px; /* -start and -end etc. */

Logical Properties

Anchor Positioning

#img { anchor-name: --cover; } #overlay { position: absolute; top: anchor(--cover top); bottom: anchor(--cover bottom); left: anchor(--cover left); right: anchor(--cover right); }