Tạo một trang thân thiện với in với Gutenberg.css

Các nhà thiết kế web thường quên về in bởi vì nó dường như ít cần thiết hơn ngày nay. Và điều này có thể đúng với các trang web kỹ thuật số như BuzzFeed.

Tuy nhiên, trên trang web thông tin nó vẫn là một thực hành tốt để cung cấp một biểu định kiểu in tùy chỉnh. Rất may, bạn không cần thiết kế của riêng mình vì Gutenberg ở đây để giúp đỡ.

Được đặt theo tên của người phát minh ra báo in, ông Julian Gutenberg, thư viện CSS này là một tài nguyên độc lập cho thiết kế trang in.

Bạn chỉ thêm gutenberg.css tập tin vào đầu tài liệu của bạn và bạn đã hoàn tất.

Bất cứ khi nào khách truy cập đến để in trang của bạn, nó nên tự động restyle dựa trên cài đặt in. Điều này có thể được thiết lập bằng cách sử dụng phương tiện truyền thông = "in" Thuộc tính HTML.

Kiểm tra hướng dẫn này nếu bạn muốn tìm hiểu thêm một chút về in bảng định kiểu và cách họ làm việc.

Điều tốt đẹp về Gutenberg là nó đi kèm với các lớp học thêm và phong cách quá.

Đi sâu vào thư mục chủ đề và bạn sẽ tìm thấy ba chủ đề in thay thế: sách, hiện đại, và phong cách cũ. Bạn có thể làm bất kỳ trong số này mặc định bằng cách thêm chúng vào đầu mặc định gutenberg.css tập tin.

Bạn cũng có thể định kiểu trang khác nhau để in bằng cách thêm các lớp CSS cụ thể. Ví dụ .không in lớp sẽ ẩn hoàn toàn một yếu tố trong phong cách in.

Một ví dụ khác là thêm URL liên kết bên cạnh văn bản. Gutenberg thêm tính năng này để giúp mọi người dễ dàng tìm thấy các URL từ trang của bạn. Nhưng bạn có thể thêm .không định dạng lại lớp vào phần tử neo để ẩn URL.

Tất cả những thứ này được trình bày trên repo GitHub và nó rất đơn giản. Bạn có thể có Gutenberg cài đặt trong ít hơn 5 phút và toàn bộ trang web của bạn sẽ được in thân thiện.

Đây là cho đến nay, một trong những thư viện đơn giản và thú vị nhất để thực hiện cho hiệu suất trang web tốt hơn. Nó có thể thêm một vài KB bổ sung nhưng trải nghiệm tổng thể sẽ được cải thiện mạnh mẽ.

Nếu nội dung trang web của bạn có thể là in vì bất kỳ lý do gì thì Gutenberg.css là một tài nguyên không thể thiếu.