2c:null 2d:["$","title",null,{"children":"Detecting Support for @property CSS At-Rule (In a Funky Way) | Quadbits Studio | Observable"}] 32:[] 30:{"id":"ff972d3def317108","slug":"detecting-support-for-property-css-at-rule","title":"Detecting Support for @property CSS At-Rule (In a Funky Way)","thumbnail":"c7f87084527e7ba6d8ce8d1e01328df436f6880badadefbb326f9aa3e02cc1ad","access_level":"public","create_time":"$D2024-07-06T11:18:48.641Z","update_time":"$D2026-09-25T12:30:12.757Z","view_time":null,"first_public_time":"$D2024-07-06T11:31:08.383Z","has_unpublished_edits":null,"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":27,"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":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Detecting Support for @property CSS At-Rule (In a Funky Way)","cells":[{"id":19,"value":"Object.assign(\n md`# Detecting Support for \\`@property\\` CSS At-Rule (In a Funky Way)`,\n {\n style: \"text-wrap: balance;\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"The [Properties and Values API](https://www.w3.org/TR/css-properties-values-api-1/) supercharges your CSS custom properties by giving them semantic meaning and fallback values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"The `@property` at-rule represents a custom property registration directly in a stylesheet _without having to run any JavaScript code_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"Valid `@property` at-rules result in a registered custom property, as if `registerProperty()` had been called with equivalent parameters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"The syntax of `@property` is the following:\n\n~~~\n@property {\n \n}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"You don’t actually need JavaScript or Style Queries to check if `@property` at-rule is supported; you can do it _using a paused keyframe animation instead_. Tada!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$${[\n html`${pass.flag ? \"👍\" : \"👎\" }`,\n md`> This browser does ${pass.flag ? \"\": \"not\"} support @property at-rule.`\n]}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"`registerProperty()` is ${!!CSS.registerProperty ? '' : 'not'} available.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof pass = Inputs.input(probe())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"probe = () => ({\n flag:\n self\n .getComputedStyle(document.documentElement)\n .getPropertyValue(\"--has-property\") * 1,\n tint: d3\n .rgb(\n self.getComputedStyle(document.body).getPropertyValue(\"background-color\")\n )\n .formatHex()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"