Zagłębianie się we właściwości wyświetlania: generowanie pudełek

Jest to drugi z krótkiej serii artykułów na temat właściwości display w CSS. Możesz przeczytać pierwszy artykuł z serii w „Dwóch wartościach wyświetlania”. Specyfikacja display jest bardzo przydatną specyfikacją do zrozumienia, ponieważ stanowi podstawę wszystkich różnych dostępnych metod układu.

Podczas gdy wiele wartości display ma swoją własną specyfikację, wiele terminów i pomysłów jest szczegółowo przedstawionych na display . Oznacza to, że zrozumienie tej specyfikacji pomaga w zrozumieniu specyfikacji, które zasadniczo opisują wartości display . W tym artykule przyjrzę się wartościom generowania pudełek display — none i contents .

Wszystko jest pudełkiem

W CSS wszystko generuje pudełka. Strona internetowa to zasadniczo zestaw pól blokowych i wbudowanych, coś, co bardzo dobrze zrozumiesz, jeśli otworzysz DevTools w swojej ulubionej przeglądarce i zaczniesz wybierać elementy na stronie. Możesz zobaczyć pola tworzące układ oraz sposób stosowania ich marginesów, dopełnienia i obramowania.

Kontrolowanie generowania pudełek

Wartości none i contents na display określają, czy pola powinny w ogóle się pojawiać. Jeśli masz elementy w swoim znaczniku i nie chcesz, aby generowały pole w CSS, musisz jakoś stłumić generowanie tego pola. Są dwie możliwe rzeczy, które możesz chcieć zrobić. Które są:

• Zapobiegaj powstawaniu pudełka i wszystkich jego dzieci.
• Zapobiegaj generowaniu pudełka, ale nadal wyświetlaj dzieci.

Możemy przyjrzeć się po kolei każdemu z tych scenariuszy.

Nie wyświetla się

none wartości display to sposób, w jaki zapobiegamy generowaniu pudełka i wszystkich elementów potomnych tego pudełka. Działa tak, jakby elementu w ogóle nie było. Dlatego przydaje się w sytuacjach, w których zamierzasz całkowicie ukryć tę treść, być może dlatego, że zostanie ona ujawniona później po aktywacji linku.

Jeśli mam przykład z akapitem, nieuporządkowaną listą i innym akapitem, możesz zobaczyć, że elementy są wyświetlane w normalnym układzie. ul ma tło i obramowanie, a także trochę dopełnienia.

Jeśli dodam display: none do ul , zniknie z wizualizacji, zabierając ze sobą dzieci ul plus tło i ramkę.

Jeśli używasz display: none , ukrywa treść przed wszystkimi użytkownikami serwisu. Obejmuje to użytkowników czytników ekranu. Dlatego powinieneś używać tego tylko wtedy, gdy Twoim zamiarem jest, aby pudełko i wszystko w nim było całkowicie ukryte dla wszystkich.

Są sytuacje, w których możesz chcieć dodać dodatkowe informacje dla użytkowników technologii wspomagających, takich jak czytniki ekranu, ale ukryć je przed innymi użytkownikami; w takich przypadkach musisz użyć innej techniki. Kilka doskonałych sugestii zawiera Scott O'Hara w swoim artykule „Inclusively Hidden”.

Korzystanie z display: none jest zatem dość prosty. Użyj go w sytuacji, gdy chcesz, aby pudełko i zawartość zniknęły z wyświetlacza, z drzewa skrzynek i drzewa dostępności (tak jakby nigdy ich tam nie było).

wyświetlacz: zawartość

W drugim scenariuszu musimy przyjrzeć się znacznie nowszej wartości wyświetlania. Wyświetlenie wartości display: contents usunie pudełko, do którego jest zastosowana, z drzewa pudełkowego w taki sam sposób, jak display: none , ale pozostawi dzieci na miejscu. Powoduje to pewne przydatne zachowanie pod względem rzeczy, które możemy następnie zrobić w naszych układach. Spójrzmy na prosty przykład, a następnie zbadajmy go dalej.

Używam tego samego przykładu co poprzednio, ale tym razem wykorzystałem display: contents na ul . Elementy listy są teraz widoczne, jednak nie mają tła ani obramowań i zachowują się tak, jakbyś dodał elementy li do strony bez żadnego zasłaniającego ul .

