Przejdź do treści

Układ elastyczny - CSS

Wstęp

Jakie zaawansowane możliwości daje elastyczny układ rozplanowania elementów na stronie?

W zamierzchłych czasach sieci, gdy style CSS nie były jeszcze tak rozwinięte jak dzisiaj, rozplanowanie elementów na stronie realizowano się przy pomocy tabelek. Nie był to jednak najlepszy sposób, gdyż nie spełniał podstawowych zasad semantyki. Tabele zostały stworzone z myślą o prezentacji zbioru danych o powtarzającym się charakterze. Na szczęście style CSS wprowadziły nowe sposoby układania elementów na stronie, bez potrzeby używania w niewłaściwy sposób znaczników tabeli. Paradoksalnie właściwość position (pozycja) nie nadawała się zbytnio do ustalania głównego układu elementów na stronie, ponieważ wymagała, aby rozmiary bloków były z góry znane. W praktyce z taką sytuacją rzadko mamy do czynienia, gdyż nie jesteśmy w stanie od razu dokładnie przewidzieć, ile tekstu będą zawierać artykuły, opublikowane w serwisie.

Rozwiązaniem miało być płynne ustalanie pozycji przy pomocy właściwości float [zobacz: Szablon strony na DIV-ach]. I rzeczywiście w większości typowych zastosowań taki sposób był zupełnie wystarczający. Niestety w pewnych szczególnych przypadkach miał podobne ograniczenia jak pozycja absolutna. Bardzo trudno było zrealizować, zdawać by się mogło, tak trywialne sposoby układania elementów, jak wyśrodkowanie w pionie czy ustawienie kilku kolumn obok siebie przy zachowaniu takiej samej ich wysokości. W niektórych sytuacjach cierpiała na tym dostępność serwisu. Syntezatory mowy, stosowane w przeglądarkach używanych przez osoby niewidome, odczytują treść strony w kolejności jej występowanie w kodzie źródłowym HTML, a nie wizualnego ułożenia bloków na ekranie. Dlatego często korzystniej jest, aby najpierw w kodzie umieścić treść artykułu, a dopiero po niej rozbudowane menu nawigacyjne. Niestety w takiej sytuacji nie można było stworzyć prawdziwie elastycznego układu strony, z kolumną menu po lewej stronie, a treścią artykułu zajmującą całą wolną przestrzeń po prawej.

Na szczęście CSS3 rozwiązuje ten problem. Nie trzeba już stosować tabelek, pozycji absolutnych ani trików z płynnym układaniem elementów. Dzięki koncepcji układu elastycznego (ang. flexible box layout lub w skrócie: flexbox) dostajemy zaawansowane możliwości rozplanowania bloków na stronie, przy jednoczesnym automatycznym dopasowywaniu się całego układu, tak aby dokładnie spełniał nasze oczekiwania, bez względu na ilość treści w poszczególnych blokach na stronie.

Komentarze

Zobacz więcej komentarzy

Facebook