CSS omgevingsvariabelen

0
42

We werden allemaal voorgesteld aan de env() functie in CSS als al die drama over “De Kerf” en de iPhone X aan de hand was. De manier waarop Apple landde op ons helpen de inhoud verplaatsen uit de buurt van die ‘onveilige gebieden”, was om ons in wezen hard-gecodeerde variabelen te gebruiken:

vulling:
env(safe-area-inzet-boven)
env(safe-area-inzet-rechts)
env(safe-area-inzet-onder)
env(safe-area-inzet-links);

Uh ok! Raar! Nu, negen maanden later, een “Onofficiële Voorstel Ontwerp” voor env() is geland. Dit is hoe specs werk, als ik het goed begrijp. Soms browser leveranciers naar voren schuiven met spullen die ze nodig hebben, en dan is het gestandaardiseerd. Het is niet altijd te wachten voor de normalisatie-instituten te bedenken van dingen en vervolgens browser leveranciers de uitvoering van die dingen.

Zijn omgevingsvariabelen iets om blij van te worden? Heck yeah! In een zin, ze zijn als een meer beperkte versie van CSS Aangepaste Eigenschappen, maar dat betekent dat ze kunnen worden gebruikt voor meer dingen.

CSS omgevingsvariabelen zijn het krijgen van gestandaardiseerde:https://t.co/QKFBM3WFT2
Laat het krijgen en gebruiken van de browser en de auteur gedefinieerde variabelen: typografie, kleuren, notch en andere specifieke lay-out/apparaat en waarden.
Ze werken in de Media Query ‘ s, waar CSS Aangepaste Eigenschappen kunnen niet worden gebruikt. pic..com/FWrPiBiAqp

— Serg Hospodarets (@malyw) April 29, 2018

👀 Nieuwe spec voor wereldwijde env() variabelen in de CSS: https://t.co/6YfXWFTyhN

Vergeet inkepingen, het belangrijkste hier is de mogelijkheid om aparte CSS variabelen van de cascade. Cool ① voor perf/code organisatie②, omdat je misschien in staat zijn om ze te gebruiken in de media query ‘ s!

— Eric Portis (@etportis), 30 April 2018

Eric wijst ook erg geweldig begin te denken:

Aflevering 4 – Definieer de volledige set van plaatsen env() kan worden gebruikt.

  • Moet kunnen vervangen elk deel van de MQ-syntaxis, bijvoorbeeld.
  • Moet kunnen vervangen kiezers, misschien?
  • Moet het werk op een regel niveau, dus kunt u willekeurige spullen in een regel, zoals het hergebruiken van een blok van verklaringen?

Waarschijnlijk nog steeds wisselvallig met JavaScript. Ik zou denken dat de belangrijkste reden CSS Aangepaste Eigenschappen niet werken met media query ‘ s en selecties en dergelijke is omdat ze werken met de cascade, die opent van een aantal zeer vreemde oneindige lus logica waar het zinvol is CSS niet wil wagen.

Als je in de PostCSS ding, er is een plugin! Maar ik wil waarschuwen… dezelfde problemen die overkomen preprocessing CSS Aangepaste Eigenschappen is hier van toepassing (behalve de eerste van de in dat artikel).