Två-Värde Display Syntax (och Ibland Tre)

0
18

Du vet den enda värde syntax: .sak { display: block; }. Värdet “block” som ett enda värde. Det finns massor av enskilda värden för display. Till exempel, inline-flex, som är som flex i att det becomse en flex-behållare, men beter sig som en inline-nivå element snarare än ett blocknivåelement. Något intuitivt, men mycket bättre betjänt av en två-värde system som kan använda samma koncept som mer allmänt och lika intuitivt.

För en djup titt, du bör läsa Rachel Andrew ‘ s blogginlägg två-värde syntax för CSS Visa egendom. Spec är också en anständig läsa, så är den här videon från Miriam:

Detta är hur det maps i min hjärna

Välj blockera eller inline, sedan väljer flödet-rot, flex, grid, eller på ett bord. Om det är en lista-objekt som är en tredje sak.

Du i huvudsak att plocka en från varje kolumn för att beskriva den layout du vill ha. Så det befintliga värden vi använder hela tiden karta ut något som detta:

Ett annat sätt att tänka om dessa två kolumner jag har det är “utanför” och “innanför” visa värden. Utanför, i, hur det flödar med andra faktorer runt omkring. Inuti, som i, hur layout som händer inne i dessa delar.

Du kan faktiskt använda det?

Inte riktigt. Firefox 70 är först ut ur porten med det, och det finns inga andra signaler för stöd från Chrome-land eller Safari-land, det som jag vet om. Det är en bra utveckling av CSS, men så långt som dag-till-dag-användning, kommer att vara år ut. Något så viktigt som layout är inte något du vill låta misslyckas bara för denna något mindre beskrivande nytta. Inte heller är det förmodligen värt att successivt öka med @stöder och sådant.

Weirdnesses

  • Du kan inte blockera flödet eftersom det inte riktigt vettigt. Det kommer att återställas för att blockera flödet-rot.
  • Det är underförstått stenografi. Som om du inline lista-post, det är verkligen inline flöde lista-post medan list-objektet är blockera flödet lista-post. Ser alla ganska intuitivt.
  • Du använder fortfarande saker som bord -, rad-och tabell-header-gruppen. De är enkel-värdet erbjudanden, som är innehållet och inget.
  • Kolumn ett tekniskt ingår köra på, men så vitt jag vet, ingen webbläsare har någonsin haft stöd kör-i displayen.
  • Kolumn två tekniskt ingår ruby, men jag har aldrig förstått vad som är jämn.

Hur vi pratar om CSS

Jag gillar hur Rachel band denna förändring till en mer rationell mentala och undervisning modell:

… De på ett korrekt sätt förklara samspelet lådor med andra lådor, i termer av huruvida de är blockera eller inline, plus beteendet hos barn. För att förstå vad som visas är och gör, jag tror att de gör för en mycket förtydligande. Som ett resultat, jag har börjat att lära displayen med hjälp av dessa två värden för att hjälpa till att förklara vad det är som händer när du ändrar formatering sammanhang.

Det är alltid spännande att se nya funktioner som genomförs, hoppas jag att andra webbläsare också kommer att genomföra dessa två-värde versioner snart. Och sedan, inom en inte alltför avlägsen framtid kommer vi att kunna skriva CSS på samma sätt som vi nu förklara det, vilket tydligt visar att förhållandet mellan lådor och beteende hos sina barn.