Tài liệu tham khảo về các tính năng của CSS

Khám phá các quy trình làm việc mới trong tài liệu tham khảo toàn diện này về các tính năng của Chrome DevTools liên quan đến việc xem và thay đổi CSS.

Hãy xem phần Xem và thay đổi CSS để tìm hiểu kiến thức cơ bản.

Chọn một phần tử

Bảng điều khiển Elements (Thành phần) của DevTools cho phép bạn xem hoặc thay đổi CSS của một thành phần tại một thời điểm.

Trên ảnh chụp màn hình, phần tử h1 được làm nổi bật màu xanh dương trong Cây DOM là phần tử đã chọn. Ở bên phải, các kiểu của phần tử sẽ xuất hiện trong thẻ Kiểu. Ở bên trái, phần tử được làm nổi bật trong khung nhìn, nhưng chỉ vì chuột đang di chuột qua phần tử đó trong Cây DOM.

Hãy xem phần Xem CSS của một phần tử để biết hướng dẫn.

Có nhiều cách để chọn một phần tử:

• Trong khung nhìn, hãy nhấp chuột phải vào phần tử rồi chọn Kiểm tra.
• Trong DevTools, hãy nhấp vào biểu tượng Chọn một phần tử hoặc nhấn tổ hợp phím Command+Shift+C (Mac) hoặc Control+Shift+C (Windows, Linux), sau đó nhấp vào phần tử trong khung nhìn.
• Trong DevTools, hãy nhấp vào phần tử trong DOM Tree (Cây DOM).
• Trong DevTools, hãy chạy một truy vấn như document.querySelector('p') trong Console (Bảng điều khiển), nhấp chuột phải vào kết quả rồi chọn Reveal in Elements panel (Hiện trong bảng điều khiển Elements (Phần tử)).

Xem CSS

Sử dụng thẻ Elements (Thành phần) > Styles (Kiểu) và Computed (Đã tính toán) để xem các quy tắc CSS và chẩn đoán các vấn đề về CSS.

Điều hướng bằng đường liên kết

Thẻ Kiểu hiển thị các đường liên kết ở nhiều vị trí đến nhiều vị trí khác, bao gồm nhưng không giới hạn ở:

• Bên cạnh các quy tắc CSS, trang tính kiểu và nguồn CSS. Những đường liên kết như vậy sẽ mở bảng điều khiển Nguồn. Nếu trang tính kiểu được rút gọn, hãy xem phần Làm cho tệp rút gọn có thể đọc được.
• Trong phần Kế thừa từ ..., đến các phần tử mẹ.
• Trong lệnh gọi var(), đến phần khai báo thuộc tính tuỳ chỉnh.
• Trong các thuộc tính viết tắt animation, thành @keyframes.
• Đường liên kết Tìm hiểu thêm trong chú giải công cụ của tài liệu.
• Và hơn thế nữa.

Sau đây là một số điểm nổi bật:

Các đường liên kết có thể được tạo kiểu khác nhau. Nếu bạn không chắc một nội dung nào đó có phải là đường liên kết hay không, hãy thử nhấp vào nội dung đó để tìm hiểu.

Xem chú giải công cụ có tài liệu CSS, mức độ cụ thể và giá trị thuộc tính tuỳ chỉnh

Elements (Phần tử) > Styles (Kiểu) hiển thị chú giải công cụ có thông tin hữu ích khi bạn di chuột qua các phần tử cụ thể.

Xem tài liệu về CSS

Để xem chú giải công cụ có nội dung mô tả ngắn về CSS, hãy di chuột qua tên thuộc tính trong thẻ Styles (Kiểu).

Nhấp vào Tìm hiểu thêm để chuyển đến Tài liệu tham khảo CSS của MDN về thuộc tính này.

Để tắt chú giải công cụ, hãy đánh dấu vào Không hiển thị.

Để bật lại các tính năng này, hãy đánh dấu vào Cài đặt > Lựa chọn ưu tiên > Thành phần > Hiện chú giải công cụ tài liệu CSS.

Tính cụ thể của bộ chọn chế độ xem

Di chuột qua một bộ chọn để xem chú giải công cụ có trọng số cụ thể.

Xem giá trị của thuộc tính tuỳ chỉnh

