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