Stylizowanie pustych komórek za pomocą wygenerowanej treści i układu siatki CSS

Częstym problemem dotyczącym układu siatki jest sytuacja, gdy nowicjusz w metodzie układu zastanawia się, jak stylizować komórkę siatki, która nie zawiera żadnej treści. W obecnej specyfikacji poziomu 1 nie jest to możliwe, ponieważ nie ma możliwości wybrania pustej komórki siatki lub obszaru siatki i zastosowania stylizacji. Oznacza to, że aby zastosować stylizację, musisz wstawić element.

W tym artykule przyjrzę się, jak użyć CSS Generated Content, aby uzyskać stylizację pustych komórek bez dodawania zbędnych pustych elementów i pokażę kilka przypadków użycia, w których ta technika ma sens.

Dlaczego nie możemy już stylizować pustych obszarów?

Pierwszy paragraf specyfikacji sieci mówi:

„Ten moduł CSS definiuje dwuwymiarowy system układu oparty na siatce, zoptymalizowany pod kątem projektowania interfejsu użytkownika. W modelu układu siatki elementy podrzędne kontenera siatki można umieścić w dowolnych gniazdach we wstępnie zdefiniowanej siatce układu elastycznego lub o stałym rozmiarze”.

Kluczową frazą jest tutaj „dzieci kontenera siatkowego”. Specyfikacja definiuje tworzenie siatki na elemencie nadrzędnym, w której można umieszczać elementy podrzędne. Nie definiuje żadnego stylu tej siatki, nie posuwając się nawet do zaimplementowania czegoś takiego jak właściwość column-rule , którą mamy w układzie wielokolumnowym. Stylizujemy elementy podrzędne, a nie samą siatkę, co sprawia, że ​​potrzebujemy jakiegoś elementu, do którego możemy zastosować ten styl.

Używanie zbędnych elementów jako haka do stylizacji

Jednym ze sposobów wstawienia czegoś do stylu jest wstawienie zbędnych elementów do dokumentu, na przykład span lub div. Deweloperzy nie lubią tego pomysłu, mimo że od lat dodawali dodatkowe nadmiarowe „zawijarki wierszy”, aby uzyskać układy siatki za pomocą pływaków. Być może ten oczywiście pusty element jest bardziej niesmaczny niż nieco ukryta nadmiarowość elementu opakowania!

Całkowicie puste elementy stają się elementami siatki i mogą mieć dodane tła i obramowania, podobnie jak element zawierający zawartość, jak pokazano w tym przykładzie.

Eric Meyer w swoim artykule A List Apart Faux Grid Tracks opowiada się za używaniem elementu b jako zbędnych elementów wyboru, ponieważ nie nadaje on żadnego znaczenia semantycznego, jest krótki i dość oczywisty w znacznikach jako haczyku.

Wstawienie kilku dodatkowych elementów div lub b raczej nie będzie największym przestępstwem przeciwko dobremu znacznikowi, jaki kiedykolwiek popełniłeś, więc nie będę tracił snu nad wyborem tego podejścia, jeśli będzie to konieczne. Tworzenie stron internetowych bardzo często wiąże się z wybraniem najmniej nieoptymalnego podejścia do wykonania zadania, dopóki nie zostanie opracowane lepsze rozwiązanie. Wolę jednak trzymać stylizację w jednym miejscu, jeśli to możliwe, bezpiecznie w arkuszu stylów. Jeśli nic innego, to ułatwia ponowne wykorzystanie stylów, nie martwiąc się o dodatkowe wymagane znaczniki. Z tego powodu staram się szukać treści generowanych, coś, co bardzo dobrze znam z pracy nad formatowaniem książek za pomocą CSS, gdzie spędzasz większość czasu pracując z tą funkcją.

Używanie wygenerowanej treści jako haka do stylizacji

CSS Generated Content wykorzystuje pseudoklasy CSS ::before i ::after wraz z właściwością content do wstawiania pewnego rodzaju treści do dokumentu. Pomysł wstawiania treści może prowadzić do myślenia, że ​​służy to wstawianiu tekstu, i chociaż jest to możliwe, dla naszych celów jesteśmy zainteresowani wstawieniem pustego elementu jako bezpośredniego dziecka naszego kontenera siatki. Po wstawieniu elementu możemy go ostylować.

W poniższym przykładzie mam element zawierający, który stanie się moim kontenerem siatki, z innym elementem zagnieżdżonym w środku. To jedno bezpośrednie dziecko stanie się elementem siatki. Zdefiniowałem trzykolumnową, trzyrzędową siatkę w kontenerze, a następnie umieściłem pojedynczy element za pomocą linii siatki, więc znajduje się on w środkowej komórce siatki.

 <div class="grid"> <div class="item"></div> </div>

 .grid { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-gap: 10px; } .grid > * { border: 2px solid rgb(137,153,175); } .item { grid-column: 2; grid-row: 2; }

Jeśli przyjrzymy się temu przykładowi, używając Inspektora siatki Firefoksa do nałożenia linii siatki, możemy zobaczyć, jak istnieją inne puste komórki siatki, jednak aby dodać do nich tło lub obramowanie, musielibyśmy dodać dodatkowe dziecko elementy. Właśnie to umożliwia Generated Content.

W moim CSS dodaję pusty ciąg znaków ::before i ::after mojego Grid Container. Te natychmiast staną się elementami siatki i rozciągną się, aby wypełnić swój pojemnik. Następnie dodaję stylizację, której potrzebuję do pudeł, w tym przypadku dodając kolor tła, i umieszczam je tak, jak każdy zwykły element siatki.

 .grid::before { content: ""; background-color: rgb(214,232,182); grid-column: 3; grid-row: 1; } .grid::after { content: ""; background-color: rgb(214,232,182); grid-column: 1; grid-row: 3; } 

W dokumencie nadal mamy tylko jeden element potomny, nadmiarowe elementy stylizacji są zawarte w CSS, co wydaje się całkiem rozsądne, ponieważ są one tam tylko do celów stylizacji.

Ograniczenia podejścia do generowania treści

Oczywisty problem z tym podejściem stanie się oczywisty, jeśli zdecydujesz, że chcesz również stylizować górne prawe i dolne lewe komórki siatki. Możesz zastosować tylko jeden element wygenerowanej treści na górze i jeden na dole kontenera, wiele pseudoelementów ::before i ::after jest niedozwolonych. Ta metoda nie zadziała, jeśli chcesz samodzielnie stworzyć szachownicę CSS Grid! Jeśli okaże się, że musisz wykonać dużo stylizacji pustych komórek, to w najbliższej przyszłości, podejście „Wypełniacz B” wyjaśnione powyżej prawdopodobnie będzie najlepszym rozwiązaniem.

Metoda generowanej treści może również zmylić przyszłego programistę pracującego nad Twoim projektem. Ponieważ celujemy w kontener, jeśli ponownie użyjesz tej klasy w innym miejscu, przyniesie ona wygenerowaną zawartość, jest to przydatne, jeśli tego chcesz. W następnym przykładzie dodaliśmy ozdobne linie po obu stronach nagłówka, rozsądne byłoby, aby każde wystąpienie h1 miało te linie. Byłoby jednak bardzo mylące, gdybyś nie wiedział, że to się stanie! Pomocna będzie tutaj linia komentarza nad regułami kontenera. Obecnie pracuję nad biblioteką wzorców, która naprawdę pomaga tym komponentom schludnie w jednym miejscu, czyniąc bardziej oczywistym, co się dzieje, gdy klasa jest stosowana do elementu.

Fantazyjne nagłówki

Jedną z moich ulubionych sztuczek z generowanymi treściami jest stylizowanie nagłówków. W przeszłości musiałem odsunąć style nagłówków, które wymagałyby dodatkowych obramowań i bezwzględnych ścieżek pozycjonowania. Gdy treść pochodzi z CMS, często nie można dodać tych zbędnych opakowań.

