70-480 – Tworzenie elastycznego układu zawartości

70-480

Wdrażanie układu przy użyciu elastycznego modelu pudełkowego; wdrażanie układu przy użyciu wielu kolumn; wdrażanie układu przy użyciu pozycjonowania elementów pływających i wykluczeń; wdrażanie układu przy użyciu opcji wyrównania siatki; wdrażanie układu przy użyciu regionów, grupowania i zagnieżdżania.



Model “flexbox

Model “flexbox” to nowy sposób na pozycjonowanie elementów blokowych względem siebie. Specyfikacja nie jest jeszcze w pełni ukończona, ale już teraz przeglądarki (poprzez przedrostki: -ms-, -webkit-, -moz-) umożliwiają korzystanie z własności modelu. Pozycjonowanie elementów odbywa się w pionie i poziomie z możliwością zdefiniowania co ma się dziać z wolnym miejscem. Jesteśmy także w stanie ustawiać poszczególne elementy w odpowiedniej kolejności oraz wyrównywać je względem okna przeglądarki.

W przykładzie widzimy element container, który jest bazowym komponentem dla pozostałych trzech elementów box. Dla elementu nadrzędnego ustawiona jest własność display na wartość flex, co definiuje nam model flexbox dla wszystkich elementów blokowych, które są dziećmi tego elementu. Dla elementów box ustawiona została z kolei własność flex z wartością 1, co oznacza w zasadzie tylko tyle, że każdy element zajmuje tyle samo miejsca.

W powyższym przykładzie doszła kolejna reguła, która dla pierwszego elementu box ustawia własność flex na wartość 2. Oznacza to, ze element ten będzie zajmować dwa razy więcej miejsca niżeli elementy z wartością 1. Widzimy to wyraźnie na przedstawionym przykładzie.

Kolejna własność do ustawienia to order, która również przyjmuje wartości liczbowe, a pozwala nam ustawić poszczególne elementy w odpowiedniej kolejności.

Kolejna własność to flex-direction, która przyjmuje cztery wartości:

  • row – domyślne ustawienie według kolejności HTML
  • row-reverse – odwrócona kolejność elementów
  • column – elementy ustawiane są od góry do dołu, według kolejności w HTML
  • column-reverse – odwrócona kolejność w pionie

Spójrzmy na przykład z wykorzystaniem wartości row-reverse:

.. oraz wartości column:

Kolejna jest własność flex-wrap, która posiada trzy wartości:

  • wrap – niemieszczące się elementy przenoszone są do kolejnego wiersza lub kolumny
  • nowrap – blokujemy w ten sposób przenoszenie do nowego wiersza lub kolumny
  • wrap-reverse – przenoszenie do kolejnego wiersza lub kolumny z odwróceniem kolejności

Jest jeszcze własność, która łączy obie poprzednie: flex-flow. W ten sposób możemy sterować położeniem i kolejnością elementów, a także ich przenoszeniem do nowego wiersza lub kolumny przy użyciu jednej własności.

Kolejną własnością jest flex-align, czyli wyrównanie elementów względem siebie oraz okna przeglądarki. Posiada ona pięć następujących wartości:

  • start – wyrównanie do początku
  • end – wyrównanie do końca
  • center – wycentrowanie elementów
  • stretch – rozciąganie elementów
  • baseline – wyrównanie elementów (względem największego)

Microsoft przygotował tech demo, które pozwala samodzielnie pobawić się modelem “flexbox”: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_flex.htm

(Uwaga: działa jedynie pod IE!)

Tekst i interfejs kolumnowy

Kolejną ciekawą własnością CSS3 jest interfejs wielokolumnowy, który znamy z gazet, a który dotyczy ułożenia tekstu na stronie. Dzięki własnościom column-* możemy zdefiniować czytelny oraz bardziej przystępny layout dla tekstu.

Dla kontenera zawierającego paragrafy tekstu zdefiniowana została w tym wypadku tylko jedna własność: column-count. Pozwala ona na określenie ilości kolumn na jaki zostanie podzielony tekst znajdujący się w danym kontenerze.

Kolejna własność, to odstęp pomiędzy kolumnami, który określa column-gap, przyjmująca jako wartość szerokość przerwy.

Powyżej widzimy wyraźne oddzielenie tekstu poprzez wykorzystanie własności column-rule, które tworzy linię, która separuje nam poszczególne kolumny.

Własności jest oczywiście więcej, ale zapraszam na stronę w3schools, gdzie jak zawsze znajdziemy pełen opis: http://www.w3schools.com/Css/css3_multiple_columns.asp

