Tworzenie karty

Funkcje internetowe: :has() Zapytania o kontener (rozmiar) Podsiatka

Przegląd

Karta grupuje powiązane treści lub opcje. Jest to wzorzec wizualny, a nie stały model semantyczny lub interakcji, więc zachowaj znaczenie treści i użyj natywnej interakcji, która pasuje do jej celu.

Wytyczne

Wybierz semantykę treści i interakcji z nimi osobno:

  • używać <article> jako katalogu głównego karty, niezależnie od tego, czy prowadzi do miejsca docelowego;
  • użyj linku natywnego do nawigacji. Jeśli cała karta jest jednym miejscem docelowym, pojedynczy link może zawierać tylko element <article>, pod warunkiem że karta nie zawiera innych elementów interaktywnych (a, button, input, select, textarea).
  • zachowaj linki i przyciski do niezależnych działań jako oddzielne elementy sterujące;
  • użyj przycisku opcji lub pola wyboru z powiązanym elementem <label> albo elementu option w natywnym elemencie <select>, gdy karta jest opcją do wyboru.

Zachowaj logiczną kolejność multimediów, tytułu, treści pomocniczych i działań. Nie używaj kodu CSS order, aby ją zmienić (patrz Układy CSS i elastyczne projektowanie stron).

Implementacja

Używaj jak najmniej znaczników i pozwól selektorom CSS rozpoznawać poszczególne regiony, aby proste karty pozostały proste, a bardziej rozbudowane karty informacyjne były możliwe do utworzenia. Karta może mieć maksymalnie 4 regiony w tej kolejności źródłowej, a każdy z nich można pominąć. Regiony są bezpośrednimi elementami podrzędnymi karty, a nie są zgrupowane w elementach opakowujących, takich jak .card__body, co uniemożliwia umieszczanie i stylizowanie regionów według selektora. Region z jednym elementem to sam ten element, nieopakowany: pojedynczy akapit to <p>. Używaj kontenera tylko wtedy, gdy region zawiera wiele elementów.

  • Media: element <img>, <picture>, <video> lub <svg> jako pierwszy element podrzędny. Dodaj klasę .media tylko do dowolnych materiałów okolicznościowych, które nie są jednym z tych elementów, i nigdy nie umieszczaj zwykłego elementu <img> w elemencie .media.
  • Nagłówek: nagłówek sam w sobie. Używaj <hgroup> tylko wtedy, gdy nagłówek ma podtytuł lub slogan, a <header>, gdy region zawiera więcej niż tytuł, np. podpis lub plakietkę. Jeśli karta ma główne miejsce docelowe, link znajduje się w nagłówku.
  • Treść: pojedynczy element <p>, <ul> lub <dl>. Jeśli treść składa się z kilku elementów, np. kilku akapitów lub akapitu i listy, zgrupuj je w jednym elemencie <div>, aby region był pojedynczym elementem siatki.
  • Stopka: element <footer> zawierający niezależne działania w postaci natywnych linków i przycisków. Link „Więcej informacji” może mieć ten sam adres URL co link w nagłówku, ale nadaj mu opisową nazwę na potrzeby ułatwień dostępu, która zaczyna się od widocznego tekstu, używając tekstu ukrytego wizualnie (np. Read more<span> about poached eggs</span>), ponieważ identyczne linki „Więcej informacji” są niejednoznaczne na liście linków czytnika ekranu. Nie dodawaj innych linków w stopce, które powtarzają adres URL nagłówka.

Najprostsza karta to <article> zawierający nagłówek i akapit. Wybierz wzorzec linku i działania, który pasuje do zachowania karty. Zobacz Modele interakcji.

W przypadku obrazów lub filmów na karcie, które powinny wypełniać obszar o stałych proporcjach, ustaw aspect-ratio i object-fit: cover w elemencie <img> lub <video>, aby wypełniał on obszar bez zniekształceń (może wystąpić przycięcie). Używaj aspect-ratio kontenera .media tylko w przypadku innych materiałów okolicznościowych. W przeciwnym razie zachowaj wewnętrzny współczynnik proporcji multimediów. Dodaj do obrazów informacyjnych odpowiedni tekst alternatywny. W przypadku obrazów dekoracyjnych użyj atrybutu alt="".

Dostosowywanie się do dostępnego miejsca

Układ powinien być oparty na dostępnym miejscu na karcie, a nie na widocznym obszarze. Aby dostosować elementy podrzędne karty (multimedia, tekst, działania), ustaw kartę jako kontener rozmiaru (container-type: inline-size) i zapisz reguły @container dla jej elementów podrzędnych. Unikaj określania rozmiaru na podstawie siatki lub listy nadrzędnej: rzeczywista szerokość karty może zależeć od liczby kolumn, odstępów itp., co powoduje, że punkty przerwania oparte na elemencie nadrzędnym są nieczytelne.

W wąskim kontenerze ułóż regiony w kolejności źródłowej. W szerokim kontenerze umieść multimedia w kolumnie bocznej obok innych regionów, ale tylko w przypadku kart, które zawierają multimedia: zastosuj te reguły z :has() do elementu podrzędnego multimediów (np. .card:has(> img)), aby definicje kolumn i umieszczenie grid-column nigdy nie były stosowane do karty bez multimediów. Karta bez multimediów pozostaje jednokolumnowa przy każdej szerokości i nie może rezerwować pustej kolumny multimediów.

