Twee-Waarde Weergegeven in de Syntaxis (en Soms Drie)

0
8

Je kent de single-waarde syntaxis: .ding { display: block; }. De waarde “blok” een enkele waarde. Er zijn tal van enkele waarden voor weergave. Bijvoorbeeld, inline-flex, net als de flex in dat het becomse een flex-container, maar gedraagt zich als een inline-level-element in plaats van een block-level element. Enigszins intuïtief, maar veel beter gediend met een twee-waarde systeem dat van toepassing is dat hetzelfde concept breder en net zo intuïtief.

Voor een diepe kijk, je moet lezen Rachel Andrew ‘ s blog De twee-waarde syntaxis van de CSS van Weergave-eigenschappen. De spec is ook een fatsoenlijke lezen, als is deze video van Miriam:

Dit is hoe het kaarten in mijn hersenen

Kies blokkeren of inline, dan kies flow, flow-wortel -, flex -, raster-of tafel. Als het een list-item dat is een derde ding.

U wezen kies er een uit elke kolom te beschrijven van de gewenste lay-out. Zo worden de bestaande waarden gebruiken we de hele tijd in kaart brengen, iets als dit:

Een andere manier om na te denken over deze twee kolommen ik heb er “buiten” en “binnen” de waarden worden weergegeven. Buiten, als in, hoe het stroomt met andere elementen heen. Binnen, als in, hoe de lay-out er gebeurt in deze elementen.

Kan je eigenlijk gebruiken?

Niet echt. Firefox 70 is de eerste uit de poort, en er zijn geen andere signalen voor ondersteuning van Chroom-land of Safari-land dat ik ken. Het is een geweldige evolutie van CSS, maar zo ver als de dag-tot-dag gebruik, het zal jaren uit. Iets als vitaal belang als de lay-out is niet iets wat je wil laten zich niet alleen voor deze ietwat kleine beschrijvende voordeel. Noch is het waarschijnlijk de moeite waard is om geleidelijk te verbeteren met @ondersteunt en dergelijke.

Weirdnesses

  • Kunt u niet blokkeren de stroom, want dat heeft ook niet veel zin. Het zal teruggezet worden naar blok flow-root.
  • Er is impliciet steno. Als je inline-list-item, dat is echt inline flow lijst-item overwegende dat de lijst-item blok flow lijst-item. Ziet er allemaal vrij intuïtief.
  • U nog steeds gebruik maken van dingen zoals tabel-rij-en table-header-groep. Dat zijn enkele waarde deals, zoals de inhoud en niemand.
  • Kolom een technisch bevat run-in te zijn, maar voor zover ik weet, geen enkele browser ooit heeft ondersteund run-in display.
  • Kolom twee technisch bevat ruby, maar ik heb nooit begrepen wat dat ook is.

Hoe we praten over CSS

Ik hou van hoe Rachel banden dit veranderen naar een meer rationele mentale en onderwijs model:

… Ze het goed uitleggen van de interactie van de dozen met de andere vakken, in termen van het feit of ze blokkeren of inline, plus het gedrag van de kinderen. Voor het begrijpen van wat weergegeven is en doet, ik denk dat ze zorgen voor een zeer nuttige verduidelijking. Als een resultaat, ik ben begonnen te leren display met behulp van deze twee waarden om te helpen uit te leggen wat er gebeurt wanneer u de opmaak wijzigen contexten.

Het is altijd spannend om te zien hoe de nieuwe functies ten uitvoer wordt gelegd, ik hoop dat andere browsers ook het implementeren van deze twee-waarde versies snel. En dan, in de niet al te verre toekomst zullen we in staat zijn tot het schrijven van CSS op dezelfde manier als we nu uit te leggen, waaruit duidelijk de relatie tussen de dozen en het gedrag van hun kinderen.