Przez wiele lat, pływaki CSS były drobnym, ale niezbędnym elementem w tworzeniu layoutów stron internetowych. Jeśli twój projekt wymagał wielu kolumn, zwróciłeś się do pływaków. Problem z tą metodą polega na tym, że pomimo niesamowitej pomysłowości, jaką projektanci/deweloperzy stron internetowych wykazali w tworzeniu złożonej witryny układy, pływaki CSS nigdy nie miały być używane w ten sposób.
Podczas gdy pływaki i pozycjonowanie CSS z pewnością będą miały miejsce w projektowaniu stron internetowych przez wiele lat, nowszy układ Techniki, w tym CSS Grid i Flexbox, dają teraz projektantom stron internetowych nowe sposoby tworzenia układów witryn. Kolejną nową techniką układu, która pokazuje duży potencjał, jest CSS Multiple Columns.
Kolumny CSS istnieją już od kilku lat, ale brak wsparcia w starszych przeglądarkach (głównie starszych Internet Explorer) uniemożliwił wielu specjalistom internetowym korzystanie z tych stylów w ich produkcji praca.
Wraz z końcem wsparcia dla starszych wersji IE, niektórzy projektanci stron internetowych eksperymentują teraz z nowym układem CSS opcje, w tym kolumny CSS i odkrycie, że dzięki tym nowym podejściom mają o wiele większą kontrolę niż w przypadku pływaki.
Podstawy kolumn CSS
Jak sama nazwa wskazuje, CSS Multiple Columns (znany również jako CSS3 układ wielokolumnowy) umożliwia podzielenie treści na określoną liczbę kolumn. Najbardziej podstawowe właściwości CSS, których możesz użyć, to:
- liczba kolumn column
- kolumna-przerwa
W przypadku liczby kolumn określasz liczbę kolumn, które chcesz. Odstęp między kolumnami to rynny lub odstępy między tymi kolumnami. Przeglądarka przyjmie te wartości i podzieli zawartość równomiernie na określoną liczbę kolumn.
Typowym przykładem zastosowania wielu kolumn CSS w praktyce jest podzielenie bloku treści tekstowej na wiele kolumn, podobnie jak w artykule prasowym. Załóżmy, że masz następujący znacznik HTML (pamiętaj, że na przykład umieściliśmy tylko początek jeden akapit, podczas gdy w praktyce w tym znaczniku prawdopodobnie byłoby wiele akapitów treści):
Nagłówek twojego artykułu.
Wyobraź sobie wiele akapitów tekstu tutaj...
Jeśli następnie napisałeś te style CSS:
.zawartość {
-moz-liczba-kolumn: 3;
- liczba kolumn w webkicie: 3;
liczba kolumn: 3;
-moz-column-gap: 30px;
-przerwa w kolumnach webkita: 30px;
odstęp między kolumnami: 30px;
}
Ta reguła CSS podzieliłaby podział „treści” na 3 równe kolumny z odstępem 30 pikseli między nimi. Jeśli chcesz mieć dwie kolumny zamiast 3, po prostu zmień tę wartość, a przeglądarka obliczy nowe szerokości tych kolumn, aby równomiernie podzielić zawartość. Zauważ, że najpierw używamy właściwości z przedrostkiem dostawcy, a następnie deklaracji bez przedrostka.
Choć jest to proste, jego użycie w ten sposób jest wątpliwe w przypadku korzystania ze strony internetowej. Tak, możesz podzielić wiele treści na wiele kolumn, ale może to nie być najlepsza lektura doświadczenie dla sieci, zwłaszcza jeśli wysokość tych kolumn spada poniżej „zagięcia” ekran.
Czytelnicy musieliby wtedy przewijać w górę iw dół, aby przeczytać pełną treść. Jednak zasada Kolumn CSS jest tak prosta, jak widać tutaj, i może być używana do czegoś więcej niż tylko dzielenia zawartości niektórych akapitów — w rzeczywistości może być użyta do układu.
Układ z kolumnami CSS
Załóżmy, że masz stronę internetową z obszarem treści zawierającym 3 kolumny treści. Jest to bardzo powszechny układ strony internetowej i aby osiągnąć te 3 kolumny, zwykle unosisz podziały, które się w nim znajdują. Dzięki wielokolumnowym CSS jest to o wiele łatwiejsze.
Oto przykładowy kod HTML:
Z naszego bloga.
Treść trafi tutaj…
Nadchodzące wydarzenia.
Treść trafi tutaj…
CSS tworzący te wiele kolumn zaczyna się od tego, co widziałeś wcześniej:
.zawartość {
-moz-liczba-kolumn: 3;
- liczba kolumn w webkicie: 3;
liczba kolumn: 3;
-moz-column-gap: 30px;
-przerwa w kolumnach webkita: 30px;
odstęp między kolumnami: 30px;
}
Teraz wyzwaniem jest to, że przeglądarka chce podzielić tę zawartość równomiernie, więc jeśli długość zawartości tych podziałów jest inna, przeglądarka faktycznie podzieli zawartość indywidualny podział, dodając początek do jednej kolumny, a następnie kontynuując w drugiej (możesz to zobaczyć, używając tego kodu do uruchomienia eksperymentu i dodając różne długości treści wewnątrz każdej podział).
Nie tego chcesz. Chcesz, aby każdy z tych działów tworzył odrębną kolumnę i bez względu na to, jak duża lub mała może być zawartość pojedynczego działu, nigdy nie chcesz jej dzielić. Możesz to osiągnąć, dodając tę jedną dodatkową linię CSS:
.treść div {
wyświetlacz: inline-block;
}
Zmusi to te podziały, które znajdują się wewnątrz „treści”, pozostaną nienaruszone, nawet gdy przeglądarka podzieli je na wiele kolumn. Co więcej, ponieważ nie podaliśmy tutaj niczego o stałej szerokości, te kolumny będą się automatycznie zmieniać wraz ze zmianą rozmiaru przeglądarki, co czyni je idealną aplikacją do responsywne strony internetowe. Dzięki temu stylowi „inline-block” każda z 3 dywizji będzie odrębną kolumną treści.
Korzystanie z szerokości kolumny
Istnieje inna właściwość oprócz „liczby kolumn”, której możesz użyć i w zależności od potrzeb układu może to być lepszy wybór dla Twojej witryny. To jest „szerokość kolumny”. Używając tego samego znacznika HTML, jak pokazano wcześniej, możemy zamiast tego zrobić to za pomocą naszego kodu CSS:
.zawartość {
-moz-szerokość-kolumny: 500px;
-webkit-szerokość-kolumny: 500px;
szerokość kolumny: 500px;
-moz-column-gap: 30px;
-przerwa w kolumnach webkita: 30px;
odstęp między kolumnami: 30px;
}
.treść div {
wyświetlacz: inline-block;
}
Działa to tak, że przeglądarka używa tej „szerokości kolumny” jako maksymalnej wartości tej kolumny. Jeśli więc okno przeglądarki ma mniej niż 500 pikseli szerokości, te 3 podziały pojawią się w jednej kolumnie, jeden nad drugim. Jest to typowy układ używany w układach mobilnych/małych ekranów.
Gdy szerokość przeglądarki zwiększa się, aby była wystarczająco duża, aby zmieścić 2 kolumny wraz z określonymi przerwami między kolumnami, przeglądarka automatycznie przejdzie z układu jednokolumnowego do dwóch kolumn. Zwiększaj szerokość ekranu, a ostatecznie otrzymasz projekt z 3 kolumnami, z każdą z naszych 3 dywizji wyświetlaną w osobnej kolumnie. Ponownie, jest to świetny sposób, aby uzyskać responsywność, przyjazny dla wielu urządzeń układy i nawet nie musisz ich używać zapytania medialne zmienić style układu!
Inne właściwości kolumn
Oprócz właściwości omówionych tutaj istnieją również właściwości „reguły kolumn”, w tym wartości koloru, stylu i szerokości, które umożliwiają tworzenie reguł między kolumnami. Będą one używane zamiast obramowań, jeśli chcesz mieć kilka linii oddzielających kolumny.
Czas na eksperymenty
Obecnie układ wielu kolumn CSS jest bardzo dobrze obsługiwany. Dzięki prefiksom ponad 94% użytkowników sieci WWW byłoby w stanie zobaczyć te style, a ta nieobsługiwana grupa byłaby po prostu znacznie starszymi wersjami Internet Explorera, które i tak nie są już obsługiwane.
Przy takim poziomie wsparcia nie ma powodu, aby nie eksperymentować z kolumnami CSS i wdrażać tych stylów w witrynach gotowych do produkcji. Możesz rozpocząć eksperymenty, korzystając z kodu HTML i CSS przedstawionego w tym artykule, i pobawić się różnymi wartościami, aby zobaczyć, co najlepiej sprawdzi się w przypadku układu witryny.