A simple brief of Css At rule

Hi, As we all are aware about the Css at-rule property and we mostly use @charset, @media, @import, @font-face, @keyframes.

But there are some more at-rule properties that are almost never used by us and they are : @document, @page, @namespace, @supports, @viewport, @counter-style

So, In this blog we are going to show what’s the use of the above @ rules.

@charset : This at-rule is used for character encoding that we use in our stylesheets.

@media : This is very common At-rule which we use, it’s the best solution for for making web applications responsive.

        @media screen and (max-width: 1024px){
        }
    

@import : This at-rule is used to import other css files in our existing file.

        @import ‘style.css’
    

@font-face : This is also a very common At-rule that we use, It is used for importing our custom fonts in css. So that browser may not take its default fonts.

        @font-face {
          font-family: 'Open';
          src:  url('Open.eot?') format('eot'), 
                url('Open.woff') format('woff'), 
                url('Open.ttf') format('truetype');
        }
    

@keyframes : This at-rule is used to define animations behaviour.

        @keyframes color {
            0% {
                background: red;
            }
            100% {
                background: blue;
            }
        }
    

@document : This at-rule is used to define the styles on a particular page.

        @document url('') { 
        }
    

We can define the page url where we want to apply the style.

@page : This at-rule is used to select a page in the paged media like book. This rule is used in conjunction with a selector to define which particular page has to be selected. This rule is used for printing purposes.

        @page {
        }
        @page :first {
            /* style for first page */
        }
        @page :left {
            /* style for right pages */
        }

        @page :right {
            /* style for right pages */
        }
    

@namespace : This at-rule declares a namespace prefix and link it with given namespace name

        @namespace svg "url";
    

@supports : This at-rule is used to detect that whether particular style are supported in that browser or not.

        @supports (display: flex) {
        }
    

The above options only work when display flex is supported in that browser.

@viewport : This at-rule is used to define the aspects of viewport for small device

        @viewport {
          width: 600px;
        }
    

@counter-style : This at-rule is used to define the counter styles that are not part of the predefined set of stylesheet

        @counter-style list {
          system: fixed;
          symbols: ? ? ? ? ? ?;
          suffix: " ";
        }

        li {
           list-style: list;
        }