modern-css

# Modern CSS This skill provides a reference for writing modern, robust, and efficient CSS. --- ## Layout & Responsive Design ### Container Queries ```css .card { container: --my-card / inline-size; } @container --my-card (width < 40ch) { /* Component-based responsive design */ } @container (20ch < width < 50ch) { /* Range syntax */ } ``` **Container units:** `cqi`, `cqb`, `cqw`, `cqh` - size relative to container dimensions **Anchored container queries:** Style positioned elements based on anchor fallback state ```css .tooltip { container-type: anchored; } @container anchored(top) { /* Styles when positioned at top */ } ``` ### Media Query Range Syntax ```css @media (width <= 1024px) { } @media (360px < width < 1024px) { } ``` ### Grid Enhancements - **Subgrid:** Inherit parent grid lines for nested layouts - **Masonry:** `display: grid-lanes` for Pinterest-style layouts with logical tab order. (Previously proposed as `grid-template-rows: masonry`). --- ## Color & Theming ### Color Scheme & Light-Dark Function ```css :root { color-scheme: light dark; --surface-1: light-dark(white, #222); --text-1: light-dark(#222, #fff); } ``` ### Modern Color Spaces ```css /* OKLCH: uniform brightness, P3+ colors */ .vibrant { background: oklch(72% 75% 330); } /* Display-P3 for HDR displays */ @media (dynamic-range: high) { .neon { --neon-red: color(display-p3 1 0 0); } } /* Better gradients with in oklch */ .gradient { background: linear-gradient( to right in oklch, color(display-p3 1 0 .5), color(display-p3 0 1 1) ); } ``` ### Color Manipulation ```css /* color-mix() */ .lighten { background: color-mix(in oklab, var(--brand), white); } /* Relative color syntax */ .lighter { background: oklch(from blue calc(l + .25) c h); background: oklch(from blue 75% c h); /* Set to specific lightness */ } .semi-transparent { background: oklch(from var(--color) l c h / 50%); } .complementary { background: hsl(from blue calc(h + 180) s l); } ``` ### Accent Color ```css :root { accent-color: hotpink; /* Tints checkboxes, radios, range inputs */ } ``` --- ## Typography ### Text Wrapping ```css h1 { text-wrap: balance; /* Balanced multi-line headings */ max-inline-size: 25ch; } p { text-wrap: pretty; /* No orphans */ max-inline-size: 50ch; } ``` ### Text Box Trim ```css h1, p, button { text-box: trim-both cap alphabetic; /* Optical vertical centering */ } ``` ### Fluid Typography ```css .heading { font-size: clamp(1rem, 1rem + 0.5vw, 2rem); /* Respects user preferences */ } ``` ### Dynamic Viewport Units - `dvh` / `dvw` - Dynamic (accounts for mobile browser UI) - `svh` / `svw` - Small (smallest possible viewport) - `lvh` / `lvw` - Large (largest possible viewport) --- ## Animations & Motion ### Scroll-Driven Animation ```css /* Animate on scroll position */ .parallax { animation: slide-up linear both; animation-timeline: scroll(); } /* Animate on viewport intersection */ .fade-in { animation: fade linear both; animation-timeline: view(); animation-range: cover -75cqi contain 20cqi; } ``` ### View Transitions **Status:** Baseline Newly Available (Same-document). Cross-document transitions are in Limited Availability (Chrome/Safari 18.2+). ```css @view-transition { navigation: auto; /* Automatically animate page transitions (MPAs) */ } nav { view-transition-name: --persist-nav; /* Persist specific elements */ view-transition-class: --site-header; /* Group transitions with classes */ } /* Style the active transition */ html:active-view-transition { overflow: hidden; } ``` **Nested View Transition Groups:** Preserve 3D transforms and clipping during transitions. ### Advanced Easing with linear() ```css .springy { --spring: linear( 0, 0.14 4%, 0.94 17%, 1.15 24% 30%, 1.02 43%, 0.98 51%, 1 77%, 1 ); transition: transform 1s var(--spring); } ``` ### @starting-style ```css .dialog { transition: opacity .5s, scale .5s; @starting-style { opacity: 0; scale: 1.1; } } ``` --- ## Custom Properties & Advanced Features ### @property Type-safe, animatable custom properties: ```css @property --gradient-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; } .animate { transition: --gradient-angle 1s ease; &:hover { --gradient-angle: 360deg; } } ``` ### Math Functions & calc-size() **Newly Available:** `calc-size()` allows calculations and transitions on intrinsic sizes (auto, min-content). ```css /* Finally: Animate to auto height! */ .accordion-content { height: 0; overflow: hidden; transition: height 0.3s ease; } .accordion-item.open .accordion-content { height: calc-size(auto); } .radial-layout { --_angle: calc(var(--sibling-index) * var(--_offset)); translate: calc(cos(var(--_angle)) * var(--_circle-size)) calc(sin(var(--_angle)) * var(--_circle-size)); } ``` ### Tree Counting Functions (Coming Soon) ```css .staggered { animation-delay: calc(sibling-index() * .1s); background-color: hsl(sibling-count() 50% 50%); } ``` ### Conditional CSS with if() (Coming Soon) ```css .dynamic { color: if( style(--theme: dark), white, black ); } ``` --- ## Architecture & Organization ### Cascade Layers ```css @layer reset, design-system, components, utilities; @import "open-props/colors" layer(design-system); @import "components/nav/base.css" layer(components.nav); @layer components.nav.primary { nav { position: sticky; inset-block-start: 0; } } ``` Benefits: - Import third-party CSS with lower specificity - Organize styles by concern, not selector weight - Nested layers create clear hierarchies --- ## Interactive Components ### Dialog ```html <dialog id="modal"> <form method="dialog"> <button value="cancel">Cancel</button> <button value="confirm">Confirm</button> </form> </dialog> <button commandfor="modal" command="showModal">Open</button> <button commandfor="modal" command="close">Close</button> ``` **New:** `closedby` attribute enables light-dismiss behavior ### Popover ```html <button popovertarget="menu">Show Menu</button> <div popover id="menu">...</div> ``` **popover=hint:** Ephemeral tooltips that don't dismiss other popovers ```css [popover] { transition: display .5s allow-discrete, overlay .5s allow-discrete, opacity .5s; @starting-style { &:popover-open { opacity: 0; } } } ``` ### Anchor Positioning ```css .tooltip-anchor { anchor-name: --tooltip; } .tooltip[popover] { position-anchor: --tooltip; position-area: block-start; position-try-fallbacks: flip-block; position-try-order: most-height; } ``` **Pseudo-elements:** `anchor()`, `::scroll-button()`, `::scroll-marker()` ### Exclusive Accordion ```html <details name="accordion">...</details> <details name="accordion">...</details> <!-- Only one can be open at a time --> ``` ### Customizable Select ```css select { appearance: base-select; /* Full CSS control */ } /* Style options with rich HTML */ select option::before { content: ""; /* Can include images, icons */ } ``` ### Search Element ```html <search> <form> <input type="search" name="q"> <button type="submit">Search</button> </form> </search> ``` --- ## Form Enhancements ### Field Sizing ```css textarea, select, input { field-sizing: content; /* Auto-grow to content */ } textarea { min-block-size: 3lh; /* Line-height units */ max-block-size: 80dvh; } ``` ### Better Validation Pseudo-Classes ```css /* Wait for user interaction before showing errors */ :user-invalid { outline-color: red; } :user-valid { outline-color: green; } label:has(+ input:user-invalid) { text-decoration: underline wavy red; } ``` ### HR in Select ```html <select> <option>Option 1</option> <hr> <option>Option 2</option> </select> ``` --- ## Visual Effects ### Scrollbar Styling ```css .custom-scrollbar { scrollbar-color: hotpink transparent; scrollbar-width: thin; } ``` ### Shape Function ```css .complex-clip { clip-path: shape( from 0% 0%, curve by 50% 25% via 25% 50%, line to 100% 100% ); } ``` ### Corner Shapes ```css .fancy-corners { corner-shape: squircle; corner-shape: notch; corner-shape: scoop; corner-shape: superellipse(0.7); } ``` --- ## Progressive Enhancement Patterns ### Feature Detection ```css @supports (animation-timeline: view()) { .fade-in { animation: fade linear both; animation-timeline: view(); } } @supports (container-type: inline-size) { .responsive-card { container-type: inline-size; } } ```