Web sayfalarını yazdırmak için nasıl optimize edilir…

Yazdırmak için sayfaları optimize etmek amacıyla CSS medya sorguları print tipiyle kullanılır.

Gereksiz öğeleri gizle: Navigasyon, altbilgiler, reklam blokları, düğmeler gibi yazdırmada gösterilmemesi gereken öğeler gizlenir.
```
/* Yazdırmada gizle */
@media print {
  nav, footer, aside, .ad-block, button {
    display: none;
  }
}
```
Gizli içeriği göster: Ekranda gizli olan ancak yazdırmak için gerekli olan içerik (örneğin, bağlantıların tam URL'leri) gösterilebilir.
```
@media print {
  a[href]:after {
    content: " (" attr(href) ")"; /* Bağlantı sonrası URL ekler */
  }
}
```

Stilleri sıfırla: Ekrana özgü stiller sıfırlanır: arka plan resimleri/renkleri, gölgeler, boşluklar, yazı tipi boyutları.

@media print {
  body {
    background: none !important; /* Arka plan resmi/rengi kaldırır */
    color: #000; /* Daha iyi okunabilirlik için siyah metin */
  }
  * {
    box-shadow: none !important; /* Gölgeyi kaldırır */
    text-shadow: none !important; /* Metin gölgesini kaldırır */
  }
  p, h1, h2, h3, h4, h5, h6 {
    orphans: 3; /* Sayfa başı/sonu yalnız satırları önler */
    widows: 3; /* Paragraf başı/sonu yalnız satırları önler */
  }
}

Sayfa kırılmalarını kontrol et: page-break-before, page-break-after, page-break-inside özellikleri kullanılarak sayfa kırılmaları kontrol edilir.

@media print {
  article h2 {
    page-break-before: always; /* Yeni bölüme yeni sayfada başlar */
  }
  ul, ol {
    page-break-inside: avoid; /* Liste içi kırılmaları önler */
  }
}

Görüntü ve tabloların optimizasyonu: Görüntülerin boyutunun küçültülmesi, tabloların doğru görüntülenmesini sağlar.

@media print {
  img {
    max-width: 100% !important; /* Görüntünün sayfa dışına çıkmasını engeller */
  }
  table {
    width: 100% !important; /* Tablo tüm sayfa genişliğinde */
    border-collapse: collapse; /* Hücreler arasındaki boşlukları kaldırır */
  }
  th, td {
     border: 1px solid #ccc; /* Hücrelere sınır ekler */
  }
}

Yazdırma için özel stiller: Yazdırma için ayrı bir CSS dosyası oluşturulabilir ve medya sorgusu ile bağlanabilir.
```
<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
```
Test et: Tarayıcıdaki "Yazdırma önizleme" fonksiyonu kullanılarak sonuç mutlaka test edilmelidir.

Web sayfalarını yazdırmak için nasıl optimize edilir?