2b:null 2c:["$","title",null,{"children":"Conditional Styling in CSS | Quadbits Studio | Observable"}] 31:[] 2f:{"id":"936dcabf7380f7bd","slug":"conditional-styling-in-css","title":"Conditional Styling in CSS","thumbnail":"cc26d1afdf60fdb6762b8df0e2a337d29ebd9a0ecc4651d08da241bd23333ff5","access_level":"public","create_time":"$D2024-07-17T14:42:00.524Z","update_time":"$D2026-01-21T10:50:54.042Z","view_time":null,"first_public_time":"$D2024-07-17T14:42:00.524Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024"},"version":48,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null}],"members":[{"type":"individual","id":"950eb34948878085","login":"galopin","name":"Michaël Guitton","avatar_url":"https://avatars-next.observableusercontent.com/b59822ff41962e9448473fadd4a11819ac725b074ad3868aabf532bade0ac00d","tier":null,"role":"editor"},{"type":"team","id":"57db707ac57c4c46","login":"quadbits","name":"Quadbits Studio","avatar_url":"https://avatars-next.observableusercontent.com/b3cdbe7333b9c0c791857786940f67bd782ddb4926310d9e33535abf8d2367f3","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Conditional Styling in CSS","cells":[{"id":41,"value":"$${[\n md`# Conditional Styling in CSS`,\n md`## … With Keyframe Animations and Custom Properties`\n].map(($_) =>\n Object.assign($_, {\n style: \"text-wrap: balance;\"\n })\n)}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"As Josh Comeau states it, [keyframe animations](https://www.joshwcomeau.com/animation/keyframe-animations/) are ${Object.assign(html`one of the most powerful, versatile tools in CSS.`, { style: `quotes: \"“\" \"”\"` })}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"A little-known fact is that we can hijack them to apply a _conditional style_ to any HTML element:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"1. group a set of related `@keyframes` at-rules, as if you were using an\n imperative programming language, effectively mimicking a `switch` statement,\n2. the `@keyframes` at-rule whose name matches the value of a specific\n _custom property_ will then apply the corresponding waypoint ruleset.\n\n${html`","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Yet Another Hack","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"Everything we need here is to define a single `@keyframes` at-rule and as many waypoints as necessary.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"The core idea behind this alternate method is that a paused animation can still be triggered by setting the `animation-delay` property to a negative offset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"As transforming raw numbers into `` values is easy-breezy, we can use indices for our user-oriented API:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"viewof waypoint = {\n const label = $(hello);\n const input = Inputs.range([1, Math.max(states.length, 1)], {\n label,\n value:\n ((elt) => elt && elt.style.getPropertyValue(\"--qb-waypoint\"))(\n mutable probe\n ) * 1 || 1,\n step: 1\n });\n mutable probe = label;\n yield input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof opacity = Inputs.range([0, 0.25], { label: \"Opacity\", step: 0.0625 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof toggle = Inputs.toggle({ label: \"Additional state\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`\n~~~css\n${output.textContent.trim()}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"output = {\n const keyframes =\n [`@keyframes ${ident} {`]\n .concat(\n states.map(\n (state, i) =>\n `${Math.floor((i * 100) / states.length)}% { ${Object.entries(state)\n .map(([k, v]) => `${k}: ${v}`)\n .join(\"; \")} }`\n )\n )\n .join(\"\\n \") + \"\\n}\";\n yield html`\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"((elt) => elt && (elt.style.setProperty(\"--qb-waypoint\", waypoint), waypoint))(\n mutable probe\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"ident = \"--qb-states\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"states = colors\n .slice()\n .reverse()\n .map((x) =>\n Object.fromEntries([\n [\"color\", x + \"\"],\n [\"background-color\", Object.assign(Object.create(x), { opacity }) + \"\"]\n ])\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"colors = [d3.color(\"red\"), d3.color(\"orange\"), d3.color(\"green\")].concat(\n toggle ? [d3.color(\"blue\")] : []\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"mutable probe = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"available = CSS.supports(\"(--css: variables)\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"hello = html`Hello, World!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"import { annotate } from \"@galopin/misclib-routines\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$$ = (elt) => elt.cloneNode(true)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"