{"id":8146,"date":"2026-01-05T12:46:37","date_gmt":"2026-01-05T17:46:37","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=8146"},"modified":"2026-01-13T11:23:24","modified_gmt":"2026-01-13T16:23:24","slug":"how-to-scope-css-now-that-its-baseline","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/how-to-scope-css-now-that-its-baseline\/","title":{"rendered":"How to @scope CSS Now That It\u2019s Baseline"},"content":{"rendered":"\n

Firefox 146 now supports @scope<\/code> in CSS, joining Chrome and Safari, meaning that it\u2019s now supported in all major web browsers, earning it the \u201cBaseline: Newly Available\u201d tag.<\/p>\n\n\n\n

This @scope<\/code> at-rule defines a new scope context in CSS. The :scope<\/code> pseudo-class represents the root of said context (otherwise known as the \u2018scope root\u2019), and all this means is that we have some new and exciting ways of writing and organizing CSS, so today I\u2019ll demonstrate the different ways of using @scope<\/code> and the benefits of each one.<\/p>\n\n\n\n

You can use an @scope<\/code> block in any CSS, be it within a stylesheet that you <link><\/code> up or a <style><\/code> block within HTML. In fact, the latter has some interesting properties we\u2019ll get to.<\/p>\n\n\n\n

Whichever way you use CSS, the rules are, by default, globally<\/em> scoped. For example, in the demo below, even though the CSS rules are nested within the <main><\/code>, they apply to the whole<\/em> document:<\/p>\n\n\n

<header<\/span>><\/span><\/header<\/span>><\/span>\n\n<main<\/span>><\/span>\n  <style<\/span>><\/span>\n    \/* No scoping applied. Global scope. *\/<\/span>\n    header<\/span>, footer<\/span> {\n      background<\/span>: rgb<\/span>(from green r g b \/ 30%<\/span>);\n    }\n  <\/span><\/style<\/span>><\/span>\n\n  <header<\/span>><\/span><\/header<\/span>><\/span>\n  <section<\/span>><\/span><\/section<\/span>><\/span>\n  <footer<\/span>><\/span><\/footer<\/span>><\/span>\n<\/main<\/span>><\/span>\n\n<footer<\/span>><\/span><\/footer<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n