Hướng dẫn how do i view print css in firefox? - làm cách nào để xem css in trong firefox?

Bạn có thể kiểm tra và chỉnh sửa CSS trong ngăn Thanh tra CSS.CSS pane.

Kiểm tra các quy tắc CSS¶

Chế độ xem quy tắc liệt kê tất cả các quy tắc áp dụng cho phần tử đã chọn, được đặt hàng từ cụ thể nhất đến ít cụ thể nhất:Rules view lists all the rules that apply to the selected element, ordered from most-specific to least-specific:

Sáu nút ở phía trên bên phải của chế độ xem quy tắc cho phép bạn thay đổi màn hình của các tính năng xem CSS và quy tắc nhất định. Bạn có thể:

• Chuyển đổi lớp giả;;

• Chuyển đổi các lớp học

• Thêm một quy tắc mới;

• Thay đổi màn hình dựa trên các quy tắc truyền thông màu-màu.prefers-color-scheme media rules.

• Thay đổi màn hình dựa trên các quy tắc truyền thông in.print media rules.

Cảnh báo giá trị không hợp lệ

Một biểu tượng cảnh báo xuất hiện bên cạnh các thuộc tính hoặc quy tắc CSS không được hỗ trợ có các giá trị không hợp lệ. Điều này có thể giúp bạn hiểu tại sao một số kiểu nhất định không được áp dụng. Trong ví dụ sau, một lỗi chính tả, màu nền màu, thay vì màu nền màu sắc đã làm cho quy tắc không hợp lệ:

Cảnh báo trình duyệt compat.

Các thuộc tính CSS có mức hỗ trợ khác nhau trên các trình duyệt khác nhau. Từ Firefox 81, các công cụ tương thích có thể được hiển thị bên cạnh bất kỳ thuộc tính CSS nào đã biết các vấn đề tương thích, như được hiển thị bên dưới.

Ghi chú

Tính năng này được kích hoạt từ Firefox 81 bằng cách đặt ưu tiên devtools.inspector.ruleview.inline-compatibility-warning.enabled thành true (mở about:config trong thanh URL để xem/đặt các tùy chọn Firefox).

Các chú giải công cụ, được phổ biến từ dự án tương thích trình duyệt MDN, xác định lý do không tương thích (không được hỗ trợ, không dùng nữa, thử nghiệm, v.v.), hiển thị các biểu tượng cho các trình duyệt không tương thích và cung cấp liên kết đến trang thuộc tính liên quan để biết thêm thông tin.

Khả năng tương thích CSS

Ngoài các công cụ tương thích, chế độ xem tương thích CSS hiển thị bất kỳ vấn đề tương thích CSS nào cho cả phần tử đã chọn và cho trang hiện tại (nói chung).

Để biết thêm thông tin, xem: Thanh tra trang> Chế độ xem tương thích CSS.Page Inspector > CSS Compatibility View.

Hiển thị quy tắc

Nó hiển thị từng quy tắc như trong một bảng kiểu, với một danh sách các bộ chọn theo sau là danh sách các khai báo property:value;.

• Điểm nổi bật các yếu tố phù hợp: Bên cạnh bộ chọn là biểu tượng đích: Nhấp vào điều này để làm nổi bật tất cả các nút trong trang phù hợp với bộ chọn này.

• Tuyên bố ghi đè: Các khai báo được ghi đè bởi các quy tắc sau này được bỏ qua. Xem khai báo ghi đè.overridden declarations.

• Các quy tắc không hoạt động (không được hiển thị): Nếu một quy tắc không hoạt động (ví dụ: padding trên phần tử giả ____99), nó có màu xám, với biểu tượng thông tin cung cấp thêm thông tin khi nhấp.

• Các quy tắc bộ lọc chứa thuộc tính này: Bên cạnh khai báo ghi đè là biểu tượng bạn có thể nhấp để lọc danh sách quy tắc để chỉ hiển thị các quy tắc bao gồm thuộc tính đó. Xem khai báo ghi đè.overridden declarations.

