Jump to content
  • entries
    2
  • comments
    0
  • views
    81

H1 Elementi: Browser Defaults'tan Modern CSS'e

Doğuhan ELMA

Entry posted by Doğuhan ELMA in Elements

29 views

 Share

Heading(h1,h2,h3,h4,h5,h6) elementlerini sayfamızda kullanırken CSS'de stil uygularız. Bu uygulanan stillerin ne olduğunu bilmek için tarayıcının h1 elementine default olarak uyguladığı stilleri bilmek gerektirir. Çünkü başlangıç noktamız tarayıcı stilleridir.

1. Browser User Agent Stylesheet (Tarayıcı Varsayılan Stilleri)

Chrome/WebKit Default Styles 

/* Chrome'un h1 için varsayılan stilleri */
h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

Tarayıcıların İç İçe h1 Mantığı 

/* 1 seviye iç içe (article > h1) */
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}

/* 2 seviye iç içe (article > section > h1) */
:-webkit-any(article,aside,nav,section) 
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
}

/* 3 seviye iç içe */
:-webkit-any(article,aside,nav,section) 
:-webkit-any(article,aside,nav,section) 
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1em; /* Normal metin boyutu! */
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
}

/* 4 seviye iç içe */
:-webkit-any(article,aside,nav,section) 
:-webkit-any(article,aside,nav,section) 
:-webkit-any(article,aside,nav,section) 
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 0.83em; /* h1, h5'ten küçük! */
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
}

/* 5 seviye iç içe */
:-webkit-any(article,aside,nav,section) 
:-webkit-any(article,aside,nav,section) 
:-webkit-any(article,aside,nav,section) 
:-webkit-any(article,aside,nav,section) 
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 0.67em; /* h1, h6'dan küçük! */
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
}

Tüm Başlık Seviyelerinin Varsayılan Boyutları 

h1 { font-size: 2em;    margin: 0.67em 0; }  /* 32px */
h2 { font-size: 1.5em;  margin: 0.83em 0; }  /* 24px */
h3 { font-size: 1.17em; margin: 1em 0; }     /* 18.72px */
h4 { font-size: 1em;    margin: 1.33em 0; }  /* 16px */
h5 { font-size: 0.83em; margin: 1.67em 0; }  /* 13.28px */
h6 { font-size: 0.67em; margin: 2.33em 0; }  /* 10.72px */

2. HTML5 Outline Algorithm'ın Hikayesi

HTML5'in Vaat Ettiği (Ama Gerçekleşmeyen)

HTML5 şunu söyledi: "Her semantic section kendi başlık hiyerarşisine sahip olabilir!" 

<!-- HTML5'in hayali -->
<body>
  <h1>Site Başlığı</h1>
  
  <article>
    <h1>Makale Başlığı</h1> <!-- Tarayıcı bunu h2 gibi ele alsın -->
    
    <section>
      <h1>Bölüm Başlığı</h1> <!-- Tarayıcı bunu h3 gibi ele alsın -->
    </section>
  </article>
  
  <aside>
    <h1>Sidebar Başlığı</h1> <!-- Tarayıcı bunu h2 gibi ele alsın -->
  </aside>
</body>

Problem:

  • ❌ Hiçbir tarayıcı bu algoritma tam olarak uygulamadı
  • ❌ Ekran okuyucular bu yapıyı doğru anlamıyor
  • ❌ SEO açısından kafa karıştırıcı
  • ❌ W3C 2022'de resmi olarak vazgeçti

Gerçekte Ne Oldu?

Tarayıcılar sadece görsel olarak küçülttüler, ama semantik olarak değiştirmediler: 

<article>
  <section>
    <h1>Bu başlık</h1>
  </section>
</article>

<!-- Ekran okuyucular bunu şöyle görür: -->
<!-- "Heading level 1: Bu başlık" -->
<!-- (h2 değil, h1 olarak!) -->

3. Modern CSS Yaklaşımları

❌ Yapılmaması Gerekenler 

<!-- KÖTÜ: İç içe h1 kullanımı -->
<article>
  <h1>Ana Başlık</h1>
  <section>
    <h1>Alt Başlık</h1> <!-- Tarayıcı küçültür ama semantik yanlış -->
  </section>