Di chuột qua --custom-property để xem giá trị của biểu tượng đó trong chú giải công cụ.

Xem CSS không hợp lệ, bị ghi đè, không hoạt động và các CSS khác

Thẻ Kiểu nhận dạng nhiều loại vấn đề về CSS và làm nổi bật các vấn đề đó theo nhiều cách.

Xem phần Tìm hiểu về CSS trong thẻ Kiểu.

Chỉ xem CSS thực sự được áp dụng cho một phần tử

Thẻ Styles (Kiểu) cho bạn thấy tất cả các quy tắc áp dụng cho một phần tử, bao gồm cả các nội dung khai báo đã bị ghi đè. Khi bạn không quan tâm đến các nội dung khai báo bị ghi đè, hãy sử dụng thẻ Computed (Đã tính toán) để chỉ xem CSS thực sự đang được áp dụng cho một phần tử.

1. Chọn một phần tử.
2. Chuyển đến thẻ Computed (Đã tính toán) trong bảng điều khiển Elements (Thành phần).

Đánh dấu vào hộp đánh dấu Hiện tất cả để xem tất cả tài sản.

Xem phần Tìm hiểu về CSS trong thẻ Đã tính toán.

Xem các thuộc tính CSS theo thứ tự bảng chữ cái

Sử dụng thẻ Đã tính toán. Xem phần Chỉ xem CSS thực sự được áp dụng cho một phần tử.

Xem các thuộc tính CSS kế thừa

Đánh dấu vào hộp đánh dấu Show All (Hiện tất cả) trong thẻ Computed (Đã tính toán). Xem phần Chỉ xem CSS thực sự được áp dụng cho một phần tử.

Ngoài ra, hãy di chuyển thẻ Styles (Kiểu) và tìm các phần có tên Inherited from <element_name>.

Xem quy tắc at-rules của CSS

Quy tắc tại là các câu lệnh CSS cho phép bạn kiểm soát hành vi của CSS. Elements (Phần tử) > Styles (Kiểu) hiển thị các quy tắc at-rules sau đây trong các phần chuyên biệt:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

Xem quy tắc tại @property

Quy tắc tại @property CSS cho phép bạn xác định rõ ràng các thuộc tính tuỳ chỉnh CSS và đăng ký các thuộc tính đó trong một trang kiểu mà không cần chạy JavaScript.

Di chuột qua tên của thuộc tính đó trong thẻ Kiểu để xem chú giải công cụ có giá trị, nội dung mô tả của thuộc tính và đường liên kết đến thông tin đăng ký thuộc tính đó trong phần @property có thể thu gọn ở cuối thẻ Kiểu.

Để chỉnh sửa quy tắc @property, hãy nhấp đúp vào tên hoặc giá trị của quy tắc đó.

Xem quy tắc tại @supports

Thẻ Kiểu cho bạn thấy các quy tắc tại CSS @supports nếu chúng được áp dụng cho một phần tử. Ví dụ: hãy kiểm tra phần tử sau:

Nếu trình duyệt của bạn hỗ trợ hàm lab(), phần tử này sẽ có màu xanh lục, nếu không thì sẽ có màu tím.

Xem quy tắc tại @scope

Thẻ Kiểu cho bạn thấy quy tắc tại @scope CSS nếu các quy tắc này được áp dụng cho một phần tử.

Quy tắc tại @scope mới là một phần của quy cách CSS cấp 6 về Lớp kế thừa và xếp chồng. Nói cách khác, các quy tắc này cho phép bạn xác định phạm vi của kiểu CSS, tức là áp dụng kiểu một cách rõ ràng cho các phần tử cụ thể.

Xem quy tắc @scope trong bản xem trước sau:

1. Kiểm tra văn bản trên thẻ trong bản xem trước.
2. Trên thẻ Kiểu, hãy tìm quy tắc @scope.

Trong ví dụ này, quy tắc @scope ghi đè phần khai báo background-color CSS toàn cục cho tất cả phần tử <p> bên trong các phần tử có lớp card.

Để chỉnh sửa quy tắc @scope, hãy nhấp đúp vào quy tắc đó.

Xem quy tắc tại @font-palette-values

Quy tắc tại @font-palette-values CSS cho phép bạn tuỳ chỉnh các giá trị mặc định của thuộc tính font-palette. Elements (Phần tử) > Styles (Kiểu) hiển thị quy tắc tại này trong một phần chuyên biệt.

