Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Floats umschließen für alle Browser mit @supports

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Floats umschließen für alle Browser mit @supports

“

Ich möchte jetzt zum Umschließen von gefloateten Elementen noch eine Klasse erstellen, und zwar soll das CSS so gestaltet sein, dass es zwei Fliegen mit einer Klappe schlägt. Moderne Browser erhalten "display: flow-root;", also die moderne Lösung ohne Nebenwirkungen. Und ältere Browser bekommen den Workaround "overflow: hidden;" und das möchte ich Ihnen jetzt zeigen, wie man das mithilfe einer Anweisung namens @supports sehr schön machen kann. Zunächst definiere ich eine Klasse .float-umschliessen. Der Name ist wie immer beliebig, aber der drückt das schon recht gut aus, und da soll einfach nur drinstehen "overflow: hidden;". Wenn ich also einem HTML-Element diese Klasse zuweise, dann wird "overflow: hidden;" aktiviert und als Nebenwirkung ein neuer Block Formatting Context erzeugt und die gefloateten Elemente bleiben innerhalb dieses Block Formatting Context. Das ist also für alle Browser so weit verständlich, aber ein Workaround. Jetzt möchte ich, dass moderne Browser, die "display: flow-root;" verstehen, das bekommen. Dazu gibt es @supports, also unterstützt, und dann in normalen Klammern dahinter "display: flow-root;", also die Eigenschaft, um die es geht beim Testen hier; kein Semikolon, weil das ja keine Deklaration ist hier. Geschweifte Klammer auf und zu und mittenrein hier schreiben wir: Wenn der Browser das unterstützt, dann soll die Klasse .float-umschliessen etwas anders aussehen. So, und dann kommt da nämlich "display: flow-root;" rein. So, und das würde so schon funktionieren, es ist aber noch nicht ganz perfekt, denn "overflow" wäre immer noch auf "hidden" gesetzt. Im Rahmen der Kaskade arbeitet der Browser das ab. Ein älterer Browser sagt: "'overflow: hidden;', okay, 'display: flow-root;', nie gehört", also ignoriert er diesen ganzen Ausdruck hier. Ein moderner Browser sagt: "Okay, 'overflow: hidden;', oh ja, das verstehe ich auch, dann nehmen wir das." Aber "overflow" bleibt auf "hidden", also setze ich für moderne Browser "overflow" wieder zurück auf "initial", auf den ursprünglichen Wert, den es laut der CSS-Spezifikation hat. Und jetzt möchte ich Ihnen noch eben zeigen, wie das funktioniert hier. Ich habe "Über uns" und habe wenig Text und das Bild, das gefloatet ist, ragt in den Footer hinein. Und jetzt kann ich hier einfach für das umgebende section-Element diese Klasse verwenden, float-umschliessen, und schon funktioniert das. Für das section-Element wird ein neuer Block Formatting Context erzeugt. Das gefloatete Element bleibt innerhalb dieses Elementes und es ist so pfiffig notiert hier, dass ältere Browser "overflow: hidden;" bekommen und moderne Browser "display: flow-root;".

Inhalt