Faking env() to Use it Now

env() function of CSS did not appear out of thin air. It was originally used by Apple to deal with "notch screens" and has now become a draft specification. Its goal is to allow the user agent or author to declare unchangeable variables, similar to global constants in CSS.

However, the specification has not specified how to set env() value. If you need to use it now, the easiest way is to use normal CSS custom properties and avoid modifying them.

If you wish to use env() syntax, you can use a PostCSS plugin to simulate it. The plugin declares variables through a JavaScript file:

 postcssCustomProperties({
  importFrom: 'path/to/file.js' /* module.exports = {
    environmentVariables: {
      '--branding-padding': '20px',
      '--branding-small': '600px'
    }
  } */
});

It's interesting to define variables from JavaScript because it means we can set variables in one place and access them in both JavaScript and CSS.

Harry Nicholls introduces this in more detail in his article "Why You Should Use CSS env()", such as some notes when dealing with units. However, if you do need to use a single source non-changeable variable in CSS and JavaScript, this is a good solution and can be removed after env() is officially supported.

The above is the detailed content of Faking env() to Use it Now. For more information, please follow other related articles on the PHP Chinese website!