Chúng tôi có thể áp dụng CSS cho trang để in không?

Các trang web bán vé làm điều này thường xuyên (nghĩ rằng. thẻ lên máy bay, vé vào cửa, bằng chứng mua hàng, hóa đơn, v.v.), nhưng đó không phải là tiêu chuẩn cho nội dung hàng ngày, điều này thật đáng tiếc vì người dùng cố gắng cung cấp nội dung ngoại tuyến nhiều hơn bạn nghĩ (tôi. e. trước chuyến bay, như một tài liệu tham khảo có thể in được, v.v.)

Hãy xem nhanh cách chúng ta có thể viết truy vấn phương tiện cho nội dung có thể in và xuất được. Thật dễ dàng, sẽ chỉ mất một phút. Chúng tôi sẽ sử dụng bảng phím tắt Adobe XD này từ blog/trang web của tôi làm ví dụ

Đây là những gì bài báo trông giống như trên web

Và đây là hình thức dưới dạng PDF, trước khi tối ưu hóa CSS

FYI. bạn có thể in từ web bằng phím tắt Ctrl/cmd+P

Bước 1. Truy vấn phương tiện CSS để in

Trước hết, chúng tôi xác định truy vấn phương tiện

@media print {
    /* styles here */
}

Giả sử rằng điều này xuất hiện ở cuối biểu định kiểu CSS của bạn, hầu hết các kiểu trong truy vấn phương tiện để in sẽ ghi đè lên bất kỳ thứ gì khác tồn tại một cách dễ dàng

Nếu không, hãy thử sử dụng quy tắc

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

Bước 2. Ẩn dư thừa

Khi tải các trang web dưới dạng PDF, người dùng không cần

• phần tử giao diện người dùng
• Đầu trang/chân trang
• Nội dung thanh bên
• Biểu mẫu và CTA
• Vân vân

Chúng ta cần ẩn các phần tử đó bằng cách sử dụng

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

Mã của chúng tôi sau đó trở thành (làm ví dụ)

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

Ví dụ của chúng tôi sau đó trông như thế này

Không tệ, nhưng có một số khoảng cách không mong muốn ở trên cùng

Chúng tôi sẽ muốn "đặt lại" khoảng cách này, không nhất thiết phải có trên thẻ

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

@media print {
  header, footer, aside, form, … {
    display: none;
  }
  article {
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
}

Bước 3. Tùy chỉnh lề trang

Các trình duyệt thực sự khá hiệu quả khi xác định lại lề trang và sắp xếp nội dung. Điều đó đang được nói, bạn có thể muốn xác định lợi nhuận của riêng mình, điều này khá dễ thực hiện. Chỉ cần nhớ sử dụng

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

Mã của chúng tôi sau đó trở thành

@media print {
  header, footer, aside, form, … {
    display: none;
  }
  article {
    width:100%!important;
    padding:0!important;
    margin:0!important;
  }
}
@page {
  margin: 2cm;
}

Như bạn có thể thấy từ ví dụ mã ở trên, lề được xác định bằng cách sử dụng quy tắc

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

Bước 4. Xử lý liên kết

Các liên kết vẫn có thể nhấp được trong tệp PDF nhưng đối với những người dùng có thể muốn giữ nội dung trên thực tế, chúng tôi sẽ cần nghĩ ra thứ gì đó sáng tạo hơn. Chính Ben Frain đã khai sáng cho tôi thủ thuật cực kỳ đơn giản và cực hay này

@media print {
  a:after {
    content: "("attr(href)")";
  }
}

Điều này làm, lấy giá trị của thuộc tính

@media print {
    header, footer, aside, form, … {
        display: none;
    }
}

thủ thuật hay (https. // benfrain. com/create-print-styles-using-css3-media-queries)

———

Tôi sẽ để lại cho bạn một lời khuyên cuối cùng này. để lại một cái gì đó trong phiên bản có thể in được có tên của bạn và bất kỳ thông tin bản quyền nào được yêu cầu

Các nhà thiết kế web gặp khó khăn với các vấn đề hiển thị của trình duyệt thường quên một cách phổ biến khác mà mọi người xem các trang Web; . Sử dụng Cascading Style Sheets để đặt tham số in cho các trang của bạn và tăng khả năng sử dụng cũng như khả năng truy cập cho tất cả khách truy cập của bạn

Đổi kiểu trang để in

Tạo các trang để in là một quy trình gồm hai bước. trước tiên, bạn cần tạo một biểu định kiểu in để sửa đổi cách hiển thị trang của bạn để xóa các phần tử không cần thiết, sau đó sử dụng phần tử LINK để có thể truy cập biểu định kiểu in

Xem xét những phần nào trong bố cục trang của bạn không cần thiết khi trang được in. Ví dụ

1. hệ thống định vị. Người đọc không thể đi bất cứ đâu từ trang đã in, vì vậy menu điều hướng chỉ chiếm dung lượng
2. Hinh nên. Những điều này có thể làm cho văn bản trang in khó đọc. Họ cũng sử dụng lượng mực không cần thiết để in
3. Màu nền. Nếu trang của bạn có văn bản sáng trên nền tối, hãy ưu tiên khách truy cập của bạn và tạo một biểu định kiểu in có văn bản tối trên nền trắng. Này, nó thậm chí có thể trông đẹp đến mức bạn muốn sử dụng nó mọi lúc
4. hình ảnh không cần thiết. Thông thường, bạn có thể loại bỏ phần lớn hình ảnh vì hầu hết mọi người in trang cho nội dung văn bản, không phải hình ảnh

Có những ngoại lệ cho hình ảnh. Một số nên ở lại với phiên bản in của trang hoặc bạn có nguy cơ gây nhầm lẫn hoặc khó chịu cho khách truy cập của mình

• Logo trang web của bạn- nó củng cố thương hiệu của bạn
• Ảnh sản phẩm- khách truy cập có thể sử dụng chúng để mua sắm so sánh
• Các ảnh quan trọng khác- ví dụ: nếu trang web của bạn hiển thị các kiểu tóc khác nhau hoặc bản đồ doanh nghiệp của bạn, hầu hết khách truy cập sẽ mong đợi rằng những ảnh quan trọng đó sẽ có trong phiên bản in

Vì vậy, những gì còn lại trên trang in?

• Nội dung văn bản không điều hướng
• tiêu đề phần
• hình ảnh quan trọng
• URL trang (để khách truy cập có thể tìm lại bạn trực tuyến)

CSS giúp dễ dàng loại bỏ các phần tử bạn không cần

Tạo một biểu định kiểu in

Biểu định kiểu in của bạn cần được lưu trong một tệp riêng biệt với biểu định kiểu thông thường của bạn. Đó là bởi vì bạn sử dụng hai yếu tố LIÊN KẾT khác nhau để liên kết hai biểu định kiểu với trang Web

Hãy sử dụng trang ví dụ này (bấm vào đây để xem ví dụ) với lịch sự kiện cho doanh nghiệp hư cấu "Zorra's Garden Retreat" để quyết định cách tạo biểu mẫu in mẫu

Lịch sự kiện là một nơi tuyệt vời để bắt đầu nếu bạn đang cân nhắc tạo các phiên bản in chỉ vài trang. Bất kỳ doanh nghiệp, nhóm tôn giáo hoặc tổ chức cộng đồng nào tổ chức các sự kiện hoặc cuộc họp đặc biệt sẽ thấy rằng cuối cùng sẽ có người muốn có một bản cứng của lịch đó

Đây là một ảnh chụp màn hình nhỏ về lịch của Zorra's Garden Retreat

Chỉ cần nhìn lướt qua, chúng tôi thấy một số yếu tố có thể được loại bỏ hoặc cần phải thay đổi cho phiên bản in

1. Thay đổi màu nền và màu chữ thành chữ đen trên nền trắng
2. Loại bỏ hệ thống điều hướng bên
3. Sửa đổi chân trang
4. Thêm liên kết giới thiệu trang để khách truy cập có thể tìm lại trang trực tuyến

Xem biểu định kiểu bên ngoài của trang web tại đây. Lưu ý rằng nó sử dụng các lớp kiểu để điều khiển hiển thị điều hướng, màu phông chữ, nền, v.v. Chúng tôi sẽ sửa đổi những điều này cho biểu định kiểu in. May mắn thay, điều đó khá dễ thực hiện. Vì chúng tôi không muốn điều hướng hiển thị, chúng tôi thay đổi tất cả các thuộc tính kiểu được liên kết với điều hướng để hiển thị. không ai. Sau đó, chúng ta chỉ cần sửa đổi thêm một vài yếu tố để có được hiệu ứng in như ý muốn

Dưới đây là so sánh giữa hai biểu định kiểu với một ký hiệu ngắn về các thay đổi

cơ thể người

//thay đổi màu nền và màu chữ//

logoBảng

//xóa màu nền//

td. thực đơn

//không hiển thị menu trên bản in //

người giới thiệu

//không hiển thị liên kết giới thiệu trên trang không in //

Lưu biểu định kiểu đã sửa đổi này với tên "PrintStyles. css" và chúng tôi sẵn sàng liên kết nó với tài liệu

Liên kết Biểu định kiểu in

Nếu trước đây bạn đã sử dụng biểu định kiểu bên ngoài hoặc tệp JavaScript bên ngoài, thì bạn đã quen thuộc với phần tử LINK

Liên kết một biểu định kiểu bên ngoài như thế này

Khi bạn thêm biểu định kiểu in, bạn phải thêm thuộc tính "phương tiện". Điều này cho trình duyệt biết rằng các kiểu có trong đó. tệp css chỉ nên được sử dụng khi tài liệu được in

Quyết định cách liên kết

Cách dễ nhất để tạo các trang có thể in được chỉ là thêm hai thẻ LIÊN KẾT vào mỗi trang; . Một liên kết biểu định kiểu bên ngoài của bố cục cơ bản và biểu định kiểu còn lại chứa biểu định kiểu có thể in được. Đó là một quá trình liền mạch. lượt nhấp của khách truy cập của bạn sử dụng tùy chọn IN trong trình duyệt của cô ấy và máy in tạo ra phiên bản có thể in được

Để xem nó hoạt động như thế nào, hãy xem lại tệp gốc trong trình duyệt của bạn. Sau đó chọn tùy chọn Print Preview trong trình duyệt của bạn. Bạn sẽ thấy trang sử dụng bố cục biểu định kiểu in

Đây là giao diện của nó trong Firefox

Thật dễ dàng và mọi người đều vui vẻ, phải không?

Có lẽ khách truy cập của bạn thực sự muốn có một bản sao chính xác của trang- vì bất kỳ lý do gì. Cô ấy có thể bối rối và thất vọng khi không thể in một. Luôn có thể chụp ảnh màn hình rồi in, nhưng nhiều người dùng thiếu kinh nghiệm không biết cách

Vì vậy, hãy cân nhắc thêm liên kết "Phiên bản có thể in" ở vị trí nổi bật. Đó là một siêu kết nối tiêu chuẩn liên kết đến một trang chỉ sử dụng "in. css" biểu định kiểu. Ghi chú. không sử dụng thuộc tính "phương tiện" trong thẻ LINK vì bạn muốn khách truy cập xem bản xem trước của những gì họ sắp in

Điều đó có nghĩa là liên kết trên trang bố cục tiêu chuẩn của bạn sẽ giống như thế này

Phiên bản có thể in

Sau đó, lịchPrint. trang htm sẽ chỉ có một thẻ LINK

Điều này mang lại cho khách truy cập của bạn nhiều quyền kiểm soát hơn, nhưng cũng sẽ gặp nhiều rắc rối hơn nếu bạn mã hóa mọi thứ bằng tay. Đó là lý do tại sao bạn có thể cân nhắc thêm phiên bản có thể in được của chỉ một số trang quan trọng nhất hoặc có nhiều nội dung nhất của mình

Ưu điểm của các trang thân thiện với bản in

Nếu trang web của bạn có nhiều nội dung mà khách truy cập có thể muốn in để tham khảo sau này, thì các trang có thể in được có thể xứng đáng với nỗ lực tạo ra chúng. Có rất nhiều lý do chính đáng cho các trang thân thiện với bản in

1. Tăng khả năng sử dụng. Du khách có thể mang theo để cho đồng nghiệp xem hoặc để tham khảo sau này
2. Tăng khả năng tiếp cận. Trình đọc màn hình có thời gian truy cập trang chủ yếu là văn bản có thể in được dễ dàng hơn nhiều. Các trang văn bản thay thế đặc biệt hữu ích nếu bạn có nhiều JavaScript hoặc các chức năng đa phương tiện khác
3. Giảm thời gian tải xuống. Hàng triệu người dùng vẫn dựa vào kết nối quay số chậm - đặc biệt là người dùng gia đình. Họ thường nhấp ngay vào phiên bản "có thể in được" của tin tức và bài báo vì họ có thể nhận được thông tin liên quan nhanh hơn. Họ cũng có nhiều khả năng in thông tin hơn vì mất nhiều thời gian hơn để quay số kết nối và xem lại trang trực tuyến

Tuy nhiên, một bất lợi đối với bạn với tư cách là quản trị viên web là chúng phức tạp hơn một chút, do đó, việc tạo lỗi HTML gây ra sự cố hiển thị trình duyệt sẽ dễ dàng hơn. Luôn kiểm tra mã HTML của bạn bằng Hộp công cụ HTML của NetMechanic sau mỗi lần thay đổi. Bạn sẽ tránh được những lỗi đơn giản có thể ẩn nội dung hoặc làm hỏng hoàn toàn trang của bạn

Làm cách nào để sử dụng CSS để in?

Làm cách nào để áp dụng CSS để xem trước bản in?

Biểu định kiểu in là gì?

Làm cách nào để in HTML bằng CSS trong JavaScript?