Tôi không bao giờ hết ngạc nhiên khi mọi người phải tìm kiếm một liên kết hoặc một nút có nội dung “In” trên một trang web, đặc biệt là khi xem xét có một công nghệ kỳ diệu khiến bước đó không cần thiết. Đáng buồn thay, hầu như không ai sử dụng nó, mặc dù nó đã… 10 năm tuổi.
Không chỉ ngớ ngẩn khi yêu cầu thêm một bước để in mà việc sử dụng bảng định kiểu in sẽ tiết kiệm mực cho bất kỳ ai không sử dụng liên kết có thể in được. Và tất nhiên, có rất nhiều người sử dụng tính năng in sang PDF để lưu các bài báo về sau mà không lãng phí giấy.
Biểu định kiểu in là gì?
Hầu hết các trang web triển khai chức năng in của chúng bằng cách đưa bạn đến một trang khác, được định dạng khác cho máy in - nhưng điều này thực sự không cần thiết. Mọi trình duyệt đều triển khai một công nghệ CSS đơn giản được gọi là In biểu định kiểu , chỉ là một tệp chỉ định các phần tử để ẩn khi trình duyệt của bạn in trang.
Đối với những người không quen thuộc, CSS có nghĩa là Trang tính kiểu xếp tầng và đó là cách trình duyệt của bạn biết cách định dạng mã nguồn HTML cho trang web thành những gì bạn thực sự thấy trên màn hình. Mọi thứ từ phông chữ, màu sắc, đường viền và thậm chí cả hình nền đều có thể được chỉ định trong bảng định kiểu.
Việc thêm biểu định kiểu in đơn giản bằng cách cắm một dòng duy nhất này vào HTML trang của bạn — phần media = print của mã yêu cầu trình duyệt chỉ sử dụng biểu định kiểu này khi in.
<link rel = ”stylesheet” href = ”print.css” type = ”text / css” media = ”print”>
Tệp này thường trông giống như sau:
#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments { display:none }
Vâng, nó thực sự đơn giản như vậy. Vì vậy, làm thế nào nó hoạt động? Đây là ví dụ về một trang web bình thường ở bên trái, với tất cả điều hướng, biểu trưng và quảng cáo hiển thị rõ ràng với ID được liên kết - và ở bên phải, cùng một trang với biểu định kiểu in được áp dụng, ẩn tất cả các yếu tố đó.
Rõ ràng là bạn muốn in một cái này hơn cái kia, phải không?
Ví dụ về lỗi biểu định kiểu in
Thật không may, chỉ có vô số trang web khổng lồ không bận tâm đến việc triển khai điều này. Hãy xem điều gì sẽ xảy ra khi bạn cố gắng in từ New York Times:
Một số trang web, như mạng lưới các trang web Gawker, thậm chí còn tệ hơn. Chúng không chỉ không có chế độ xem có thể in được, khi bạn thử và in, nó giống như súp mực. Theo như chúng tôi có thể nói, không có cách nào để in từ trang web Gawker mà không sử dụng một dịch vụ riêng biệt như Khả năng đọc hoặc đánh dấu nội dung trên trang theo cách thủ công, điều này gần như không thể thực hiện được trên thiết kế mới của họ.
Thật là buồn. Các trang web lớn nhất hoàn toàn không bận tâm đến việc triển khai tính năng này.
Rất may, một số trang web sử dụng chúng
Dưới đây là một ví dụ về chế độ xem có thể in được định dạng đúng - mà không cần phải bận tâm tìm một số liên kết in. Trang BBC News định dạng gọn gàng các bài báo để in, hoàn chỉnh với tiêu đề tùy chỉnh. Chúng bao gồm nhận xét trong chế độ xem in, nhưng công việc vẫn được thực hiện tốt.
Có khá nhiều trang web khác cũng làm như vậy, như ArsTechnica và… trang web của chúng tôi, nhưng sẽ thật ngớ ngẩn nếu hiển thị ảnh chụp màn hình của tất cả chúng. Trong nghiên cứu của chúng tôi, các trang web triển khai chúng đúng cách rất ít và xa.
Vì vậy, để kết thúc ... vui lòng dành 5 phút cần thiết để thực hiện một biểu định kiểu in cho trang web của bạn!
