Open In App

CSS | @document rule

Last Updated : 23 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The CSS @document rule is used to maintain the restriction of the styles in a page or set of pages. This rule makes the styles for specific URLs, suppose the user included 10 URLs on a page and want to styles each of them differently then this rule could be the trump card. The @document rule define the styles rule for each URLs page differently as you define.
Syntax: 
 

@document url("") {
    // Style your defined URLs page
}

Functions: 
 

  • url(): This functions holds the URL where the styles are applicable.
  • url-prefix(): This functions can holds more than one URL where single styles are applicable for multiple pages.
  • domain(): This functions holds the domain name whichever styles with this attribute that style will applicable on all the URLs under that domain.
  • regexp(): This functions holds the documents using regular expression.

Note: CSS @document rule has been DEPRECATED and is no longer recommended.

Below examples illustrate the @Document rule:
Example 1: The styles are define in this example will applicable on mentioned URL, domain and regular expression. 
 

html




<style>
domain("html.comm"),
regexp("https:.*") {
    body {
        background-color: brown;
        font-size: 18px;
    }
    h1 {
        color: green;
        background: white;
    }
}
</style>


Supported Browsers: The browsers supported by CSS @document rule property are listed below: 
 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

 


Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads