Tìm CSS không hợp lệ, bị ghi đè, không hoạt động và thuộc tính khác

Hướng dẫn này giả định rằng bạn đã quen với việc kiểm tra CSS trong Công cụ của Chrome cho nhà phát triển. Hãy xem bài viết Xem và thay đổi CSS để tìm hiểu các kiến thức cơ bản.

Kiểm tra CSS mà bạn tạo

Giả sử bạn đã thêm một số CSS vào một phần tử và muốn đảm bảo các kiểu mới được áp dụng đúng cách. Khi bạn làm mới trang, phần tử trông vẫn giống như trước. Đã xảy ra lỗi.

Việc đầu tiên bạn cần làm là kiểm tra phần tử và đảm bảo rằng CSS mới đã thực sự được áp dụng cho phần tử đó.

Đôi khi, bạn sẽ thấy CSS mới trong ngăn Phần tử > Kiểu nhưng CSS mới có văn bản nhạt, không chỉnh sửa được, bị gạch ngang hoặc có biểu tượng cảnh báo/gợi ý bên cạnh.

Tìm hiểu về CSS trong ngăn Kiểu

Ngăn Kiểu nhận ra nhiều loại vấn đề về CSS và làm nổi bật các vấn đề đó theo nhiều cách.

Bộ chọn khớp và không khớp

Ngăn Kiểu hiển thị các bộ chọn phù hợp ở dạng văn bản thông thường và các bộ chọn chưa khớp ở dạng văn bản mờ.

Giá trị và nội dung khai báo không hợp lệ

Ngăn Styles (Kiểu) mở ra và hiển thị các biểu tượng cảnh báo bên cạnh các nội dung sau:

• Toàn bộ phần khai báo CSS (thuộc tính và giá trị) khi thuộc tính CSS không hợp lệ hoặc không xác định.
• Chỉ là giá trị khi thuộc tính CSS hợp lệ nhưng giá trị không hợp lệ.

Bị ghi đè

Ngăn Styles (Kiểu) gạch bỏ các thuộc tính bị các thuộc tính khác ghi đè theo Thứ tự xếp tầng.

Trong ví dụ này, thuộc tính kiểu width: 300px; trên phần tử sẽ ghi đè width: 100% trên lớp .youtube.

Không còn hoạt động

Ngăn Styles (Kiểu) hiển thị dưới dạng văn bản nhạt và đặt biểu tượng thông tin bên cạnh các thuộc tính hợp lệ nhưng không có hiệu lực do các thuộc tính khác.

Các thuộc tính nhạt này không hoạt động do logic CSS, chứ không phải Thứ tự xếp tầng.

Trong ví dụ này, thuộc tính display: block; sẽ vô hiệu hoá justify-content và align-items điều khiển bố cục linh hoạt hoặc lưới.

Được kế thừa và không được kế thừa

Ngăn Styles (Kiểu) liệt kê các thuộc tính trong các phần Inherited from <element-name> tuỳ thuộc vào tính kế thừa mặc định của các phần đó:

• Các tệp được kế thừa theo mặc định sẽ ở dạng văn bản thông thường.
• Không được kế thừa theo mặc định sẽ có văn bản nhạt.

Viết tắt

Thuộc tính rút gọn (concise) cho phép bạn đặt nhiều thuộc tính CSS cùng một lúc và có thể làm cho biểu định kiểu của bạn dễ đọc hơn. Tuy nhiên, do tính chất ngắn gọn của các thuộc tính đó, bạn có thể bỏ lỡ thuộc tính dài hạn (chính xác) ghi đè thuộc tính được ngụ ý bởi viết tắt.

Ngăn Styles (Kiểu) hiển thị các thuộc tính viết tắt dưới dạng danh sách thả xuống chứa tất cả các thuộc tính được rút ngắn.

Trong ví dụ này, 2 trong số 4 thuộc tính rút gọn thực sự bị ghi đè.

Không thể chỉnh sửa

Ngăn Kiểu hiển thị các thuộc tính không chỉnh sửa được bằng văn bản in nghiêng. Ví dụ: Bạn không thể chỉnh sửa CSS từ các nguồn sau:

• user agent stylesheet—Biểu định kiểu mặc định của Chrome.

  

• Thuộc tính HTML liên quan đến kiểu trên phần tử, ví dụ: chiều cao, chiều rộng, màu sắc, v.v. Bạn có thể chỉnh sửa các thuộc tính này trong cây DOM và thao tác này sẽ cập nhật CSS trong ngăn Styles (Kiểu), nhưng không làm ngược lại.

  Trong ví dụ này, thuộc tính height="48" trên một phần tử <svg> được thiết lập thành 50. Thao tác này sẽ cập nhật thuộc tính tương ứng trong svg[Attributes Style] trong ngăn Styles (Kiểu).

Kiểm tra một phần tử vẫn chưa được tạo kiểu theo cách bạn nghĩ

Để cố gắng tìm xem vấn đề gì, bạn nên kiểm tra:

• Tài liệu CSS và thông tin đặc trưng của bộ chọn trong chú giải công cụ trong ngăn Kiểu.
• Ngăn Đã tính toán để xem CSS "cuối cùng" được áp dụng cho một phần tử và so sánh với phần tử mà bạn đã khai báo.

Ngăn Phần tử > Kiểu hiển thị chính xác bộ quy tắc CSS như được viết trong nhiều biểu định kiểu. Mặt khác, ngăn Phần tử > Tính toán liệt kê các giá trị CSS đã phân giải mà Chrome sử dụng để hiển thị phần tử:

• CSS bắt nguồn từ kế thừa
• Người chiến thắng Cascade
• Thuộc tính dài (chính xác), không phải là viết tắt (ngắn gọn)
• Các giá trị được tính toán, ví dụ: font-size: 14px thay vì font-size: 70%

Tìm hiểu về CSS trong ngăn Đã tính toán

Ngăn Computed (Tính toán) cũng cho thấy nhiều thuộc tính theo cách khác nhau.

Đã khai báo và kế thừa

Ngăn Computed (Tính toán) liệt kê các thuộc tính được khai báo trong bất kỳ biểu định kiểu nào có phông chữ thông thường, thuộc tính riêng và kế thừa của cả phần tử đó. Nhấp vào biểu tượng mở rộng bên cạnh các nguồn đó để xem nguồn.

Để xem phần khai báo trong ngăn Styles (Kiểu), hãy di chuột qua thuộc tính mở rộng rồi nhấp vào nút mũi tên .

Để xem phần khai báo trong ngăn Sources (Nguồn), hãy nhấp vào đường liên kết đến tệp nguồn.

Đối với các tài sản có nhiều nguồn, ngăn Computed (Tính toán) sẽ cho thấy kết quả chiến thắng ở đầu phân loại.

Thời gian chạy

Ngăn Computed (Đã tính toán) liệt kê các giá trị thuộc tính được tính trong thời gian chạy dưới dạng văn bản nhạt.

Trong ví dụ này, Chrome đã tính toán những kết quả sau cho phần tử <ul>:

• width tương ứng với thành phần mẹ của nó, <div>
• height so với phần tử con, 2 phần tử <li>

Không kế thừa và tuỳ chỉnh

Để làm cho ngăn Computed (Tính năng) hiển thị tất cả thuộc tính và giá trị của các thuộc tính đó, hãy đánh dấu vào Show all (Hiện tất cả). Tất cả cơ sở lưu trú đều có:

• Giá trị ban đầu cho các tài sản không kế thừa bằng văn bản mờ.
• Thuộc tính tuỳ chỉnh – với tiền tố -- ở dạng văn bản thông thường. Những thuộc tính đó được kế thừa theo mặc định.

Để chia danh sách lớn này thành các danh mục, hãy chọn Nhóm.

Ví dụ này cho thấy các giá trị ban đầu cho các thuộc tính không kế thừa trong mục Ảnh động và thuộc tính tuỳ chỉnh trong Biến CSS.

Tìm kiếm nội dung trùng lặp

Để điều tra một tài sản cụ thể và các tài sản có thể trùng lặp, hãy nhập tên tài sản đó vào hộp văn bản Bộ lọc. Bạn có thể thực hiện việc này trong cả ngăn Styles (Kiểu) và Computed (Tính toán).

Xem bài viết Tìm kiếm và lọc CSS của một phần tử.

Tìm CSS không dùng đến

Hãy xem phần Phạm vi bao phủ: Tìm JavaScript và CSS không dùng đến.