Zagłębianie się w właściwość wyświetlania: dwie wartości wyświetlania

Układ flex lub grid zaczyna się od zadeklarowania display: flex lub display: grid . Te metody układu są wartościami właściwości display CSS. Zwykle nie mówimy zbyt wiele o tej właściwości, zamiast tego koncentrujemy się na wartościach flex lub grid , jednak jest kilka interesujących rzeczy do zrozumienia na temat display i tego, jak jest zdefiniowany, które znacznie ułatwią Ci życie podczas korzystania CSS dla układu.

W tym artykule, pierwszym z krótkiej serii, przyjrzę się sposobowi definiowania wartości display w specyfikacji Level 3. Jest to zmiana w sposobie definiowania display we wcześniejszych wersjach CSS. Choć na początku może się to wydawać niezwykłe dla tych z nas, którzy zajmują się CSS od wielu lat, myślę, że te zmiany naprawdę pomagają wyjaśnić, co się dzieje, gdy zmieniamy wartość display na elemencie.

Elementy blokowe i wbudowane

Jedną z pierwszych rzeczy, których uczymy osoby, które są nowe w CSS, są koncepcje elementów blokowych i wbudowanych. Wyjaśnimy, że niektóre elementy na stronie są display: block się i mają z tego powodu pewne funkcje. Rozciągają się w kierunku w linii, zajmując tyle miejsca, ile jest dla nich dostępne. Wkraczają na nową linię; możemy nadać im szerokość, wysokość, margines oraz dopełnienie, a te właściwości odsuną od nich inne elementy na stronie.

Wiemy również, że display: inline . Elementy śródliniowe są jak słowa w zdaniu; nie przełamują się do nowej linii, lecz rezerwują między nimi znak odstępu. Jeśli dodasz marginesy i dopełnienie, zostanie to wyświetlone, ale nie odsunie innych elementów.

Zachowanie elementów blokowych i wbudowanych ma fundamentalne znaczenie dla CSS oraz fakt, że prawidłowo oznaczony dokument HTML będzie domyślnie czytelny. Układ ten jest określany jako „Układ blokowy i wbudowany” lub „Normalny przepływ”, ponieważ w ten sposób układają się elementy, jeśli nie zrobimy z nimi nic innego.

Wewnętrzne i zewnętrzne wartości display

Rozumiemy elementy blokowe i wbudowane, ale co się stanie, jeśli display: grid ? Czy to coś zupełnie innego? Jeśli spojrzymy na komponent, dla którego określiliśmy display: grid , pod względem elementu nadrzędnego w układzie zachowuje się on jak element block level . Element rozciągnie się i zajmie tyle miejsca w wymiarze wbudowanym, ile jest dostępne, rozpocznie się w nowej linii. Zachowuje się jak element block pod względem tego, jak zachowuje się wraz z resztą układu. Nie powiedzieliśmy display: block , czy nie?

Okazuje się, że mamy. Na poziomie 3 specyfikacji Display, wartość display jest definiowana jako dwa słowa kluczowe. Te słowa kluczowe definiują zewnętrzną wartość wyświetlania, która będzie inline lub block a zatem definiują zachowanie elementu w układzie obok innych elementów. Definiują również wewnętrzną wartość elementu — lub sposób, w jaki zachowują się bezpośrednie dzieci tego elementu.

Oznacza to, że kiedy mówisz display: grid , tak naprawdę mówisz display: block grid . Pytasz o pojemnik z siatką na poziomie bloku. Element, który będzie miał wszystkie atrybuty bloku — możesz nadać mu wysokość i szerokość, margines i dopełnienie, a rozciągnie się, aby wypełnić kontener. Potomkom tego kontenera nadano jednak wewnętrzną wartość grid , więc stają się elementami siatki. To, jak zachowują się te elementy siatki, jest zdefiniowane w specyfikacji CSS Grid: specyfikacja display umożliwia nam poinformowanie przeglądarki, że jest to metoda układu, której chcemy użyć.