• Bật/Vô hiệu hóa: Nếu bạn di chuột qua khai báo, hộp kiểm xuất hiện bên cạnh nó: bạn có thể sử dụng điều này để bật hoặc tắt khai báo.

• Tên tệp và số dòng: Ở phía bên phải là một liên kết đến quy tắc. Xem liên kết đến tệp CSS.link to CSS file.

Nếu phần tử có màn hình hiển thị: khai báo lưới, thì nó sẽ nhận được biểu tượng lưới bên cạnh, như thế này:. Nhấp vào biểu tượng đó để hiển thị lưới được phủ lên trên trang, bao gồm các dòng lưới và bản nhạc. Xem Kiểm tra bố cục lưới để biết thêm về điều này.

Để xem các kiểu tác nhân người dùng (nghĩa là, các quy tắc CSS của trình duyệt-Default), bật Thanh tra viên> Hiển thị các kiểu trình duyệt, theo bảng điều khiển Cài đặt công cụ nhà phát triển. .developer tool settings panel. (Note that this setting is independent of the “Browser styles” checkbox in the Computed view.)

Các kiểu tác nhân người dùng được hiển thị theo một nền khác và liên kết đến tên tệp và số dòng chứa tiền tố media emulate print0:

yếu tố {} quy tắc

Quy tắc media emulate print1 ở đầu danh sách quy tắc thực sự là một quy tắc CSS. Nó đại diện cho các thuộc tính CSS được gán cho phần tử thông qua thuộc tính kiểu của nó.

Điều này cũng có được biểu tượng đích:, cung cấp cho bạn một cách thuận tiện để làm nổi bật phần tử hiện được chọn trong trang.

Lọc những nội quy¶

Có một hộp ở đầu của chế độ xem quy tắc có nhãn Phong cách bộ lọc của người Hồi giáo:

Như bạn gõ:

• Bất kỳ quy tắc nào mà don lồng đều chứa chuỗi được gõ đều được ẩn

• Bất kỳ khai báo nào chứa chuỗi được đánh dấu

Nhấp vào phần X X ở cuối hộp tìm kiếm để tháo bộ lọc.

Ghi chú

Tính năng này được kích hoạt từ Firefox 81 bằng cách đặt ưu tiên devtools.inspector.ruleview.inline-compatibility-warning.enabled thành true (mở about:config trong thanh URL để xem/đặt các tùy chọn Firefox).

Các chú giải công cụ, được phổ biến từ dự án tương thích trình duyệt MDN, xác định lý do không tương thích (không được hỗ trợ, không dùng nữa, thử nghiệm, v.v.), hiển thị các biểu tượng cho các trình duyệt không tương thích và cung cấp liên kết đến trang thuộc tính liên quan để biết thêm thông tin.

Khả năng tương thích CSS

Nếu bạn gửi kèm theo truy vấn tìm kiếm trong backticks, như thế này: màu, tìm kiếm sẽ bị giới hạn trong các trận đấu chính xác:

Mở rộng các thuộc tính tốc ký

Các thuộc tính tốc ký có thể được mở rộng để hiển thị các thuộc tính dài hạn liên quan của chúng bằng cách nhấp vào mũi tên bên cạnh chúng.

Hiển thị các yếu tố giả

Chế độ xem quy tắc hiển thị các yếu tố giả sau, nếu chúng được áp dụng cho phần tử đã chọn:

• media emulate print2

• media emulate print3

• media emulate print4

• media emulate print5

• media emulate print6

• media emulate print7

• media emulate print8

• media emulate print9

• 0

• 1

• 2

• 3

• 4

• 5

• 6

• 7

• 8

• 9

Nếu phần tử đã chọn có các yếu tố giả được áp dụng cho nó, chúng sẽ được hiển thị trước phần tử đã chọn nhưng được ẩn bởi một tam giác tiết lộ:

