Làm cách nào để kiểm tra CSS in?

Ít người in các trang web. Hầu hết các trang web đều hoạt động tốt trên thiết bị di động và giá mực máy in có thể khiến một tỷ phú nhăn mặt. Điều đó nói rằng, có những trường hợp in ấn hữu ích

• vé cho du lịch hoặc các sự kiện
• hướng dẫn tuyến đường và thời gian biểu
• lưu một trang để đọc sau
• truy cập thông tin ở những khu vực không có kết nối
• truy cập dữ liệu trong điều kiện nguy hiểm hoặc bẩn
• tạo đầu ra cho sự hợp tác giữa người với người
• xuất nội dung nháp cho chú thích bằng văn bản
• biên nhận sổ sách kế toán
• cung cấp nội dung cho những người gặp khó khăn khi sử dụng màn hình

Ngay cả khi bạn không xuất ra giấy, việc in một trang thành tài liệu PDF thường rất hữu ích, do đó, tài liệu này khả dụng khi ngoại tuyến

Thật không may, in ấn có thể là một trải nghiệm khó chịu trên nhiều trang web

• văn bản quá nhỏ, quá lớn hoặc có màu quá nhạt
• cột quá hẹp, quá rộng hoặc tràn lề
• các phần bị cắt hoặc biến mất hoàn toàn
• nội dung không cần thiết như biểu tượng, menu và quảng cáo được xuất ra
• hình nền và hình ảnh không cần thiết gây lãng phí mực in
• khoảng trống lớn giấy thải
• thông tin bị thiếu, chẳng hạn như URL liên kết

Một số trang web cung cấp các tệp PDF có thể tải xuống thay thế nhưng

1. Đó là một nỗ lực phát triển đáng kể. Bạn đang xuất bản cùng một nội dung hai lần, vì vậy, tốt nhất nên cân nhắc nội dung này cho các bài báo kỹ thuật có hình minh họa phức tạp
2. Hầu hết các nhà xuất bản giảm bớt công việc này bằng cách in các trang web thành PDF. Các vấn đề về bố cục tương tự có thể phát sinh và về cơ bản là vô nghĩa, vì các trình duyệt hiện đại có thể lưu các tệp PDF

Không cần tạo tệp PDF nếu bạn áp dụng kiểu in CSS cho trang web của mình. Việc đảm bảo tất cả các trang đều thân thiện với máy in có thể là một thách thức, nhưng có thể cải thiện đầu ra giấy và PDF của bạn với nỗ lực trong vài giờ

Thêm biểu định kiểu máy in

Áp dụng CSS in trên các kiểu màn hình hiện tại của bạn là cách dễ nhất để bắt đầu. Nói cách khác, sử dụng kiểu màn hình làm cơ sở nhưng ghi đè chúng khi cần thiết — chẳng hạn như sử dụng cỡ chữ phù hợp hơn

Thêm biểu định kiểu phương tiện

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

1 mới sau các kiểu màn hình hiện tại của bạn

Các kiểu trong

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

2 được áp dụng ngoài

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

3 khi in trang

Bạn cũng có thể bao gồm các kiểu in trong các tệp CSS hiện có bằng cách sử dụng truy vấn

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

4

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

Nếu kiểu màn hình của bạn yêu cầu quá nhiều giá trị ghi đè, bạn có thể tách kiểu màn hình và kiểu in của mình để cả hai đều bắt đầu từ giá trị mặc định của trình duyệt

Bạn cũng có thể áp dụng các kiểu chỉ dành cho màn hình bằng truy vấn

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

4

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

Cách kiểm tra kiểu máy in

Không cần chặt cây phá sản bằng cách mua mực in khi test đầu ra máy in. Mô phỏng in có sẵn trong DevTools của trình duyệt (

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

6,

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

7 +

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

8 +

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

9 hoặc

30 +

31 +

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

9 trên Mac OS)

Các trình duyệt dựa trên Chromium như Chrome, Edge, Opera, Vivaldi và Brave cung cấp bảng Kết xuất (nhấp vào menu 3 chấm). Cuộn xuống Mô phỏng loại phương tiện CSS và chọn In

