{"id":395357,"date":"2026-05-29T07:25:38","date_gmt":"2026-05-29T13:25:38","guid":{"rendered":"https:\/\/css-tricks.com\/?p=395357"},"modified":"2026-05-29T07:29:33","modified_gmt":"2026-05-29T13:29:33","slug":"whats-important-12","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/whats-important-12\/","title":{"rendered":"What\u2019s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>What\u2019s !important #12<\/strong> talks about the old (testing in Safari when you don\u2019t have Safari), the new (<code>::checkmark<\/code>), the in-between (anchor positioning but with HTML), and more.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Buckle up!<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 id=\"testing-in-safari-when-you-dont-have-safari\" class=\"wp-block-heading\">Testing in Safari when you don\u2019t have Safari<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"452\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/safari.jpg-e1780000053378-1024x452.webp?resize=1024%2C452&#038;ssl=1\" alt=\"A Safari browser window on macOS showing an About Safari dialogue box with a translucent red and orange noise filter.\" class=\"wp-image-395366\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/safari.jpg-e1780000053378.webp?resize=1024%2C452&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/safari.jpg-e1780000053378.webp?resize=300%2C132&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/safari.jpg-e1780000053378.webp?resize=768%2C339&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/safari.jpg-e1780000053378.webp?resize=1536%2C678&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/safari.jpg-e1780000053378.webp?w=2000&amp;ssl=1 2000w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/frontendmasters.com\/blog\/testing-safari-on-a-budget\/\" rel=\"noopener\">Frontend Masters<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Safari is the second most popular web browser, but is only available to Apple users. Fair enough. I mean, Apple are heavily invested in making Safari a proprietary browser that\u2019s deeply integrated with Apple\u2019s software and hardware. However, this makes testing websites in Safari a bit of a pain. <a href=\"https:\/\/css-tricks.com\/author\/declanchidlow\/\">Declan Chidlow<\/a> explained what our options are in regards to <a href=\"https:\/\/frontendmasters.com\/blog\/testing-safari-on-a-budget\/\" rel=\"noopener\">testing in Safari when you don\u2019t have Safari<\/a>.<\/p>\n\n\n\n<h2 id=\"a-first-look-at-checkmark\" class=\"wp-block-heading\">A first look at <code>::checkmark<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/css-tricks.com\/author\/sunkanmifafowora\/\">Sunkanmi Fafowora<\/a> gave us our <a href=\"https:\/\/piccalil.li\/blog\/navigating-the-age-old-problem-of-checkmarks-in-ui-with-progressive-enhancement\/\" rel=\"noopener\">first look at the <code>::checkmark<\/code> pseudo-element<\/a>, which solves the age-old problem of not (really) being able to style checkmarks. Note that this also targets the checked state indicator of radios and selects, not just checkboxes!<\/p>\n\n\n\n<h2 id=\"different-shape-styles-with-bordershape-shape\" class=\"wp-block-heading\">Different shape styles with <code>border-shape<\/code> + <code>shape()<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/css-tricks.com\/author\/afiftemani\/\">Temani Afif<\/a> pointed out that we can <a href=\"https:\/\/css-tip.com\/shape-variation\/\" rel=\"noopener\">create more shape styles when combining <code>border-shape<\/code> with the <code>shape()<\/code> function<\/a> (compared to <code>clip-path<\/code>), and, easily switch between them.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"898\" height=\"282\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2026\/05\/border-shape-styles.avif\" alt=\"Three variations of a wavy shape rendered in red, showing an outline version, a solid filled version, and a cutout version inside a solid red square.\" class=\"wp-image-395380\" srcset=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2026\/05\/border-shape-styles.avif 898w, https:\/\/css-tricks.com\/wp-content\/uploads\/2026\/05\/border-shape-styles.avif 300w, https:\/\/css-tricks.com\/wp-content\/uploads\/2026\/05\/border-shape-styles.avif 768w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><figcaption class=\"wp-element-caption\">Source: <a href=\"https:\/\/css-tip.com\/shape-variation\/\" rel=\"noopener\">CSS Tip<\/a><\/figcaption><\/figure>\n\n\n\n<h2 id=\"a-concise-guide-to-siblingindex-and-siblingcount\" class=\"wp-block-heading\">A concise guide to <code>sibling-index()<\/code> and <code>sibling-count()<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/css-tricks.com\/author\/durgeshpawar\/\">Durgesh Pawar<\/a> did a <a href=\"https:\/\/www.smashingmagazine.com\/2026\/05\/mathematical-layouts-sibling-index-sibling-count\/\" rel=\"noopener\">deep dive on <code>sibling-index()<\/code> and <code>sibling-count()<\/code><\/a>, showing us all of the cool things that we can do with these almost-Baseline CSS functions.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_myOEJPx\" src=\"\/\/codepen.io\/anon\/embed\/myOEJPx?height=450&amp;theme-id=1&amp;slug-hash=myOEJPx&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed myOEJPx\" title=\"CodePen Embed myOEJPx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Also, don&#8217;t miss Durgesh&#8217;s <a href=\"https:\/\/css-tricks.com\/cross-document-view-transitions-part-1\/\">two-part series about View Transition gotchas<\/a> right here on CSS-Tricks.<\/p>\n\n\n\n<h2 id=\"managing-anchor-associations-with-data-attributes-and-advanced-attr\" class=\"wp-block-heading\">Managing anchor associations with data attributes and advanced <code>attr()<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This one\u2019s actually from me! Disappointed to hear that the <code>anchor<\/code> attribute has been dropped, which would\u2019ve provided a way of managing anchor associations using HTML, I demonstrated my alternative technique that involves <a href=\"https:\/\/frontendmasters.com\/blog\/managing-anchor-associations-with-data-attributes-and-advanced-attr\/\" rel=\"noopener\">managing anchor associations with data attributes and advanced <code>attr()<\/code><\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I won\u2019t spoiler the CSS, but here are the different HTML syntaxes that I explored:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;!-- anchor attribute -->\n&lt;div anchor=\"anchorA\">Boat A&lt;\/div>\n&lt;div id=\"anchorA\">Anchor A&lt;\/div>\n\n&lt;!-- Data attributes with custom ident (requires attr()) -->\n&lt;div data-boat=\"--anchorA\">Boat A&lt;\/div>\n&lt;div data-anchor=\"--anchorA\">Anchor A&lt;\/div>\n\n&lt;!-- Data attributes (requires attr() and ident()) -->\n&lt;div data-boat=\"anchorA\">Boat A&lt;\/div>\n&lt;div data-anchor=\"anchorA\">Anchor A&lt;\/div><\/code><\/pre>\n\n\n\n<h2 id=\"take-the-state-of-css-2026-survey\" class=\"wp-block-heading\">Take the State of CSS 2026 survey<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1488\" height=\"790\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-28-at-2.31.26-PM.png?resize=1488%2C790&#038;ssl=1\" alt=\"The official graphic for the State of CSS 2026 survey, featuring a stylized CSS logo inside a pink and purple diamond emblem against a dark background.\" class=\"wp-image-395372\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-28-at-2.31.26-PM.png?w=1488&amp;ssl=1 1488w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-28-at-2.31.26-PM.png?resize=300%2C159&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-28-at-2.31.26-PM.png?resize=1024%2C544&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-28-at-2.31.26-PM.png?resize=768%2C408&amp;ssl=1 768w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s that time of the year again!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I love these \u201cstate of\u201d surveys (especially the <a href=\"https:\/\/survey.devographics.com\/en-US\/survey\/state-of-css\/2026\" rel=\"noopener\">State of CSS 2026<\/a> survey, but I\u2019m sure you know that already). This year feels different though, and I\u2019m not the only one that\u2019s noticed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">From the opening crawl:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Take a deep breath. Calm down. It&#8217;s ok if you don&#8217;t know every single new CSS property. The truth is, very few of us do.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Look, one of this survey&#8217;s goals has always been to help keep developers up to date on the latest and greatest CSS improvements. But the downside is that all this progress can sometimes feel overwhelming.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s why this year we made a conscious effort to reduce the number of features covered in the survey, focusing instead on the ones that matter most.<\/p>\n<\/blockquote>\n<\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">I totally get it. It\u2019s becoming more and more difficult to keep up with CSS. My \u201cthings to check out\u201d list just keeps getting longer! That being said, there\u2019s never been a more exciting time to be a fan of CSS. That feeling when you learn a new feature and then two more get shipped, is overwhelming but in the best way possible.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But still, time doesn\u2019t grow on trees, so we have to figure out which features to invest in, and that\u2019s what these \u201cstate of\u201d surveys are all about. And they\u2019re going hard this year, really zeroing in on the most important ones.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But, if you have an appetite for <em>all<\/em> things CSS, I hear there\u2019s a <a href=\"https:\/\/css-tricks.com\/\">great blog<\/a> for that!<\/p>\n\n\n\n<h2 id=\"new-web-platform-features\" class=\"wp-block-heading\">New web platform features<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/Firefox\/Releases\/151\" rel=\"noopener\">Firefox 151<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/css-tricks.com\/css-container-queries\/#container-style-queries\">Container style queries<\/a> (now Baseline)<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Picture-in-Picture_API\" rel=\"noopener\"><em>Document<\/em> Picture-in-Picture API<\/a> (desktop only, no Safari support)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Quality over quantity, I guess!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Until next time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The old (testing in Safari when you don\u2019t have Safari), the new (::checkmark), the in-between (anchor positioning but with HTML), and more.<\/p>\n","protected":false},"author":288677,"featured_media":395372,"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}},"categories":[4],"tags":[19081],"class_list":["post-395357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-news"],"acf":{"show_toc":"Yes"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/05\/Screenshot-2026-05-28-at-2.31.26-PM.png?fit=1488%2C790&ssl=1","jetpack-related-posts":[{"id":389331,"url":"https:\/\/css-tricks.com\/touring-new-css-features-in-safari-26\/","url_meta":{"origin":395357,"position":0},"title":"Touring New CSS Features in Safari 26","author":"Juan Diego Rodr\u00edguez","date":"September 29, 2025","format":false,"excerpt":"Safari 26 adds:75 new features, 3 deprecations, and 171 other improvements. Here's all the CSS goodness you'll want to know about.","rel":"","context":"In &quot;Articles&quot;","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\/2025\/09\/thumbnail.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/09\/thumbnail.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/09\/thumbnail.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/09\/thumbnail.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/09\/thumbnail.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":393515,"url":"https:\/\/css-tricks.com\/whats-important-9\/","url_meta":{"origin":395357,"position":1},"title":"What\u2019s !important #9: clip-path Jigsaws, View Transitions Toolkit, Name-only Containers, and More","author":"Daniel Schwarz","date":"April 17, 2026","format":false,"excerpt":"This issue of What\u2019s !important brings you clip-path jigsaws, a view transitions toolkit, name-only containers, the usual roundup of new, notable web platform features, and more.","rel":"","context":"In &quot;Articles&quot;","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\/2026\/04\/wh9.jpg?fit=1200%2C828&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/04\/wh9.jpg?fit=1200%2C828&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/04\/wh9.jpg?fit=1200%2C828&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/04\/wh9.jpg?fit=1200%2C828&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/04\/wh9.jpg?fit=1200%2C828&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":385339,"url":"https:\/\/css-tricks.com\/quick-hit-41\/","url_meta":{"origin":395357,"position":2},"title":"Quick Hit #41","author":"Geoff Graham","date":"March 19, 2025","format":false,"excerpt":"Ooo, look at that: Safari Technology Preview 215 adds support for scroll-driven animations, anchor positioning, and text-wrap: pretty. That's a good sign that other versions of Safari are on the horizon!","rel":"","context":"In &quot;Quick Hits&quot;","block_context":{"text":"Quick Hits","link":"https:\/\/css-tricks.com\/category\/quick-hits\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":393021,"url":"https:\/\/css-tricks.com\/whats-important-7\/","url_meta":{"origin":395357,"position":3},"title":"What\u2019s !important #7: random(), Folded Corners, Anchored Container Queries, and More","author":"Daniel Schwarz","date":"March 16, 2026","format":false,"excerpt":"For this issue we have random(), folded clip-path corners, anchored container queries, customizable select, scroll-triggered animations, and more.","rel":"","context":"In &quot;Articles&quot;","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\/2026\/03\/wi7.png?fit=1200%2C820&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/03\/wi7.png?fit=1200%2C820&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/03\/wi7.png?fit=1200%2C820&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/03\/wi7.png?fit=1200%2C820&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/03\/wi7.png?fit=1200%2C820&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":389049,"url":"https:\/\/css-tricks.com\/quick-hit-57\/","url_meta":{"origin":395357,"position":4},"title":"Quick Hit #57","author":"Geoff Graham","date":"September 4, 2025","format":false,"excerpt":"Safari Techology Preview 227 is out and brings a bunch of stuff, from MathML support and field-sizing, to invoker commands, beefier support for anchor positioning, and smaller things like decimal values for initial-letter.","rel":"","context":"In &quot;Quick Hits&quot;","block_context":{"text":"Quick Hits","link":"https:\/\/css-tricks.com\/category\/quick-hits\/"},"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":[]},{"id":391542,"url":"https:\/\/css-tricks.com\/whats-important-3\/","url_meta":{"origin":395357,"position":5},"title":"What\u2019s !important #3: Popover Context Menus, @scope, New Web Platform Features, and More","author":"Daniel Schwarz","date":"January 15, 2026","format":false,"excerpt":"The developer community hasn\u2019t wasted any time kicking off 2026 with some really great articles, demos, and insights. Firefox 147 and Chrome 144 also shipped, and while they\u2019re not jam-packed with features, the releases are still pretty exciting for what\u2019s normally a slow time of year, so without further ado,\u2026","rel":"","context":"In &quot;Articles&quot;","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"A screenshot showing a web browser displaying an article about Ursula K. Le Guin's writing routine. At the bottom of the browser window, a tooltip reveals a custom URL protocol: Open ia-writer:\/\/open?path=notes:2026-01-04T2023.md in a new tab. A red arrow points from text in a markdown editor in the background to this tooltip, illustrating how clicking a web link can open a specific file in the iA Writer application using the custom protocol handler.","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/wi3.png?fit=1200%2C853&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/wi3.png?fit=1200%2C853&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/wi3.png?fit=1200%2C853&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/wi3.png?fit=1200%2C853&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/wi3.png?fit=1200%2C853&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/395357","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\/288677"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=395357"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/395357\/revisions"}],"predecessor-version":[{"id":395383,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/395357\/revisions\/395383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/395372"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=395357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=395357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=395357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}