Panduan Lengkap Pemula: CSS Printing
Hai teman-teman, para maestro CSS masa depan! Hari ini, kita akan melihat dunia menarik dari 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 sukai), dan mari kita mulai!
CSS Printing - Menggunakan Style Sheet Cetak
Pernah mencoba mencetak halaman web dan hanya menemukan bahwa itu tampak sama sekali seperti yang Anda lihat di layar? Itu adalah tempat style sheet cetak datang ke bantuan! Mereka seperti mantra magis yang mengubah konten web Anda menjadi format yang ramah cetak.
Mari kita 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 kepada browser untuk menggunakan style sheet yang berbeda untuk layar dan cetak. Atribut media adalah senjata rahasia kita. 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. Ini seperti duo dinamis CSS printing!
@media print {
body {
font-size: 12pt;
color: #000;
background-color: #fff;
}
@page {
margin: 1in;
}
}Kode ini mengatakan, "Hey browser, saat 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 - Deteksi Permintaan Cetak
Apakah Anda merasa menyenangkan jika halaman web Anda bisa tahu saat seseorang mencoba mencetaknya? Well, itu bisa! Ini cara nya:
window.addEventListener('beforeprint', function() {
console.log('Mencetak...');
});
window.addEventListener('afterprint', function() {
console.log('Selesai mencetak');
});Snippet JavaScript ini seperti seorang spion kecil yang memberitahu kita saat pencetakan dimulai dan selesai. Sangat berguna untuk membuat penyesuaian terakhir!
CSS Printing - Menggunakan At-Rule @page
At-rule @page seperti tongkat sihir untuk mengontrol halaman cetak Anda. Mari kita lihat nya dalam aksi:
@page {
size: A4;
margin: 0;
}
@page :first {
margin-top: 2cm;
}Di sini, kita mengatur semua halaman menjadi ukuran A4 tanpa margin, tetapi memberi margin khusus 2cm untuk halaman pertama. Itu seperti memperlihatkan red carpet untuk konten Anda!
CSS Printing - Menggunakan Media Query
Kita sudah melihat @media sebelumnya, tapi mari kita masuk lebih dalam:
@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 kecil JavaScript kita dari sebelumnya? Mari kita gunakan nya:
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 - Link 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 hanya berlaku saat mencetak | @media print { body { font-size: 12pt; } } |
| At-Rule @page | Mengontrol properti spesifik halaman | @page { margin: 1in; } |
| Deteksi Permintaan Cetak | JavaScript untuk mendeteksi percobaan pencetakan | window.addEventListener('beforeprint', function() { ... }); |
| afterprint Event | JavaScript untuk menjalankan kode setelah pencetakan | window.addEventListener('afterprint', function() { ... }); |
Dan itu dia, teman-teman! Anda sudah mengambil langkah pertama ke dunia CSS printing. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba. Siapa tahu? Anda mungkin menjadi Picasso dari style sheet cetak! Sampai jumpa lagi, selamat coding!
Credits: Image by storyset