Stillendirme için daha fazla seçenek <details>

Bramus

Yayınlanma tarihi: 6 Kasım 2024

Chrome 131'den itibaren <details> ve <summary> öğelerinin yapısını biçimlendirmek için daha fazla seçeneğiniz var. Artık açıklama veya akordeon widget'ları oluştururken bu öğeleri kullanabilirsiniz.

Özellikle Chrome 131'de yapılan değişiklikler, bu öğelerde display mülkünün kullanılmasını sağlar ve genişleyen ve daralan kısmı biçimlendirmek için bir ::details-content sözde öğesi ekler.

<details> öğesinde display ayarlama

Geçmişte <details> öğesinin görüntüleme türünü değiştirmek mümkün değildi. Bu kısıtlama artık kaldırıldı. Örneğin, <details> öğesinde ızgara veya esnek düzenler kullanabilirsiniz.

Aşağıdaki örnekte özel akordeon, yan yana yerleştirilmiş birkaç <details> öğesinden oluşmaktadır. <details> öğelerinden biri genişletildiğinde, içeriği <summary> öğesinin yanına yerleştirilir.

Bu, <details> öğesinde aşağıdaki CSS'yi kullanarak bir esnek düzen kullanılarak elde edilir:

details {
  display: flex;
  flex-direction: row;
}

grid gibi diğer görünen değerlere de izin verilir.

display: inline kullanımıyla ilgili not

Beklenenden farklı bir sonuç verebilecek bir display değeri inline'dur. Bu, çalışmadığı için değil, HTML ayrıştırıcı sınırlamaları nedeniyledir.

Bir paragrafın içine <details> öğesi yerleştirilirken, HTML Standardı'nın 13.2.6.4.7 bölümünde belirtildiği gibi, HTML ayrıştırıcıyı önce açık paragrafı kapatmaya zorlar:

Etiket adı şulardan biri olan bir başlangıç etiketi: "address", "article", "aside", "blockquote", "center", "details", "dialog", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer", "header", "hgroup", "main", "menu", "nav", "ol", "p", "search", "section", "summary", "ul"

Açık öğe yığınında düğme kapsamında bir p öğesi varsa p öğesini kapatın. Jeton için bir HTML öğesi ekleyin.

Sonuç olarak, display: inline'ü ayarlamış olsanız bile <details>, blok yönünde akar.

Örneğin, aşağıdaki işaretleme

<p>Hello <details>…</details> world</p>

Ayrıştırma işleminden sonra şu şekilde görünür:

<p>Hello </p><details>…</details> world<p></p>

Bu demoda, Chrome Geliştirici Araçları'nı kullanarak ayrıştırılmış işaretlemeyi inceleyerek bunu kendiniz görebilirsiniz.

Bunun yalnızca <details> öğesinin <p> içine yerleştirilmesi için geçerli olduğunu unutmayın. <div> içinde <details> üzerinde display: inline kullanmak sorunsuzdur.

::details-content sözde

Tarayıcılarda <details> öğesi gölge DOM kullanılarak uygulanır. Özet için bir <slot> (varsayılan bir özet alt öğesi ile) ve kalan tüm içerik için bir <slot> (<summary> öğesi hariç <details> öğesinin tüm alt öğeleri) içerir.

<details>
  ↳ #shadow-root (user-agent)
      <slot id="details-summary">
        <summary>Details</summary>
        <!-- The summary goes here -->
      </slot>
      <slot id="details-content">
        <!-- All content goes here -->
      </slot>
</details>

<details>'te daha fazla görüntüleme türü kullanmanın yanı sıra içerik yuvası artık ::details-content sözde öğesi kullanılarak da hedeflenebilir. <details> öğesinin içeriğini sarmalayan kapsayıcıyı biçimlendirmek için bu sözde sınıfı kullanabilirsiniz.

details::details-content {
  border: 5px dashed hotpink;
}

Ayarlanan stili yalnızca <details> öğesi açık durumdayken uygulamak için [open] seçiciyi başına ekleyin.

[open]::details-content {
  border: 5px dashed hotpink;
}

::details-content sözde öğesine yalnızca <details> öğesi [open] durumundayken stil uygulamanız önerilir.

::details-content display türü, UA stil sayfasında block olarak ayarlanmıştır. Daha önce display: contents olarak ayarlanıyordu. Bu değişiklik, height: 100% kullanan açıklanan içerikler gibi bazı durumlarda aleyhinize olabilir. Bu durum sizin için soruna yol açıyorsa display türünü contents olarak ayarlayarak bu sorunu giderebilirsiniz. details[open]::details-content { display: contents; }

::details-content taklidi öğesine animasyon ekleme

<details> öğesi genişlerken içeriği için animasyon oluşturabilirsiniz. Aşağıdaki örnekte, genişlik 0px değerinden 300px değerine animasyonlu olarak değişir.

