Jak korzystać z kolumn CSS3

Przy coraz większej różnorodności rozmiarów monitorów nie jest praktyczne tworzenie pojedynczych bloków tekstu zajmujących całą szerokość ekranu. Tradycyjnym rozwiązaniem jest ręczne rozdzielanie tekstu na kolumny, co jest bardzo czasochłonne; lub dynamicznie dzielić tekst za pomocą JavaScriptu, który nie działa uniwersalnie. Poza tym jest to problem z prezentacją, powinniśmy być w stanie nadać mu styl CSS bez użycia systemów gridowych, czy nie powinniśmy?

CSS3 w rzeczywistości zapewnia sposób na dopasowanie tekstu do różnych kolumn, daje nawet możliwość ustawienia rynny - przestrzeni między tymi kolumnami - w ten sposób masz pełną kontrolę zamiast systemu ramowego lub siatki ustawiając te luki dla siebie .

Najlepszy ze wszystkich, CSS3 pogarsza się z gracją, więc jeśli ktoś przegląda Netscape Navigatora, twoja strona nie zostanie zerwana.

Obsługa przeglądarki

Ważne jest, aby pamiętać, że chociaż wszystkie obecne przeglądarki obsługują wiele kolumn w CSS3 - tak, nawet IE10 - na przykład wiele najnowszych wersji - na przykład IE9 - nie. Mimo że wsparcie jest dobre, będziesz potrzebować prefiksów przeglądarki dla webkita (-webkit-) i mozilla (-moz-). Nie ma potrzeby dołączania opcji -ms- lub -o- do IE i Opery, ponieważ albo obsługują tę funkcję w całości, albo wcale jej nie obsługują.

Właściwości

Ta funkcja CSS zapewnia w rzeczywistości kilka właściwości zapewniających pełną kontrolę nad sposobem drukowania zawartości w przeglądarce i następujące właściwości:

• kolumna: tu podajesz liczbę kolumn, które chcesz zastosować do elementu.
• szerokość kolumny: szerokość pojedynczej kolumny. Pamiętaj, że ta wartość prawdopodobnie zostanie zmieniona przez przeglądarkę.
• column-gap: szerokość luki między kolumnami.
• column-rule-width: część rule jest rodzajem obramowania dla twoich kolumn i tu określasz szerokość tej granicy.
• column-rule-style: podobnie jak border, jeśli musisz określić styl.
• column-rule-color: tutaj kolor reguły.
• kolumna-rozpiętość: wartość tutaj informuje przeglądarkę, ile kolumn ma zawierać element, co jest dobre dla nagłówków i działa jak colspan i rowspan w tabelach.

Przy tych wszystkich właściwościach nie potrzebujemy niczego innego, aby mieć pełną kontrolę nad naszymi kolumnami. Oczywiście nie wszystkie z tych właściwości są konieczne, aby układ wielokolumnowy działał, w rzeczywistości wystarczy tylko kolumna, ale zawsze należy również użyć luki między kolumnami, aby nadać tekstowi trochę miejsca i nie mieć wszystkich kolumn jeden na drugim.

Aby zastosować to w praktyce, zajmuje to tylko dwa wiersze kodu:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Jeśli chcesz zastosować regułę do kolumn, wystarczy dodać dodatkowe właściwości:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Podobnie jak bardziej typowa właściwość border, możesz także ustawić kolor, styl i szerokość w jednym wierszu, jak na przykład:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Jeśli masz nagłówek i chcesz, aby nagłówek obejmował wszystkie kolumny, aby dodać jedną linię:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

Próbny

Możesz zastosować to do praktycznie dowolnego kodu HTML, od pojedynczego akapitu do wielu