To-Verdien Viser Syntaks (og noen Ganger Tre)

0
9

Du vet det enkelt-verdi syntaks: .ting { display: block; }. Verdien “blokker” som en enkelt verdi. Det er massevis av enkeltverdier for skjerm. For eksempel, inline-flex, som er som flex i at det becomse en flex-container, men oppfører seg som en inline-nivå element snarere enn en blokk-nivå element. Noe intuitivt, men det er mye bedre tjent med en to-verdien system som kan bruke det samme begrepet i videre forstand og like intuitivt.

For en dyp ser, bør du lese Rachel Andrew ‘ s blogginnlegg to-verdien syntaks av CSS-Vis eiendom. Spec er også en anstendig lese, så er denne videoen fra Miriam:

Dette er hvordan det kartene i hjernen min

Velg blokkere eller inline, og velg deretter flow,-rot, flex, rutenett eller en tabell. Hvis det er en liste-element som er en tredje ting.

Du egentlig plukke en fra hver kolonne for å beskrive den layout du ønsker. Så de eksisterende verdiene vi bruker hele tiden kart ut noe som dette:

En annen måte å tenke på de to kolonnene jeg har det er “ute” og “inne” skjerm verdier. Utenfor, som i, hvordan den flyter med andre elementer rundt det. Inne, som i, hvordan layout som skjer på innsiden av disse elementene.

Kan du faktisk bruke det?

Egentlig ikke. Firefox 70 er først ut av porten med det, og det er ingen andre signaler om støtte fra Chrome-land eller Safari-land, det som jeg vet om. Det er en flott utvikling av CSS, men så langt som dag-til-dag bruk, vil det være år ut. Noe så viktig som layout er ikke noe du ønsker å la mislykkes bare for denne noe mindre beskrivende nytte. Eller er det trolig verdt bryet å gradvis øke med @støtter og slikt.

Weirdnesses

  • Du kan ikke blokkere flow fordi det ikke virkelig fornuftig. Det vil bli tilbakestilt til å blokkere flyt-rot.
  • Det er underforstått stenografi. Liker hvis du inline liste-element, er det virkelig inline flow liste-element mens list-element er blokk flow liste-element. Ser alt ganske intuitivt.
  • Du er fortsatt i bruk ting som bord-rad-og-table-header-gruppen. De er for enkelt-verdi avtaler, som er innholdet og ingen.
  • Kolonne én teknisk omfatter kjøre-i også, men så vidt jeg vet, ingen nettleser noen gang har støttet kjøre-i displayet.
  • Kolonne to teknisk inkluderer ruby, men jeg har aldri forstått hva som selv er.

Hvordan vi snakker om CSS

Jeg liker hvordan Rachel bånd denne endringen til en mer rasjonell mentale og undervisning modell:

… De riktig forklare samspillet av bokser med andre boksene, i forhold til om de er blokkere eller inline, pluss atferden til barn. For å forstå hva skjermen er og gjør, jeg tror de gjør for en svært nyttig avklaring. Som et resultat, har jeg begynt å undervise i displayet ved hjelp av disse to verdiene til hjelp for å forklare hva som skjer når du endrer formateringen sammenhenger.

Det er alltid spennende å se nye funksjoner implementeres, jeg håper at andre nettlesere vil også gjennomføre disse to-verdien versjoner snart. Og så, i ikke altfor fjern fremtid vil vi være i stand til å skrive CSS-på samme måte som vi nå forklare det, klart viser forholdet mellom bokser og oppførselen til sine barn.