CSS env() Function
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