CSS: Kolumny

Szukając narzędzia, dzięki którym wpisy na jednym z moich blogów mogłyby mieć bardziej "gazetowy" wygląd, okazało się, że pod latarnią najciemniej. Otóż, standard CSS3 pozwala na automatyczne dzielenie tekstu na kolumny (w prawdziwej edytorskiej terminologii: na łamy) - nie potrzeba do tego żadnych operacji, jedyne właściwe zdefiniowanie stylu.
Do wykonania takiej operacji wystarczy do opisu stylu danego akapitu, fragmentu tekstu lub panelu div dodać wpis: -moz-column-count i podać, ile kolumn dla tego tekstu sobie życzymy. Przeglądarka sama podzieli tekst na łamy i wypełni nimi całą dostępną szerokość. Co do szerokości samych kolumn, definiujemy ją parametrem -moz-column-width. Natomiast -moz-column-gap pozwala nam na określenie rozmiaru odstępów między kolumnami.
Jakie proste, a jakie przydatne! Poniżej przykład działania:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum dictum luctus. Sed tincidunt dui in arcu luctus sit amet lacinia mauris ornare. Curabitur a lectus eget sapien convallis ultrices. Maecenas scelerisque, nisi et tincidunt ultrices, est justo congue dolor, a lobortis leo purus ac dui. Donec scelerisque tortor eu risus gravida ac vulputate risus faucibus. Donec nec arcu nec ligula iaculis molestie. Vestibulum in dui sed felis fringilla posuere a at ligula. Morbi ut aliquam nunc. Donec diam urna, ultrices sit amet laoreet id, congue a purus. Sed feugiat sem in risus condimentum et aliquet erat porttitor. Vivamus sollicitudin pulvinar sapien, facilisis tempor nibh imperdiet at. Pellentesque cursus sem orci.

Oraz kod:

<div style="-moz-column-count: 3; -moz-column-gap: 10px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum dictum luctus. Sed tincidunt dui in arcu luctus sit amet lacinia mauris ornare. Curabitur a lectus eget sapien convallis ultrices. Maecenas scelerisque, nisi et tincidunt ultrices, est justo congue dolor, a lobortis leo purus ac dui. Donec scelerisque tortor eu risus gravida ac vulputate risus faucibus. Donec nec arcu nec ligula iaculis molestie. Vestibulum in dui sed felis fringilla posuere a at ligula. Morbi ut aliquam nunc. Donec diam urna, ultrices sit amet laoreet id, congue a purus. Sed feugiat sem in risus condimentum et aliquet erat porttitor. Vivamus sollicitudin pulvinar sapien, facilisis tempor nibh imperdiet at. Pellentesque cursus sem orci. </div>

Oczywiście uwagę powinien zwrócić prefiks -moz, oznaczający, że ta funkcja działa tylko w przeglądarkach Mozilli (od wersji 1.5 włącznie). Na szczęście otwarcie tak przyrządzonej strony w przeglądarce, które tego mechanizmu nie obsługuje (np. IE), nie powoduje błędu - po prostu to formatowanie jest ignorowane i tekst jest wyświetlany w jednym łamie.

Więcej informacji: https://developer.mozilla.org/pl/Kolumny_CSS3