CSS miljövariabler

0
51

Alla är vi introducerades till env () – funktionen i CSS när allt detta drama om “Notch” och iPhone X var på väg ner. Det sätt som Apple landade på att hjälpa oss att flytta innehåll bort från de “osäkra” områden var att ge oss i huvudsak hårdkodade variabler att använda:

stoppning:
env(safe-området-infälld-top)
env(safe-området-faktaruta till höger)
env(safe-området-infälld botten)
env(safe-området-funktion-vänster);

Öh ok! Konstigt! Nu, nio månader senare, en “Inofficiell Förslag Utkast” för env() har landat. Detta är hur specifikationer arbete, som jag förstår det. Ibland webbläsaren leverantörer för att driva med saker de behöver, och då är det standardiserade. Det är inte alltid väntar runt för standardiseringsorganen att uppfinna saker och sedan webbläsare leverantörer för att genomföra dessa saker.

Är miljövariabler som något att bli upphetsad över? Heck yeah! På sätt och vis, de är som en mer begränsad version av CSS Egna Egenskaper, men det betyder att de kan vara potentiellt användas till fler saker.

CSS miljövariabler är att få standardiserade:https://t.co/QKFBM3WFT2
Tillåter att för att få och använda webbläsaren och författare definierade variabler: typografi, färger, hack och andra specifika layout/enhet värden.
De arbetar i Media Frågor, där CSS Anpassade Egenskaper inte kan användas. pic..com/FWrPiBiAqp

— Serg Hospodarets (@malyw) den 29 April 2018

👀 Helt ny spec för global env() variabler i CSS: https://t.co/6YfXWFTyhN

Glöm hack, det viktiga här är möjligheten till en separat CSS-variabler från cascade. Cool ① för perf/kod organisation ② för att du skulle kunna använda dem i media frågor!

— Eric Portis (@etportis) 30 April 2018

Eric påpekar också en del mycket awesome tidigt att tänka:

FRÅGA 4 – Ange den fullständiga uppsättning av platser env() kan användas.

  • Bör kunna ersätta någon delmängd av MQ syntax, till exempel.
  • Bör kunna ersätta väljare, kanske?
  • Ska det fungera på en regel nivå, så att du kan infoga godtyckliga saker i en regel, som att återanvända ett block av uttalanden?

Förmodligen fortfarande utbytbara med JavaScript också. Jag skulle tror att den främsta anledningen CSS Anpassade Egenskaper inte jobba med media frågor och väljarna är, eftersom de arbetar med cascade, som öppnar upp en del mycket märkliga oändlig loop logik där det vettigt CSS inte vill trampa.

Om du är i PostCSS sak, det är en plugin! Men jag varnar… samma problem som drabbar förbehandling CSS Anpassade Egenskaper som gäller här (utom den första i denna artikel).