Skip to content
Related Articles

Related Articles

Improve Article

CSS env() Function

  • Last Updated : 18 Jul, 2020

The env() function is used to insert the value of a user agent-defined environment variable into your CSS. It is almost the same as var() in CSS except these values are user-agent-defined rather than user-defined. These variables are globally scoped. 

Syntax:

env( <custom-ident> , <declaration-value> )

Note: Please note that env() property values are case-sensitive.

Property values:

  • SAFE-AREA-INSET-TOP: It defines the top of the rectangle from the edge of the viewport.

    Syntax:



    env(SAFE-AREA-INSET-TOP,Integer_value)
    

    Example:

    HTML




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content=
            "width=device-width, initial-scale=1.0">
      
        <style>
            p {
                background-color: green;
                width: fit-content;
                color: white;
                font-size: 20px;
                border: env(SAFE-AREA-INSET-TOP, 
                            5px) solid black;
                padding: 10px;
                padding: env(SAFE-AREA-INSET-TOP, 50px) 
                    env(safe-area-inset-right, 50px) 
                    env(safe-area-inset-bottom, 50px) 
                    env(safe-area-inset-left, 50px)
            }
        </style>
    </head>
      
    <body>
        <h2>50px padding from top</h2>
      
        <p>Geeks for geeks</p>
    </body>
      
    </html>

    Output:

  • SAFE-AREA-INSET-RIGHT: It defines the right of the rectangle from the edge of the viewport.

    Syntax:

    env(SAFE-AREA-INSET-RIGHT,Integer_value);

    Example:

    HTML




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content=
            "width=device-width, initial-scale=1.0">
      
        <style>
            p {
                background-color: green;
                width: fit-content;
                color: white;
                font-size: 20px;
                border:
                    env(SAFE-AREA-INSET-TOP, 5px) solid black;
                padding: 10px;
                padding: env(safe-area-inset-top, 50px) 
                        env(SAFE-AREA-INSET-RIGHT, 50px) 
                        env(safe-area-inset-bottom, 50px) 
                        env(safe-area-inset-left, 50px)
            }
        </style>
    </head>
      
    <body>
        <h2>50px padding from right</h2>
      
        <p>Geeks for geeks</p>
    </body>
      
    </html>

    Output:

  • SAFE-AREA-INSET-LEFT: It defines the left of the rectangle from the edge of the viewport.

    Syntax:

    env(SAFE-AREA-INSET-LEFT,Integer_value);
    

    Example:

    HTML




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content=
            "width=device-width, initial-scale=1.0">
      
        <style>
            p {
                background-color: green;
                width: fit-content;
                color: white;
                font-size: 20px;
                border:
                    env(SAFE-AREA-INSET-TOP, 5px) solid black;
                padding: 10px;
                padding: env(safe-area-inset-top, 50px) 
                        env(safe-area-inset-bottom, 50px) 
                        env(safe-area-inset-right, 50px) 
                        env(SAFE-AREA-INSET-LEFT, 50px)
            }
        </style>
    </head>
      
    <body>
        <h2>50px padding from left</h2>
      
        <p>Geeks for geeks</p>
    </body>
      
    </html>

    Output:

  • SAFE-AREA-INSET-BOTTOM: It defines the bottom of the rectangle from the edge of the viewport.

    Syntax:

    env(SAFE-AREA-INSET-BOTTOM,Integer_value);

    Example:

    HTML




    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content=
            "width=device-width, initial-scale=1.0">
      
        <style>
            p {
                background-color: green;
                width: fit-content;
                color: white;
                font-size: 20px;
                border:
                    env(SAFE-AREA-INSET-TOP, 5px) solid black;
                padding: 10px;
                padding: env(safe-area-inset-top, 50px) 
                    env(safe-area-inset-left, 50px) 
                    env(SAFE-AREA-INSET-BOTTOM, 50px) 
                    env(safe-area-inset-right, 50px)
            }
        </style>
    </head>
      
    <body>
        <h2>50px padding from bottom</h2>
      
        <p>Geeks for geeks</p>
    </body>
      
    </html>

    Output:

Supported browsers:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :