Kart oluşturma

Web özellikleri: :has() Kapsayıcı sorguları (boyut) Alt ızgara

Genel Bakış

Kartlar, birbiriyle alakalı bir içerik parçasını veya bir seçeneği gruplandırır. Bu, sabit bir anlamsal veya etkileşim modeli değil, görsel bir kalıptır. Bu nedenle, içeriğin anlamını koruyun ve amacına uygun yerel etkileşimi kullanın.

Yönergeler

İçerik ve etkileşimi için semantiği ayrı ayrı seçin:

  • Kart kökü olarak <article> kullanın (bir hedefe bağlantı verip vermediğine bakılmaksızın).
  • Gezinme için yerel bağlantı kullanın. Kartın tamamı tek bir hedef olduğunda, yalnızca kartta başka etkileşimli öğe (a, button, input, select, textarea) yoksa tek bir bağlantı <article> öğesini sarmalayabilir.
  • Bağımsız işlemler için bağlantıları ve düğmeleri ayrı yerel kontroller olarak tutun.
  • Kart bir seçenek olduğunda, ilişkili <label> içeren bir radyo düğmesi veya onay kutusu ya da yerel <select> içinde bir option kullanın.

Medya, başlık, destekleyici içerik ve işlemleri anlamlı bir kaynak sırasına göre düzenleyin. Bu sırayla çelişecek şekilde CSS order kullanmayın (CSS Düzenleri ve Duyarlı Tasarım bölümüne bakın).

Uygulama

İşaretlemeyi minimum düzeyde tutun ve CSS seçicilerin her bölgeyi tanımasına izin verin. Böylece basit kartlar basit kalır ve daha zengin kartlar mümkün olur. Bir kartta, bu kaynak sırasına göre en fazla dört bölge bulunur ve bunlardan herhangi biri atlanabilir. Bölgeler, kartın doğrudan alt öğeleridir ve .card__body gibi sarmalayıcı öğelerde gruplandırılmaz. Bu sayede, bölgelerin seçiciye göre yerleştirilmesi ve stillendirilmesi engellenir. Tek bir öğe içeren bölge, sarmalanmamış öğenin kendisidir: Tek bir paragraf <p> öğesidir. Sarmalayıcıyı yalnızca bir bölgede birden fazla öğe varsa kullanın.

  • Medya: İlk alt öğe olarak <img>, <picture>, <video> veya <svg>. .media sınıfını yalnızca bu öğelerden biri olmayan rastgele hero içeriklere ekleyin ve düz bir <img> öğesini hiçbir zaman .media öğesine sarmalamayın.
  • Başlık: Kendi başına bir başlık. <hgroup> öğesini yalnızca başlıkta bir alt başlık veya kısa açıklama olduğunda, <header> öğesini ise bölgede başlık dışında bir bilgi (ör. yazar adı veya rozet) olduğunda kullanın. Kartın birincil hedefi olduğunda bağlantı başlığın içine yerleştirilir.
  • İçerik: Tek bir <p>, <ul> veya <dl> tek başına yer alır. İçerik birden fazla öğeden (ör. birden fazla paragraf veya bir paragraf ve bir liste) oluşuyorsa bölgenin tek bir tablo öğesi olması için bunları tek bir <div> içinde gruplandırın.
  • Altbilgi: Bağımsız işlemleri yerel bağlantılar ve düğmeler olarak barındıran bir <footer>. "Daha fazla bilgi" bağlantısı, başlık bağlantısının URL'sini paylaşabilir ancak görsel olarak gizlenmiş metin kullanarak (ör. Read more<span> about poached eggs</span>) görünür metinle başlayan açıklayıcı bir erişilebilir özellikli ad verin. Çünkü aynı "daha fazla bilgi" bağlantıları, ekran okuyucunun bağlantı listesinde belirsizdir. Başlığın URL'sini tekrarlayan başka altbilgi bağlantıları eklemeyin.

En basit kart, başlık ve paragraf içeren bir <article> öğesidir. Kartın davranışıyla eşleşen bağlantı ve işlem kalıbını seçin. Etkileşim modelleri bölümüne bakın.

Sabit oranlı bir alanı doldurması gereken kart resimleri veya videoları için <img> veya <video> üzerinde aspect-ratio ve object-fit: cover değerlerini ayarlayın. Böylece alanı bozulma olmadan doldurur (kırpma gerçekleşebilir). .media kapsayıcısının aspect-ratio öğesini yalnızca diğer hero içerikler için kullanın. Aksi takdirde, medyanın iç oranını koruyun. Bilgilendirici resimlere uygun bir alternatif metin ekleyin; dekoratif resimler için alt="" kullanın.

Kullanılabilir alana uyum sağlama

Düzeni, görüntü alanına değil, kartın kullanılabilir alanına göre ayarlayın. Kartın alt öğelerini (medya, metin, işlemler) uyarlamak için kartı boyut kapsayıcısı (container-type: inline-size) yapın ve alt öğeleri için @container kuralları yazın. Izgara veya liste üst öğesinden boyutlandırma yapmaktan kaçının: Kartın gerçek genişliği sütun sayısına, boşluklara vb. bağlı olabilir. Bu da üst öğeye dayalı kesme noktalarının gürültülü olmasına neden olur.