</article>

<!-- KÖTÜ: Sadece görsel için h1 -->
<div class="hero">
  <h1>Hoş Geldiniz</h1> <!-- Sayfa başlığı değilse h1 olmamalı -->
</div>

✅ Modern Doğru Yaklaşım 

<!-- İYİ: Doğru semantik hiyerarşi -->
<article>
  <h1>Makale Başlığı</h1>
  
  <section>
    <h2>Bölüm Başlığı</h2>
    
    <h3>Alt Bölüm</h3>
    
    <h4>Detay</h4>
  </section>
</article>

Modern CSS Reset/Normalize 

/* Modern CSS Reset Yaklaşımı */

/* 1. Tarayıcı varsayılanlarını sıfırla */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: inherit; /* Parent'tan al */
  font-weight: inherit;
  line-height: inherit;
}

/* 2. Kendi design system'ini kur */
:root {
  /* Typographic Scale (Major Third - 1.250) */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.25rem;     /* 20px */
  --font-size-xl: 1.563rem;    /* 25px */
  --font-size-2xl: 1.953rem;   /* 31px */
  --font-size-3xl: 2.441rem;   /* 39px */
  --font-size-4xl: 3.052rem;   /* 49px */
  
  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;
}

/* 3. Semantic heading styles */
h1 {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-block-end: var(--space-lg);
  letter-spacing: -0.02em; /* Optik düzeltme */
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin-block-start: var(--space-xl);
  margin-block-end: var(--space-md);
}

h3 {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: var(--line-height-tight);
  margin-block-start: var(--space-lg);
  margin-block-end: var(--space-sm);
}

h4 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: var(--line-height-normal);
  margin-block-start: var(--space-md);
  margin-block-end: var(--space-sm);
}

h5 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: var(--line-height-normal);
  margin-block-start: var(--space-md);
  margin-block-end: var(--space-xs);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: var(--line-height-normal);
  margin-block-start: var(--space-sm);
  margin-block-end: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

4. Utility-First Yaklaşım (Tailwind tarzı) 

<!-- Semantic HTML + Utility Classes -->
<article>
  <h1 class="text-5xl font-bold leading-tight mb-8">
    Ana Başlık
  </h1>
  
  <h2 class="text-3xl font-semibold leading-snug mt-12 mb-6">
    Alt Başlık
  </h2>
  
  <h3 class="text-2xl font-medium leading-normal mt-8 mb-4">
    Bölüm Başlığı
  </h3>
</article>
/* Custom utility system */
.text-5xl { font-size: 3rem; }
.text-3xl { font-size: 1.875rem; }
.text-2xl { font-size: 1.5rem; }

.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }

.leading-tight { line-height: 1.2; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }

 

5. Component-Based Yaklaşım 

/* Semantic başlıklar + görsel class'lar ayırımı */

/* Semantic HTML her zaman doğru */
<article>
  <h1 class="display-1">Görsel Başlık</h1>
  <h2 class="title-large">Alt Başlık</h2>
</article>

<section>
  <h2 class="display-2">Büyük Başlık (ama h2)</h2>
  <h3 class="body-large">Küçük Başlık (ama h3)</h3>
</section>