Dzięki siatce i wygenerowanej zawartości możemy dodać linię po obu stronach nagłówka bez dodawania żadnych dodatkowych znaczników. Linia będzie się powiększać i kurczyć w zależności od dostępnego miejsca i elegancko powracać do zwykłego wyśrodkowanego nagłówka, gdy Grid nie jest dostępny w przeglądarkach.

Nasz znacznik to prosty h1 .

 <h1>My heading</h1>

W zasadach dla h1 tworzę siatkę trzech kolumn. Wartość grid-template-columns daje ścieżkę 1fr , następnie auto i końcową ścieżkę 1fr . Dwie ścieżki 1fr będą dzielić dostępną przestrzeń pozostałą po tym, jak nagłówek zajmie tyle miejsca, ile wymaga umieszczenia wewnątrz ścieżki o auto rozmiarze.

Dodałem właściwość text-align z wartością center , aby mój nagłówek był wprowadzany w przeglądarkach bez siatki.

 h1 { text-align: center; display: grid; grid-template-columns: 1fr auto 1fr; grid-gap: 20px; }

Teraz dodajemy naszą wygenerowaną treść, aby dodać linię przed i po tekście nagłówka. Umieszczam te reguły w zapytaniu o funkcję, dzięki czemu nie otrzymujemy żadnych dziwnie generowanych treści w przeglądarkach bez układu siatki.

Sama linia jest obramowaniem generowanego elementu.

 @supports (display: grid) { h1:before, h1:after { content: ""; align-self: center; border-top: 1px solid #999; } }

To wszystko, co musisz zrobić! Możesz użyć tej samej techniki, aby dodać dowolną stylizację, a nawet ikonę po obu stronach elementu, nad lub pod elementem. Umieszczając swój element na osobnej ścieżce, wiesz, że nie ma szans, aby element mógł nałożyć się na tekst nagłówka, co zwykle stanowiło problem, gdy próbujesz zrobić tego rodzaju rzeczy z pozycjonowaniem bezwzględnym. Masz również korzyść z precyzyjnych sposobów, w jakie elementy można wyrównać względem siebie w siatce.

Jest to dobry przykład ulepszenia możliwego przy użyciu układu siatki, z którego można skorzystać, nawet jeśli nie jesteś jeszcze gotowy, aby przejść do poważnego przeprojektowania za pomocą siatki. Bardzo ładnie wraca do prostego nagłówka, ludzie z obsługującymi przeglądarki dostają dodatkowy kontakt, a każdy dostaje treść. Podobne podejście zastosował Eric Meyer, wykorzystując wygenerowaną zawartość do dodawania łatwych do stylizacji i pozycjonowania cytatów do elementu blockquote.

Dzięki tym małym funkcjom często nie zaczynam myśleć, że będę używać układu siatki. Kiedy zaczynam zastanawiać się, jak wdrożyć mój projekt, zdaję sobie sprawę, że jest to metoda układu do wyboru. Z tego powodu zachęcam ludzi, aby nie myśleli o Grid jako o układzie strony nad komponentami, jeśli to zrobisz, możesz przegapić wiele okazji, w których może to pomóc.

Dodawanie tła i obramowań do obszarów projektu

Możemy również użyć wygenerowanej treści do układania przedmiotów; w rzeczywistości więcej niż jeden element może zajmować konkretną komórkę siatki. Może to obejmować elementy wstawione z wygenerowaną treścią.

W następnym przykładzie mam projekt z dwiema sekcjami treści i elementem o pełnej szerokości. Za treścią znajduje się tło, które biegnie również pod elementem o pełnej szerokości.

Znacznik zawiera kontener z sekcjami i elementem o pełnej szerokości jako bezpośrednie elementy podrzędne, a do umieszczania elementów w siatce używam umieszczania opartego na wierszach.

 <article class="grid"> <section class="section1"> <p>…</p> </section> <div class="full-width"> <img src=“placeholder.jpg” alt=“Placeholder”> </div> <section class="section2"> <p>…</p> </section> </article>

 .grid { display: grid; grid-template-columns: 1fr 20px 4fr 20px 1fr; grid-template-rows: auto 300px auto; grid-row-gap: 1em; } .section1 { grid-column: 3; grid-row: 1; } .section2 { grid-column: 3; grid-row: 3; } .full-width { grid-column: 1 / -1; grid-row: 2; background-color: rgba(214,232,182,.5); padding: 20px 0; }

Daje mi to układ z obrazem o pełnej szerokości i dwoma umieszczonymi sekcjami treści; jeśli jednak dodam tło do sekcji, zatrzyma się ono nad row-gap między section a obrazem o pełnej szerokości.

 .section { background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); } 

Gdybyśmy usunęli grid-row-gap i użyli dopełnienia do utworzenia przestrzeni, nadal nie włączyłoby to efektu tła biegnącego pod panelem o pełnej szerokości.

To tutaj możemy wykorzystać wygenerowane treści. Dodaję wygenerowaną treść ::before kontenerem z siatką i nadaję mu kolor tła. Jeśli nie zrobię nic więcej, zawartość zostanie umieszczona w pierwszej komórce siatki.

 .grid::before { content: ""; background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); } 

