Buat Halaman Cetak-Ramah dengan Gutenberg.css

Desainer web sering lupa mencetak karena tampaknya jauh lebih tidak perlu saat ini. Dan ini mungkin benar untuk situs digital seperti BuzzFeed.

Namun demikian, pada situs web informasi masih merupakan praktik yang baik untuk menawarkan lembar gaya cetak kustom. Untungnya, Anda tidak perlu mendesain sendiri karena Gutenberg ada di sini untuk membantu.

Dinamai setelah penemu mesin cetak Johannes Gutenberg, perpustakaan CSS ini adalah sumber daya mandiri desain halaman cetak.

Anda hanya Tambahkan gutenberg.css mengajukan ke kepala dokumen Anda, dan Anda siap.

Setiap kali pengunjung pergi untuk mencetak halaman Anda seharusnya secara otomatis restyle berdasarkan pengaturan cetak. Ini dapat diatur menggunakan media = "print" Atribut HTML.

Lihatlah panduan ini jika Anda ingin belajar lebih banyak tentang mencetak stylesheet dan cara kerjanya.

Yang menyenangkan tentang Gutenberg adalah itu hadir dengan kelas dan gaya tambahan terlalu.

Gali ke dalam folder tema dan Anda akan menemukan tiga tema cetak alternatif: Book, modern, dan gaya lama. Anda dapat membuat ini standar dengan menambahkannya di atas default gutenberg.css mengajukan.

Anda juga bisa gaya halaman berbeda untuk dicetak dengan menambahkan kelas CSS tertentu. Misalnya .tanpa cetak kelas akan menyembunyikan elemen sepenuhnya dalam gaya cetak.

Contoh lain adalah penambahan URL tautan di sebelah teks. Gutenberg menambahkan fitur ini untuk mempermudah orang menemukan URL dari halaman Anda. Tetapi Anda dapat menambahkan .no-reformat kelas ke elemen jangkar ke sembunyikan URL.

Semua hal ini dibahas pada repo GitHub dan sangat mudah. Anda dapat memiliki Gutenberg dipasang dalam waktu kurang dari 5 menit dan seluruh situs Anda akan ramah cetak.

Ini adalah sejauh ini salah satu perpustakaan paling sederhana dan paling keren untuk diimplementasikan untuk kinerja situs yang lebih baik. Ini mungkin menambahkan beberapa KB tambahan tetapi pengalaman keseluruhan akan meningkat secara drastis.

Jika konten situs Anda mungkin dicetak dengan alasan apa pun maka Gutenberg.css adalah sumber yang sangat diperlukan.