2b:null 2c:["$","title",null,{"children":"Detecting Support for @property CSS At-Rule (In a Funky Way) | Quadbits Studio | Observable"}] 31:[] 2f:{"id":"ff972d3def317108","slug":"detecting-support-for-property-css-at-rule","title":"Detecting Support for @property CSS At-Rule (In a Funky Way)","thumbnail":"78ab85aa34f7263baf1d8b3166e6d1f743a701ef49591ffd7a2698f7505edd9b","access_level":"public","create_time":"$D2024-07-06T11:18:48.641Z","update_time":"$D2024-07-06T11:30:13.827Z","view_time":null,"first_public_time":"$D2024-07-06T11:31:08.383Z","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":19,"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,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","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","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","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","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","output":"","database":"$undefined"},{"id":14,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$${[\n html`${pass ? \"👍\" : \"👎\" }`,\n md`> This browser does ${pass ? \"\": \"not\"} support @property at-rule.`\n]}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"`registerProperty()` is ${!!CSS.registerProperty ? '' : 'not'} available.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"viewof pass = Inputs.input(probe())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"probe = () =>\n self\n .getComputedStyle(document.documentElement)\n .getPropertyValue(\"--has-property\") * 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"