Panduan Lengkap CSS Paged Media untuk Pemula
Hai teman-teman pemula pengembang web! Hari ini, kita akan meluncur ke dunia yang menarik dari CSS Paged Media. Jangan khawatir jika Anda belum pernah mendengar tentang ini sebelumnya - kita akan mulai dari dasar dan maju perlahan-lahan. Pada akhir tutorial ini, Anda akan mampu membuat tata letak cetak yang menakjubkan menggunakan CSS. Jadi, mari kita mulai!
Apa Itu CSS Paged Media?
CSS Paged Media adalah sebuah set fitur CSS yang memungkinkan Anda mengendalikan bagaimana konten web Anda terlihat saat dicetak atau dilihat dalam format berhalaman (seperti PDF). Itu seperti memberikan website Anda sebuah make-over untuk printer!
Imaginasi Anda membuat sebuah website yang indah, tapi saat Anda mencoba mencetaknya, segalanya tampak kacau dan keluar dari tempatnya. Itu di mana CSS Paged Media datang untuk menyelamatkan! Itu membantu Anda mempertahankan kontrol atas tata letak Anda, bahkan saat itu tidak di layar.
Properti Terkait CSS Paged Media
mari kita lihat beberapa properti kunci yang membuat CSS Paged Media berkerja dengan magic:
| Properti | Deskripsi | Contoh |
|---|---|---|
| @page | Menentukan dimensi dan margin halaman | @page { size: A4; margin: 2cm; } |
| size | Menetapkan ukuran kotak halaman | size: 8.5in 11in; |
| marks | Menambahkan tanda potong dan/atau silang ke dokumen | marks: crop cross; |
| bleed | Menentukan area bleed untuk konten cetak | bleed: 0.5cm; |
| page-break-before | Mengendalikan pemisahan halaman sebelum elemen | page-break-before: always; |
| page-break-after | Mengendalikan pemisahan halaman setelah elemen | page-break-after: avoid; |
| page-break-inside | Mengendalikan pemisahan halaman dalam elemen | page-break-inside: avoid; |
mari kita lihat beberapa contoh penggunaannya:
@page {
size: A4;
margin: 2cm;
@top-center {
content: "My Awesome Document";
}
@bottom-right {
content: counter(page);
}
}
h1 {
page-break-before: always;
}
table {
page-break-inside: avoid;
}Dalam contoh ini, kita menetapkan halaman A4 dengan margin 2cm. Kita menambahkan header di bagian atas tengah setiap halaman dan nomor halaman di bagian bawah kanan. Kita juga memastikan bahwa setiap h1 dimulai di halaman baru dan tabel tidak terpisah diantara halaman.
At-Rules CSS
At-rules adalah pernyataan yang memerintahkan CSS bagaimana harus berperilaku. Mereka dimulai dengan tanda at (@) diikuti oleh identifier. mari kita lihat beberapa at-rules yang spesifik untuk Media Halaman:
| At-rule | Deskripsi | Contoh |
|---|---|---|
| @page | Menentukan kotak halaman untuk media berhalaman | @page :first { margin-top: 10cm; } |
| @top-left | Menentukan konten untuk sudut kiri atas halaman | @top-left { content: "Chapter 1"; } |
| @top-center | Menentukan konten untuk bagian tengah atas halaman | @top-center { content: "My Book"; } |
| @top-right | Menentukan konten untuk sudut kanan atas halaman | @top-right { content: date("yyyy-mm-dd"); } |
| @bottom-left | Menentukan konten untuk sudut kiri bawah halaman | @bottom-left { content: "Confidential"; } |
| @bottom-center | Menentukan konten untuk bagian tengah bawah halaman | @bottom-center { content: "Copyright 2023"; } |
| @bottom-right | Menentukan konten untuk sudut kanan bawah halaman | @bottom-right { content: counter(page); } |
mari kita lihat contoh penggunaannya:
@page {
@top-center {
content: "Alice's Adventures in Wonderland";
font-family: "Times New Roman", serif;
font-size: 12pt;
}
@bottom-right {
content: "Page " counter(page);
}
}
@page :first {
@top-center { content: none; }
@bottom-right { content: none; }
}Dalam contoh ini, kita menambahkan header ke setiap halaman dengan judul buku dan nomor halaman di bagian bawah kanan. Kita juga menghapus elemen ini dari halaman pertama untuk memiliki penampilan halaman judul yang bersih.
Pseudo-Kelas CSS
Pseudo-kelas digunakan untuk menentukan keadaan khusus dari elemen. Dalam konteks Media Halaman, ada beberapa pseudo-kelas yang berguna:
| Pseudo-class | Deskripsi | Contoh |
|---|---|---|
| :first | Memilih halaman pertama | @page :first { margin-top: 10cm; } |
| :left | Memilih semua halaman kiri | @page :left { margin-left: 4cm; } |
| :right | Memilih semua halaman kanan | @page :right { margin-right: 4cm; } |
| :blank | Memilih semua halaman kosong | @page :blank { @top-center { content: none; } } |
mari kita lihat bagaimana kita bisa menggunakannya:
@page :first {
margin-top: 10cm;
@top-center { content: none; }
@bottom-right { content: none; }
}
@page :left {
margin-left: 4cm;
margin-right: 3cm;
@top-left {
content: "Alice's Adventures in Wonderland";
}
}
@page :right {
margin-left: 3cm;
margin-right: 4cm;
@top-right {
content: "Chapter " counter(chapter);
}
}Dalam contoh ini, kita membuat tata letak yang berbeda untuk halaman pertama, halaman kiri, dan halaman kanan. Halaman pertama memiliki margin atas yang besar dan tanpa header atau footer. Halaman kiri memiliki judul buku di sudut kiri atas, sedangkan halaman kanan memiliki nomor bab di sudut kanan atas.
Kesimpulan
Dan itu dia, teman-teman! Kita telah berjalan melalui dunia yang menakjubkan dari CSS Paged Media. Dari menetapkan ukuran halaman dan margin hingga mengendalikan pemisahan halaman dan menambahkan header dan footer, Anda sekarang memiliki alat untuk membuat tata letak cetak yang indah dengan CSS.
Ingat, latihan membuat sempurna. Cobalah untuk mencoba properti dan at-rules ini dalam proyek Anda sendiri. Anda mungkin terkejut melihat betapa banyak kontrol Anda dapat mempunyai atas tata letak cetak Anda!
Selamat berkoding, dan may your prints be ever crisp and beautiful!
Credits: Image by storyset