Panduan Lengkap Pemula dalam CSS Printing

Hai sana, para maestro CSS masa depan! Hari ini, kita akan melihat dunia menarik CSS printing. Sebagai guru komputer tetangga yang ramah, saya sangat gembira untuk membawa Anda dalam perjalanan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari dasar dan naik tingkat per tingkat. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda suka), dan mari kita mulai!

CSS - Printing

CSS Printing - Menggunakan Style Sheet Cetak

Pernah mencoba mencetak halaman web dan hanya menemukan bahwa itu tidak mirip apa yang Anda lihat di layar? Itu adalah tempat style sheet cetak datang untuk menyelamatkan! Mereka seperti sihir magis yang mengubah konten web Anda menjadi format yang ramah cetak.

mari mulai dengan contoh sederhana:

<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

Dalam snippet ini, kita mengatakan ke browser untuk menggunakan style sheet yang berbeda untuk layar dan cetak. Atribut media adalah senjata rahasia kita di sini. Ketika Anda melihat halaman di layar, itu menggunakan screen.css. Tetapi tekan tombol cetak, dan boom! print.css mengambil alih.

CSS Printing - Menggunakan Media Queries dan At-Rule @page

Sekarang, mari kita tingkatkan permainan kita dengan media queries dan at-rule @page. Mereka seperti duo dinamis CSS printing!

@media print {
body {
font-size: 12pt;
color: #000;
background-color: #fff;
}

@page {
margin: 1in;
}
}

Kode ini mengatakan, "Hey browser, ketika Anda mencetak, buat teks 12pt, hitam di atas putih, dan beri margin 1 inci di sekitar." Bagian @media print adalah media query kita, dan @page mengatur tata letak halaman kita.

CSS Printing - DeteksiPermintaan Cetak

Apakah akan menarik jika halaman web Anda bisa tahu saat seseorang mencoba mencetaknya? Well, itu bisa! Mari lihat bagaimana:

window.addEventListener('beforeprint', function() {
console.log('Mencetak...');
});

window.addEventListener('afterprint', function() {
console.log('Selesai mencetak');
});

Snippet JavaScript ini seperti seorang spion kecil yang berbisik kepad kita saat pencetakan dimulai dan selesai. Sangat praktis untuk membuat penyesuaian terakhir!

CSS Printing - Menggunakan At-Rule @page

At-rule @page seperti tongkat sihir untuk mengontrol halaman cetak Anda. Mari kita lihatnya dalam aksi:

@page {
size: A4;
margin: 0;
}

@page :first {
margin-top: 2cm;
}

Di sini, kita mengatur semua halaman menjadi ukuran A4 tanpa margin, tetapi memberikan margin atas khusus 2 cm untuk halaman pertama. Itu seperti memperkenalkan red carpet bagi konten Anda!

CSS Printing - Menggunakan Media Query

Kita telah melihat @media sebelumnya, tetapi mari kita mendalamkan:

@media print {
.no-print {
display: none;
}

a[href^="http"]:after {
content: " (" attr(href) ")";
}
}

Snippet ini menyembunyikan elemen dengan kelas no-print dan menambahkan URL setelah setiap tautan eksternal. Itu seperti memiliki asisten pribadi yang membersihkan halaman web Anda untuk pencetakan!

CSS Printing - Penggunaan afterprint Event

Ingat spion JavaScript kecil kita dari sebelumnya? Mari kita gunakanannya:

window.addEventListener('afterprint', function() {
document.body.style.backgroundColor = 'lightblue';
alert('Harap Anda menikmati cetakan Anda!');
});

Kode ini mengubah warna latar belakang setelah pencetakan dan menampilkan pesan yang ramah. Itu seperti meninggalkan catatan terima kasih kecil bagi pengguna Anda!

CSS Printing - Tautan ke Style Sheet Eksternal

Akhirnya, mari kita ingat bagaimana menghubungkan style sheet cetak eksternal:

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Baris ini adalah tiket emas Anda ke halaman web yang ramah cetak. Buatlah file print.css, tambahkan style cetak Anda, dan Anda siap!

Metode	Deskripsi	Contoh
Style Sheet Cetak	File CSS terpisah untuk media cetak	`<link rel="stylesheet" type="text/css" href="print.css" media="print">`
Media Queries	Aturan CSS yang berlaku hanya saat mencetak	`@media print { body { font-size: 12pt; } }`
At-Rule @page	Mengontrol properti khusus halaman	`@page { margin: 1in; }`
DeteksiPermintaan Cetak	JavaScript untuk mendeteksi percobaan pencetakan	`window.addEventListener('beforeprint', function() { ... });`
afterprint Event	JavaScript untuk menjalankan kode setelah pencetakan	`window.addEventListener('afterprint', function() { ... });`

Dan begitu saja, teman-teman! Anda telah mengambil langkah pertama ke dunia CSS printing. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba. Siapa tahu? Anda mungkin menjadi Picasso style sheet cetak! Sampaijumpa lagi, selamat coding!

Credits: Image by storyset