Dar bir kapsayıcıda, bölgeleri kaynak sırasına göre yığınlayın. Geniş bir kapsayıcıda, medyayı diğer bölgelerin yanındaki bir yan sütuna yerleştirin ancak bunu yalnızca medyası olan kartlar için yapın: Bu kuralları, medya alt öğesinde (ör. .card:has(> img)) :has() ile kapsamlandırın. Böylece sütun tanımları ve grid-column yerleşimleri, medyası olmayan bir karta hiçbir zaman uygulanmaz. Medya içermeyen kartlar her genişlikte tek sütun olarak kalır ve boş bir medya sütunu ayırmamalıdır.

Kartları ızgara şeklinde hizalama

Bir satırdaki kartların bölgelerinin yüksekliklerini paylaşması gerektiğinde subgrid kullanın: Her kartın dört paylaşılan satır kanalını (medya, başlık, içerik, altbilgi) kapsamasını sağlayın ve bölgeleri öğe seçiciye göre yerleştirin. Medya, başlık veya <footer> olmayan her şeyi içerik olarak değerlendirin. Bir bölgeyi atlayan kart, o bölgenin yolunu boş bırakır. Böylece kalan bölgeler komşu kartlarla hizalanmaya devam eder. Her kanalda bir ızgara öğesi bulunur. Bu nedenle, içerik bölgesini yalnızca birden fazla öğe içerdiğinde ve kartlar kanalları paylaştığında bir <div> ile sarmalayın. Kardeş öğelerle hizalanmayan kartlar için sarmalayıcı veya alt ızgara gerekmez.

Etkileşim modelleri

İçerik kartları

Kart kökü olarak <article> kullanın. Bağlantıları ve düğmeleri ayrı yerel kontroller olarak tutun.

Tek varış noktası kartları

Kartın tamamı tek bir hedefse ve bağımsız işlemleri yoksa tek bir yerel bağlantı kullanın. Bağlantı, <article> öğesini sarmalayabilir. Bağlantının içine başka bağlantılar, düğmeler veya form kontrolleri yerleştirmeyin ve "daha fazla bilgi" metnini düz <p> veya <span> olarak bırakın. Bağlantının erişilebilir özellikli adı kartın tüm metni olduğundan içeriği kısa tutun. Kartta çok fazla metin veya başka işlemler varsa yalnızca başlığın bağlantı olması için aşağıdaki genişletilmiş bağlantı kalıbını kullanın:

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

Bağımsız işlemlere sahip tıklanabilir kartlar

Kartı tıklamak gezinme yerine bir işlemi tetikliyorsa bağlantı yerine <button> kullanın.

İçerik kartı birincil hedefe bağlantı veriyorsa, başka etkileşimli öğeler de içeriyorsa ve bir bütün olarak tıklanabilir olması gerekiyorsa:

  • Birincil bağlantının kendisinde tek bir etkinleştirme kullanın: Kart başına tam olarak bir bağlantıya (başlık bağlantısı) .card-link ekleyin. Altbilgi ve diğer bağlantılar hiçbir zaman odaklanmaz. Aksi takdirde her biri kendi yer paylaşımını genişletir ve sonuncusu tüm kartı kaplar.
  • Başlığını bağlayın ve işaretçi isabet alanını ::after ile kartın tamamına yayın
.card:has(a.card-link) {
    position: relative;
}

.card a.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
  • Etkileşimli öğeleri position: relative; z-index: 1 ile yükselterek çalışır durumda kalmalarını sağlayın. Sınıflar aracılığıyla etkinleştirme gerektirmek yerine öğelerin türlerini (ör. a, button) hedefleyin.
  • z-index özelliğini kapsayıcıların tamamına uygulamayın. Bu, kapsayıcıların herhangi bir işlem oluşturmayan işaretçi etkinliklerini yakalamasına neden olur.
.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;
    }
}
  • Genişletilmiş bağlantı yerine, fareyle üzerine gelindiğinde/odaklanıldığında kartın kendisini stillendirin:
.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 */
    }
}

Seçim kartları

Önceden tanımlanmış seçenekleri temsil eden kartlar için doğrudan alt öğe olarak onay kutusu veya radyo düğmesi içeren <label class="card"> kullanın.

Seçili kartı :has(:checked) ile biçimlendirin. Seçim yapıldığında kart ve komşuları atladığı için düzeni etkileyen border-width, padding veya font-weight gibi özellikleri hiçbir zaman değiştirmeyin. Vurguyu outline, box-shadow veya yalnızca rengi değişen şeffaf bir kenarlıkla yapın:

.card {
  border: 2px solid transparent;

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

Görünür onay kutusu veya radyo düğmesi, seçimin renk dışı bir göstergesi olduğundan yalnızca renk değişikliği yeterlidir. Denetim görsel olarak gizliyse (odaklanabilir ve erişilebilirlik ağacında tutun, asla display: none kullanmayın) düzeni etkilemeyen, renkli olmayan bir gösterge (ör. onay simgesi veya daha kalın bir outline) ekleyin.

Seçenekler, kart olarak düzenlenmiş bir açılır liste seçicide yer alıyorsa seçimi <div> kartlarla değiştirmek yerine appearance: base-select ile yerel bir <select> kullanın ve ::picker(select) ile <option> öğelerini stillendirin. Daha fazla bilgi ve yedekler için Özel Seçim Seçici Düzenleri bölümüne bakın.