Trong Firefox, nhấp vào biểu tượng Chuyển đổi phương tiện in trong phần kiểu của bảng Thanh tra

Giả lập không hoàn hảo nhưng nó giúp định kiểu phông chữ, màu sắc và khối. Các trang và dấu ngắt không được mô phỏng, do đó, Print Preview (

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

7/

30 +

35) của trình duyệt của bạn là tùy chọn thiết thực nhất. Bạn có thể xuất PDF nếu cần kiểm tra chi tiết hơn

Ẩn nội dung không cần thiết

Bắt đầu bằng cách xóa bất kỳ nội dung nào không cần thiết trên trang in. Sử dụng

36 trong CSS in của bạn để xóa và thu gọn tiêu đề, menu điều hướng, biểu mẫu, trình phát video, trình phát âm thanh, thanh bên, quảng cáo, v.v.

3

Đừng ngại sử dụng

37 nếu cần thiết. Các nhà phát triển CSS thường tránh sử dụng

38 vì nó có thể dẫn đến các vấn đề về tính đặc hiệu nhưng việc áp dụng nó trong các kiểu in dưới dạng ghi đè cuối cùng sẽ không gây ra sự cố

Đơn giản hóa bố cục của bạn

Các trình duyệt hiện đại rất tốt trong việc in bố cục dạng lưới và flexbox, nhưng một số thiết kế sẽ khó khăn hơn những thiết kế khác. Trừ khi bạn đang thử một bố cục giống tạp chí phức tạp, nếu không thì việc tuyến tính hóa nội dung sẽ dễ dàng hơn, vì vậy nó hoạt động trên mọi khổ giấy

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

3

Bạn có thể áp dụng các cột CSS nếu điều này dẫn đến các dòng văn bản quá dài

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

4

Văn bản sẽ chảy vào các cột khi không gian cho phép. Hai cột được hiển thị trên giấy với ít nhất 18cm khoảng cách ngang có thể in được. Văn bản ở dưới cùng của cột bên trái trên một trang tiếp tục ở trên cùng của cột bên phải trên cùng một trang — bất kể có bao nhiêu trang được xuất ra

Áp dụng kiểu dáng thân thiện với máy in

Bạn thường in văn bản tối màu trên giấy trắng. Các trình duyệt thường cố gắng đảo ngược ánh sáng trên các thiết kế tối và ẩn hình nền, nhưng không có hại gì khi thêm phần ghi đè một cách rõ ràng

Cũng xem xét

1. sử dụng phông chữ serif có thể dễ đọc hơn trên giấy
2. đảm bảo kích thước văn bản đủ lớn và
3. áp dụng các đơn vị trong thế giới thực như
   39,

   /* screen styles */
   @media screen {
   
     body {
       font-size: 1em;
       color: white;
       background-color: black;
       margin: 2em;
     }
   
   }
   
   /* print styles */
   @media print {
   
     body {
       font-size: 16px;
       color: black;
       background-color: white;
       margin: 0;
     }
   
   }

   30,

   /* screen styles */
   @media screen {
   
     body {
       font-size: 1em;
       color: white;
       background-color: black;
       margin: 2em;
     }
   
   }
   
   /* print styles */
   @media print {
   
     body {
       font-size: 16px;
       color: black;
       background-color: white;
       margin: 0;
     }
   
   }

   31 và

   /* screen styles */
   @media screen {
   
     body {
       font-size: 1em;
       color: white;
       background-color: black;
       margin: 2em;
     }
   
   }
   
   /* print styles */
   @media print {
   
     body {
       font-size: 16px;
       color: black;
       background-color: white;
       margin: 0;
     }
   
   }

   32 khi thích hợp

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

9

Các khối màu nền đồng nhất cũng gây lãng phí mực và làm cho phông chữ serif khó đọc

Thay vào đó, hãy cân nhắc sử dụng đường viền

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

0

(Các thuộc tính

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

33 và

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

34 là không cần thiết nếu bạn đã đặt chúng trong quy tắc chọn tất cả

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

35. )

