CSS miljøvariabler

0
20

Vi var alle introdusert til env () – funksjonen i CSS når alle som drama om “Hakk” og iPhone X var på vei ned. Måten Apple landet på å hjelpe oss med å flytte innhold bort fra de “farlige” områder var å gi oss i hovedsak hard-kodet variabler å bruke:

polstring:
konvolutt(trygg-området-inset-top -)
konvolutt(trygg-området-inset-høyre)
konvolutt(trygg-området-inset-bunn)
konvolutt(trygg-området-inset-venstre);

Uh ok! Merkelig! Nå, ni måneder senere, en “Uoffisiell Forslag Utkast” for env() har landet. Dette er hvordan specs arbeid, som jeg forstår det. Noen ganger nettleser leverandører presse frem med ting de trenger, og da er det standardisert. Det er ikke alltid venter rundt for standarder organer til å finne på ting og så nettleser leverandører implementering av disse tingene.

Er miljøvariabler som noe å bli begeistret? Pokker yeah! I en viss forstand, de er som et mer begrenset versjon av CSS Egendefinerte Egenskaper, men det betyr at de kan være potensielt brukes til flere ting.

CSS miljøvariabler er å få standardisert:https://t.co/QKFBM3WFT2
La det få og bruke nettleseren og forfatter-definerte variabler: typografi, farger, hakk og andre spesifikke layout/enhet verdier.
De jobber i Media Queries, der hvor CSS Egendefinerte Egenskaper kan ikke brukes. pic..com/FWrPiBiAqp

— Serg Hospodarets (@malyw) 29. April 2018

👀 Splitter nye spec for global konvolutt() variabler i CSS: https://t.co/6YfXWFTyhN

Glem hakk, det viktigste her er evnen til å skille CSS variabler fra cascade. Kule ① for perf/kode organisasjon ② fordi du kan være i stand til å bruke dem i media spørsmål!

— Eric Portis (@etportis) 30. April 2018

Eric peker også ut noen veldig awesome tidlig å tenke:

SAK 4 – Angi den fullstendige sett av steder konvolutt() kan brukes.

  • Bør være i stand til å erstatte et delsett av MQ-syntaks, for eksempel.
  • Bør være i stand til å erstatte velgere, kanskje?
  • Skal det fungere på en regel nivå, slik at du kan sette inn en vilkårlig ting inn en regel, for eksempel på gjenbruk av en blokk av erklæringer?

Sannsynligvis fortsatt foranderlig-med-JavaScript, så vel. Jeg tror den viktigste grunnen CSS Egendefinerte Egenskaper ikke jobbe med media-spørringer og-uttak, og slik er fordi de gjør jobben med cascade, som åpner opp noen veldig merkelige uendelig løkke logikk der det er naturlig at CSS ikke ønsker å trå.

Hvis du er i PostCSS ting, det er en plugin! Men jeg vil advare… de samme problemene som ramme forbehandling CSS Egendefinerte Egenskaper gjelder her (bortsett fra den første i denne artikkelen).

SHARE
Previous articleCSS miljövariabler
Next articleCSS-Umgebungsvariablen