2012-05-17 26 views
6

Khi in một trang từ trình duyệt, nó đề cập đến một biểu định kiểu print.css được khai báo với media="print". Trình duyệt vô hiệu hóa một số quy tắc CSS như background-imagebackground-color, một số trình duyệt có các tùy chọn để bật chúng.Phát hiện hình nền và hỗ trợ màu nền khi in từ trình duyệt

Như đã nói trong this answer, bạn không thể ghi đè hành vi này từ mã trang.

Tôi có hai câu hỏi về vấn đề này:

  • Có bất kỳ tài liệu hoặc tài liệu tham khảo tốt về các quy tắc in? Ví dụ:
    • Quy tắc CSS nào bị vô hiệu?
    • Javascript có thể làm gì đó trên trang trước khi in không?
  • Có cách nào để phát hiện trình duyệt ở chế độ in bằng Javascript và sau đó thực hiện một hệ thống giảm sút duyên dáng không?

Trả lời

3

Cách trình duyệt in các trang bằng một hộp đen; Tôi đã không thể tìm thấy bất kỳ tài liệu tham khảo dứt khoát nào.

Tất cả các trình duyệt chính đều có tùy chọn in để "thu nhỏ vừa" trang web vào trang giấy (được bật theo mặc định) và để in hình nền và màu sắc (tắt theo mặc định). Hầu hết người dùng sẽ để mặc định là, nếu họ thậm chí còn nhận thức được các tùy chọn này tồn tại. Tôi chưa từng thấy các trình duyệt "vô hiệu hóa" bất kỳ quy tắc CSS nào khác khi in.

Firefox và IE hỗ trợ các sự kiện onbeforeprintonafterprint, vì vậy bạn có thể phát hiện khi in đang diễn ra với JavaScript, mặc dù rõ ràng đây không phải là giải pháp trình duyệt chéo.

Hầu hết các điều chỉnh cần thiết cho in ấn có thể được xử lý bởi CSS (hoặc trong một stylesheet in riêng biệt hoặc như một khối @media print { ... } trong stylesheet chính của bạn):

  • Các CSS-Discuss Wiki có một trang tốt vào bao nhiêu bạn có thể kiểm soát thông qua CSS.

  • Tôi khuyên bạn nên xem các kiểu in từ HTML5 Boilerplate làm điểm bắt đầu tốt.

  • Nếu bạn có hình ảnh nền mà phải được in, bạn có thể bao gồm các yếu tố <img> trong trang của bạn, ẩn với display: none, sau đó làm cho họ có thể nhìn thấy với display: block (hoặc inline) trong CSS in của bạn.

Nếu bạn cần sửa đổi nhiều trang để in, tôi khuyên bạn nên cung cấp phiên bản chỉ riêng cho trang in, thay vì cố gắng điều chỉnh JavaScript.

0

Không chắc chắn về điểm đầu tiên, nhưng để phát hiện trình duyệt ở chế độ in, bạn có thể làm tương tự như đối với màn hình. Hoặc sử dụng Modernizr và có điều kiện thêm lớp để cho các tính năng hỗ trợ, sau đó làm cho quy tắc CSS nhắm mục tiêu như:

body.whateverfeature .yourrule { } 

hoặc nếu nó chỉ là IE bạn muốn kiểm tra cho, sử dụng giống như h5bp làm:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> 

+0

Đó không thực sự là những gì tôi yêu cầu. Tôi cần một cách để phát hiện một trình duyệt trong chế độ in (có, print.css sẽ hoạt động, nhưng tôi cần phải sửa đổi DOM và CSS không thể làm điều đó). Có sự kiện 'onbeforeprint' trong IE, nhưng có tương đương với các trình duyệt khác không? Đó là một chủ đề khiến Google câm: S –

Các vấn đề liên quan