learn • do • know
all css
border-radius: 1px 2px 3px 4px / 5px 6px 7px 8px; is the same as border-top-left-radius: 1px / 5px; border-top-right-radius: 2px / 6px; border-bottom-right-radius: 3px / 7px; border-bottom-left-radius: 4px / 8px; The order is border-top-left-radius x border-top-right-radius x border-bottom-right-radius x border-bottom-left-radius x / border-top-left-radius y border-top-right-radius y border-bottom-right-radius y border-bottom-left-radius y ; has(> .pink):hover > *:not(:hover) { background: white; } parent of pink, hover any, others change :has(> .pink) > *:not(.pink) { background: white; } siblings of pink get white bg: parent of pink all children except pink white bg
<select name="theme" id="theme"> <option value="system">System</option> <option value="brightlight">Light</option> <option value="darknight">Dark</option> </select> :root { --theme: brightlight; color-scheme: light; } @media (prefers-color-scheme: dark) { --theme: darknight; color-scheme: dark; } :root:has([value="brightlight"]:checked) { --theme: brightlight; color-scheme: light;} :root:has([value="darknight"]:checked) { --theme: darknight; color-scheme: dark; } body { background: hsl(0 0% 90%); color: hsl(0 0% 15%); h1, h2: hsl(0 0%… .my-block-container { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } max-inline-size instead of max-width margin-[inline | block] (two values) instead of margin left/right or margin top/bottom with -inline or -block and -start or -end • text-align • border • float • inset kbd:not(:has(kbd, samp)) { color: midnightblue; background: aliceblue; border-radius: 4px; padding-inline: 4px; box-shadow: 2px 2px 0 3px Lightsteelblue; margin-inline-end: .25ch; } for system menus, messages, and outputs samp { padding: 1rem; border: 1px solid currentColor; background: hsl(from currentColor h s l / 0.1); } <samp>To… textarea { field-sizing: content; width: clamp{100px, 300px, 100%}; } | azure | lightcyan | ||||
| paleturquoise | |||||
| mediumturquoise | turquoise | ||||
| cadetblue | cyan | ||||