Làm thế nào để bạn in một biểu định kiểu thử nghiệm?

Không có lý do gì để không có ít nhất một biểu định kiểu in đơn giản. Nếu bạn đã theo dõi tiêu chuẩn web, mọi thứ thật đơn giản. (Không cần buộc người dùng tắt biểu định kiểu, mở xem trước bản in, chọn trang họ muốn in và cuối cùng là in. )

Đi nào. Bảng kiểu in cơ bản nhất thế giới dựa trên quy tắc đơn giản này

@media screen {
}

…giả sử rằng bạn không trộn lẫn cấu trúc và cách trình bày, chỉ sử dụng một biểu định kiểu duy nhất (một lần nữa, lợi thế lớn) và không ràng buộc các loại phương tiện với tham chiếu biểu định kiểu HTML. Trong trường hợp này, khi in, kết quả sẽ là một trang chưa được tạo kiểu trong đó các biểu định kiểu tác nhân người dùng gần như thực hiện công việc

Bước tiếp theo là tối ưu hóa bản in “thực sự”. Ví dụ: bạn có thể muốn đảm bảo rằng mọi thứ đều có màu đen trên nền trắng và có thể bạn cần một phông chữ khác (vì một số phông chữ hệ thống không hoạt động tốt trên giấy). thì đấy

@media print {

  * {
    background: #fff;
    color: #000;
  }

  html {
    font: 100%/1.5 georgia, serif;
  }

}

(Có nguồn gốc từ meiert. com và dựa trên các nguyên tắc mã hóa CSS của riêng tôi [về điều mà sau này tôi đã viết một cuốn sách]. )

thật gọn gàng. Bạn thêm đoạn mã trên vào biểu định kiểu nhắm mục tiêu theo màn hình (thông qua @media) hoặc nếu bạn không thể tránh nó, bạn xóa các phần @media print { và } và sử dụng các quy tắc còn lại để tạo biểu định kiểu in bổ sung

Lưu ý liên quan đến biểu định kiểu in bổ sung. Tôi đã không phân tích kỹ điều này nhưng tôi nghi ngờ tác nhân người dùng tải xuống biểu định kiểu in khi tải tài liệu, không chỉ trong trường hợp in (điều này có ý nghĩa). Điều này có nghĩa là các biểu định kiểu in lớn hơn có thể được đặt trong biểu định kiểu “chính” tương ứng mà không làm tăng thời gian tải. hoàn toàn ngược lại. Chỉ sử dụng một biểu định kiểu duy nhất sẽ lưu một hoặc nhiều yêu cầu máy chủ bổ sung, vì vậy quy trình này sẽ mang lại hiệu suất tốt hơn. Với các kiểu in nhỏ (như ở trên), rõ ràng là sử dụng một biểu định kiểu sẽ hữu ích

Hãy kết thúc chuyến tham quan của chúng ta trên CSS in. Trong bản in, người dùng không được hưởng lợi từ menu điều hướng hoặc phần chân trang. Hãy loại bỏ chúng trong phiên bản in

@media print {

  #nav,
  #about {
    display: none;
  }

}

(Bạn có thể cần điều chỉnh các bộ chọn ở trên để phù hợp với nhu cầu của mình. )

Tất cả những thứ này được kết hợp lại sẽ tạo ra một trong những giải pháp tinh tế nhất cho vấn đề “Tôi không thể in tài liệu này và tôi ghét bạn vì tất cả những gì bạn phải làm là loại bỏ phương tiện in khỏi biểu định kiểu của bạn”

@media screen {

  /* The regular stuff. */

}

@media print {

  * {
    background: #fff;
    color: #000;
  }

  html {
    font: 100%/1.5 georgia, serif;
  }

  #nav,
  #about {
    display: none;
  }

}

Thật là một cuộc nói chuyện. (Nếu bây giờ các blogger yêu thích của tôi, Mark Cuban và Guy Kawasaki, cảm thấy được khuyến khích cải thiện kiểu dáng in ấn của các trang web của họ. )

Về tôi

Tôi là Jens và tôi là trưởng nhóm kỹ thuật—hiện là quản lý về Trải nghiệm dành cho nhà phát triển tại LivePerson—đồng thời là tác giả. Tôi đã từng làm trưởng nhóm kỹ thuật cho Google, tôi gần gũi với W3C và WHATWG, đồng thời tôi viết và đánh giá sách cho O'Reilly. Tôi thích thử mọi thứ, đôi khi bao gồm cả triết học, nghệ thuật và phiêu lưu. ở đây trên meiert. com Tôi chia sẻ một số quan điểm và kinh nghiệm của mình

Nếu bạn có câu hỏi hoặc gợi ý về những gì tôi viết, vui lòng để lại nhận xét (nếu có) hoặc tin nhắn. Cảm ơn bạn

