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: This example shows the use of the CSS env() Function.
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: This example shows the use of the CSS env() Function.
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: This example shows the use of the CSS env() Function.
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: This example shows the use of the CSS env() Function.
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 69
- Edge 79
- Firefox 65
- Safari 11.1
- Opera 56
Please Login to comment...