Sekret projektowania layoutów stron bez CSS Floats

Jeśli projektujesz w Internecie przez ostatnią dekadę, bez wątpienia znasz właściwość float CSS. Ponieważ przemysł (na szczęście) przyjął zasadę tableless layouts, pływaki były najczęściej wybieraną przez nas bronią do układania naszych stron internetowych, ale czy jest to najlepszy wybór?

Pomimo popularności tej metody jest ona regularnie przyczyną frustracji i zamieszania dla nowych projektantów i staje się problemem, gdy elementy pływające pozostają "nieoczyszczone". Te nieoczyszczone pływaki mogą powodować wiele problemów, od niechlujstwa estetyki po całkowitą niedostępność. W przypadku niewielkiego projektu bardzo łatwo jest rozwiązać problem z płynnością, ale podczas pracy nad dużą aplikacją internetową z dynamiczną zawartością może to być nieco trudniejsze, pochłaniając cenny czas i kosztując cię pieniądze.

Lepsza alternatywa

Nawet przy prawidłowym używaniu, pływaki zmieniają normalny przepływ dokumentu, który może spowodować nieoczekiwane zachowanie i ograniczyć opcje stylizacji. Ponieważ element pływający nie znajduje się w "normalnym przepływie", niepozycjonowane pola blokowe utworzone przed i po pływaku przepływają pionowo, tak jakby pływak nie istniał. Dzięki responsywnej konstrukcji, gdzie rozmiary są dynamiczne i płynne, aby wypełnić dostępną przestrzeń, jest to dalekie od ideału. Co jeśli byłby lepszy sposób?

Flexbox jest ekscytującą przyszłością układów stron internetowych, ale dla tych z nas, którzy muszą obsługiwać starsze przeglądarki, jest to wciąż odległy sen. Z drugiej strony właściwość display ma pełne wsparcie i może zapewnić prawie całą funkcjonalność układu float bez wad.

wbudowany blok na ratunek

Właściwość wyświetlania , w połączeniu z wartością zmiennoprzecinkową i pozycją , określa typ pola lub pól generowanych dla elementu. W bardzo prostszej formie elementy blokowe obejmują całą szerokość swojego kontenera, zmuszając wszystkie następne elementy do następnej linii, podczas gdy elementy liniowe obejmują tylko szerokość ich zawartości, pozwalając każdemu elementowi liniowemu przepływać obok niego na tym samym poziomie. linia.

Zastosowanie wyświetlania: blok inline do elementu generuje kontener blokowy na poziomie liniowym. Pomyśl o tekście wewnątrz tagu. Wszystkie są "inline" ze sobą, podczas gdy sam znacznik jest kontenerem blokowym. Rozumiejąc to zachowanie, możemy użyć właściwości display, aby umieścić naszą treść obok siebie. Ponieważ wszystkie nasze elementy pozostają w normalnym przepływie, nie mamy żadnych problemów ze zwiniętym elementem nadrzędnym. Moim zdaniem jest to znacznie czystsze rozwiązanie, które wciąż osiąga pożądany rezultat.

Zobacz pióro Blok śródliniowy nad spławikami autor: davidicus na CodePen.

Technika

Ta metoda działa prawie wszędzie, gdzie normalnie można zastosować zmienną. Rzućmy okiem na klasyczny układ główny / boczny. W przypadku HTML mamy element opakowania z dwoma elementami podrzędnymi w środku:

