- View Transitions
- CSS Grid
- Container Queries
Container Queries
Intrinsically responsive design
Logical components
Using advanced selectors
.item:has(.star) .title {}
.item:has(:checked) {}
.inbox:has(:nth-child(n + 11)) + .pagination-bar {}
Dynamic Color Theming
/* color-mix(in srgb, var(--color-brand), transparent var(--alpha-percent)); */
:root {
--primary: royalblue;
--primary-a90: color-mix(in srgb, var(--color-brand), transparent 10%));
--primary-a80: color-mix(in srgb, var(--color-brand), transparent 20%));
--primary-a50: color-mix(in srgb, var(--color-brand), transparent 50%));
}