Myślę, że taki sposób myślenia o display jest niezwykle pomocny; wyjaśnia bezpośrednio, co robimy z różnymi metodami układu. Gdybyś miał określić display: inline flex , czego byś się spodziewał? Mamy nadzieję, że pudełko, które zachowuje się jak element wbudowany, z elementami potomnymi, które są elementami elastycznymi.

Jest kilka innych rzeczy, które można zgrabnie wyjaśnić, myśląc o display w ten nowy sposób, a niektórym z nich przyjrzę się w dalszej części tego artykułu.

Zawsze wracamy do normalnego przepływu

Myśląc o tych wewnętrznych i zewnętrznych właściwościach wyświetlania, pomocne może być zastanowienie się, co się stanie, jeśli w ogóle nie będziemy bawić się wartością wyświetlania. Jeśli napiszesz kod HTML i wyświetlisz go w przeglądarce, otrzymasz układ blokowy i wbudowany lub normalny przepływ. Elementy są wyświetlane jako elementy block lub inline .

Poniższy przykład zawiera pewne znaczniki, które przekształciłem w obiekt multimedialny, dzięki wyświetlaniu div display: flex (dwa bezpośrednie dzieci) stają się teraz elementami flex, więc obraz jest teraz w rzędzie z zawartością. Jeśli jednak zobaczysz w treści, nagłówek i akapit, które są ponownie wyświetlane w normalnym toku. Bezpośrednie elementy potomne obiektu multimedialnego stały się elementami elastycznymi; ich dzieci wracają do normalnego przepływu, chyba że zmienimy wartość wyświetlania w elemencie flex. Sam kontener flex jest pudełkiem blokowym, co widać po tym, że obramowanie rozciąga się do krawędzi jego rodzica.

Jeśli pracujesz z tym procesem, fakt, że elementy na twojej stronie będą układać się z tym ładnym, czytelnym układem normalnego przepływu, zamiast walczyć z nim i próbować umieścić wszystko, CSS jest znacznie prostszy. Jest również mniej prawdopodobne, że popadniesz w problemy z ułatwieniami dostępu, ponieważ pracujesz z kolejnością dokumentów, czyli dokładnie tak, jak robi to czytnik ekranu lub osoba przeglądająca dokument.

Wyjaśnienie flow-root i inline-block

Wartość inline-block jest prawdopodobnie znana wielu z nas, którzy od jakiegoś czasu zajmują się CSS. Ta wartość jest sposobem na uzyskanie niektórych zachowań blokowych elementu inline . Na przykład element inline-block może mieć szerokość i wysokość. Element z display: inline-block zachowuje się również w ciekawy sposób, tworząc treść blokującą formatowanie (BFC).

BFC robi kilka przydatnych rzeczy pod względem układu, na przykład zawiera elementy pływające. Więcej informacji na temat kontekstów formatowania bloków można znaleźć w moim poprzednim artykule „Zrozumienie układu CSS i kontekstu formatowania bloków”. Dlatego mówiąc display: inline-block daje ci pole inline, które również ustanawia BFC.

Jak odkryjesz (jeśli przeczytasz wyżej wspomniany artykuł o kontekście formatowania bloków), istnieje nowsza wartość wyświetlania, która również jawnie tworzy BFC. Jest to wartość flow-root . Ta wartość tworzy BFC na bloku, a nie na elemencie wbudowanym.

• display: inline-block daje BFC na inline boxie.
• display: flow-root daje BFC na polu blokowym.

Prawdopodobnie myślisz teraz, że to wszystko jest trochę zagmatwane: dlaczego mamy tutaj dwa zupełnie różne słowa kluczowe i co się stało ze składnią dwuwartościową, o której mówiliśmy wcześniej? To prowadzi do kolejnej rzeczy, którą muszę wyjaśnić na temat display , tj. do faktu, że CSS ma historię, z którą musimy się uporać pod względem właściwości display .

Starsze wartości wyświetlania

Specyfikacja CSS2 wyszczególnia następujące wartości właściwości display :

• inline
• block
• inline-block
• list-item
• none
• table
• inline-table

Zdefiniowano również różne wewnętrzne właściwości tabeli, takie jak table-cell którymi nie zajmujemy się w tym artykule.

