[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fa-css-feature-you-should-know":3},{"id":4,"title":5,"body":6,"date":144,"description":145,"extension":146,"head":147,"imageUrl":96,"meta":148,"navigation":149,"ogImage":147,"path":150,"robots":147,"schemaOrg":147,"seo":151,"sitemap":152,"stem":153,"__hash__":154},"articles\u002Farticles\u002F14.A-css-feature-you-should-know.md","A CSS feature you should know",{"type":7,"value":8,"toc":140},"minimark",[9,13,17,20,31,59,62,68,71,76,79,88,91,108,115,118,121,129,132],[10,11,5],"h1",{"id":12},"a-css-feature-you-should-know",[14,15,16],"p",{},"Live and learn.",[14,18,19],{},"Either CSS is developing so fast, or I'm so slow, but I feel like I knew 80% of CSS in 2015, and now I know at most 50%.",[14,21,22,23,30],{},"Today we'll talk about ",[24,25,29],"a",{"href":26,"rel":27},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002Fenv",[28],"nofollow","env function in CSS",". Yeah... there are environment variables in CSS, just like in NodeJS 🤯",[32,33,34],"blockquote",{},[14,35,36,37,41,42,41,47,52,53,58],{},"The ",[38,39,40],"strong",{},"env()"," ",[24,43,46],{"href":44,"rel":45},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS",[28],"CSS",[24,48,51],{"href":49,"rel":50},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference\u002FValues\u002FFunctions",[28],"function"," can be used to insert the value of a user-agent defined ",[24,54,57],{"href":55,"rel":56},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FEnvironment_variables\u002FUsing",[28],"environment variable"," into your CSS.",[14,60,61],{},"The syntax is simple:",[14,63,64],{},[65,66,67],"em",{},"env(\u003Cenvironment-variable>, \u003Cfallback>)",[14,69,70],{},"But what kind of environment variables do we have and how can we use them? Here is a good example.",[72,73,75],"h2",{"id":74},"safe-area-inset","safe-area-inset-*",[14,77,78],{},"Here is the definition of the group of safe area variables.",[32,80,81],{},[14,82,83,84,87],{},"safe-area-inset refers to a group of ",[38,85,86],{},"CSS environment variables"," (safe-area-inset-top, -right, -bottom, and -left) used to ensure web content is not obscured by device-specific UI elements like display notches, rounded corners, or system navigation bars.",[14,89,90],{},"But it's easier to show than tell.",[92,93,97],"v-image",{":hasBorder":94,":rounded":94,"alt":95,"src":96},"true","Safe area inset example on a phone","\u002Fimg\u002Fenv-css-feature\u002Fsafe-area-phone.webp",[98,99,101],"template",{"v-slot:description":100},"",[14,102,103,104],{},"From ",[24,105,106],{"href":106,"rel":107},"https:\u002F\u002Fwebventures.rejh.nl\u002Fblog\u002F2025\u002Fsafe-area-inset-bottom-does-not-update\u002F",[28],[14,109,110,111,114],{},"So these variables basically hold paddings ",[38,112,113],{},"so that you can avoid such problems with your content being covered by the notch of an iPhone device",", for example.",[14,116,117],{},"In the case of a web browser, these variables will probably equal zero. If a variable is not defined for a specific device or application (the environment where the code is executed), you can use a fallback value instead.",[14,119,120],{},"Here is an example of how you can add top padding.",[92,122,125],{":hasBorder":94,":rounded":94,"alt":123,"src":124},"A CSS example of using safe area env variables","\u002Fimg\u002Fenv-css-feature\u002Fsafe-area-css-example.png",[98,126,127],{"v-slot:description":100},[14,128,123],{},[14,130,131],{},"And here is how it can be done with Tailwind classes.",[92,133,136],{":hasBorder":94,":rounded":94,"alt":134,"src":135},"An example of Tailwind syntax","\u002Fimg\u002Fenv-css-feature\u002Fsafe-area-tailwind-example.png",[98,137,138],{"v-slot:description":100},[14,139,134],{},{"title":100,"searchDepth":141,"depth":141,"links":142},2,[143],{"id":74,"depth":141,"text":75},"2026-02-24T03:39:55+04:00","A quick explanation of CSS env() and safe-area-inset variables, with practical examples for plain CSS and Tailwind.\n","md",null,{},true,"\u002Farticles\u002Fa-css-feature-you-should-know",{"title":5,"description":145},{"loc":150},"articles\u002F14.A-css-feature-you-should-know","X99ZtIbrIN6CMpkByyY9rBuNbAC-AkkoRYTzXnMplSA"]