A look Into: CSS4 Document Rule

Many websites have a lot of pages, but all those pages are commonly styled with only one stylesheet. Serving only one stylesheet is a good practice to minimize HTTP requests allowing the pages to load more quickly in a browser.

However, there will be a bunch of style-rules contained in the stylesheet that are unnecessary for some pages. So wouldn’t it be great if we could apply a set of style-rules only for certain pages while still keeping it to one stylesheet?

This idea would be made possible with the new proposed standard CSS At-rule called @document. This rule was initially proposed as part of CSS3 but due to several issues, it was postponed and would likely be included in CSS Level 4.

Let’s see how it works, shall we?

Basic Usage

@document allows us to designate style-rules for only specific pages. As stated in the Proposal, it is primarily designed for User Stylesheet. So, users can do the following to customize their (favorite) websites:

 @document domain("facebook.com") { body { background-color: yellow; } a { color: red; } img { border-radius: 100%; } } @document domain("twitter.com") { body { background-color: red; } a { color: pink; } } 

You can visit UserStyles.org for some great examples of user stylesheets.

We, as web authors, can also utilize @document to control the styles across our website. Let’s say we want our style-rules to be applied on a particular page on our website. To do that, we can encapsulate the style-rules with @document like so:

 @document url("http://www.hongkiat.com/blog/about-us/") { h1 { font-size: 50em; color: green; } p { color: red; } a { color: blue; } } 

The difference between domain()(from the first example) and url() is that domain() will affect all the pages that are hosted on the specified domain, whereas url() will only apply the style-rules to the specified URL; the other URLs (or pages) are thus unaffected.

You can use url-prefix() to designate style-rules to a URL that begins with, for example, css.

 @document url-prefix("http://www.hongkiat.com/blog/category/") { h2 { font-family: "Georgia"; } div { background-color: blue; color: #fff; } } 

Using the regexp() 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 http://www.w3.org/TR/, followed by 4 numerical digits and ending with 8 numerical digits.

 @document regexp("http://www.w3.org/TR/\d{4}/[^/]*-CSS2-\d{8}/") { body { transform: rotate(90deg); } } 


Alright, we have seen some usage possibilities of the @document rule. But as mentioned, it is currently on hold for CSS4, and Firefox is the only browser that has implemented it with the @-moz-document prefix. Nonetheless, we will be keeping tabs on the development of the @document rule, and see how it goes in the future.



Leave a Comment