Powodem, dla którego usunięcie pudełka i zatrzymanie dzieci jest przydatne, jest sposób, w jaki zachowują się inne wartości display . Kiedy zmieniamy wartość display , robimy to na polu i jego bezpośrednich dzieciach, jak opisałem w poprzednim artykule. Jeśli dodam display: flex do reguł CSS dla elementu, ten element staje się pudełkiem na poziomie bloku, a bezpośrednie dzieci stają się elementami flex. Dzieci tych elementów flex wracają do normalnego przepływu (nie są częścią układu flex).

Możesz zobaczyć to zachowanie w następnym przykładzie. Tutaj mam element zawierający zestaw do wyświetlania flex, ma cztery bezpośrednie dzieci, trzy elementy div i ul . ul ma dwie pozycje na liście. Wszystkie bezpośrednie dzieci uczestniczą w układzie elastycznym i układają się jako elementy elastyczne. Pozycje listy nie są bezpośrednimi elementami podrzędnymi i dlatego są wyświetlane jako elementy listy w polu ul .

Jeśli weźmiemy ten przykład i dodamy display: contents do ul , pole zostanie usunięte z wizualnego wyświetlania i teraz dzieci uczestniczą w układzie flex. Widać, że nie stają się bezpośrednimi dziećmi. Nie są one wybierane przez bezpośredni uniwersalny selektor podrzędny ( .wrapper > * ) w taki sam sposób, jak elementy div i ul , i zachowują one nadaną im tłem. Jedyne, co się wydarzyło, to to, że pudełko zawierające ul zostało usunięte, wszystko inne przebiega normalnie.

Ma to potencjalnie bardzo przydatne implikacje, jeśli weźmiemy pod uwagę elementy w HTML, które są ważne dla dostępności i danych semantycznych, ale które generują dodatkowe pole, które może uniemożliwić nam układanie treści za pomocą układu elastycznego lub siatki.

To nie jest „reset” CSS

Być może zauważyłeś, że jednym z efektów ubocznych używania display: contents jest usunięcie marginesu i dopełnienia elementu. Dzieje się tak, ponieważ są one powiązane z pudełkiem, częścią modelu pudełka CSS. Może to prowadzić do myślenia, że display: contents to dobry sposób na szybkie pozbycie się dopełnienia i marginesu na elemencie.

To jest zastosowanie, które Adrian Roselli zauważył na wolności; był na tyle zaniepokojony, że napisał szczegółowy post wyjaśniający problemy z tym związane — „ display: contents nie jest resetem CSS”. Niektóre z poruszanych przez niego problemów wynikają z niefortunnego problemu z dostępnością w przeglądarkach, które obecnie obsługują wyświetlanie: treści, które omówimy poniżej. Jednak nawet po rozwiązaniu tych problemów usunięcie elementu z drzewa bukszpanowego po prostu po to, aby pozbyć się marginesu i dopełnienia, jest nieco ekstremalne.

Jeśli nic więcej, byłoby to problematyczne dla przyszłej konserwacji witryny, przyszły programista może się zastanawiać, dlaczego nie wydaje się, aby był w stanie zastosować coś do tego tajemniczego pudełka — pomijając fakt, że został usunięty! Jeśli potrzebujesz marginesu i dopełnienia na poziomie 0 , zrób sobie przysługę w przyszłości i ustaw je na 0 w uświęcony tradycją sposób. Zarezerwuj użycie display: contents dla tych szczególnych przypadków, w których naprawdę chcesz usunąć pudełko.

Warto również zwrócić uwagę na różnicę między display: contents a subgridem CSS Grid Layout. Gdzie display: contents całkowicie usuwa ramkę, tło i obramowanie z ekranu, czyniąc element siatki subsiatką, zachowując dowolny styl ramki na tym elemencie i po prostu przechodząc przez rozmiar ścieżki, aby zagnieżdżone elementy mogły używać tej samej siatki. Dowiedz się więcej w moim artykule „CSS Grid Level 2: Here Comes Subgrid”.

Problemy z ułatwieniami dostępu i wyświetlanie: zawartość

Poważnym problemem jest obecnie display: contents nie jest przydatna do tego, do czego byłaby najbardziej przydatna. Oczywiste przypadki display: contents to te przypadki, w których wymagane są dodatkowe pola, aby dodać znaczniki, które ułatwiają zrozumienie treści przez osoby korzystające z czytników ekranu lub innych urządzeń pomocniczych.

