Things Better Making: Redefining The Technical Possibilities Of CSS

Robin beklagte sich kürzlich über die übliche Beschwerde, dass CSS frustrierend ist. Es gibt Missverständnisse darüber, was es ist und was es tut. Es gibt Debatten darüber, welche Art von Sprache es ist. Es gibt sogar unterschiedliche Ansichten darüber, *wo* es geschrieben werden sollte.

Rachel Andrew hat eine neue Präsentation von An Event Apart DC 2019 verfügbar, die uns zurückführt; zurück zu den Wurzeln der Probleme, die wir früher mit CSS und den "Hacks" hatten, mit denen wir sie überwunden haben. CSS hat sich in den letzten Jahren stark verändert und, obwohl sich diese Änderungen manchmal komplex und verwirrend angefühlt haben, sind sie darauf ausgelegt, das zu lösen, was wir immer von CSS wollten.

Die volle Stunde, die man braucht, um sich den Vortrag anzusehen, ist die Zeit gut wert. Hier sind ein paar Nuggets, die herausgestochen sind. Zuerst einmal die Entlarvung gängiger CSS-Beschwerden

Man weiß nie, wie hoch etwas im Web ist. Floats haben das nie gelöst, weil sie Dinge nur nebeneinander platzieren, anstatt über die umgebenden Elemente Bescheid zu wissen. Neue Layout-Methoden, einschließlich CSS Grid und Flexbox, betrachten tatsächlich unsere Elemente und helfen ihnen, sich konsistent zu verhalten.
Flexbox ist seltsam und unintuitiv. Es ist nicht die Layout-Methode, die man vielleicht denkt. Wenn wir es als eine Möglichkeit betrachten, Dinge nebeneinander anzuordnen, wird es sich seltsam anfühlen und sich auch seltsam verhalten. Aber wenn wir es als das sehen, was es ist – eine Methode, die sich mit unterschiedlich großen Elementen befasst und das logischste Layout zurückgibt –, beginnt es Sinn zu ergeben. Es weist Platz zu, anstatt Dinge in eine Box zu quetschen.

Rachel fährt fort und gibt uns einen Einblick in die Zukunft dessen, was CSS für uns tun möchte

CSS möchte Datenverlust vermeiden. Neue Ausrichtungsschlüsselwörter wie safe und unsafe geben uns zusätzliche Kontrolle, um zu definieren, ob CSS aggressiv Inhalte vermeiden soll, die unbeabsichtigt verborgen sind, oder ob es dies zulassen soll.

.container {
  display: flex;
  flex-direction: column;
  /* Please center as long as it doesn't result in overflow */
  align-items: safe center;
}

CSS möchte uns helfen, mit Überlauf realistisch umzugehen. Die Schlüsselwörter min-content und max-content ermöglichen es, Boxen zu erstellen, die breit genug für den Inhalt sind, aber nicht breiter, und Boxen, die so groß sind, wie der Inhalt sein kann.

.container {
  width: min-content; /* Allow wrapping */
}

CSS möchte Dinge logisch anordnen. Das Web ist nicht von links nach rechts. Grid und Flexbox haben leise eine Denkweise von Anfang bis Ende eingeführt, die richtungsunabhängig ist. Das hat zu einer neuen Spezifikation für Logical Properties and Values geführt.
CSS möchte Inhalte portabler machen. CSS Regions lassen uns Inhalte von einem Element in ein anderes fließen. Obwohl es wahrscheinlich ein fehlerhafter Vergleich ist, ist es so ähnlich wie die Rohre in alten Mario Bros.-Spielen, wo das Springen in ein Rohr an einem Ort Ihren Charakter aus einem anderen Rohr an einem anderen Ort herausploppen lässt... aber wir können diese Quellen selbst definieren und ohne wütende Pflanzen, die versuchen, uns dabei zu fressen.

Jedenfalls kratzen diese nur an der Oberfläche dessen, was Rachel in ihrem Vortrag behandelt. Es ist eine gute Erinnerung daran, dass An Event Apart eine ganze Bibliothek wertvoller Vorträge von großartigen Sprechern hat und dass die Teilnahme an einer AEA-Veranstaltung eine unschätzbare Erfahrung ist, die sich lohnt. Rachels Vortrag stammte von der letztjährigen Veranstaltung in Washington D.C. und, wie sich herausstellt, findet die nächstgelegene Veranstaltung dort vom 13. bis 15. April statt. Wenn Sie diese nicht besuchen können, gibt es das ganze Jahr über mehrere andere in den Vereinigten Staaten.

Oh, und natürlich haben wir einen Rabattcode für Sie! Verwenden Sie AEACP für 100 $ Rabatt auf jede Show.

Direkter Link →