{"id":391920,"date":"2026-01-28T06:25:00","date_gmt":"2026-01-28T13:25:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=391920"},"modified":"2026-01-28T10:26:53","modified_gmt":"2026-01-28T17:26:53","slug":"relicss","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/relicss\/","title":{"rendered":"ReliCSS"},"content":{"rendered":"\n<p>We all have a few skeletons in our CSS closets. There&#8217;s probably that one-off <code>!important<\/code> where you can now manage that more effectively with cascade layers. Or maybe a dated Checkbox Hack that <code>:has()<\/code> has solved. Perhaps it&#8217;s been a long while since your last site redesign and it&#8217;s chock-full of vendor-prefixed properties from 2012. <em>Thar be demons!<\/em><\/p>\n\n\n\n<p>Stu Robson&#8217;s <a href=\"https:\/\/www.alwaystwisted.com\/relicss\/\" rel=\"noopener\">ReliCSS<\/a> (clever name!) tool can excavate outdated CSS in your codebase that have modern CSS solutions.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Each relic is assigned a level of severity. As Stu explains it:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<ul class=\"wp-block-list\">\n<li><strong>High Severity:<\/strong>&nbsp;True \u201cfossils\u201d. Hacks for (now) unsupported browsers (IE6\/7) or \u201cdangerous\u201d techniques. High-risk, obsolete, should be first targets for removal.<\/li>\n\n\n\n<li><strong>Medium Severity:<\/strong>&nbsp;The middle ground. Hacks for older unsupported browsers (IE8-10). They work but they&#8217;re fragile. Hacks to review to see if they&#8217;re still relevant for your actual users.<\/li>\n\n\n\n<li><strong>Low Severity:<\/strong>&nbsp;Modern artifacts. Usually vendor prefixes (-webkit-, -moz-). Safe mostly, but better handled by automated tools like Autoprefixer. They&#8217;re an opportunity to improve your build process.<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n<p>It&#8217;s been a little while since my personal site got an overhaul. Not to toot my own horn, but heyyyyyy!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1724\" height=\"868\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-9.54.42-AM.png?resize=1724%2C868\" alt=\"Screenshot of a CSS audit using Stu Robson's ReliCSS tool. No issues are found.\" class=\"wp-image-391922\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-9.54.42-AM.png?w=1724&amp;ssl=1 1724w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-9.54.42-AM.png?resize=300%2C151&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-9.54.42-AM.png?resize=1024%2C516&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-9.54.42-AM.png?resize=768%2C387&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-9.54.42-AM.png?resize=1536%2C773&amp;ssl=1 1536w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p>Seriously, though. I know there are things in there I&#8217;m embarrassed to admit.<\/p>\n\n\n\n<p>But what if we do archeological dig on CSS-Tricks? I mean, it&#8217;s been <a href=\"https:\/\/css-tricks.com\/design-v18\/\">at <em>least<\/em> five years<\/a> since this place has gotten the love it deserves. I&#8217;m almost afraid to look. Here goes&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"663\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-10.11.46-AM-1024x663.png?resize=1024%2C663&#038;ssl=1\" alt=\"Screenshot auditing CSS-Tricks CSS stylesheet in Stu Robson's ReliCSS tool. Out shows 19 total relics.\" class=\"wp-image-391923\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-10.11.46-AM.png?resize=1024%2C663&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-10.11.46-AM.png?resize=300%2C194&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-10.11.46-AM.png?resize=768%2C498&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-10.11.46-AM.png?resize=1536%2C995&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/Screenshot-2026-01-28-at-10.11.46-AM.png?resize=2048%2C1327&amp;ssl=1 2048w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><figcaption class=\"wp-element-caption\">&#x1fae3;<\/figcaption><\/figure>\n\n\n\n<p>OK, not as bad as I imagined. It&#8217;s largely vendor prefixing, which I&#8217;m sure comes courtesy of an older Autoprefixer configuration.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stu Robson&#8217;s ReliCSS (clever name!) tool can excavate outdated CSS in your codebase that have modern CSS solutions.<\/p>\n","protected":false},"author":2508,"featured_media":391926,"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":"1","_share_on_mastodon_status":"Straight to bookmarks: ReliCSS from @sturobson@front-end.social\r\n\r\nFinds outdated CSS relics in your codebase with modern alternatives.\r\n\r\n%permalink%"},"categories":[17],"tags":[1526,748,19098],"class_list":["post-391920","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links","tag-audit","tag-css-analysis","tag-resource"],"acf":{"link_source":"Always Twisted","link_url":"https:\/\/www.alwaystwisted.com\/relicss\/","link_icon":391924,"show_toc":"No"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/115973890689686107","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2026\/01\/relicss-audit.webp?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":391435,"url":"https:\/\/css-tricks.com\/quick-hit-82\/","url_meta":{"origin":391920,"position":0},"title":"Quick Hit #82","author":"Daniel Schwarz","date":"January 9, 2026","format":false,"excerpt":"ReliCSS helps replace CSS hacks with @supports and modern CSS.","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":389117,"url":"https:\/\/css-tricks.com\/compiling-multiple-css-files-into-one\/","url_meta":{"origin":391920,"position":1},"title":"Compiling Multiple CSS Files into One","author":"Geoff Graham","date":"September 11, 2025","format":false,"excerpt":"Stu Robson outlines two ways to compile multiple CSS files when you aren't relying on Sass for it.","rel":"","context":"In &quot;Links&quot;","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-modules-connections.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-modules-connections.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-modules-connections.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-modules-connections.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/css-modules-connections.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":285840,"url":"https:\/\/css-tricks.com\/clever-code\/","url_meta":{"origin":391920,"position":2},"title":"Clever code","author":"Robin Rendle","date":"April 17, 2019","format":false,"excerpt":"This week, Chris Ferdinandi examined a clever JavaScript snippet, one that's written creatively with new syntax features, but is perhaps less readable and performant. It's a quick read, but his callout of our industry's fixation on cleverness is worth... calling out: ...we\u2019ve become obsessed as an industry with brevity and\u2026","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\/2019\/04\/winky-face-brackets.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\/04\/winky-face-brackets.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/winky-face-brackets.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/winky-face-brackets.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/winky-face-brackets.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":391542,"url":"https:\/\/css-tricks.com\/whats-important-3\/","url_meta":{"origin":391920,"position":3},"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":[]},{"id":246929,"url":"https:\/\/css-tricks.com\/cant-detect-touchscreen\/","url_meta":{"origin":391920,"position":4},"title":"You Can&#8217;t Detect A Touchscreen","author":"Chris Coyier","date":"October 22, 2016","format":false,"excerpt":"Stu Cox explains that there are a ton of ways you might think you can get a yes-or-no answer on whether a browser supports touch or not: Width media queries Touch-related DOM events Touch-related APIs Pointer media queries The normal refrain around this is \"there are devices that are both,\u2026","rel":"","context":"In &quot;Links&quot;","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":274831,"url":"https:\/\/css-tricks.com\/getting-to-know-a-legacy-codebase\/","url_meta":{"origin":391920,"position":5},"title":"Getting to Know a Legacy Codebase","author":"Chris Coyier","date":"July 31, 2018","format":false,"excerpt":"Harry Roberts talks about some methods for getting comfy with a new (\"specifically CSS\") code base. Harry's done this a lot as someone who parachutes into new code bases regularly as a consultant. But I think this is also quite interesting for people starting a new job. So much web\u2026","rel":"","context":"In &quot;Links&quot;","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/css-wizardry.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/css-wizardry.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/css-wizardry.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/css-wizardry.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/css-wizardry.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\/391920","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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=391920"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/391920\/revisions"}],"predecessor-version":[{"id":391929,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/391920\/revisions\/391929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/391926"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=391920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=391920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=391920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}