Hình ảnh như biểu đồ vẫn là một phần nội dung cốt lõi của bạn; . Bạn có thể sửa đổi kiểu SVG được nhúng trực tiếp vào trang HTML

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

4

CSS in có thể đặt trọng lượng, màu sắc và kích thước phù hợp hơn

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

0

Điều này là không thể khi sử dụng hình ảnh SVG hoặc bitmap (JPG, PNG, GIF, webp, v.v. ) trong thẻ HTML

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

36 tiêu chuẩn

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

1

Tuy nhiên, thuộc tính CSS

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

37 có thể áp dụng các hiệu ứng tương tự như trong các ứng dụng đồ họa như Photoshop và GIMP. Đoạn mã sau

1. đảo ngược tất cả các màu, vì vậy màu đen trở thành màu trắng và màu trắng trở thành màu đen (giống như âm bản của một bức ảnh cũ)
2. sử dụng

   /* screen styles */
   @media screen {
   
     body {
       font-size: 1em;
       color: white;
       background-color: black;
       margin: 2em;
     }
   
   }
   
   /* print styles */
   @media print {
   
     body {
       font-size: 16px;
       color: black;
       background-color: white;
       margin: 0;
     }
   
   }

   38 để đặt các màu không phải màu xám trở lại màu đỏ, xanh lá cây và xanh lam ban đầu của chúng và
3. áp dụng một chút

   /* screen styles */
   @media screen {
   
     body {
       font-size: 1em;
       color: white;
       background-color: black;
       margin: 2em;
     }
   
   }
   
   /* print styles */
   @media print {
   
     body {
       font-size: 16px;
       color: black;
       background-color: white;
       margin: 0;
     }
   
   }

   39 và

   /* screen styles */
   @media screen {
   
     body {
       font-size: 1em;
       color: white;
       background-color: black;
       margin: 2em;
     }
   
   }
   
   /* print styles */
   @media print {
   
     body {
       font-size: 16px;
       color: black;
       background-color: white;
       margin: 0;
     }
   
   }

   40 khi cần thiết

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

2

Kết quả, khi được in, trông đẹp hơn và sử dụng ít mực hơn đáng kể

Thêm nội dung chỉ in

Bạn không thể nhấp hoặc vuốt các trang đã in, vì vậy việc tạo kiểu liên kết là không thực tế. Tuy nhiên, bạn có thể nối thêm URL của liên kết vào nội dung bằng phần tử giả

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

3

Nội dung của bất kỳ thuộc tính nào cũng có thể được xuất ra theo cách tương tự, nhưng có thể thực tế hơn nếu thêm HTML được ẩn cho đến khi nó được in ra, ví dụ:. g

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

4

CSS

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

5

Phương pháp này có thể được mở rộng để áp dụng hình mờ cho mọi trang in

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

6

Sử dụng

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

41 và một chút kiểu dáng sẽ tạo hình mờ ở giữa trên mỗi trang in

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

7

Kết quả

Người dùng có thể xóa phần này khỏi DOM bằng DevTools trước khi in, nhưng chúng ta sẽ thảo luận cách giải quyết vấn đề đó bên dưới

Phát lại phiên mã nguồn mở

OpenReplay là bộ phát lại phiên mã nguồn mở cho phép bạn xem những gì người dùng làm trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn

Bắt đầu tận hưởng trải nghiệm sửa lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí

Đặt kích thước trang

Quy tắc

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

42 có thể thay đổi kích thước của trang tùy thuộc vào vị trí nó xuất hiện trong thứ tự in. Tốt nhất là tối đa hóa số lượng nội dung trên mỗi trang, nhưng có thể cần áp dụng lề cho ràng buộc hoặc chú thích

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

8

Kiểm soát ngắt trang

Các trình duyệt thường áp dụng các ngắt trang và cột hợp lý, nhưng bạn có thể thấy các tiêu đề ở cuối trang hoặc hình ảnh bị chia thành hai trang

