Kode CSS untuk Print Warna Background (Pretty Print)

Pernah mencoba setting kode CSS untuk pretty print agar warna background bisa terlihat tapi tetap tidak tampak?

Secara default, browser memang tidak mengikutsertakan warna background pada print layout, perlu pengaturan lanjutan dari sisi pengguna agar warna background ikut terbawa saat diprint.

Sayangnya itu akan sedikit merepotkan pengujung website kita, terutama untuk mereka yang awam dalam hal ini.

Sebelumnya saat saya mencoba mencari solusi untuk hal ini, banyak orang di forum mengatakan bahwa pengaturan default browser memang tidak memasukkan warna background untuk printing sehingga mustahil dioveride dan diintervensi oleh CSS, tetapi akhirnya saya menemukan kode CSS yang ampuh menyelesaikan masalah ini.

Kode CSS untuk Print Warna Background

	body {
	  -webkit-print-color-adjust: exact !important; /*untuk chrome dan browser webkit www.zaad.my.id*/
		color-adjust: exact !important; /*untuk IE dan Firefox www.zaad.my.id*/
	}

Silakan tambahkan kode di atas ke CSS print Anda dan lihat hasilnya, jangan lupa untuk membersihkan cache jika Anda menggunakan plugin caching.

Ada sebagian pengguna forum yang menyarankan mengganti background dengan box shadow agar tampak di print layout, contohnya:

background-color: unset;
box-shadow: inset 0 0 0 1000px blue /* 1000px hanya angka ngasal, maksudnya hanya agar warna shadow menutupi box sehingga tampak seakan-akan background*/

Namun menurut saya, cara ini agak ribet dan membutuhkan effort lebih agar hasilnya maksimal.

Jika Anda mengunakan cara kedua di atas, artinya Anda harus mengubah semua background menjadi box shadow satu persatu dan menyesuaikan warna yang seharusnya, itu akan membutuhkan lebih banyak waktu dan berpotensi ada yang terlewat, belum lagi element pada masing-masing halaman tidak sama.

Ada juga yang menyarankan untuk mengganti warna background dengan gambar yang memiliki warna yang sama dengan yang diinginkan, contohnya:

<div style="background-color: #00ffe4; height: 100px; width: 100px;">
Menggunakan Warna Background
</div>

Diganti menjadi:

<div style="position: relative;">
    <img src="/gambar/warna-biru.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
       Menggunakan gambar sebagai background
    </div>

Itu artinya Anda harus menyiapkan gambar dengan warna yang Anda inginkan, semakin banyak warna semakin juga gambar yang Anda butuhkan, dan tentunya memuat terlalu banyak gambar di halaman website akan sangat mempengaruhi performa website.

Kesimpulan:

• Dalam artikel ini ada 3 cara agar warna background di halaman website kita bisa diprint secara default tanpa mengubah pengaturan saat printing, dan cara pertama lebih disarankan karena jauh lebih mudah.
• Kode di atas berlaku untuk semua website, baik website yang dibangun dengan CMS WordPress atau CMS lain, atau tanpa CMS.
• Jika Anda ingin lebih tau bagaimana membuat CSS untuk print, silakan lihat CSS Layout Agar Website Menjadi Print Friendly