/* CSS */
.display-1 {
  font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.display-2 {
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
  font-weight: 700;
  line-height: 1.2;
}

.title-large {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
  font-weight: 600;
  line-height: 1.3;
}

.body-large {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

6. Responsive Typography 

/* Modern fluid typography */
h1 {
  /* min: 32px, max: 64px, viewport-based scaling */
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
  
  /* Container query ile responsive */
  font-size: clamp(2rem, 8cqi, 4rem);
  
  line-height: 1.1;
  margin-block-end: clamp(1rem, 3vw, 2rem);
}

/* Breakpoint-based (geleneksel) */
h1 {
  font-size: 2rem; /* 32px - mobile */
}

@media (min-width: 640px) {
  h1 {
    font-size: 2.5rem; /* 40px - tablet */
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3rem; /* 48px - desktop */
  }
}

@media (min-width: 1280px) {
  h1 {
    font-size: 4rem; /* 64px - large desktop */
  }
}

7. Modern Best Practices Özet 

/* Tam Modern H1 Implementasyonu */

/* 1. Reset browser defaults */
h1 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* 2. Override nested sectioning bugs */
article h1,
aside h1,
nav h1,
section h1 {
  font-size: inherit; /* Parent'tan al, tarayıcı küçültmesin */
}

/* 3. Custom design system */
h1 {
  /* Responsive fluid sizing */
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
  
  /* Typography */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  
  /* Spacing with logical properties */
  margin-block-end: clamp(1rem, 3vw, 2rem);
  
  /* Color with custom properties */
  color: var(--color-heading, hsl(0 0% 10%));
  
  /* Text wrapping */
  text-wrap: balance; /* Modern tarayıcılarda */
  max-inline-size: 20ch; /* Optimal başlık genişliği */
}

/* 4. Context variants */
.hero h1 {
  font-size: clamp(3rem, 8vw + 1rem, 6rem);
  text-align: center;
}

.article h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3rem);
}

.card h1 {
  font-size: 1.5rem;
}

/* 5. Dark mode */
@media (prefers-color-scheme: dark) {
  h1 {
    color: var(--color-heading-dark, hsl(0 0% 95%));
  }
}

8. Gerçek Dünya Örneği 

<!DOCTYPE html>
<html lang="tr">
<head>
  <style>
    /* Modern H1 Implementation */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    :root {
      --color-text: hsl(0 0% 10%);
      --color-bg: hsl(0 0% 98%);
      --font-base: system-ui, -apple-system, sans-serif;
    }
    
    body {
      font-family: var(--font-base);
      color: var(--color-text);
      background: var(--color-bg);
      line-height: 1.6;
      padding: 2rem;
    }
    
    /* h1 reset - tarayıcı otomatik küçültmesini engelle */
    h1 {
      font-size: inherit;
      font-weight: inherit;
      margin: 0;
    }
    
    /* Semantic yapı */
    .page-title {
      font-size: clamp(2.5rem, 6vw + 1rem, 4.5rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.03em;
      margin-block-end: 1.5rem;
      text-wrap: balance;
    }
    
    .section-title {
      font-size: clamp(1.75rem, 4vw + 0.5rem, 3rem);
      font-weight: 700;
      line-height: 1.2;
      margin-block-start: 3rem;
      margin-block-end: 1rem;
    }
    
    .card-title {
      font-size: 1.5rem;
      font-weight: 600;
      line-height: 1.3;
      margin-block-end: 0.5rem;
    }
    
    article {
      max-width: 70ch;
    }
    
    section {
      margin-block: 2rem;
    }
  </style>
</head>
<body>
  <article>
    <!-- Sayfa ana başlığı -->
    <h1 class="page-title">Modern H1 Kullanımı</h1>
    
    <section>
      <!-- Alt bölüm başlığı -->
      <h2 class="section-title">İlk Bölüm</h2>
      <p>İçerik...</p>
      
      <div class="card">
        <!-- Kart başlığı -->
        <h3 class="card-title">Kart Başlığı</h3>
        <p>Kart içeriği...</p>
      </div>
    </section>
  </article>
</body>
</html>

9. Kritik Kurallar

✅ YAP:

  • Her sayfada sadece bir h1 kullan
  • Başlık hiyerarşisini atlamadan ilerle (h1 → h2 → h3)
  • Semantic HTML kullan, görsel için class kullan
  • clamp() ile fluid typography uygula
  • Logical properties kullan (margin-block, margin-inline)

❌ YAPMA:

  • İç içe section'larda h1 tekrarlama
  • h1'den h3'e atlama (h2'yi atlayarak)
  • Sadece görsel için h1 kullanma
  • Tarayıcının otomatik küçültmesine güvenme
  • Fixed pixel değerleri kullanma

Sonuç: Tarayıcının varsayılan h1 davranışı karmaşık ve artık kullanılmıyor. Modern yaklaşım: doğru semantic HTML + custom CSS design system + fluid typography + accessibility!

 Share

0 Comments

Recommended Comments

There are no comments to display.

×
×
  • Create New...

Important Information

  I accept