The very first native browser implementation of CSS variables are here. Stoyan Stefanov shows them off. It will be a long while until we can use them in production but hey, onward and upward!<\/p>\n","protected":false},"excerpt":{"rendered":"
The very first native browser implementation of CSS variables are here. Stoyan Stefanov shows them off. It will be a long while until we can use them in production but hey, onward and upward!<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":318658,"url":"https:\/\/css-tricks.com\/the-cicada-principle-revisited-with-css-variables\/","url_meta":{"origin":17204,"position":0},"title":"The Cicada Principle, revisited with CSS variables","date":"August 4, 2020","format":false,"excerpt":"Lea Verou digging up the CSS trickery classic and applying it to clip the backgrounds of some code blocks: The main idea is simple: You write your main rule using CSS variables, and then use\u00a0:nth-of-*()\u00a0rules to set these variables to something different every N items. If you use enough variables,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/cicada-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":181309,"url":"https:\/\/css-tricks.com\/advantages-native-css-variables\/","url_meta":{"origin":17204,"position":1},"title":"Advantages to Native CSS Variables","date":"September 1, 2014","format":false,"excerpt":"I tend to think variables are best left to a preprocessing step, but there are some distinct things that having them directly in CSS can do: Daniel Imms: [they] can change at runtime, allowing the implementation of things like theming to be done more elegantly. i.e. change the value of\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":314415,"url":"https:\/\/css-tricks.com\/global-and-component-style-settings-with-css-variables\/","url_meta":{"origin":17204,"position":2},"title":"Global and Component Style Settings with CSS Variables","date":"June 30, 2020","format":false,"excerpt":"The title of this Sara Soueidan article speaks to me. I'm a big fan of the idea that some CSS is best applied globally, and some CSS is best applied scoped to a component. I'm less interested in how that is done and more interested in just seeing that conceptual\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/style-guide-settings.png?fit=1200%2C776&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305435,"url":"https:\/\/css-tricks.com\/getting-javascript-to-talk-to-css-and-sass\/","url_meta":{"origin":17204,"position":3},"title":"Getting JavaScript to Talk to CSS and Sass","date":"April 3, 2020","format":false,"excerpt":"JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it\u2019s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind \u2014 something not involving a structural change, but rather putting CSS\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/css-sass-js.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":336933,"url":"https:\/\/css-tricks.com\/want-to-write-a-hover-effect-with-inline-css-use-css-variables\/","url_meta":{"origin":17204,"position":4},"title":"Want to Write a Hover Effect With Inline CSS? Use CSS Variables.","date":"March 26, 2021","format":false,"excerpt":"The other day I was working on a blog where each post has a custom color attached to it for a little dose of personality. The author gets to pick that color in the CMS when they\u2019re writing the post. Just a super-light layer of art direction. To make that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/button-hover.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334897,"url":"https:\/\/css-tricks.com\/use-css-variables-instead-of-react-context\/","url_meta":{"origin":17204,"position":5},"title":"Use CSS Variables instead of React Context","date":"February 19, 2021","format":false,"excerpt":"Turns out you can use several different libraries to pass color information around components. Or, you could use custom properties, built right into CSS, have no decline in your own developer experience, and deliver a faster experience to your users. Kent proves it here, with demos. For the record, you\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/css-custom-properties-js-react.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17204"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17204"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17204\/revisions"}],"predecessor-version":[{"id":17205,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17204\/revisions\/17205"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17204"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=17204"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}