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><htmllang="en"><head><metacharset="UTF-8"><metaname="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>chevron_rightfilter_noneOutput:
- 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><htmllang="en"><head><metacharset="UTF-8"><metaname="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>chevron_rightfilter_noneOutput:
- 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><htmllang="en"><head><metacharset="UTF-8"><metaname="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>chevron_rightfilter_noneOutput:
- 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><htmllang="en"><head><metacharset="UTF-8"><metaname="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>chevron_rightfilter_noneOutput:
Supported browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Recommended Posts:
- Node.js | process.env Property
- How to override the CSS properties of a class using another CSS class ?
- Difference between bootstrap.css and bootstrap-theme.css
- CSS | rgb() Function
- CSS | rgba() Function
- CSS | hsla() Function
- CSS | hsl() Function
- CSS | cubic-bezier() Function
- CSS | calc() Function
- CSS | attr() Function
- CSS | linear-gradient() Function
- CSS | radial-gradient() Function
- CSS | repeating-radial-gradient() Function
- CSS | repeating-linear-gradient() Function
- CSS | animation-timing-function Property
- CSS | var() Function
- How to remove style added with .css() function using JavaScript?
- CSS | brightness() Function
- CSS | blur() Function
- CSS | contrast() Function
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
