{"id":19343,"date":"2014-02-18T18:01:10","date_gmt":"2014-02-18T10:01:10","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19343"},"modified":"2023-05-30T18:38:21","modified_gmt":"2023-05-30T10:38:21","slug":"css-document-rule","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/","title":{"rendered":"CSS4 Document Rule: A User&#8217;s Guide"},"content":{"rendered":"<p><strong>Lots of websites have a ton of pages<\/strong>, but typically use just a <strong>single stylesheet<\/strong> to dictate the design. This is good practice because it <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/how-to-measure-front-end-website-performance\/\">reduces HTTP requests<\/a><\/strong>, helping the pages load faster in your browser.<\/p>\n<p>But here\u2019s the catch: <strong>not all pages need all the style rules<\/strong> in the stylesheet. So, wouldn\u2019t it be awesome if we could <strong>pick and choose style rules for specific pages<\/strong>, all while still using just one stylesheet?<\/p>\n<p>This could become a reality with a new proposed CSS rule called <code>@document<\/code>. It was originally intended to be part of <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\">CSS3<\/a>, but faced some hurdles and got postponed. Now, it\u2019s expected to be part of <strong>CSS Level 4<\/strong>.<\/p>\n<p>Let\u2019s dig into how this works, shall we?<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/less-auto-compile\/\" class=\"ref-block__link\" title=\"Read More: How to Auto-Compile LESS into CSS\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Auto-Compile LESS into CSS<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/less-auto-compile.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-18350 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/less-auto-compile.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Auto-Compile LESS into CSS<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tWe have discussed LESS CSS a few times in our previous posts. If you have been following our...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Basic Usage<\/h2>\n<p><code>@document<\/code> allows us to designate style-rules for only specific pages. As stated in the <strong>Proposal<\/strong>, it is primarily designed for User Stylesheet. So, users can do the following to customize their (favorite) websites:<\/p>\n<pre>\r\n@document domain(\"facebook.com\") {\r\n  body {\r\n    background-color: yellow;\r\n  }\r\n  a {\r\n    color: red;\r\n  }\r\n  img {\r\n    border-radius: 100%;\r\n  }\r\n}\r\n\r\n@document domain(\"twitter.com\") {\r\n  body {\r\n    background-color: red;\r\n  }\r\n  a {\r\n    color: pink;\r\n  }\r\n}\r\n<\/pre>\n<p>You can visit <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/userstyles.org\/\">UserStyles.org<\/a> for some great examples of user stylesheets.<\/p>\n<p>We, as web authors, can also utilize <code>@document<\/code> to control the styles across our website. Let\u2019s say we want our style-rules to be applied on a particular <strong>page<\/strong> on our website. To do that, we can encapsulate the style-rules with <code>@document<\/code> like so:<\/p>\n<pre>\r\n@document url(\"https:\/\/www.hongkiat.com\/blog\/about-us\/\") {\r\n  h1 {\r\n    font-size: 50em;\r\n    color: green;\r\n  }\r\n  p {\r\n    color: red;\r\n  }\r\n  a {\r\n    color: blue;\r\n  }\r\n}\r\n<\/pre>\n<p>The difference between <code>domain()<\/code>(from the first example) and <code>url()<\/code> is that <code>domain()<\/code> will affect all the pages that are hosted on the specified domain, whereas <code>url()<\/code> will only apply the style-rules to the specified URL; the other URLs (or pages) are thus unaffected.<\/p>\n<p>You can use <code>url-prefix()<\/code> to designate style-rules to a URL that begins with, for example, <code>css<\/code>.<\/p>\n<pre>\r\n@document url-prefix(\"https:\/\/www.hongkiat.com\/blog\/category\/\") {\r\n  h2 {\r\n    font-family: \"Georgia\";\r\n  }\r\n  div {\r\n    background-color: blue;\r\n    color: #fff;\r\n  }\r\n}\r\n<\/pre>\n<p>Using the <code>regexp()<\/code> function, we can go more in-depth with Regular Expression (Regex). The following example is derived from W3C, and the Regex matches the URL that begins with <code>https:\/\/www.w3.org\/TR\/<\/code>, followed by 4 numerical digits and ending with 8 numerical digits.<\/p>\n<pre>\r\n@document regexp(\"https:\/\/www.w3.org\/TR\/\\\\d{4}\/[^\/]*-CSS2-\\\\d{8}\/\") {\r\n  body {\r\n    transform: rotate(90deg);\r\n  }\r\n}\r\n<\/pre>\n<h2>Conclusion<\/h2>\n<p>Alright, we have seen some usage possibilities of the <code>@document<\/code> rule. But as mentioned, it is currently on hold for CSS4, and Firefox is the only browser that has implemented it with the <code>@-moz-document<\/code> prefix. Nonetheless, we will be keeping tabs on the development of the <code>@document<\/code> rule, and see how it goes in the future.<\/p>","protected":false},"excerpt":{"rendered":"<p>Lots of websites have a ton of pages, but typically use just a single stylesheet to dictate the design. This is good practice because it reduces HTTP requests, helping the pages load faster in your browser. But here\u2019s the catch: not all pages need all the style rules in the stylesheet. So, wouldn\u2019t it be&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[507],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS4 Document Rule: A User&#039;s Guide - Hongkiat<\/title>\n<meta name=\"description\" content=\"Lots of websites have a ton of pages, but typically use just a single stylesheet to dictate the design. This is good practice because it reduces HTTP\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS4 Document Rule: A User&#039;s Guide\" \/>\n<meta property=\"og:description\" content=\"Lots of websites have a ton of pages, but typically use just a single stylesheet to dictate the design. This is good practice because it reduces HTTP\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-02-18T10:01:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-05-30T10:38:21+00:00\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-document-rule\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-document-rule\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"CSS4 Document Rule: A User&#8217;s Guide\",\"datePublished\":\"2014-02-18T10:01:10+00:00\",\"dateModified\":\"2023-05-30T10:38:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-document-rule\\\/\"},\"wordCount\":363,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-document-rule\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-document-rule\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-document-rule\\\/\",\"name\":\"CSS4 Document Rule: A User's Guide - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2014-02-18T10:01:10+00:00\",\"dateModified\":\"2023-05-30T10:38:21+00:00\",\"description\":\"Lots of websites have a ton of pages, but typically use just a single stylesheet to dictate the design. This is good practice because it reduces HTTP\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-document-rule\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-document-rule\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-document-rule\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS4 Document Rule: A User&#8217;s Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS4 Document Rule: A User's Guide - Hongkiat","description":"Lots of websites have a ton of pages, but typically use just a single stylesheet to dictate the design. This is good practice because it reduces HTTP","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/","og_locale":"en_US","og_type":"article","og_title":"CSS4 Document Rule: A User's Guide","og_description":"Lots of websites have a ton of pages, but typically use just a single stylesheet to dictate the design. This is good practice because it reduces HTTP","og_url":"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-02-18T10:01:10+00:00","article_modified_time":"2023-05-30T10:38:21+00:00","author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"CSS4 Document Rule: A User&#8217;s Guide","datePublished":"2014-02-18T10:01:10+00:00","dateModified":"2023-05-30T10:38:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/"},"wordCount":363,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-document-rule\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/","url":"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/","name":"CSS4 Document Rule: A User's Guide - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2014-02-18T10:01:10+00:00","dateModified":"2023-05-30T10:38:21+00:00","description":"Lots of websites have a ton of pages, but typically use just a single stylesheet to dictate the design. This is good practice because it reduces HTTP","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-document-rule\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-document-rule\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS4 Document Rule: A User&#8217;s Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-51Z","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19343"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19343\/revisions"}],"predecessor-version":[{"id":67337,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19343\/revisions\/67337"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19343"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}