Nhấp vào tam giác hiển thị chúng:

Xem các lớp giả chung

Có một nút ở bên phải của hộp lọc:

Nhấp vào nút để xem các hộp kiểm mà bạn có thể sử dụng để bật: Hover,: Active và: Focus,: Focus-within,: Focus-Visible,: Đã truy cập và: Target Pseudo-Classes cho phần tử đã chọn:

Tính năng này cũng có thể được truy cập từ menu bật lên trong chế độ xem HTMLpopup menu in the HTML view

Nếu bạn kích hoạt một trong các lớp giả này cho một nút, một chấm màu cam xuất hiện trong chế độ xem đánh dấu bên cạnh tất cả các nút mà lớp giả đã được áp dụng. Ngoài ra, thông tin xuất hiện trên chính trang cho bạn thấy bạn đang kiểm tra lớp giả nào. Ví dụ:

Xem và thay đổi các lớp trên một phần tử

Với một phần tử được chọn trong ngăn HTML, bạn có thể nhấp vào nút .cls trong thanh công cụ khung quy tắc, để hiển thị các lớp được xác định trên phần tử đó..cls button in the Rules pane toolbar, to display the classes defined on that element.

• Bạn có thể xóa hộp kiểm cho một tên lớp cụ thể, để xem phần tử sẽ xuất hiện như thế nào mà không có lớp đó được áp dụng cho nó.

• Bạn có thể thêm một lớp vào phần tử bằng cách nhập tên vào trường Thêm lớp mới bên dưới thanh công cụ quy tắc. Từ Firefox 81, tự động hoàn thành dựa trên các lớp hiện có được đề xuất khi bạn gõ.

Liên kết đến tệp CSS thánh

Ở phía trên bên phải của mỗi quy tắc, tên tệp và số dòng nguồn được hiển thị dưới dạng liên kết: nhấp vào nó sẽ mở tệp trong trình chỉnh sửa kiểu.Style Editor.

Bạn có thể sao chép vị trí của tệp nguồn: Nhấp chuột phải vào liên kết và chọn Vị trí sao chép.

Thanh tra hiểu bản đồ nguồn CSS. Điều đó có nghĩa là nếu bạn đang sử dụng bộ tiền xử lý CSS có hỗ trợ cho bản đồ nguồn và bạn đã bật hỗ trợ bản đồ nguồn trong cài đặt trình soạn thảo kiểu, thì liên kết sẽ đưa bạn đến nguồn ban đầu chứ không phải CSS được tạo. Đọc thêm về hỗ trợ bản đồ nguồn CSS trong tài liệu trình soạn thảo kiểu.Style Editor settings, then the link will take you to the original source, not the generated CSS. Read more about CSS source map support in the Style Editor documentation.

Tuyên bố ghi đè

Nếu khai báo CSS bị ghi đè bởi một số quy tắc CSS khác với trọng số lớn hơn, thì tuyên bố được hiển thị với một dòng thông qua nó.

Các tuyên bố ghi đè có một kênh bên cạnh họ. Nhấp vào kênh để lọc chế độ xem quy tắc để chỉ hiển thị các quy tắc áp dụng cho nút hiện tại cố gắng đặt cùng một thuộc tính: nghĩa là tầng hoàn chỉnh cho thuộc tính đã cho.

Điều này giúp bạn dễ dàng thấy quy tắc nào đang ghi đè lên tuyên bố

Kiểm tra tính toán CSS¶

Để xem CSS được tính toán hoàn chỉnh cho phần tử đã chọn, hãy chọn bảng được tính toán trong khung bên tay. Bảng này hiển thị giá trị được tính toán mà mỗi thuộc tính CSS có cho phần tử đã chọn. (Giá trị được tính toán này hoàn toàn giống với những gì GetComputedStyle sẽ trả về.)Computed panel in the righthand pane.This panel shows the calculated value that each CSS property has for the selected element. (This calculated value is exactly the same as what getComputedStyle would return.)