Xem phần @font-palette-values trong bản xem trước tiếp theo:

1. Kiểm tra dòng văn bản thứ hai trong bản xem trước.
2. Trong Kiểu, hãy tìm phần @font-palette-values.

Trong ví dụ này, các giá trị bảng màu phông chữ --New sẽ ghi đè các giá trị mặc định của phông chữ màu.

Để chỉnh sửa giá trị tuỳ chỉnh, hãy nhấp đúp vào giá trị đó.

Xem quy tắc tại @position-try

Quy tắc CSS @position-try cùng với thuộc tính position-try-options cho phép bạn xác định các vị trí neo thay thế cho các phần tử. Để tìm hiểu thêm, hãy xem bài viết Giới thiệu API định vị neo CSS.

Elements (Phần tử) > Styles (Kiểu) sẽ phân giải và liên kết những phần sau:

• Giá trị thuộc tính position-try-options vào một phần @position-try --name chuyên dụng.
• Giá trị thuộc tính position-anchor và đối số anchor() cho các phần tử tương ứng có thuộc tính popovertarget.

Kiểm tra các giá trị position-try-options và phần @position-try trong bản xem trước tiếp theo:

1. Trong bản xem trước, hãy mở trình đơn phụ, tức là nhấp vào TÀI KHOẢN CỦA BẠN rồi nhấp vào GIAN HÀNG.
2. Kiểm tra phần tử có id="submenu" trong bản xem trước.
3. Trong Kiểu, hãy tìm thuộc tính position-try-options rồi nhấp vào giá trị --bottom của thuộc tính đó. Thẻ Kiểu sẽ đưa bạn đến phần @position-try tương ứng.
4. Nhấp vào đường liên kết giá trị position-anchor hoặc các đối số anchor() giống nhau. Bảng điều khiển Elements (Phần tử) sẽ chọn phần tử có thuộc tính popovertarget tương ứng và thẻ Styles (Kiểu) sẽ hiển thị CSS của phần tử đó.

Để chỉnh sửa giá trị, hãy nhấp đúp vào giá trị đó.

Xem mô hình hộp của một phần tử

Để xem mô hình hộp của một phần tử, hãy chuyển đến thẻ Kiểu rồi nhấp vào nút Hiện thanh bên trong thanh thao tác.

Để thay đổi một giá trị, hãy nhấp đúp vào giá trị đó.

Tìm kiếm và lọc CSS của một phần tử

Sử dụng hộp Filter (Lọc) trên thẻ Styles (Kiểu) và Computed (Đã tính toán) để tìm kiếm các thuộc tính hoặc giá trị CSS cụ thể.

Để tìm kiếm cả các thuộc tính kế thừa trong thẻ Đã tính toán, hãy đánh dấu vào hộp đánh dấu Hiện tất cả.

Để điều hướng thẻ Đã tính toán, hãy nhóm các thuộc tính đã lọc trong các danh mục có thể thu gọn bằng cách đánh dấu vào Nhóm.

Mô phỏng một trang được đặt tiêu điểm

Nếu bạn chuyển tiêu điểm từ trang sang Công cụ cho nhà phát triển, một số thành phần lớp phủ sẽ tự động ẩn nếu được kích hoạt bằng tiêu điểm. Ví dụ: danh sách thả xuống, trình đơn hoặc bộ chọn ngày. Tuỳ chọn check_box Mô phỏng một trang được đặt tiêu điểm cho phép bạn gỡ lỗi một phần tử như thể phần tử đó đang ở tiêu điểm.

Hãy thử mô phỏng một trang được đặt tiêu điểm trên trang minh hoạ này:

1. Đặt tiêu điểm vào phần tử đầu vào. Một phần tử khác sẽ xuất hiện bên dưới phần tử đó.
2. Mở Công cụ cho nhà phát triển. Cửa sổ DevTools hiện đang ở tiêu điểm thay vì trang, vì vậy phần tử này lại biến mất.
3. Trong Elements (Phần tử) > Styles (Kiểu), hãy nhấp vào :hov, đánh dấu vào check_box Emulate a focused page (Mô phỏng một trang được lấy tiêu điểm) và đảm bảo