Print medya

@media print ile yazdırma stillerini öğrenirsin.

@media print bloğu

Yazdırma için ayrı stiller yazmak istediğinde @media print bloğu kullanırsın. İçine yazdığın bildirimler yalnızca yazdırma penceresinde etkin olur; ekrandaki görünümü değiştirmez.

Sık kullanılan bir örnek: gezinme çubuğunu yazdırırken gizlemek. @media print { nav { display: none; } } yazarsın. Böylece rapor kâğıda temiz çıkar; ekranda yine görünür.

Yazdırmada öğe gizleme

Yazdırmada gereksiz öğeleri gizlemek için display: none kullanılır. @media print { .ad-banner { display: none; } } reklam alanını kâğıda basmaz. Aynı biçimde gezinme, alt bilgi ve form düğmeleri de gizlenebilir.

Gizlemek yerine visibility: hidden da kullanılabilir; ancak bu öğenin yerini korur. Yazdırmada genelde display: none tercih edilir.

Bağlantı adreslerini yazdırma

Yazdırırken bağlantı adreslerini de göstermek istersen a::after seçicisi ve content özelliği işine yarar. @media print { a::after { content: " (" attr(href) ")"; } } her bağlantının yanına adresini köşeli parantez içinde ekler.

Bunu yalnızca @media print bloğu içinde yap; yoksa ekrandaki her bağlantı yanına adres dizilir. Böylece kâğıt okuyucusu bağlantının nereye gittiğini görebilir.

Uygulama Yazdırırken gezinme çubuğunu gizle

Bir @media print bloğu yaz. İçinde nav seçicisi için display: none bildirimi tanımla. nav bloğu @media print bloğu içinde yer alsın.

Örnek çözümü göster

/* gezinme çubuğunu yazdırmada gizle */
@media print {
  nav {
    display: none;
  }
}

Kendini test et

@media print bloğu ne zaman etkin olur?
- Yalnızca ekranda
- Yalnızca yazdırma penceresinde
- Hem ekranda hem yazdırırken
- Yalnızca mobil cihazlarda
Cevabı göster

Yalnızca yazdırma penceresinde — Doğru. @media print bloğu yalnızca yazdırma penceresinde etkin olur.

Reklamı yazdırmada gizle

@media print {
  .ad-banner { ____: none; }
}

Cevabı göster

@media print {
  .ad-banner { display: none; }
}

Her parçayı anlamına eşle

@media print

Yazdırma bloğu
display: none

Öğeyi gizler
visibility: hidden

Yeri korunarak gizler

Sıradaki ders: Print renk ayar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler