Houdini<\/a> will help somehow in browsers getting better at CSS introspection? <\/p>\n\n\n\nYou can also use the CSS<\/code> object to run tests like CSS.supports(property, value)<\/code>:<\/p>\n\n\n\nDamn.<\/figcaption><\/figure><\/div>\n\n\n\nYou’d think we could have like CSS.validValues(\"text-decoration-thickness\")<\/code> and get like [\"<length>\", \"<percentage>\", \"auto\", \"from-font\"]<\/code> or the like, but alas, not a thing. <\/p>\n","protected":false},"excerpt":{"rendered":"I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS […]<\/p>\n","protected":false},"author":3,"featured_media":266370,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[17883],"class_list":["post-319272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-css-properties"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/mouse-cursor.jpg?fit=1367%2C760&ssl=1","jetpack-related-posts":[{"id":324247,"url":"https:\/\/css-tricks.com\/the-css-custom-property-toggle-trick\/","url_meta":{"origin":319272,"position":0},"title":"The CSS Custom Property Toggle Trick","author":"Chris Coyier","date":"October 29, 2020","format":false,"excerpt":"Back in July 2020, I got an email from James0x57 (I always try to refer to people by their name, but I think I get the sense they prefer to go by screen name) that says: The entire world of branching conditional logic and bulk feature toggling for custom CSS\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":337648,"url":"https:\/\/css-tricks.com\/css-is-a-strongly-typed-language\/","url_meta":{"origin":319272,"position":1},"title":"CSS is a Strongly Typed Language","author":"Eric Bailey","date":"April 13, 2021","format":false,"excerpt":"One of the ways you can classify a programming language is by how strongly or weakly typed it is. Here, \u201ctyped\u201d means if variables are known at compile time. An example of this would be a scenario where an integer (1) is added to a string containing an integer (\"1\"):\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":304671,"url":"https:\/\/css-tricks.com\/currying-in-css\/","url_meta":{"origin":319272,"position":2},"title":"Currying in CSS","author":"Chris Coyier","date":"March 6, 2020","format":false,"excerpt":"Funny timing on this I was just looking at the website for Utopia (which is a responsive type project which I hate to admit I don't fully understand) and I came across some CSS they show off that looked like this: :root { --fluid-max-negative: (1 \/ var(--fluid-max-ratio) \/ var(--fluid-max-ratio)); --fluid-min-negative:\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":303923,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-calc-in-css\/","url_meta":{"origin":319272,"position":3},"title":"The CSS Calculating Function Guide","author":"Chris Coyier","date":"March 17, 2020","format":false,"excerpt":"CSS has a special calc() function for doing basic math. In this guide, let's cover just about everything there is to know about this very useful function. Here's an example: .main-content { \/* Subtract 80px from 100vh *\/ height: calc(100vh - 80px); } In this guide, let's cover just about\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/calc-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/calc-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/calc-guide.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/calc-guide.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/calc-guide.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":333595,"url":"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/","url_meta":{"origin":319272,"position":4},"title":"CSS Custom Properties Guide","author":"Chris Coyier","date":"April 27, 2021","format":false,"excerpt":"Everything important and useful to know about CSS Custom Properties. Like that they are often referred to as \"CSS Variables\" but that's not their real name.","rel":"","context":"In "Guides"","block_context":{"text":"Guides","link":"https:\/\/css-tricks.com\/category\/guides\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":342930,"url":"https:\/\/css-tricks.com\/inherit-initial-unset-revert\/","url_meta":{"origin":319272,"position":5},"title":"inherit, initial, unset, revert","author":"Chris Coyier","date":"June 22, 2021","format":false,"excerpt":"There are four keywords that are valid values for any CSS property (see the title). Of those, day to day, I'd say I see the inherit used the most. Perhaps because it's been around the longest (I think?) but also because it makes logical sense (\"please inherit your value from\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/319272","targetHints":{"allow":["GET"]}}],"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=319272"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/319272\/revisions"}],"predecessor-version":[{"id":319303,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/319272\/revisions\/319303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/266370"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=319272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=319272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=319272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}