Następnie dodaliśmy do tych wartości do wyświetlania, aby wspierać układ elastyczny i siatki:

• grid
• inline-grid
• flex
• inline-flex

Uwaga : Specyfikacja definiuje również ruby ​​i inline-ruby do obsługi tekstu w języku Ruby, o którym możesz przeczytać w specyfikacji Ruby.

Są to wszystkie pojedyncze wartości właściwości display , zdefiniowane przed aktualizacją specyfikacji w celu wyjaśnienia układu CSS w ten sposób. Coś bardzo ważnego w CSS to fakt, że nie łamiemy sieci; nie możemy po prostu zmienić rzeczy . Nie możemy nagle zdecydować, że wszyscy powinni używać tej nowej dwuwartościowej składni, a zatem każda kiedykolwiek zbudowana witryna internetowa, która używała składni jednowartościowej, ulegnie awarii, chyba że programista wróci i to naprawi!

Myśląc o tym problemie, możesz cieszyć się tą listą błędów w projektowaniu CSS, które w wielu przypadkach są mniej pomyłkami, niż rzeczy, które zostały zaprojektowane bez kryształowej kuli do patrzenia w przyszłość! Jednak faktem jest, że nie możemy zepsuć sieci, dlatego mamy taką sytuację, w której obecnie przeglądarki obsługują zestaw pojedynczych wartości do wyświetlania, a specyfikacja przechodzi do dwóch wartości do wyświetlania.

Sposób, w jaki możemy to obejść, polega na określeniu starszych i krótkich wartości do wyświetlania, które obejmują wszystkie te pojedyncze wartości. Oznacza to, że mapowanie można zdefiniować między pojedynczymi wartościami a nowymi dwoma wartościami słów kluczowych. Co daje nam następującą tabelę wartości:

Aby wyjaśnić, jak to działa, możemy pomyśleć o kontenerze siatki. W świecie dwuwartościowym stworzylibyśmy kontener siatki na poziomie bloku z:

 .container { display: block grid; }

Słowo kluczowe starszego typu oznacza jednak, że to samo działa w następujący sposób:

 .container { display: grid; }

Gdybyśmy zamiast tego chcieli kontenera z siatką inline, w świecie dwóch wartości użylibyśmy:

 .container { display: inline grid; }

A jeśli używasz starszych wartości:

 .container { display: inline-grid; }

Możemy teraz wrócić do miejsca, w którym ta rozmowa się zaczęła i spojrzeć na display: inline-block . Patrząc na tabelę, widać, że jest to zdefiniowane w świecie dwóch wartości jako display: inline flow-root . Teraz pasuje do display: flow-root , które w świecie z dwiema wartościami byłoby display: block flow-root . Trochę sprzątania i wyjaśnienia, jak te rzeczy są zdefiniowane. Refaktoryzacja CSS, jeśli chcesz.

Obsługa przeglądarki dla dwuwartościowej składni

Jak dotąd przeglądarki nie obsługują dwuwartościowej składni właściwości display . Błąd implementacji Firefoksa można znaleźć tutaj. Wdrożenie — gdy to nastąpi — zasadniczo wiązałoby się z aliasowaniem starszych wartości z wersjami dwuwartościowymi. Dlatego prawdopodobnie minie sporo czasu, zanim będziesz mógł faktycznie użyć tych dwuwartościowych wersji w swoim kodzie. Jednak tak naprawdę nie o to chodzi w tym artykule. Uważam natomiast, że patrzenie na wartości wyświetlania w świetle modelu dwuwartościowego pomaga wyjaśnić wiele z tego, co się dzieje.

Kiedy definiujesz układ pola w CSS, definiujesz, co dzieje się z tym polem pod względem tego , jak zachowuje się w stosunku do wszystkich innych pól w układzie . Definiujesz również, jak zachowują się dzieci tego pudełka. Możesz myśleć w ten sposób na długo, zanim będziesz mógł jawnie zadeklarować wartości jako dwie oddzielne rzeczy, ponieważ starsze słowa kluczowe są mapowane na te wartości i pomoże Ci zrozumieć, co się stanie, gdy zmienisz wartość display .