Máy in nhãn css
|
Bắt đầu bằng cách bao gồm CSS và JavaScript sẵn sàng sản xuất của Bootstrap thông qua CDN mà không cần bất kỳ bước xây dựng nào. Xem nó trong thực tế với bản demo Bootstrap CodePen này Show
Để tham khảo, đây là các liên kết CDN chính của chúng tôi Mô tảURLCSS Bạn cũng có thể sử dụng CDN để tìm nạp bất kỳ bản dựng bổ sung nào của chúng tôi được liệt kê trong trang Nội dung Bước tiếp theothành phần JSTò mò không biết thành phần nào yêu cầu JavaScript và Popper của chúng tôi một cách rõ ràng? . Nếu bạn hoàn toàn không chắc chắn về cấu trúc trang chung, hãy tiếp tục đọc mẫu trang mẫu Hiển thị các thành phần yêu cầu JavaScript
Toàn cầu quan trọngBootstrap sử dụng một số kiểu và cài đặt toàn cầu quan trọng, tất cả đều hầu như chỉ hướng đến việc chuẩn hóa các kiểu trình duyệt chéo. Hãy đi sâu vào loại tài liệu HTML5Bootstrap yêu cầu sử dụng loại tài liệu HTML5. Không có nó, bạn sẽ thấy một số kiểu dáng ngộ nghĩnh và không đầy đủ Bootstrap được phát triển trên thiết bị di động trước, một chiến lược trong đó chúng tôi tối ưu hóa mã cho thiết bị di động trước rồi sau đó mở rộng quy mô các thành phần khi cần bằng truy vấn phương tiện CSS. Để đảm bảo hiển thị phù hợp và thu phóng cảm ứng cho tất cả các thiết bị, hãy thêm thẻ meta chế độ xem đáp ứng vào của bạn Bạn có thể xem một ví dụ về điều này trong thực tế kích thước hộpĐể định cỡ đơn giản hơn trong CSS, chúng tôi chuyển giá trị toàn cầu Trong trường hợp hiếm hoi, bạn cần ghi đè lên nó, hãy sử dụng một cái gì đó như sau Với đoạn mã trên, các phần tử lồng nhau—bao gồm cả nội dung được tạo thông qua Tìm hiểu thêm về mô hình hộp và kích thước tại Thủ thuật CSS khởi động lạiĐể cải thiện khả năng hiển thị trên nhiều trình duyệt, chúng tôi sử dụng Khởi động lại để sửa lỗi không nhất quán giữa các trình duyệt và thiết bị đồng thời cung cấp các cài đặt lại có chủ ý hơn một chút cho các thành phần HTML phổ biến Luôn cập nhật về sự phát triển của Bootstrap và tiếp cận cộng đồng với những tài nguyên hữu ích này “Ai in các trang web?” . Tương đối ít trang sẽ được sao chép trên giấy. Nhưng xem xét
Thật không may, các trang in có thể là một trải nghiệm khó chịu
Nhiều nhà phát triển ủng hộ khả năng truy cập web, nhưng ít người nhớ làm cho web in có thể truy cập được Chuyển đổi phương tiện liên tục, đáp ứng thành giấy phân trang ở mọi kích thước và hướng có thể là một thách thức. Tuy nhiên, kiểm soát in CSS đã có thể thực hiện được trong nhiều năm và một biểu định kiểu cơ bản có thể được hoàn thành trong vòng vài giờ. Các phần sau đây mô tả các tùy chọn thiết thực và được hỗ trợ tốt để làm cho các trang của bạn thân thiện với máy in In biểu định kiểuCSS in có thể là
Lựa chọn sẽ tùy thuộc vào trang web/ứng dụng của bạn. Cá nhân tôi hầu hết thời gian sử dụng các kiểu màn hình làm cơ sở in. Tuy nhiên, tôi đã sử dụng các biểu định kiểu riêng cho các ứng dụng có kết quả đầu ra hoàn toàn khác nhau — chẳng hạn như hệ thống đăng ký phiên họp hội nghị hiển thị lưới thời gian biểu trên màn hình nhưng lịch trình theo thứ tự thời gian trên giấy Một biểu định kiểu in có thể được thêm vào HTML Kiểu Để tách màn hình và phương tiện in, Ngoài ra, các kiểu in có thể được bao gồm trong tệp CSS hiện có bằng quy tắc Bất kỳ số lượng quy tắc Kiểm tra đầu ra máy inKhông cần phải chặt cây và sử dụng loại mực cực kỳ đắt tiền mỗi khi bạn muốn kiểm tra bố cục bản in của mình. Các tùy chọn sau sao chép các kiểu in trên màn hình Xem thử bản inTùy chọn đáng tin cậy nhất là tùy chọn xem trước bản in trong trình duyệt của bạn. Điều này cho thấy cách ngắt trang sẽ được xử lý bằng khổ giấy mặc định của bạn Ngoài ra, bạn có thể lưu hoặc xem trước trang bằng cách xuất thành PDF Những công cụ phát triểnDevTools (F12 hoặc Cmd/Ctrl + Shift + I) có thể mô phỏng các kiểu in, mặc dù ngắt trang sẽ không được hiển thị Trong Chrome, hãy mở Công cụ dành cho nhà phát triển và chọn Công cụ khác, sau đó Kết xuất từ menu biểu tượng ba chấm ở trên cùng bên phải. Thay đổi Phương tiện giả lập CSS để in ở cuối bảng điều khiển đó Trong Firefox, hãy mở Công cụ dành cho nhà phát triển và nhấp vào biểu tượng Chuyển đổi mô phỏng phương tiện in trên ngăn kiểu của tab Trình kiểm tra Hack thuộc tính phương tiện của bạnGiả sử bạn đang sử dụng thẻ Một lần nữa, điều này sẽ không tiết lộ ngắt trang. Đừng quên khôi phục thuộc tính thành Xóa các phần không cần thiếtTrước khi làm bất cứ điều gì khác, hãy xóa và thu gọn nội dung dư thừa bằng Có thể cần sử dụng Tuyến tính hóa bố cụcTôi rất tiếc khi phải nói điều này, nhưng Flexbox và Grid hiếm khi hoạt động tốt với bố cục máy in trong bất kỳ trình duyệt nào. Nếu bạn gặp sự cố, hãy cân nhắc sử dụng Kiểu máy inGiờ đây, kiểu dáng thân thiện với máy in có thể được áp dụng. khuyến nghị
Các đề xuất khác bao gồm… Áp dụng các cột CSSGiấy A4 và US Letter tiêu chuẩn có thể dẫn đến các dòng văn bản dài hơn và khó đọc hơn. Cân nhắc sử dụng các cột CSS trong bố cục in. Ví dụ Trong ví dụ này, các cột sẽ được tạo khi có ít nhất 225 khoảng cách theo chiều ngang. Không cần đặt truy vấn phương tiện; Sử dụng đường viền thay vì màu nềnMẫu của bạn có thể có các phần hoặc hộp gọi ra được biểu thị bằng cách phối màu tối hơn hoặc ngược lại Tiết kiệm mực bằng cách biểu thị các phần tử đó bằng đường viền Xóa hoặc đảo ngược hình ảnhNgười dùng sẽ không muốn in hình ảnh và hình nền trang trí và không cần thiết. Bạn có thể xem xét một mặc định trong đó tất cả các hình ảnh được ẩn trừ khi chúng có lớp Tốt nhất, hình ảnh in nên sử dụng màu tối trên nền sáng. Có thể thay đổi màu SVG nhúng HTML trong CSS, nhưng sẽ có trường hợp bạn có ảnh bitmap tối hơn Bộ lọc CSS có thể được sử dụng để đảo ngược và điều chỉnh màu sắc trong biểu định kiểu in. Ví dụ Kết quả Thêm nội dung bổ sungPhương tiện in thường yêu cầu thông tin bổ sung không cần thiết trên màn hình. Thuộc tính CSS Hoặc bạn có thể thêm tin nhắn chỉ in Đối với các tình huống phức tạp hơn, hãy cân nhắc sử dụng một lớp chẳng hạn như CSS Ghi chú. hầu hết các trình duyệt hiển thị URL và ngày/giờ hiện tại trên đầu trang và/hoặc chân trang của trang in, do đó hiếm khi cần phải tạo thông tin này bằng mã ngắt trangCác thuộc tính CSS3 Có thể sử dụng các giá trị
Ví dụ. buộc ngắt trang ngay trước bất kỳ tiêu đề Ghi chú. cảnh giác với việc sử dụng quá nhiều ngắt trang. Tốt nhất, đầu ra của máy in nên sử dụng càng ít trang càng tốt Thuộc tính ________ 306 (và ________ 307 cũ hơn) chỉ định xem có cho phép ngắt trang bên trong một phần tử hay không. Các giá trị thường được hỗ trợ
Điều này có thể thích hợp hơn để chỉ định ngắt trang, vì bạn có thể sử dụng ít giấy nhất có thể trong khi tránh ngắt trang trong dữ liệu được nhóm như bảng hoặc hình ảnh Thuộc tính Thuộc tính Thuộc tính
Cuối cùng, CSS Paged Media ( Các thuộc tính ngắt trang CSS có thể được đặt trong các kiểu Xin lưu ý rằng kiểm soát ngắt trang không chỉ là một gợi ý cho trình duyệt. Không có gì đảm bảo việc ngắt quãng sẽ bị ép buộc hoặc tránh được vì bố cục bị giới hạn trong giới hạn của tờ giấy Nỗi đau in ấnKiểm soát phương tiện web in sẽ luôn bị hạn chế và kết quả có thể khác nhau giữa các trình duyệt. Mà nói
Thêm một vài ngắt trang và loại bỏ các phần không cần thiết sẽ làm hài lòng người dùng và nâng trang web của bạn lên trên đối thủ cạnh tranh. Thêm nó vào danh sách việc cần làm của bạn Để có thêm kiến thức CSS nâng cao, hãy đọc cuốn sách của chúng tôi, CSS Master, Phiên bản 2 Chia sẻ bài viết nàyCraig Buckler Craig là một nhà tư vấn web tự do ở Vương quốc Anh, người đã xây dựng trang đầu tiên của mình cho IE2. 0 vào năm 1995. Kể từ thời điểm đó, anh ấy đã ủng hộ các tiêu chuẩn, khả năng truy cập và các kỹ thuật HTML5 thực hành tốt nhất. Anh ấy đã tạo các thông số kỹ thuật doanh nghiệp, trang web và ứng dụng trực tuyến cho các công ty và tổ chức bao gồm Nghị viện Vương quốc Anh, Nghị viện Châu Âu, Bộ Năng lượng & Biến đổi Khí hậu, Microsoft, v.v. Anh ấy đã viết hơn 1.000 bài báo cho SitePoint và bạn có thể tìm thấy anh ấy @craigbuckler |