Bạn có thể sử dụng thông qua Stylesto Chọn chúng và bạn có thể tìm thêm thông tin về từng thuộc tính mà nhấn F1 trên một thuộc tính đã chọn sẽ mở trang tham chiếu MDN của nó.

Nhấp vào mũi tên bên cạnh tên thuộc tính (hoặc nhấn enter hoặc không gian trong khi nó được chọn) hiển thị quy tắc đặt giá trị này, cùng với liên kết đến tên tệp và số dòng nguồn:

Theo mặc định, chế độ xem này chỉ hiển thị các giá trị đã được đặt rõ ràng bởi trang: để xem tất cả các giá trị, hãy nhấp vào hộp Kiểu trình duyệt. Bạn có thể tab thông qua các tên tệp/số dòng; Nhấn Enter/Return sẽ mở tệp có liên quan tại thời điểm đó trong trình chỉnh sửa kiểu.Style Editor.

Gõ vào hộp tìm kiếm thực hiện bộ lọc trực tiếp danh sách, vì vậy, ví dụ, nếu bạn chỉ muốn xem các cài đặt liên quan đến phông chữ, bạn có thể nhập FONT FONT sẽ được liệt kê. Bạn cũng có thể tìm kiếm các giá trị của các thuộc tính: để tìm quy tắc chịu trách nhiệm đặt phông chữ thành Hồi Lucida Grande, hãy nhập vào hộp tìm kiếm.

Ghi chú

Trong khi trong chế độ xem được tính toán, bạn có thể nhấn Ctrl / CMD + F để tập trung vào trường tìm kiếm. Khi bạn đã gõ vào bộ lọc, bạn có thể nhấn ESC để xóa nó một lần nữa.

Chỉnh sửa các quy tắc

Nếu bạn nhấp vào khai báo hoặc bộ chọn trong chế độ xem quy tắc, bạn có thể chỉnh sửa nó và xem kết quả ngay lập tức. Bạn cũng có thể tab thông qua các thuộc tính và giá trị hiện có khác nhau và bắt đầu chỉnh sửa chúng bằng cách nhấn Enter hoặc Space. Để thêm một tuyên bố mới vào một quy tắc, nhấp vào dòng cuối cùng của quy tắc (dòng chiếm bởi nẹp đóng).

Khi bạn bắt đầu nhập tên thuộc tính, bạn sẽ thấy một danh sách các đề xuất tự động hoàn thành. Nhấn: KBD: Tab để chấp nhận đề xuất hiện tại hoặc lên và xuống để di chuyển qua danh sách. Lựa chọn mặc định là thuộc tính phổ biến nhất bắt đầu bằng các chữ cái bạn đã gõ. Ví dụ: ở đây người dùng đã gõ vào C C C và lựa chọn mặc định là màu sắc

Nếu bạn nhập một giá trị không hợp lệ cho một thuộc tính khi chỉnh sửa nó hoặc tên thuộc tính không xác định, biểu tượng cảnh báo màu vàng sẽ xuất hiện bên cạnh khai báo.

Các chỉnh sửa mà bạn thực hiện trong chế độ xem quy tắc được phản ánh trong trình soạn thảo Style và ngược lại. Bất kỳ thay đổi nào bạn thực hiện là tạm thời: Tải lại trang sẽ khôi phục kiểu dáng ban đầu.Style Editor, and vice versa. Any changes you make are temporary: reloading the page will restore the original styling.

Trong khi bạn chỉnh sửa CSS, menu ngữ cảnh mà bạn sẽ thấy là hình thức bình thường để làm việc với văn bản có thể chỉnh sửa:

CSS Biến tự động hoàn thành

