1.2.1 gibi tam bölüm yollarını göstermek için sıralı listeleri iç içe yerleştirin ve düzeylerini birleştirmek üzere CSS counters() işlevini kullanın. Bu eğitimde Mac’te yerel bir HTML dosyası oluşturuluyor, anahat sırası korunuyor ve düzenlemelerden sonra numaralandırmanın nasıl kontrol edileceği gösteriliyor.

Tam yol numaralandırması nasıl çalışır?

Tam bölüm yolu, bir öğenin her düzeydeki konumunu belirtir. Örneğin, 1.2.1, birinci üst düzey öğenin ikinci alt öğesindeki ilk öğe anlamına gelir. CSS, iç içe sayaç değerlerini birleştirmek için özel olarak counters() işlevini sunar. İşlev, en dıştaki sayaçtan en içtekine doğru okur ve seçtiğiniz ayırıcıyı araya ekler. MDN: counters() CSS işlevi

Bu görevde anahat, iç içe dalları olan sıralı bir listedir. Belgenin başka yerlerindeki başlıklar için otomatik olarak oluşturulan bir içindekiler tablosu değildir. HTML, sıralı liste öğelerini ağaç sırasına göre tanımlar; bu nedenle kaynak sırasını amaçlanan okuma sırasıyla aynı tutun. HTML Standardı: ol öğesi

Örnekte üç kural kullanılıyor: katılan her listede bir sayaç oluşturun, her öğe için sayacı artırın ve birleştirilmiş yolu öğe etiketinin önünde gösterin. Bu, seçicileri bu anahatla sınırlandırılmış olan MDN’nin belgelenmiş iç içe sayaç örüntüsünü izler. MDN: CSS sayaçlarını kullanma

Mac’inizde anahat dosyasını oluşturun

TextEdit’e ve Safari gibi bir tarayıcıya ihtiyacınız var. Eksiksiz örneğin kendi stil sayfası ve temsili örnek içeriği vardır; paket, derleme aracı veya JavaScript gerektirmez.

  1. TextEdit’i açın ve File > New seçeneğini belirleyin.
  2. Format > Make Plain Text seçeneğini belirleyin.
  3. Aşağıdaki eksiksiz örneği yapıştırın.
  4. File > Save seçeneğini belirleyin, dosyaya outline.html adını verin ve Masaüstü gibi kolay erişebileceğiniz bir yere kaydedin.
  5. TextEdit hangi uzantının kullanılacağını sorarsa Use .html seçeneğini belirleyin.

Apple, TextEdit’te HTML dosyaları oluşturmak için bu düz metin iş akışını belgeliyor. Apple: Mac’te TextEdit’te HTML belgeleriyle çalışma

