(CSS 3 - interpretuje Internet Explorer 10, Firefox, Opera 12, Chrome)
selektor { order: kolejność }
Możliwość swobodnego ustalania kolejności wyświetlania się elementów to następna duża zaleta układu elastycznego. Przy wstawiania znaczników HTML do kodu źródłowego już nie musimy się martwić, aby były one osadzone w kolejności odpowiedniej do ich poprawnego wyświetlenia - zgodnie z zaprojektowaną grafiką serwisu.
Dzięki temu możemy tworzyć bardziej dostępne dokumenty. Przykładowo dla osoby niewidomej, która używa przeglądarki z syntezatorem mowy, prawdopodobnie korzystniej będzie, jeśli zapoznając się z katalogiem produktów w sklepie internetowym, najpierw usłyszy informacje o nazwie produktu, a potem jego opis. Zdjęcie jest w tym przypadku zupełnie nieważne, dlatego najlepiej jest wstawić je na końcu. Jednak dla użytkowników z dobrym wzrokiem właśnie zdjęcie może okazać się najważniejsze. Umieszczając je w kontenerze elastycznym, a następnie określając dla niego styl "order: -1
", wyświetlimy go na początku, podczas gdy syntezator mowy trafi na niego dopiero na końcu. W ten sposób potrzeby obu grup użytkowników zostaną spełnione.
Przykład:
Poniżej przykład fragmentu szablonu strony, który spełnia założenia dostępności - treść znajduje się w kodzie źródłowym przed kolumną menu. Mimo tego szerokość automatycznie dopasowuje się do okna przeglądarki. Dodatkowo warto zwrócić uwagę, że wysokość obu kolumn jest identyczna. Uzyskanie takiego efektu w tradycyjny sposób byłoby bardzo trudne i najczęściej wymagało pójścia na pewne kompromisy.
<div id="top"> <div id="TRESC">Treść strony...</div> <div id="MENU">Menu nawigacyjne</div> </div>
#top { display: flex; } #MENU { width: 150px; min-width: 150px; order: -1; }
[porównaj: Płynny szablon]