CSS ist großartig

Ich habe mir kürzlich diesen Becher für die Arbeit gekauft. Als professioneller Webentwickler entschied ich, dass er mich als König der Ironie im Büro etablieren würde. Der Witz darauf ist natürlich nicht einzigartig. Ich habe ihn überall gesehen, von T-Shirts bis hin zu Konferenzpräsentationen.

Die meisten von Ihnen, die dies lesen, sind wahrscheinlich mindestens einmal mit diesem Bild in Berührung gekommen. Es ist ein Witz, mit dem wir uns alle identifizieren können, oder? Sie versuchen, etwas Einfaches mit CSS zu machen, und die mysteriösen Wege, auf denen sogar grundlegende Eigenschaften interagieren, machen es unweigerlich kaputt.

Wenn dieser Witz die kollektive Frustration widerspiegelt, die Entwickler mit CSS haben, dann wollte ich, auf die Gefahr hin, den Spaß zu verderben, die zugrunde liegende Fehlfunktion als Fallstudie untersuchen, warum Leute von CSS frustriert sind.

Das Problem

Siehe den Pen CSS ist Großartig von Brandon (@brundolf) auf CodePen.

Es gibt drei Bedingungen, die erfüllt sein müssen, damit dieses Problem auftritt

• Der Inhalt kann nicht schrumpfen, um in den Container zu passen
• Der Container kann nicht wachsen, um den Inhalt aufzunehmen
• Der Container behandelt Überlauf nicht ordnungsgemäß

In realen Szenarien ist die zweite Bedingung am wahrscheinlichsten das Problem, das behoben werden muss, aber wir werden alle drei untersuchen.

Größe des Inhalts anpassen

Dies ist ein wenig unfair gegenüber dem Inhalt der Box, da das Wort **AWESOME** bei der gegebenen Schriftgröße und Containerbreite nicht auf einer Zeile Platz findet. Standardmäßig wird Text am Leerzeichen umgebrochen und Wörter nicht getrennt. Aber nehmen wir für einen Moment an, dass wir die Größe des Containers auf keinen Fall ändern können. Vielleicht ist der Text zum Beispiel eine aufgeblasene Überschrift auf einer Website, die auf einem besonders kleinen Handy betrachtet wird.

Wörter umbrechen

Damit ein durchgehendes Wort umgebrochen wird, müssen wir die CSS-Eigenschaft word-break verwenden. Wenn wir sie auf break-all setzen, wird der Browser angewiesen, Wörter bei Bedarf zu trennen, um Textinhalte innerhalb ihres Containers umzubrechen.

Siehe den Pen CSS ist Großartig: word-break von Brandon (@brundolf) auf CodePen.

Anderer Inhalt

In diesem Fall war die einzige Möglichkeit, den Inhalt responsiver zu gestalten, die Aktivierung des Wortumbruchs. Aber es gibt andere Arten von Inhalten, die überlaufen könnten. Wenn word-wrap auf nowrap gesetzt wäre, würde der Text nicht einmal zwischen Wörtern umgebrochen. Oder der Inhalt könnte ein Block-Level-Element sein, dessen width oder min-width größer als die Breite des Containers ist.

Containergröße anpassen

Es gibt viele mögliche Wege, wie das Container-Element gezwungen werden könnte, nicht zu wachsen. Zum Beispiel: width, max-width und flex. Aber was sie alle gemeinsam haben, ist, dass *die Breite durch etwas anderes als seinen Inhalt bestimmt wird*. Das ist an sich nicht schlecht, besonders da es keine feste Höhe gibt, was in den meisten Fällen dazu führen würde, dass sich der Inhalt einfach nach unten ausdehnt. Aber wenn Sie auf eine Variation dieser Situation stoßen, lohnt es sich zu überlegen, ob Sie die Breite wirklich *kontrollieren* müssen oder ob sie der Seite überlassen werden kann.

Alternativen zur Festlegung der width

Meistens meinen Sie, wenn Sie die width eines Elements festlegen und diese in Pixeln angeben, eigentlich min-width oder max-width. Fragen Sie sich, was Ihnen wirklich wichtig ist. Verschwand dieses Element ganz, wenn es keinen Inhalt hatte, weil es auf eine Breite von 0 schrumpfte? Setzen Sie min-width, damit es Abmessungen hat, aber immer noch Platz zum Wachsen hat. Wurde es so breit, dass ein ganzer Absatz auf einer Zeile Platz fand und schwer zu lesen war? Setzen Sie max-width, damit es nicht über ein bestimmtes Limit hinausgeht, aber auch auf kleinen Geräten nicht über den Bildschirmrand hinausragt. CSS ist wie ein Assistent: Sie wollen ihn leiten, nicht jeden seiner Schritte diktieren.

Überlauf durch Flexbox verursacht

Wenn eines Ihrer Flex-Items überlaufenden Inhalt hat, wird es etwas komplizierter. Das Erste, was Sie tun können, ist zu prüfen, ob Sie seine Breite angeben, wie im vorherigen Abschnitt. Wenn nicht, passiert wahrscheinlich, dass das Element "flex-shrinking" betreibt. Flex-Items werden zuerst nach den normalen Regeln dimensioniert; width, Inhalt usw. Die resultierende Größe wird als ihre flex-basis bezeichnet (die auch explizit mit einer gleichnamigen Eigenschaft festgelegt werden kann). Nach der Festlegung der Flex-Basis für jedes Item werden flex-grow und flex-shrink angewendet (oder flex, das beides auf einmal angibt). Die Items wachsen und schrumpfen gewichtet, basierend auf diesen beiden Werten und der Containergröße.