::details-content {
  transition: width 0.5s ease, content-visibility 0.5s ease allow-discrete;
  width: 0;
}

[open]::details-content {
  width: 300px;
}

width'ün yanı sıra content-visibility özelliğinin de geçiş yapması gerekir. Bunun nedeni, User-Agent stil sayfasında tanımlandığı gibi, değerinin açılmamış ve açılmış durum arasında değişmesidir. Bu mülk ayrı ayrı animasyonlu bir mülk olduğundan, çalışmasını sağlamak için allow-discrete anahtar kelimesine ihtiyacınız vardır.

Daha önce paylaşılan özel akordeon demosuna eklenen sonuç şu hale gelir:

height animasyonlu da olabilir. height: auto olarak animasyon oluşturmak için interpolate-size veya calc-size() kullanmanız gerekir. Ayrıca, içeriğin ::details-content sahte metninden taşmasını önlemek için overflow: clip'u uygulayın.

::details-content {
    transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
    height: 0;
    overflow: clip;
}

/* Browser supports interpolate-size */
@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    [open]::details-content {
        height: auto;
    }
}

/* Fallback for browsers with no interpolate-size support */
@supports not (interpolate-size: allow-keywords) {
    [open]::details-content {
        height: 150px;
        overflow-y: scroll; /* In case the contents should be taller than 150px */
    }
}

Kodun işleyişini, Material UI'nin akordeonundan esinlenerek oluşturulan aşağıdaki demoda görebilirsiniz. Her <details> öğesinin içeriği güzel bir şekilde animasyonlu olmalıdır.

::details-content desteği olmayan tarayıcılarda bileşen sorunsuz şekilde çalışmaya devam eder. Ziyaretçiler yalnızca animasyonu göremez.

Özellik algılama

CSS'de ::details-content sözde sınıfı için destek olup olmadığını tespit etmek istiyorsanız aşağıdaki snippet'i kullanın.

@supports selector(::details-content) {
  …
}

Bu algılamayı, ziyaretçinizin kullandığı tarayıcının ek görüntüleme değerlerini destekleyip desteklemediğini öğrenmek için de kullanabilirsiniz.

Erişilebilirlikle ilgili dikkat edilmesi gereken noktalar

::details-content sözde öğesinin kullanıma sunulması ve görüntüleme türünü değiştirme olanağı, <details> öğesinin erişilebilirliğini etkilemez.

Önceki gibi, en azından Chromium tabanlı tarayıcılarda ve HTML standardına göre <details> öğesi aranabilir durumdadır ve tarayıcı, sayfa içinde arama, ScrollToTextFragment ve öğe parçası gezinme işlemlerine yanıt olarak gizli içeriğine kaydırmaya çalıştığında otomatik olarak genişler. Bu durum değişmez.

Ancak, özel akordeonları kullanmadan önce bunun kullanıcılar için yararlı mı yoksa zararlı mı olduğunu düşünün. Özel akordeon kullanımı, içeriğin kapladığı görsel alanı azaltsa da kullanıcıların tüm bilgileri görmek için birçok öğeyi açması gerekebilir. Bu durum, aynı anda birden fazla öğeye bakmak isteyen kullanıcıları rahatsız edebilir.

İşaretçinin stilini değiştirmek ister misiniz?

Gecko ve (mevcut) Chromium tarafından kullanılan bir yaklaşım ile WebKit tarafından kullanılan (daha önce Chromium ile paylaşılan) farklı iki yaklaşım olduğu için liste işaretçisinin stili şu anda birlikte çalışamaz.

Özellik birlikte çalışabilirlik özelliğini etkinleştirdikten sonra amacımız, işaretçinin stilini nasıl belirleyeceğiniz konusunda size daha iyi kontrol vermektir.

Diğer demolar

Son olarak, göz atabileceğiniz bazı diğer demoları burada bulabilirsiniz. Hepsi ::details-content kullanıyor.

UIKit Akordiyon

Bu demo, UIKit Accordion'dan sonra oluşturulmuştur. Kod, daha önce paylaşılan Material UI akordeonuyla neredeyse aynıdır.

Kısmen açılmış açıklama widget'ı

Bu demoda, içeriği ekranda görünen kısmen açık bir açıklama widget'ı gösterilmektedir. Bu nedenle, content-visibility her zaman visible olarak ayarlanır. Hesaplama olduğu için height, calc-size() kullanılarak animasyonlu hale getirilir.

::details-content {
  content-visibility: visible; /* Make it always visible */
    
  transition: height 0.5s ease;
  height: 150px;
  overflow: clip;
}

[open]::details-content {
  height: calc-size(auto, size + 0.5rem); /* calc-size because we need to add a length */
}

Stil kolaylığı sağlamak için içerik bir sarmalayıcı div içine sarmalanır. Sarmalayıcı div'e padding gibi düzen stilleri uygulanır ve ::details-content sözde animasyon canlandırılır.