Cara Membuat Print CSS Sederhana Untuk Situs Anda

Cara Membuat Print CSS Sederhana Untuk Situs Anda

0 555

Print CSS adalah Cascading Style Sheet yang ditujukan untuk mencetak dokumen ketika pengguna ingin mencetak halaman web sebagai referensi. Ini juga berlaku untuk tampilan dokumen dalam mode print preview, sehingga Anda dapat melihat bagaimana tampilan dokumen yang akan dicetak setelah Anda membuat perubahan pada Print CSS Anda.

Apa yang terjadi jika tidak ada Print CSS di halaman web yang ingin diprint?

Di bawah ini adalah contoh dari situs tanpa menggunakan Print CSS. Anda bisa mengecek halaman web lainnya dengan membuka menu bar browser -> File -> Print Preview untuk melihat halaman web print. Sebagian besar halaman web tidak memiliki Print CSS, karena disana Anda akan melihat keselarasan, layout, warna dan font yang semuanya berada pada style standar dari web.

print tanpa print css
print tanpa print css

Jadi bagaimana hasilnya setelah menambahkan Print CSS?

Styling Print CSS sama dengan membuat styling pada sebuah file StyleSheet normal, Anda dapat membuat perubahan yang diinginkan. Dengan demikian, akan terlihat lebih baik, format dan layout menjadi lebih rapi, pengguna dapat membaca dan mencetak dengan mudah. Di bawah ini adalah contoh hasil setelah menerapkan Print CSS.

print dengan print css
print dengan print css

Di bawah ini berisi tutorial yang menunjukkan Anda bagaimana untuk memulai dengan melakukan satu Print CSS untuk halaman web Anda.

Sertakan Print CSS Anda Pada Tag HEAD

Cukup sertakan print.css Anda di HEAD halaman web Anda. Perhatikan bahwa media ini telah diatur untuk “print” dan bukan “screen”.

Print StyleSheet

Sekarang kita pindah ke Print StyleSheet, menulis Print CSS sama dengan menulis CSS normal. Berikut adalah beberapa petunjuk yang perlu dicatat, sisanya styling seperti biasa.

Reset Style

Anda perlu mereset semua padding, margin ke default meskipun Anda sudah melakukannya untuk halaman utama web CSS Anda. Selanjutnya, Anda juga perlu mendeklarasikan font yang Anda pikir akan terlihat baik dalam dokumen yang dicetak.

Hapus Elemen Tambahan

Ada elemen-elemen yang tidak perlu ada pada dokumen cetak, seperti Search bar, Sidebar, Sponsor, Social Bookmarking di single post dan sebagainya. Oleh karena itu kita dapat menghapus semua elemen ini, dengan menyatakan display: none; di dalam CSS. Sesuaikan dengan id dan class yang ada di web Anda untuk elemen yang ingin dihapus.

Menampilkan URL di dokumen yang dicetak

Pada halaman web, Anda dapat mengklik link jika ada URL. Namun pada dokumen yang dicetak, pengguna tidak dapat mengklik link, jadi kita perlu menampilkan URL kepada mereka sehingga pengguna dapat mengetahui bahwa itu adalah link dan bisa membuka link ke halaman tersebut.

Berikan Page Break

Misalnya, pengguna Anda hanya ingin mencetak konten tetapi bukan komentar di tampilan single post. Yang dapat Anda lakukan adalah dengan mendeklarasikan page-break-before: always, di dalam CSS, maka akan menaruh bagian tersebut ke halaman baru.

View Full Print StyleSheet

Jika halaman web Anda tidak memiliki Print CSS, mengapa tidak mencoba melakukannya sekarang! Jika Anda memiliki informasi Print CSS atau teknik lainnya untuk berbagi, silakan tinggalkan komentar Anda di bawah ini.

NO COMMENTS

Leave a Reply