Wyrównywanie kart w siatce

Gdy karty w wierszu powinny mieć taką samą wysokość, użyj subgrid: każda karta powinna obejmować 4 współdzielone ścieżki wiersza (multimedia, nagłówek, treść, stopka). Umieść regiony według selektora elementów, traktując wszystko, co nie jest multimediami, nagłówkiem ani <footer>, jako treść. Karta, która pomija region, pozostawia pustą ścieżkę, dzięki czemu pozostałe regiony nadal są wyrównane z sąsiednimi kartami. Każda ścieżka zawiera 1 element siatki, dlatego obszar treści należy umieścić w elemencie <div> tylko wtedy, gdy zawiera on więcej niż 1 element, a karty współdzielą ścieżki. Karty, które nie są wyrównane z kartami na tym samym poziomie, nie potrzebują ani kontenera, ani podsiatki.

Modele interakcji

Karty treści

Użyj elementu <article> jako elementu głównego karty. Linki i przyciski powinny być osobnymi elementami sterującymi.

Karty z jednym miejscem docelowym

Jeśli cała karta jest jednym miejscem docelowym i nie ma niezależnych działań, użyj jednego linku natywnego. Link może zawierać <article>. Nie umieszczaj w linku innych linków, przycisków ani elementów sterujących formularza, a tekst „Więcej informacji” powinien być zwykłym elementem <p> lub <span>. Ponieważ dostępna nazwa linku to cały tekst karty, treść powinna być krótka. Jeśli karta zawiera dużo tekstu lub inne działania, użyj wzorca rozciągniętego linku, aby tylko nagłówek był linkiem:

<a href="/recipes/poached-eggs">
  <article class="card">
    <h3>Poached eggs</h3>
    <p>Two poached eggs served on toasted sourdough.</p>
  </article>
</a>

Klikalne karty z niezależnymi działaniami

Jeśli kliknięcie karty powoduje wykonanie działania, a nie przejście do innej strony, zamiast linku użyj elementu <button>.

Gdy karta treści zawiera link do głównego miejsca docelowego, a także inne elementy interaktywne i musi być klikalna jako całość:

  • Użyj pojedynczej akceptacji w samym linku głównym: umieść .card-link w dokładnie jednym linku na kartę (linku nagłówka). Stopka i inne linki nigdy nie powinny mieć tego atrybutu, ponieważ każdy z nich rozciągałby własną nakładkę, a ostatni z nich obejmowałby całą kartę.
  • Połącz tytuł i rozciągnij obszar kliknięcia wskaźnika na całą kartę za pomocą ::after
.card:has(a.card-link) {
    position: relative;
}

.card a.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
  • Podnieś elementy interaktywne za pomocą position: relative; z-index: 1, aby zachować ich funkcjonalność. Kieruj na typy elementów (np. a, button), zamiast wymagać akceptacji za pomocą klas.
  • NIE stosuj z-index do całych kontenerów, ponieważ spowoduje to przechwytywanie zdarzeń wskaźnika, które nie wywołują żadnego działania.
.card:has(a.card-link) {
    /* Keep other interactive elements above the overlay */
    a:not(.card-link), button, input, x-button {
        position: relative;
        z-index: 1;
    }
}
  • Stylizuj samą kartę po najechaniu kursorem lub zaznaczeniu, a nie rozciągnięty link:
.card {
    a.card-link {
        &:focus-visible {
            outline: none; /* Draw it on the card instead */
        }
    }
    
    &:has(a.card-link:focus-visible) {
        /* Focus ring */
    }

    &:has(a.card-link:hover) {
        /* Hover styles */
    }
}

Karty wyboru

W przypadku kart, które reprezentują wstępnie zdefiniowane opcje, użyj elementu <label class="card"> z polem wyboru lub opcją jako bezpośrednim elementem podrzędnym.

Zastosuj do wybranej karty styl :has(:checked). Nigdy nie zmieniaj właściwości wpływających na układ, takich jak border-width, padding lub font-weight, po zaznaczeniu, ponieważ karta i sąsiadujące z nią elementy będą się przesuwać. Wyróżnij element za pomocą outline, box-shadow lub przezroczystego obramowania, które zmienia tylko kolor:

.card {
  border: 2px solid transparent;

  &:has(> :checked) {
    border-color: var(--accent);
  }
}

Widoczne pole wyboru lub przycisk jest sam w sobie niekolorowym wskaźnikiem zaznaczenia, więc wystarczy sama zmiana koloru. Jeśli element sterujący jest ukryty wizualnie (zachowaj możliwość zaznaczenia i umieść go w drzewie ułatwień dostępu, nigdy nie używaj display: none), dodaj wskaźnik bez koloru, który nie wpływa na układ, np. ikonę zaznaczenia lub grubszy element outline.

Jeśli opcje należą do menu, którego opcje są ułożone jako karty, użyj natywnego elementu <select> z appearance: base-select i stylem ::picker(select) oraz <option> zamiast zastępować element select kartami <div>. Więcej informacji i opcje zastępcze znajdziesz w artykule Niestandardowe układy menu.