- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS Function - env()
The env() function in CSS is useful in adding a value to a user-defined environment variable in your CSS, just like var() function and other custom properties. Environment variables are typically provided by the user agent (e.g., the web browser) and can be used in CSS to adapt styles based on various factors, such as device characteristics or user preferences.
Environment variables can be used in place of any part of a property value or any part of the descriptor, such as in media query rules.
Possible values
The env() function can have following values:
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left: variables define a rectangle by its top, right, bottom and left insets from the viewport's edge.
These insets are safe to place the content, without getting being cut by the shape of a non-rectangular display.
The value remains zero, for rectangular viewports, such as laptop monitor.
For a non-rectangular display, such as a watch face, the four values are set such that they create a rectangle, so that content is clearly visible inside the rectangle.
titlebar-area-x, titlebar-area-y, titlebar-area-width, titlebar-area-height: used for PWA installed on desktop devices. The variables does not allow overlapping of the content with window control buttons (minimize, maximize and close).
keyboard-inset-top, keyboard-inset-right, keyboard-inset-bottom, keyboard-inset-left, keyboard-inset-width, keyboard-inset-height: states the details about the appearance of on-screen virtual keyboard. variables define a rectangle by its top, right, bottom and left insets from the viewport's edge. Width and height insets are measured based on other inset values.
The user-defined property names are case-sensitive, unlike other CSS properties.
Syntax
property: env(variable-name, [fallback]);
variable-name: The name of the environment variable.
[fallback]: (Optional). A fallback value to be used if the environment variable is not defined.
The syntax of the fallback permits use of commas, like the other custom properties. But, in case the property value doesn't support commas, the value is considered as invalid.
The user-defined properties are not reset by all property.
CSS env() - Combination of Values
Following example demonstrates the use of env() function with values safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left:
<html> <head> <style> .text-style { background-color: darkblue; width: max-content; color: white; font-size: 25px; border: env(SAFE-AREA-INSET-TOP, 10px) inset lightblue; padding: 10px; padding: env(SAFE-AREA-INSET-TOP, 2.5em) env(SAFE-AREA-INSET-RIGHT, 2.5em) env(SAFE-AREA-INSET-BOTTOM, 2.5em) env(SAFE-AREA-INSET-LEFT, 2.5em) } </style> </head> <body> <h2>env() function example</h2> <p class="text-style">padding added through environment variables</p> </body> </html>
To Continue Learning Please Login
Login with Google