Neden kullanın .h1 yerine gerçek h1?

SORU

30 EYLÜL 2013, PAZARTESİ

Neden kullanın .h1 yerine gerçek h1?

Within the Bootstrap CSS project, stilleri sağlanan için başlık etiketlerini (H1, H2, H3, H4, H5, H6), ama orada da bir dizi sınıf adları temel başlıkları olarak.h1 .h2, .h3, .h4, .h5, .h6). Parası düzgün H1 tag kullanmadan H1 sınıfı adını kullanarak ne kazandı? Her zaman HTML görsel önemi aynalar emin olmak istiyorum.

Herhangi bir düşünce kullanmak için iyi bir neden açıklar .h1 yerine h1 etiketi kullanarak mutluluk duyacağız.

CEVAP

3 EKİM 2013, PERŞEMBE

Size soruyorum:

Neden gerçek yerine .h1 h1?

Kısa cevap:

Amaç hem birlikte kullanmaktır.

.h* sınıfların yararını tasarımında tipografi boyutunu gönderilmesinin uygun başlık düzeyleri ile orantılı değildir ne zaman devreye giriyor. İki sorun bölerek, temiz bir şekilde de çözebiliriz.

İlk bit öğe/etikettir. '<h*>' anlambilim, bakar erişilebilirlik ve SEO.

İkinci bit sınıftır. '5 **' görsel anlambilim ve tipografik hiyerarşi ilgilenir.

Uzun cevap:

Bu sınıfların kökeni OOCSS proje geliyor sanırım.:

Object-Oriented CSS

En son yineleme OOCSS değişti o zamandan beri biraz ben son bakmış, ama ilgili heading.css dosya, yaşlı bir taahhüt, o vardır..h1 - .h6 sınıflar aşinayım:

6e481bc18f oocss / core / heading / heading.css

Yorum: gelen

.h1-.h6 sınıflar gönderilmesinin uygun düzeyde başlık korumak için kullanılmalıdırOlmayan başlık için
...
eğer ek başlıkları gerekiyorsa asla konum bağımlı stil üzerinden ek sınıflar ile oluşturulmuş olmalıdır

Notvurgu yukarıda.

Bir kullanım olarak neden iyi bir açıklama için bu sınıflar, bkz:

stubbornella.org: Don’t Style Headings Using HTML5 Sections (Nicole, bu yazının yazarı, OOCSS yaratıcısı)
csswizardry.com: Pragmatic, practical font sizing in CSS
Google Groups › Object Oriented CSS › Headings question: Basic concept/usage? ('12), Eylül ayında sorduğum soru

Bağlantılar: yukarıdaki ilgili alıntılar

1. stubbornella.org

... [HTML5] Bölüm elemanları tarayıcı Başlığı gerçekten ne olduğunu anlamaya yardımcı olmak içindir, ama mutlaka nasıl karar değil tarzı.

Nasıl HTML5 bir dünyada başlıkları tarzı mı?

... Şekillendirme için kesit elemanları kullanmayalım. Etmeliyiz yapsınlar bu işi onlar için tasarlanmış olan sıralama belge ağacı ve stil sorunları çözmek başka bir şekilde karşılayan hedeflerimize daha iyi: basit yeniden kullanılabilir sınıf adları uygulanabilir herhangi bizim başlıklar ne kadar koyu olursa olsun onlar olabilir kesit içerik.

Daha sonra, taşınabilir, öngörülebilir ve kuru oldukları için site sınıflara geniş başlıkları özetleme tavsiye ederim. Onlar gibi bir şey diyebilirsin.

2. csswizardry.com

Bilgelik [Nicole Sullivan olan bize verilen kesinlikle yıldız bir nugget çift iplikli derim hiyerarşi gidiyor. Bu her zaman CSS bir başlık tanımlama sınıf tanımlama uygulamasıdır.

... Her başlık stili ile birlikte bir sınıf atayarak biz şimdi her yerde, çok özel olmayan hareketli bir yerine taşınabilir bu stilleri çok esnek bir seçici eklenmiştir.

3. groups.google.com

İşte sözde html5 kullanımına bir örnek (h/t Jamund Ferguson):

<body>
    <div class="main">
        <h1>Main Heading</h1>
        <section>
            <h1 class="h2">Section Header</h1>
        </section>
    </div>
    <aside class="side">
        <article class="widget">
            <h1 class="h3">Sidebar Headings</h1>
        </article>
        <article class="widget">
            <h1 class="h3">Sidebar Headings</h1>
        </article>
    </aside>
</body>