Das Festlegen von flex-shrink: 0 weist den Browser an, dass dieses Item niemals kleiner als seine Flex-Basis werden soll. Wenn die Flex-Basis durch Inhalt bestimmt wird (Standard), sollte dies Ihr Problem lösen. Seien Sie damit aber vorsichtig. Möglicherweise stoßen Sie im Elternteil des Elements wieder auf dasselbe Problem. Wenn sich dieses Flex-Item weigert zu schrumpfen, selbst wenn der Flex-Container kleiner ist als es, wird es überlaufen und Sie sind wieder am Anfang.

Überlauf behandeln

Manchmal gibt es einfach keinen Ausweg. Vielleicht ist die Containerbreite durch die Bildschirmgröße selbst begrenzt. Vielleicht ist der Inhalt eine Datentabelle, mit Zeilen, die nicht umgebrochen werden können und Spalten, die nicht weiter komprimiert werden können. Wir können den Überlauf immer noch eleganter behandeln, als ihn einfach überall hinauslaufen zu lassen.

overflow: hidden;

Die direkteste Lösung ist, den überlaufenden Inhalt zu verbergen. Das Setzen von overflow: hidden; schneidet Elemente einfach dort ab, wo sie die Grenze des Container-Elements erreichen. Wenn der Inhalt eher ästhetischer Natur ist und keine kritischen Informationen enthält, könnte dies akzeptabel sein.

Siehe den Pen CSS ist Großartig: overflow:hidden von Brandon (@brundolf) auf CodePen.

Wenn der Inhalt Text ist, können wir dies etwas visuell ansprechender gestalten, indem wir text-overflow: ellipsis; hinzufügen, das automatisch ein schönes "..." zu Text hinzufügt, der abgeschnitten wird. Es ist jedoch erwähnenswert, dass Sie dann etwas weniger vom eigentlichen Inhalt sehen, um Platz für die Ellipse zu schaffen. Beachten Sie auch, dass hierfür overflow: hidden; gesetzt sein muss.

Siehe den Pen CSS ist Großartig: ellipsis von Brandon (@brundolf) auf CodePen.

overflow: auto;

Die vorzuziehende Lösung ist in der Regel das Setzen von overflow-x: auto;. Dies gibt dem Browser die Erlaubnis, eine Scrollleiste hinzuzufügen, wenn der Inhalt überläuft, und ermöglicht dem Benutzer, den Container in diese Richtung zu scrollen.

Siehe den Pen CSS ist Großartig: overflow:auto von Brandon (@brundolf) auf CodePen.

Dies ist ein besonders elegante Fallback-Lösung, da sie bedeutet, dass der Benutzer *egal was passiert*, auf alle Inhalte zugreifen kann. Außerdem erscheint die Scrollleiste nur, wenn sie benötigt wird, was bedeutet, dass es keine schlechte Idee ist, diese Eigenschaft an wichtigen Stellen hinzuzufügen, selbst wenn Sie nicht erwarten, dass sie zum Einsatz kommt.

Warum resoniert dieses Rätsel so universell bei Menschen, die CSS verwendet haben?

CSS ist schwer, weil seine Eigenschaften interagieren, oft auf unerwartete Weise. Denn wenn Sie eine davon festlegen, legen Sie nie nur diese eine Sache fest. Diese eine Sache kombiniert sich, prallt ab und widerspricht einem Dutzend anderer Dinge, einschließlich Standarddinge, die Sie nie selbst festgelegt haben.

Eine Faustregel zur Minderung dieses Problems ist: **Seien Sie niemals expliziter, als Sie sein müssen**. Webseiten sind standardmäßig responsiv. Gutes CSS zu schreiben bedeutet, diese Tatsache zu nutzen, anstatt sie zu überschreiben. Verwenden Sie Prozente oder Viewport-Einheiten anstelle einer Media Query, wenn möglich. Verwenden Sie min-width anstelle von width, wo Sie können. Denken Sie in Regeln, was Sie wirklich sagen wollen, anstatt nur Eigenschaften hinzuzufügen, bis die Dinge richtig aussehen. Versuchen Sie, ein Gefühl dafür zu bekommen, wie der Browser Layout und Größenbestimmung auflöst, und nehmen Sie Ihre Änderungen und Ergänzungen darauf bedacht. Arbeiten Sie mit CSS, nicht dagegen.

Eine weitere Faustregel ist: **Lassen Sie entweder Breite oder Höhe vom Inhalt bestimmen**. In diesem Fall war das nicht genug, aber in den meisten Fällen wird es das sein. Geben Sie Dingen einen Raum zum Wachsen. Wenn Sie Regeln für die Größenbestimmung Ihrer Elemente festlegen, insbesondere wenn diese Texte enthalten, denken Sie über die Randfälle nach. „Was passiert, wenn dieser Inhalt auf ein einzelnes Zeichen reduziert wird? Was passiert, wenn dieser Inhalt auf drei Absätze erweitert wird? Es sieht vielleicht nicht gut aus, aber wäre mein Layout völlig kaputt?“

CSS ist seltsam. Es ist anders als jeder andere Code, und das macht viele Programmierer unbehaglich. Aber klug eingesetzt kann es tatsächlich großartig sein.