Zwei-Wert-Anzeige der Syntax (und Manchmal Drei)

0
11

Sie kennen die single-Wert-syntax: .Sache { display: block; }. Der Wert “block” wird von einem einzigen Wert. Es gibt viele einzelne Werte für die Anzeige. Zum Beispiel inline-flex, das ist wie bei flex, dass es becomse ein flex-container sein, aber verhält sich wie ein inline-level-element und nicht als ein block-level element. Etwas intuitiver, aber viel besser gedient durch eine zwei-Werte-system kann gelten, dass gleiche Konzept breiter und ebenso intuitiv.

Für einen tiefen Blick, den Sie Lesen sollten, Rachel Andrew ‘ s blog-post, Die zwei-Wert syntax der CSS-Eigenschaft Display. Die Skillung ist auch ein ordentliches Lesen, wie dieses video von Miriam:

Dies ist, wie es Karten in meinem Gehirn

Wählen Sie block-oder inline -, dann wählen Sie flow, flow-root, flex, raster oder Tabelle. Wenn es ein list-Element, das ist eine Dritte Sache.

Sie im Grunde wählen Sie eine aus jeder Spalte beschreiben Sie das gewünschte layout aus. So werden die vorhandenen Werte, die wir alle nutzen die Zeit anzeigen sowas dabei raus:

Eine weitere Möglichkeit, um sich über die zwei Spalten, die ich da habe, ist “außen” und “innen” , in der Werte angezeigt. Außerhalb, wie in, wie es fließt mit anderen Elementen um ihn herum. Innen, wie in, wie layout passiert im inneren dieser Elemente.

Kann man denn eigentlich verwenden?

Nicht wirklich. Firefox-70 ist das erste aus dem Tor mit, und es gibt keine anderen Signale für die Unterstützung von Chrome-land-oder Safari-land, das kenne ich. Es ist eine großartige Entwicklung von CSS, aber so weit wie der Tag-zu-Tag-Nutzung, es werden Jahren. Etwas, das so wichtig ist, wie das layout ist nicht etwas, Sie wollen nicht nur für das etwas kleinere beschreibende profitieren. Noch ist es wohl der Mühe Wert schrittweise erhöhen mit @unterstützt und so.

Weirdnesses

  • Sie können nicht blocken fließen, weil das nicht wirklich Sinn. Es wird zurückgesetzt zum block flow-root.
  • Es wird angedeutet, Kürzel. Wie, wenn Sie inline-list-item, das ist wirklich inline flow-list-Element in der Erwägung, dass list-item block-flow-list-Element. Sieht alles ziemlich intuitiv.
  • Benutzt du noch Sachen wie table-row und table-header-group. Dies sind einzelne deals, wie Inhalte und keine.
  • Spalte eine technisch enthält die run-in auch, aber soweit ich weiß, kein browser hat je unterstützte der run-in-display.
  • Spalte zwei technisch umfasst ruby, aber ich habe nie verstanden, was das selbst ist.

Wie wir sprechen über CSS

Ich mag, wie Rachel Bindungen dieser Wechsel zu einem mehr rationalen geistigen und Lehre:

… Sie richtig zu erklären, das die Wechselwirkung der Felder mit anderen Feldern, in Bezug auf, ob Sie block-oder inline-plus das Verhalten der Kinder. Für das Verständnis, was angezeigt wird und funktioniert, ich denke, Sie machen eine sehr nützliche Klarstellung. Als Ergebnis habe ich angefangen, zu unterrichten anzeigen mit Hilfe dieser beiden Werte, um zu helfen, zu erklären, was Los ist, wenn Sie ändern die Formatierung zusammenhängen.

Es ist immer spannend zu sehen, neue features umgesetzt, ich hoffe, dass andere Browser implementieren auch diese zwei-Wert-Versionen bald. Und dann, in nicht allzu ferner Zukunft werden wir in der Lage zu schreiben CSS in der gleichen Weise, wie wir jetzt erklären, was ein deutlicher Beweis für die Beziehung zwischen Boxen und das Verhalten Ihrer Kinder.