Tên biến CSS sẽ tự động hoàn thành tùy thuộc vào các biến được xác định trong CSS. Nếu bạn nhập media="print"0 vào giá trị thuộc tính và sau đó nhập dấu gạch ngang (media="print"1), bất kỳ biến nào bạn đã khai báo trong CSS của mình sau đó sẽ xuất hiện trong danh sách tự động hoàn thành (Lỗi 1451211)

Ngoài ra, việc lơ lửng trên một tên biến CSS mang đến một chú giải công cụ hiển thị giá trị màu nào được lưu trữ trong lỗi biến 1431949.

Chỉnh sửa các phím tắt bàn phím

Bạn có thể sử dụng các phím Mũi tên và trang lên/xuống (cùng với các khóa khác) để tăng/giảm các quy tắc số trong khi chỉnh sửa:

• Mũi tên tăng lên các giá trị 1 - ví dụ, các thay đổi của 1px, thành 2px.

• Shift + tăng/giảm giá trị hoặc giảm giá trị bằng 10.

• Ctrl + lên/xuống (trên Linux và Windows) hoặc ALT + UP/DOWN (trên MAC) giá trị hoặc giảm giá trị bằng 0,1.

• SHIFT + trang lên/trang giảm giá trị gia tăng hoặc giảm giá trị bằng 100.

Theo dõi các thay đổi

Khi bạn đang chỉnh sửa các quy tắc trong chế độ xem quy tắc, bạn có thể thấy những thay đổi bạn đã thực hiện trong khung thay đổi.

Ghi chú

Bạn chỉ có thể xem các thay đổi được thực hiện cho chế độ xem quy tắc. Nếu bạn chỉnh sửa CSS bằng Trình chỉnh sửa kiểu, các thay đổi sẽ không được hiển thị trong ngăn Thay đổi.

Ngoài ra, hãy nhớ rằng, như đã lưu ý ở trên, những thay đổi bạn thực hiện đối với các quy tắc CSS là tạm thời và sẽ được đặt lại nếu bạn tải lại trang.

Nếu bạn hài lòng với những thay đổi bạn đã thực hiện, bạn có thể sao chép các cài đặt mới vào trang quy tắc đã chỉnh sửa vào bảng kiểu của bạn. Nhấp chuột phải vào bảng thay đổi và chọn quy tắc sao chép từ menu ngữ cảnh.Copy Rule from the context menu.

Lệnh quy tắc sao chép sao chép toàn bộ phần tử, lớp hoặc định nghĩa ID, bao gồm mọi quy tắc không thay đổi và các quy tắc mô tả các thay đổi của bạn. Ví dụ: sao chép các thay đổi trong hình ảnh trước, bạn nhận được như sau:

.text-content p {
  box-sizing:border-box;
  max-width:24rem;
  text-decoration: underline;
  color: cadetblue;
  font-weight: bold;
}

Thêm Quy tắc

Bạn có thể thêm các quy tắc mới trong chế độ xem quy tắc. Chỉ cần nhấp chuột phải để hiển thị menu ngữ cảnh và chọn thêm Quy tắc. Điều này sẽ thêm quy tắc CSS mới có bộ chọn khớp với nút hiện được chọn.

Ngoài ra còn có một nút cho phép bạn làm điều tương tự:

Sao chép các quy tắc

Để sao chép các quy tắc và các quy tắc, hãy sử dụng một trong các mục menu ngữ cảnh sau trong chế độ xem quy tắc:

• Sao chép quy tắc

• Bộ chọn sao chép

• Sao chép khai báo tài sản

• Sao chép tên tài sản

• Sao chép giá trị thuộc tính

Xem thêm¶

• Danh sách đầy đủ các phím tắt bàn phím kiểm tra trang.Keyboard shortcuts.

• Thanh tra cũng bao gồm một số công cụ chuyên dụng để làm việc với các tính năng CSS cụ thể, chẳng hạn như màu sắc, phông chữ và hình ảnh động. Để đọc về những điều này, hãy xem danh sách cách hướng dẫn.how to guides.