Element ul z naszej listy na pierwszym display: contents CodePen jest doskonałym przykładem. Możesz uzyskać ten sam efekt wizualny, spłaszczając znaczniki i nie używając w ogóle listy. Jeśli jednak treść była semantycznie listą, najlepiej zrozumianą i odczytaną przez czytnik ekranu jako lista, powinna być oznaczona jako jedna.

Jeśli następnie chcesz, aby elementy potomne były częścią układu elastycznego lub siatki, tak jakby nie było tam pola ul , powinieneś móc użyć display: contents , aby magicznie usunąć pole i sprawić, by tak było — ale zostaw semantyka w miejscu. Specyfikacja mówi, że tak powinno być,

„Właściwość display nie ma wpływu na semantykę elementu: są one zdefiniowane przez język dokumentu i nie mają na nie wpływu CSS. Oprócz wartości brak, która wpływa również na dźwięk/mowy oraz interaktywność elementu i jego potomków, właściwość display wpływa tylko na układ wizualny: jej celem jest umożliwienie projektantom zmiany zachowania układu elementu bez wpływu na leżący poniżej semantyka dokumentu”.

Jak już omówiliśmy, wartość none ukrywa element przed czytnikami ekranu, jednak inne wartości display służą wyłącznie do zmiany sposobu wyświetlania elementów wizualnie . Nie powinni dotykać semantyki dokumentu.

Z tego powodu wielu z nas zaskoczyło, gdy zdaliśmy sobie sprawę, że display: contents w rzeczywistości usuwał element z drzewa dostępności w dwóch przeglądarkach (Chrome i Firefox), które go zaimplementowały. Dlatego zmieniono semantykę dokumentu, tak aby czytnik ekranu nie wiedział, że lista jest listą po usunięciu ul za pomocą display: contents . To jest błąd przeglądarki — i to poważny.

W zeszłym roku Hidde de Vries opisał ten problem w swoim poście „Bardziej dostępne znaczniki z display:contents ” i podniósł problemy z różnymi przeglądarkami, aby zwiększyć świadomość i skłonić ich do pracy nad poprawką. Firefox częściowo naprawił problem, chociaż nadal występują problemy z niektórymi elementami, takimi jak przycisk. Problem jest aktywnie opracowywany w Chrome. Istnieje również problem z WebKit. Zachęcam Cię do oznaczenia tych błędów gwiazdką, jeśli masz przypadki użycia do wyświetlania: treści, na które miałyby wpływ problemy.

Dopóki te problemy nie zostaną naprawione, a wersje przeglądarek, w których występował ten problem, nie przestaną być używane, należy zachować szczególną ostrożność podczas korzystania z wyświetlania: treści na wszystkim, co zawiera informacje semantyczne i wymaga korzystania z technologii wspomagających. Jak stwierdza Adrian Roselli:

„Na razie używaj tylko display: content, jeśli zamierzasz testować z technologią wspomagającą i możesz potwierdzić, że wyniki działają dla użytkowników”.

Są miejsca, w których można bezpiecznie korzystać z display: contents bez tej obaw. Jednym z nich byłoby, gdyby trzeba było dodać dodatkowe znaczniki, aby utworzyć zastępcze dla siatki układów elastycznych w starszych przeglądarkach. Przeglądarki obsługujące display: contents obsługują również siatkę i flexbox, dlatego można display: contents z dala od zbędnych elementów div dodanych. W poniższym przykładzie utworzyłem siatkę opartą na pływakach, wraz z opakowaniami wierszy.

Następnie używam display: contents , aby usunąć opakowania wierszy, aby wszystkie elementy stały się elementami siatki, a tym samym mogły być częścią układu siatki. Może to dać dodatkowe narzędzie podczas tworzenia kopii zapasowych dla zaawansowanych układów, ponieważ jeśli potrzebujesz dodać dodatkowe znaczniki, możesz je usunąć za pomocą wyświetlania: zawartości podczas tworzenia układu siatki lub flex. Nie wierzę, że to użycie powinno powodować jakiekolwiek problemy — chociaż jeśli ktoś ma lepsze informacje o dostępności niż ja i może wskazać problem, zrób to w komentarzach.

Zawijanie

W tym artykule przyjrzyliśmy się wartościom generowania pudełek we właściwości display . Mam nadzieję, że rozumiesz teraz inne zachowanie display: none — które całkowicie usuwa pudełko i wszystkie elementy potomne, oraz display: contents usuwa tylko samo pudełko. Powinieneś także zrozumieć potencjalne problemy związane z używaniem tych metod, jeśli chodzi o dostępność.