Następnie mogę ustawić zawartość za pomocą pozycjonowania opartego na linii, aby rozciągnąć na obszarze, na którym powinien być widoczny kolor tła.

 .grid::before { content: ""; background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); grid-column: 2 / 5; grid-row: 1 / 4; }

Możesz zobaczyć pełny przykład w tym CodePen.

Kontrolowanie stosu za pomocą z-index Z

W powyższym przykładzie wygenerowana treść jest wstawiana za pomocą ::before . Oznacza to, że inne elementy pojawiają się po nim, znajdują się na dole stosu i dlatego będą wyświetlane za resztą zawartości, czyli tam, gdzie chcę. Możesz także użyć z-index do kontrolowania stosu. Spróbuj zmienić selektor ::before na ::after . Wygenerowane tło treści znajduje się teraz nad wszystkim, co widać po sposobie, w jaki obramowanie przebiega nad obrazem. Dzieje się tak dlatego, że jest teraz ostatnią rzeczą w pojemniku siatkowym, jest pomalowany jako ostatni i dlatego pojawia się „na górze”.

Aby to zmienić, musisz nadać temu elementowi niższą właściwość z-index niż wszystko inne. Jeśli nic innego nie ma wartości z-index Z, najprostszą rzeczą do zrobienia jest nadanie wygenerowanej treści z-index Z -1 . Spowoduje to, że będzie to pierwsza rzecz w stosie, jako element o najniższym z-index .

 .grid::after { z-index: -1; content: ""; background-color: rgba(214,232,182,.3); border: 5px solid rgb(214,232,182); grid-column: 2 / 5; grid-row: 1 / 4; }

Dodanie tła w ten sposób nie musi ograniczać się do całkowitego usunięcia tła za treścią. Możliwość wstawienia bloków koloru za część projektu może stworzyć ciekawe efekty.

Czy to jest coś, co specyfikacja może rozwiązać w przyszłości?

Dodawanie tła i obramowań wydaje się być brakującą cechą specyfikacji CSS Grid i taką, o której Grupa Robocza dyskutowała wraz z wieloma członkami społeczności (wątek dyskusji jest na GitHub).

Jeśli masz przypadki użycia, których nie można łatwo rozwiązać za pomocą wygenerowanej treści, dodaj swoje przemyślenia do tego wątku. Twoje komentarze i przypadki użycia pomagają wykazać zainteresowanie programistów daną funkcją, a także zapewniają, że każda propozycja obejmuje rzeczy, które musisz zrobić.

Więcej przykładów, proszę!

Jeśli ten artykuł zachęca do eksperymentowania z wygenerowanymi treściami lub, jeśli masz już przykład, dodaj go do komentarzy. Wszyscy są nowicjuszami w korzystaniu z Grid w produkcji, więc jest ich mnóstwo: „ Nigdy o tym nie pomyślałem! ” chwile, które można mieć, ponieważ łączymy Grid z innymi metodami układu.