Nasz CSS:

        .wrapper,.mainContent,.sideBar {//change the box model for simplicity-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.wrapper {font-size: 1em;padding: 1.5em;width: 100%;}.mainContent,.sideBar {display: inline-block;vertical-align: top;width: 100%;}@media (min-width: 700px) {.mainContent {margin-right: 5%;width: 60%;}.sideBar { width: 35%; }}

Po prostu mamy główną treść i pasek boczny.

Kierunek "unoszenia się" jest określony przez wyrównanie tekstu w opakowaniu div. Ponieważ pozostało domyślne wyrównanie, nie musieliśmy nic robić. Możesz jednak łatwo ustawić go na środku lub w prawo, aby uzyskać pewne układy, które nie są nawet możliwe w przypadku elementów pływających (więcej o tym później). Zwróć uwagę na komentarz "bez spacji" pomiędzy dwoma elementami div dziecka w kontenerze .wrapper . Ważne jest, aby zwrócić uwagę, a powodem tego jest jeden "con" o tej metodzie.

Biała przestrzeń

Wróćmy do przykładu tagu. Podczas pisania tekstu w html cała biała przestrzeń jest zawijana w jeden pojedynczy znak biały, niezależnie od ilości spacji w dokumencie HTML. Tak więc wszelkie przerwy między elementami "pływającymi" w znacznikach będą faktycznie rejestrowane jako odstępy między nimi w przeglądarce, podobnie jak tekst w akapicie. To naturalnie spowoduje, że obliczenia dotyczące rozmiaru będą wyłączane, przewracając ostatni element na następny poziom strony. Bez bueno! Na szczęście dla nas istnieje kilka rozwiązań, które rozwiązują ten mały problem. Jak na przykład:

• Ustaw rozmiar czcionki: 0; . Przestrzeń, z którą mamy do czynienia, to przestrzeń znaków, więc ustawienie rozmiaru czcionki na zero powoduje również, że rozmiar przestrzeni zerowej jest równy zeru. Problem polega na tym, że musisz podnieść rozmiary czcionek elementów podrzędnych, a ich "emisja" wychodzi całkowicie poza okno. To może być trochę uciążliwe, aby utrzymać się na szczycie, więc ten sposób nie jest idealny.

• Usuń przestrzeń między elementami w kodzie HTML, usuwając w ten sposób przestrzeń z równania. Zrobiłem to przez jakiś czas, ale wyglądało to niechlujnie i utrudniało czytanie.

• Dodanie komentarza HTML między elementami spowoduje również usunięcie znaku spacji, tak jak w naszym przykładzie. To jest moje preferowane rozwiązanie . Podkreślanie tekstu w większości edytorów tekstu jest takie, że kontrast między nutą a elementami jest wystarczający, aby znacznie poprawić czytelność Twojej oceny. Pozwoli to również zachować właściwe wcięcie samego elementu.

Pływacy pracują dla mnie, po co zmieniać?

Być może myślisz: "To jest dobre i wszystko, ale dlaczego miałbym zmienić metodę, która działa dobrze dla mnie?" Cóż, nawet jeśli jesteś mistrzem pływaka, są pewne rzeczy, których po prostu nie potrafią. Na przykład:

• Nieuchwytny "wyśrodkowany pływak", który jest często pożądany, wymaga dodatkowego znacznika i wielu właściwości CSS do osiągnięcia. Metodą wyświetlania można to zrobić po prostu poprzez zastosowanie polecenia text-align: center do wrappera.

• Największą zaletą wyboru metody wyświetlania jest możliwość pionowego wyrównania zawartości. Jak często chciałeś wyśrodkować element na jego rodzeństwo? Możesz użyć pozycjonowania z ujemnym marginesem / translate trick, ale znowu, z dynamicznym środowiskiem reagującym, nie jest to lepsze. Zamiast tego zastosuj vertical-align: middle; perfekcyjnie wyśrodkuje twoje elementy za każdym razem bez dodatkowej pracy z Twojej strony. (Zobacz pióro Blok śródliniowy nad spławikami autor: davidicus na CodePen.)

Aby to podsumować

W rzeczywistości nie ma "jednego rozmiaru dla wszystkich", jeśli chodzi o projektowanie stron internetowych, a to naprawdę sprowadza się do osobistych preferencji. Nadal używam pływaków w pewnych sytuacjach i czasami jest to naprawdę najlepsze narzędzie do pracy. Tak, ale odczuwam wyraźną przewagę przy stosowaniu metody wyświetlania. Z mojego doświadczenia wynika, że ​​jest to najlepsza i najmniej podatna na błędy metoda radzenia sobie z układami. Dla tych z was, którzy chcieliby bardziej poznać tę metodę, stworzyłem siatkę "Just Say No To Floats": Sieć Inline-Block z SASS na CodePen.

Wyróżniony obraz / miniatura, zwinięta ściana przez Chrisa Cottermana