Aşağıdaki içerik eksiksiz bir belgedir. Kod bloğunun içeriğini, Markdown çit satırlarını almadan kopyalayın.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nested outline example</title>
  <style>
    body {
      max-width: 48rem;
      margin: 2rem auto;
      padding: 0 1rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .outline,
    .outline ol {
      counter-reset: outline-section;
      list-style-type: none;
      padding-inline-start: 1.5rem;
    }

    .outline li {
      counter-increment: outline-section;
      margin-block: 0.35rem;
    }

    .outline li::before {
      content: counters(outline-section, ".") " ";
      font-weight: 600;
    }
  </style>
</head>
<body>
  <h1>Sample document outline</h1>
  <ol class="outline" role="list">
    <li>Node A
      <ol role="list">
        <li>Node B</li>
        <li>Node C
          <ol role="list">
            <li>Node D</li>
            <li>Node E</li>
          </ol>
        </li>
        <li>Node F</li>
      </ol>
    </li>
    <li>Node G
      <ol role="list">
        <li>Node H</li>
      </ol>
    </li>
    <li>Node I</li>
  </ol>
</body>
</html>

Safari’yi açın ve Finder’dan outline.html dosyasını bir Safari penceresine sürükleyin. Kaynak kodu düzenlemek için TextEdit’i, oluşturulan anahata bakmak için Safari’yi kullanın. Her düzenlemeden sonra dosyayı kaydedin ve tarayıcı sayfasını yenileyin.

TextEdit’i kod düzenleme modunda tutun

Dosyayı yeniden açtığınızda kaynak kod yerine biçimlendirilmiş içeriği görebilirsiniz. Apple iki seçenek belgeliyor: File > Open seçeneğini kullanıp Show Options düğmesine tıklayın ve Ignore rich text commands seçeneğini işaretleyin; ya da TextEdit > Settings > Open and Save bölümünde Display HTML files as HTML code instead of formatted text seçeneğini etkinleştirin. Apple: Mac’te TextEdit’te HTML belgeleriyle çalışma

Tam yolları örnekle karşılaştırarak kontrol edin

Beklenen anahat aşağıda gösterilmiştir. Etiketler tarafsız yer tutuculardır; numaraları konumları belirler.

1 Node A
  1.1 Node B
  1.2 Node C
    1.2.1 Node D
    1.2.2 Node E
  1.3 Node F
2 Node G
  2.1 Node H
3 Node I

Bu örnek, birbirinden farklı üç geçişi kontrol eder. Node D, Node C’nin altında üçüncü düzeyi başlatır. Bu dal tamamlandıktan sonra Node F ikinci düzeyde kaldığı yerden devam eder. Node G üst düzeyde kaldığı yerden devam eder ve ilk alt öğesi 2.1 ile başlar. Örnek ağaç üzerinde deterministik bir dolaşım, beklenen bu yolları doğruladı; hazırlık sırasında örnek tarayıcıda görüntülenmedi.

Her CSS kuralının önemi

Sıfırlama hem .outline hem de .outline ol üzerinde yapılmalıdır. Her iç içe liste için yeni bir outline-section örneği gerekir; yalnızca dış listeyi sıfırlamak her derinlik için ayrı bir sayaç oluşturmaz. Her liste öğesinde sayacı artırmak o anki örneğin değerini ilerletir. MDN: CSS sayaçlarını kullanma

Görüntüleme kuralında counters(outline-section, ".") kullanılır. Çoğul işlev, bu ada sahip etkin tüm örnekleri toplar. Bunu tekil counter(outline-section) ile değiştirirseniz yalnızca geçerli düzeyin değeri gösterilir ve iç içe bir öğe tam yolu yerine 1 olarak etiketlenir. MDN: counters() CSS işlevi

Örnek, kendi öneklerini sağladığı için yerel liste işaretleyicilerini kaldırır. Her listede ayrıca role="list" bulunur: MDN, aksi durumda Safari’nin list-style-type: none ile biçimlendirilen listeleri erişilebilirlik ağacına eklemeyebileceğini belgeliyor. Başka bir iç içe liste eklerken bu özniteliği koruyun. MDN: list-style-type CSS özelliği

Anahat yapısını bozmadan düzenleyin

Her iç içe <ol> öğesini, dalı içeren <li> öğesinin içine yerleştirin. Örneğin Node C, kendi kapanış </li> etiketinden önce alt listesini içerir. İç içe liste, başka bir sıralı listenin doğrudan çocuğu olmamalıdır. MDN: HTML sıralı liste öğesi

Pratik bir düzenleme testi için Node C’nin hemen önüne yeni bir öğe ekleyin. Yeni öğenin yolu 1.2 olmalıdır; Node C 1.3 olmalıdır; Node D ve Node E ise sırasıyla 1.3.1 ve 1.3.2 olmalıdır. Node G 2 olarak kalmalıdır. Beklenen bu değişiklikler örneğin hiyerarşisinden kaynaklanır ve numaralandırmanın dal yapısını izlediğini kontrol etmenin yararlı bir yolunu sunar.

Bir dalı taşımak için iç içe listeleri ve kapanış etiketini de içeren dalı taşıyan liste öğesinin tamamını taşıyın. Yalnızca etiketi taşımak, alt öğelerini geride bırakır. Dördüncü bir düzey oluşturmak için uygun öğenin içine mevcut iç içe liste yapısını yineleyin; etikete fazladan bir sayı yazmayın.

Alt öğelerin kesintisiz bir sıra oluşturması gereken her dalda tek bir alt liste kullanın. Bu uygulamada başka bir kardeş alt liste oluşturmak yeni bir sıfırlama oluşturur, dolayısıyla yerel numaralandırması yeniden başlar. MDN’nin örneği, aynı öğenin altında ayrı iç içe listeler kullanarak bu yeniden başlamayı gösterir. MDN: CSS sayaçlarını kullanma

Yanlış numaralandırmayı işe yarar bir sırayla teşhis edin

Önce yapıyı, sonra sayaç kurallarını, ardından sunumu kontrol edin. Girintiyi değiştirmek eksik bir iç içe geçme düzeyini düzeltemez.

Gördüğünüz durum İncelenecek yer Bu örnek için düzeltme
Her iç içe öğede tek bir sayı görünüyor content içindeki işlev Nokta ayırıcısıyla çoğul counters() kullanın.
Her kardeş öğe 1 ile başlıyor Sıfırlama seçicisi Her öğede değil, listelerde sıfırlayın.
Tam yolların yanında yerel numaralar da görünüyor Liste stili kuralı Dış ve iç içe listelere list-style-type: none uygulayın.
Bir dalın öneki beklenenden farklı İç içe listenin konumu Alt listeyi onu içeren öğenin içinde tutun.
Başka bir liste de önek alıyor Sayaç seçicisinin kapsamı Kurallarda .outline önekini koruyun.

Bir öğenin gizlenip gizlenmediğini de kontrol edin. CSS sayaç işlemleri, display: none kullananlar da dahil olmak üzere kutu oluşturmayan öğelerde çalışmaz. Buna karşılık, visibility: hidden kutu oluşturmaya devam eder ve bu nedenle sayımı etkileyebilir. Atlanan bir öğenin bir konum kaplaması gerekip gerekmediğine bilinçli olarak karar verin. W3C: Kutu oluşturmayan öğelerde sayaçlar

Özel başlangıç numaraları nasıl kullanılır?

Bu örnek, sıfırdan başlayıp bire artan özel bir sayaç kullanır. start ve reversed gibi HTML öznitelikleriyle bir liste öğesinin value özniteliği, yerel sıralı liste numaralandırmasını denetler; burada gösterilen özel outline-section kuralları bu öznitelikleri okumaz. Bu nedenle tek başına start="4" eklemek, bu örnekte görüntülenen önekin 4 ile başlamasını sağlamaz. HTML Standardı: Sıralı listeler ve liste öğeleri

Kesintili numaralandırmaya veya azalan dallara ihtiyacınız varsa bu stil sayfasını uyarlamadan önce bu gereksinimi belirleyin. Özel görüntülemenin yok saydığı öznitelikler eklemek yerine görüntülenen yolu amaçlanan sıralı liste değerleriyle tutarlı kılın.

Sayıların sunum mu yoksa belge içeriği mi olduğuna karar verin

Bu eğitimdeki önekler CSS tarafından oluşturulan içeriktir. Görsel bir anahat için uygundur; ancak temel başvurular ek değerlendirme gerektirir: MDN, ::before aracılığıyla eklenen içeriğin ekran okuyucular tarafından güvenilir biçimde sunulmadığını belirtiyor. role="list" eklemek listenin tanınmasını sağlar; oluşturulan her yolun duyurulacağını garanti etmez. MDN: ::before CSS sözde öğesi

Tam yolun gerçek metnin bir parçası olması gerekiyorsa (örneğin düz metin dışa aktarımında), bunu belgeye metin olarak ekleyin veya dışa aktarım adımında oluşturun. Bu, bakım gereksinimini değiştirir: düzenlemelerde saklanan bu yolların da güncellenmesi gerekir. Her çıktı biçiminde temel metni sağlamak için görsel bir öneke güvenmeyin.

Yerel görsel bir anahat için dokuz örnek yolun tümünü kontrol ederek, bir kardeş öğe ekleyerek ve etkilenen dalın beklendiği gibi yeniden numaralandığını doğrulayarak işlemi bitirin. Tarayıcınızda bu kontrolleri geçtikten sonra, iç içe geçme yapısını ve kaynak sırasını koruyarak temsili etiketleri değiştirin.

Kaynaklar