CSS cho phép kiểm soát ngắt trang, nhưng trình duyệt bị giới hạn bởi kích thước của trang. nó không thể luôn tránh hoặc buộc phải nghỉ. Bạn cũng nên cảnh giác với việc lạm dụng ngắt trang và lãng phí giấy không cần thiết

Các thuộc tính sau đây đều dành riêng cho bản in, vì vậy chúng có thể được thêm vào biểu định kiểu màn hình của bạn không. Tôi khuyên bạn nên giữ chúng in CSS để đảm bảo chúng có thuộc tính liên quan và dễ bảo trì hơn

Các thuộc tính

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

43 và

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

44 cho phép bạn đề xuất nơi xảy ra ngắt liên quan đến một phần tử cụ thể. Cả hai chấp nhận cùng một giá trị

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  45. mặc định - được phép nghỉ nhưng không bắt buộc

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  46. tránh ngắt trang hoặc cột

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  47. tránh ngắt trang

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  48. tránh gãy cột

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  49. buộc phá vỡ cột

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  90. buộc ngắt trang

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  91. buộc ngắt một hoặc hai trang, vì vậy trang tiếp theo là trang bên trái

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  92. buộc ngắt một hoặc hai trang để trang tiếp theo là trang bên phải

Ví dụ: bạn có thể đặt mọi tiêu đề

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

93 ở đầu trang mới

/* standard body styles */
body {
  font-size: 1em;
  color: white;
  background-color: black;
  margin: 2em;
}

/* print overrides */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

9

Hoặc tạo khoảng nghỉ sau mỗi

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

94

0

Hoặc tránh ngắt trang ngay sau tiêu đề để đảm bảo đoạn sau nằm trên cùng một trang

1

Thuộc tính

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

95 kiểm soát việc ngắt có thể xảy ra bên trong một phần tử hay không. Các giá trị thường được hỗ trợ là

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  45. mặc định - được phép nghỉ nhưng không bắt buộc

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  46. tránh ngắt trang hoặc ngắt cột

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  47. tránh ngắt trang

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  48. tránh gãy cột

Lý tưởng nhất là các phần tử hình ảnh không bao giờ được chia nhỏ

2

Một

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

94 hẹp có thể bao bọc các cột nhưng không bao phủ các trang

3

Thuộc tính

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

01 xác định số lượng dòng văn bản tối thiểu để hiển thị trong một khối ở đầu trang

Ví dụ: giả sử một đoạn văn có năm dòng văn bản. Nếu trình duyệt muốn ngắt trang sau dòng thứ tư, một dòng duy nhất sẽ xuất hiện ở đầu trang tiếp theo. Nếu bạn khai báo CSS sau

4

Trình duyệt sẽ cố gắng đảm bảo rằng có ít nhất ba dòng chuyển sang trang tiếp theo. Nếu có thể, nó sẽ tạo ra một dấu ngắt sau dòng văn bản thứ hai

Thuộc tính

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

02 cũng tương tự, nhưng nó đặt số lượng dòng tối thiểu được hiển thị ở cuối trang. Cả hai thuộc tính đều được hỗ trợ trong tất cả các trình duyệt ngoại trừ Firefox

Cuối cùng, thuộc tính

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

03 xác định cách hiển thị đường viền trên một phần tử riêng lẻ khi xảy ra ngắt trang bên trong

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  04. chia nhỏ bố cục (mặc định). Đường viền trên cùng được hiển thị trên một trang, trong khi đường viền dưới cùng được hiển thị trên trang sau

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  05. sao chép lề, đệm và đường viền. Cả hai đường viền trên và dưới đều được hiển thị trên cả hai trang

Truy vấn Phương tiện Bố cục In Nâng cao

Truy vấn phương tiện CSS có sẵn để in cũng như đầu ra màn hình. Bạn có thể tự nhiên và áp dụng các kiểu khác nhau cho chiều rộng giấy bằng cách sử dụng các giá trị

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

06. Tuy nhiên, việc chuyển đổi giữa kiểu dọc và kiểu ngang sẽ giúp trang web của bạn vượt qua đối thủ cạnh tranh

