Budowanie złożonych, elastycznych układów nigdy nie było łatwe, ale CSS3 z pewnością wyeliminował wiele problemów.
Funkcje CSS3, takie jak Flexbox i Kolumny Zrobili kilka skomplikowanych układów, a teraz dołączają do nich jeden z najnowszych dodatków do zestawu narzędzi projektanta stron internetowych: Regiony CSS.
Regiony CSS umożliwiają przepływ treści do serii kontenerów na jednej stronie. Jest to odpowiednik łączenia pól tekstowych w aplikacji takiej jak InDesign. Umożliwia to niektóre układy, które wcześniej były możliwe tylko poprzez rozmycie linii między danymi i stylami.
Jak zwykle obsługa przeglądarki jest daleka od doskonałości.
Regiony CSS są wciąż wersją roboczą, co oznacza, że jest eksperymentalna. Początkowo jedyną przeglądarką, która faktycznie go obsługiwała, był Internet Explorer 10 (nie, nie żartuję); chociaż IE10 używa źródła iframe jako źródła treści.
Safari twierdzi, że oferuje wsparcie z prefiksem.
W Chrome możesz przetestować tę funkcję, otwierając przeglądarkę, wpisując "about: flags" i aktywując "enable-experimental-webkit-features", a następnie ponownie uruchamiając przeglądarkę.
Na szczęście jest też JavaScript polyfill stworzony przez Adobe, który przenosi funkcjonalność CSS Regions do przeglądarek, które obecnie nie obsługują go, możesz go znaleźć github.
Ponieważ celem regionów CSS jest umożliwienie przepływu naszego tekstu między różnymi kontenerami, pierwszą rzeczą, której potrzebujesz, jest tekst:
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.A potem niektóre pojemniki:
Teraz mamy podstawową konfigurację treści, możemy połączyć kontenery za pomocą flow-into i flow-of, zauważysz w przykładzie dodałem prefiks -webkit- .
.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;}Jeśli zaznaczysz to w przeglądarce, zobaczysz, że tekst będzie płynął z jednego pola do drugiego. Jeśli teraz umieścisz te pojemniki, tekst będzie nadal prawidłowo płynął.
-webkit-flow-into: text-flow;Ta właściwość akceptuje identyfikator jako wartość. Po przekazaniu wartości do tej właściwości staje się częścią nazwanego przepływu i przestaje renderować jako część przepływu stron. Możesz anulować, ustawiając właściwość na none.
Nazwa używanego przepływu jest dowolna, po prostu upewnij się, że jesteś konsekwentny. Możemy również mieć wiele elementów o tym samym strumieniu, jak w powyższym przykładzie.
Nie ogranicza się to do tekstu, możemy również przesyłać obrazy, listy i wiele innych rodzajów treści HTML.
-webkit-flow-from: text-flow;Używamy tej właściwości, aby określić, które elementy powinny otrzymać określony przepływ.
Wartością jest nazwa przepływu określonego dla właściwości flow-into .
Pamiętaj, że wszelkie style treści, które zastosujesz do oryginalnego tekstu, będą zachowane w całym przepływie. Jeśli więc kolorujemy niebieski tekst, pozostanie on niebieski we wszystkich pojemnikach.
Aby zobaczyć przykład regionów CSS w akcji, spójrz na ten długopis Ja stworzyłem.
Obsługa przeglądarek dla regionów CSS jest obecnie słaba, a zanim będziemy mogli na niej polegać codziennie, będzie jeszcze wiele do zrobienia. Ale elastyczność, którą oferuje, jest fantastyczna, a kiedy już pełne wsparcie będzie obowiązywać, myślę, że regiony CSS staną się techniką przyszłości na nadchodzące lata.
Czy jesteś podekscytowany regionami CSS? Jak myślisz, jak szybko będziemy mogli z nich korzystać? Daj nam znać w komentarzach.
Wyróżniony obraz / miniatura, obraz wodospadu przez cuatrok77.