- [Người hướng dẫn] Hãy bắt đầu với kiểu in bằng cách tạo một tài liệu biểu định kiểu in bên ngoài và liên kết nó với HTML của chúng ta. Vì vậy, trình soạn thảo mà tôi đang sử dụng ở đây là VS Code, nó có sẵn từ Microsoft. Nó miễn phí. Tôi đã tiếp tục và cài đặt nó trên máy tính của mình và tôi có các tệp bài tập đang mở. Đây là trên máy tính để bàn của tôi và tôi đã mở biểu định kiểu và tài liệu html dấu chấm in của mình. Bạn luôn có thể làm cho nó nhỏ hơn một chút hoặc biến mất chỉ bằng cách nhấp vào nút này ngay tại đây để bạn có thêm một chút chỗ cho mã. Và hãy bắt đầu bằng cách xem mã và tôi sẽ bắt đầu ở dòng số tám ngay tại đây. Vì vậy, rõ ràng đây là liên kết, HTML liên kết đến tài liệu biểu định kiểu của chúng tôi được hiển thị ở đây, bên phải màn hình. Như bạn có thể thấy với dòng mã cụ thể này, không có thuộc tính phương tiện bên trong dòng số tám. Thuộc tính phương tiện cho biết phương tiện nào phù hợp để sử dụng với biểu định kiểu này. Và theo mặc định chỉ có bốn giá trị. Chúng bao gồm màn hình, bản in, tất cả hoặc bằng miệng khi nghe. Và hôm nay chúng ta sẽ không nói về truyền miệng mà sẽ nói về màn hình, bản in và tất cả. Khi không có phương tiện nào được chỉ định ở đây trong dòng mã này, thì đó là biểu định kiểu áp dụng cho tất cả phương tiện. Vì vậy, về cơ bản, chúng tôi có một tài liệu ở đây ngay bây giờ và nó được thiết lập theo cách mà có lẽ nhiều người đang phát triển ngay bây giờ. Nó là một biểu định kiểu tất cả các mục đích. Vì vậy, nếu chúng ta tiếp tục và chỉ cần bật cái này bên trong trình duyệt web thật nhanh và đây là Chrome và hãy xem nó. Tôi xin lỗi, Nó thực sự, thực sự xấu nhưng điều này làm cho tất cả những điểm mà tôi cần phải thực hiện rất, rất nhanh. Và rõ ràng đây là giao diện của nó trên màn hình. Nếu tôi cố in cái này, nó khá đơn giản để thực hiện trong Chrome. Chuyển đến ba dấu chấm ở bên phải màn hình, chọn in và nó sẽ cung cấp cho bạn bản xem trước bản in của tài liệu cụ thể đó. Và như bạn có thể thấy ở đây, nó sẽ được in với nền trắng và chữ màu vàng. Bây giờ tại sao một nền trắng? . Chà, phải có một số loại biểu định kiểu mặc định hoặc một số loại biểu định kiểu ở đâu đó đang ghi đè lên nền màu xanh lam đó và làm cho nó có màu trắng để in nhưng nó không hoạt động tương tự đối với văn bản. Có thể là chúng tôi thực sự muốn văn bản có màu được in ra nhưng màu vàng có lẽ là một lựa chọn thực sự tồi đối với tài liệu có độ dài này. Vì vậy, hãy tiếp tục và thiết lập biểu định kiểu in đầu tiên của chúng ta bằng biểu định kiểu in bên ngoài. Chúng tôi sẽ chỉ mất một giây để viết và kiểm tra. Vì vậy, nếu chúng ta quay lại Mã VS, những gì tôi sẽ làm ở đây trên CSS dấu chấm kiểu của tôi. Tôi sẽ truy cập tệp, lưu dưới dạng và tôi sẽ gọi CSS dấu chấm in này cho biết đây là . Sau đó, tôi có thể tiếp tục và đặt các ghi đè mà tôi muốn cho tài liệu cụ thể của mình. Vì vậy, tôi không nhất thiết muốn ghi đè họ phông chữ của mình vào thời điểm này, nhưng màu nền phải thay đổi. Giả sử nó có màu trắng thay vì màu xanh đậm. Và đối với bài báo, tất cả những thứ đó đều có màu xám nhưng đối với màu của văn bản, tôi muốn nó có màu đen. Tuyệt vời. Hãy tiếp tục và lưu nó. Và sau đó hãy tiếp tục và áp dụng điều này vào tài liệu của chúng ta. Tôi chỉ có thể sao chép dòng mã. Họ đang trực tuyến tám trong HTML, dán phiên bản mới của nó ở đây trên dòng chín. Hãy thay đổi kiểu chấm CSS để in dấu chấm CSS. Rel bằng biểu định kiểu và sau đó chúng ta cần thêm vào đây, phương tiện của chúng ta bằng trích dẫn, in. cứ thế. Và nếu chúng tôi lưu HTML của mình, chúng tôi có thể quay lại tài liệu Chrome của mình tại đây, làm mới trang và quay lại in lần nữa. Và bạn sẽ thấy ở đây trong bản xem trước bản in của chúng tôi rằng bây giờ chúng tôi có nền trắng đẹp với văn bản màu đen. Và rõ ràng là tài liệu thông thường của chúng ta trên màn hình trông không giống như vậy. Nó trông tuyệt vời mặc dù khi in và đó là cách bạn có thể thực hiện để tạo một biểu định kiểu in bên ngoài cho dự án của mình