5

Kiểm soát in nâng cao trong JavaScript

Không khó để tìm thấy tùy chọn In trong trình duyệt của bạn hoặc nhấn

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

7/

30 +

35, nhưng một số người dùng có thể cần được hướng dẫn thêm. Bạn có thể kích hoạt in bằng phương thức JavaScript

6

Do đó, bạn có thể thêm bất kỳ số lượng nút in nào để kích hoạt hộp thoại máy in khi nhấp vào

7

Bạn cũng muốn đảm bảo các nút in không được in bằng cách ẩn chúng trong CSS

8

Trình duyệt cũng cung cấp hai sự kiện liên quan đến in

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  40. được kích hoạt khi tài liệu sắp được in hoặc xem trước

• /* screen styles */
  @media screen {
  
    body {
      font-size: 1em;
      color: white;
      background-color: black;
      margin: 2em;
    }
  
  }
  
  /* print styles */
  @media print {
  
    body {
      font-size: 16px;
      color: black;
      background-color: white;
      margin: 0;
    }
  
  }

  41. được kích hoạt khi tài liệu đã bắt đầu in hoặc bản xem trước bị đóng

Những thứ này cho phép bạn sửa đổi tài liệu trước và sau khi in. Mặc dù CSS in được ưu tiên hơn, nhưng các sự kiện cho phép thêm nội dung động — chẳng hạn như thông tin đăng nhập của người dùng hoặc thời gian in

9

Văn bản như sau sẽ xuất hiện ở cuối trang in cuối cùng

/* screen styles */
@media screen {

  body {
    font-size: 1em;
    color: white;
    background-color: black;
    margin: 2em;
  }

}

/* print styles */
@media print {

  body {
    font-size: 16px;
    color: black;
    background-color: white;
    margin: 0;
  }

}

0

Bạn có thể sử dụng phương pháp này để thêm thông báo bản quyền, chẳng hạn như hình mờ ở trên. Người dùng sẽ không thể xóa văn bản khỏi DOM trước khi in vì nó không tồn tại. Họ có thể chỉnh sửa hoặc vô hiệu hóa JavaScript, nhưng đó là một đề xuất khó khăn hơn

Phần kết luận

Việc tạo các trang web thân thiện với máy in sẽ thêm một số phức tạp và kết quả sẽ khác nhau giữa các trang web, trình duyệt và thiết bị. Tuy nhiên, bạn có thể xác định kiểu in bất kỳ lúc nào, hỗ trợ trình duyệt tốt, mã của bạn không thể phá vỡ CSS hiện có, không mất nhiều thời gian và có thể thú vị

Nó có thể không nằm ở đầu danh sách ưu tiên của bạn, nhưng một số kiểu in sẽ giúp ích cho người dùng và thêm một mức độ bóng bẩy mà các trang web khác hiếm khi nhận được

MẸO TỪ NGƯỜI BIÊN TẬP. CSS luôn là một chủ đề phù hợp với các nhà phát triển web, vì vậy đừng bỏ lỡ các bài viết như Bóng đổ trong CSS, Tìm hiểu về định vị CSS hoặc Bộ chọn CSS hiện đại

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

Công cụ dành cho nhà phát triển. DevTools ( 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, mở Công cụ dành cho nhà phát triển và chọn Công cụ khác, sau đó chọn 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 đó.

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

Biểu định kiểu in định dạng trang web sao cho khi được in, trang này sẽ tự động in ở định dạng thân thiện với người dùng . Đây là những gì bạn cần biết. Bản định kiểu in đã xuất hiện trong một số năm và đã được viết nhiều về.

Phương tiện in trong CSS là gì?

Bạn có thể sử dụng CSS để thay đổi giao diện của trang web khi được in trên giấy . Bạn có thể chỉ định một phông chữ cho phiên bản màn hình và một phông chữ khác cho phiên bản in. Bạn đã thấy quy tắc @media trong các chương trước. Quy tắc này cho phép bạn chỉ định kiểu khác nhau cho các phương tiện khác nhau.