Komplexe, flexible Layouts zu erstellen war noch nie einfach, aber CSS3 hat sicherlich viele Kopfschmerzen genommen.
CSS3 Funktionen wie Flexbox und Säulen haben einige komplexe Layouts zu einer echten Möglichkeit gemacht und jetzt kommen sie zu einer der neuesten Ergänzungen der Toolbox des Webdesigners: CSS Regions.
Mit CSS-Regionen können Sie Inhalt in eine Reihe von Containern auf einer einzelnen Seite fließen lassen. Es entspricht dem Verknüpfen von Textfeldern in einer Anwendung wie InDesign. Es ermöglicht einige Layouts, die bisher nur möglich waren, indem die Linie zwischen Daten und Stilen verwischt wurde.
Wie immer ist der Browser-Support bei weitem nicht perfekt.
CSS Regions ist immer noch ein Entwurf, was bedeutet, dass es experimentell ist. Anfangs war der einzige Browser, der es tatsächlich unterstützte, Internet Explorer 10 (nein, ich mache keine Witze); obwohl IE10 einen iframe als Inhaltsquelle verwendet.
Safari behauptet, Unterstützung mit einem Präfix anzubieten.
In Chrome können Sie die Funktion testen, indem Sie Ihren Browser öffnen, "about: flags" eingeben und "enable-experimental-webkit-features" aktivieren und dann Ihren Browser neu starten.
Zum Glück gibt es auch ein JavaScript Polyfill erstellt von Adobe, die die Funktionalität von CSS-Regionen für Browser, die es derzeit nicht unterstützt, bringt, finden Sie dies auf Github.
Da der Zweck von CSS-Regionen darin besteht, unseren Text über verschiedene Container fließen zu lassen, benötigen Sie als Erstes einen Text:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus imperdiet purus ac eleifend. Vivamus posuere pellentesque nibh vel laoreet. Donec et sem odio. Donec sit amet lorem hendrerit, faucibus libero et, mattis lacus. Suspendisse dapibus rutrum felis quis interdum. Integer tincidunt, orci at condimentum placerat, est nulla sollicitudin velit, vitae gravida nisi odio ac ligula. Sed hendrerit ac massa vel ultricies. Vestibulum commodo, orci et tincidunt laoreet, enim tellus aliquet orci, quis dapibus sapien tellus eu felis. Etiam non arcu at eros luctus consectetur vitae eget nunc. In felis ipsum, vehicula ac mauris vel, porttitor gravida neque.Quisque orci turpis, aliquam vel tortor convallis, ullamcorper molestie nisl. Sed aliquet dignissim lorem non fringilla. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue erat ac hendrerit ullamcorper. Morbi facilisis urna nunc, eget pretium lectus congue vitae.Und dann einige Container:
Jetzt haben wir den grundlegenden Inhalt eingerichtet, wir können die Container verbinden, indem wir Flow-In und Flow- From verwenden , Sie werden in dem Beispiel feststellen , dass ich das Präfix -webkit hinzugefügt habe .
.text {-webkit-flow-into: text-flow;padding: 0;margin: 0;color: #F2F2F2;font-family: helvetica, arial;font-size: 16px;line-height: 22px;}.containers{-webkit-flow-from: text-flow;background: #333333;padding: 5px;margin-top: 100px;width: 200px;height: 300px;float: left;margin-right: 20px;}Wenn Sie dies in einem Browser überprüfen, werden Sie sehen, dass der Text nur von einer Box zur nächsten fließt. Wenn Sie diese Container jetzt positionieren, wird der Text weiterhin ordnungsgemäß fließen.
-webkit-flow-into: text-flow;Diese Eigenschaft akzeptiert einen Bezeichner als Wert. Wenn Sie einen Wert an diese Eigenschaft übergeben, wird dieser Teil eines benannten Flusses und der Rendervorgang wird als Teil des Seitenflusses gestoppt. Sie können dies abbrechen, indem Sie die Eigenschaft auf none setzen.
Der Name des Flow, den Sie verwenden, ist willkürlich, stellen Sie nur sicher, dass Sie konsistent sind. Wir können auch mehrere Elemente mit demselben benannten Fluss wie im obigen Beispiel verwenden.
Dies ist nicht auf Text beschränkt, wir können auch Bilder, Listen und viele andere Arten von HTML-Inhalten darstellen.
-webkit-flow-from: text-flow;Wir verwenden diese Eigenschaft, um anzugeben, welche Elemente den angegebenen Fluss erhalten sollen.
Der Wert ist der Name des Datenflusses, den wir für die Einlaufeigenschaft angegeben haben.
Beachten Sie, dass alle Inhaltsstile, die Sie auf den Originaltext anwenden, im gesamten Verlauf beibehalten werden. Wenn Sie also den Text blau färben, bleibt er in allen Containern blau.
Um ein Beispiel für CSS-Regionen in Aktion zu sehen, werfen Sie einen Blick auf Dieser Stift Ich erschuf.
Die Browser-Unterstützung für CSS-Regionen ist derzeit schwach, und es ist noch ein langer Weg, bis wir uns täglich darauf verlassen können. Aber die Flexibilität, die es bietet, ist fantastisch, und wenn einmal volle Unterstützung vorhanden ist, denke ich, dass CSS-Regionen für viele Jahre die erste Wahl sein werden.
Sind Sie von CSS-Regionen begeistert? Wie bald werden wir sie nutzen können? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Wasserfall Bild über cuatrok77.