Microsoft również i dla własności multi-column przygotował demo, które w bardzo prosty sposób pokazuje w jaki sposób możemy manipulować tekstem: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_multi-column.htm

Opływanie elementów blokowych

Do tej pory znaliśmy tylko własność float, która pozwalała na opływanie elementu z lewej lub prawej jego strony. Wartość opływania mogliśmy wyłączyć poprzez wartość clear. CSS3 daje nam jednak możliwość sterowania opływaniem za pomocą tak zwanych wykluczeń.

Zacznijmy od spojrzenia na wartości dla własności wrap-flow, o której mowa:

  • auto – domyślnie, brak opływania
  • both – opływanie z każdej strony elementu
  • start – opływanie z lewej strony elementu
  • end – opływanie z prawej strony elementu
  • minimum – opływanie od strony, która zostanie zapełniona w minimalnym stopniu
  • maximum – opływanie od strony, która zostanie zapełniona w maksymalnym stopniu
  • clear – opływanie z lewej i prawej zostaje w tym przypadku wyłączone, tekst opływa dany element od góry i dołu

Wszystkie wartości zostały świetnie przedstawione w formie obrazków na stronie: https://docs.webplatform.org/wiki/css/properties/wrap-flow

Wyrównanie do siatki

Z kolejnym nowym modelem radzi sobie na razie w zasadzie jedynie przeglądarka ze stacji Microsoft: http://caniuse.com/#feat=css-grid Jest to jednak jeden z elementów egzaminu 70-480, więc na pewno się temu przyjrzeć. Chodzi mianowicie o budowanie layoutu strony w oparciu o tak zwany model grid, czyli siatkę elementów.

Pamiętajcie, że przykład powyżej działa w zasadzie jedynie w przeglądarce IE10+.

Po pierwsze dla kontenera container z elementami blokowymi box ustawiona została własność position: -ms-grid. Powoduje to włączenie layoutu siatki, dla wszystkich elementów blokowych wewnątrz elementu. Kolejną rzeczą jest definicja ilości kolumn oraz wierszy na naszej siatce. Posłużyły do tego dwie własności: -ms-grid-columns oraz -ms-grid-rows. Następnie każdemu elementowi ustawiona została konkretna pozycja na siatce za pomocą własności: -ms-grid-column-ms-grid-row.

Definiowanie ilości kolumn oraz wierszy, a także ich rozmiarów możliwe jest poprzez nadanie własnościom: -ms-grid-columns-ms-grid-rows wartosci:

  • px, em, % – standardowe jednostki
  • auto – wartość ustalana automatycznie na podstawie rozmiarów elementów rozmieszczonych na siatce
  • min-content – najmniejszy rozmiar wśród elementów
  • max-content – największy rozmiar wśród elementów
  • minmax(a, b) – zakres spomiędzy którego ma być ustalony rozmiar komórek na siatce
  • frakcje – jednostki części [fr]

W powyższym przykładzie widzimy rozciąganie elementów na wiele kolumn i wierszy przy pomocy -ms-grid-column-span oraz -ms-grid-row-span. I tak:

  • element 1 został rozciągnięty na dwa wiersze
  • element 2 został rozciągnięty zarówno na dwa wiersze, jak i dwie kolumny
  • element 3 został rozciągnięty na dwie kolumny

Siatka pozwala także wyrównywać elementy znajdujące się w jej polach. Służą do tego kolejne dwie własności: -ms-grid-column-align oraz -ms-grid-row-align.

Po raz kolejny możemy się z tym zaznajomić na demo od Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_grid.htm

Budowanie układu przy użyciu regionów

CSS3 wprowadza jeszcze jeden sposób na układ naszej strony / aplikacji. Są to regiony, które rozmieszone mogą być po całym dokumencie, a z opcją współdzielenia tekstu pozwalają tworzyć ciekawe i zarazem niestandardowe układy, które często widzimy choćby w gazetach.

Pełna specyfikacja regionów znajduje się oczywiście na stronie konsorcjum W3C: http://dev.w3.org/csswg/css-regions-1/

Przyznam się, że nigdy nie miałem okazji korzystać z tej własności. Nie spotkałem się także z pytaniem na egzaminie, które dotyczyło tego tematu i wydaje mi się, że jest on dość mocno pomijany w materiałach przygotowujących. Materiały W3C pokazują temat w bardzo obszerny sposób, a do tego odsyłam Was znów do demo od Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_regions.htm