Tại sao kiểu dáng CSS không hoạt động?

Cách truy cập DevTools của trình duyệt

Bài viết Các công cụ dành cho nhà phát triển trình duyệt là một hướng dẫn cập nhật giải thích cách truy cập các công cụ trong các trình duyệt và nền tảng khác nhau. Mặc dù bạn có thể chọn chủ yếu phát triển trong một trình duyệt cụ thể và do đó sẽ trở nên quen thuộc nhất với các công cụ có trong trình duyệt đó, bạn nên biết cách truy cập chúng trong các trình duyệt khác. Điều này sẽ hữu ích nếu bạn thấy hiển thị khác nhau giữa nhiều trình duyệt

Bạn cũng sẽ thấy rằng các trình duyệt đã chọn tập trung vào các khu vực khác nhau khi tạo DevTools của họ. Ví dụ: trong Firefox có một số công cụ tuyệt vời để làm việc trực quan với CSS Layout, cho phép bạn kiểm tra và chỉnh sửa Grid Layouts, Flexbox và Shapes. Tuy nhiên, tất cả các trình duyệt khác nhau đều có các công cụ cơ bản giống nhau, chẳng hạn như. g. , để kiểm tra các thuộc tính và giá trị được áp dụng cho các phần tử trên trang của bạn và thực hiện các thay đổi đối với chúng từ trình chỉnh sửa

Trong bài học này, chúng ta sẽ xem xét một số tính năng hữu ích của Firefox DevTools để làm việc với CSS. Để làm như vậy, tôi sẽ sử dụng một tệp ví dụ. Tải cái này lên trong một tab mới nếu bạn muốn làm theo và mở DevTools của bạn như được mô tả trong bài viết được liên kết ở trên

DOM so với nguồn xem

Điều gì đó có thể khiến những người mới bắt đầu sử dụng DevTools gặp khó khăn là sự khác biệt giữa những gì bạn thấy khi xem nguồn của trang web hoặc xem tệp HTML bạn đặt trên máy chủ và những gì bạn có thể thấy trong Ngăn HTML của DevTools. Mặc dù nó trông gần giống với những gì bạn có thể thấy qua View Source, nhưng có một số khác biệt

Trong DOM được kết xuất, trình duyệt có thể đã chuẩn hóa HTML, chẳng hạn bằng cách sửa một số HTML viết sai cho bạn. Nếu bạn đóng sai một phần tử, chẳng hạn bằng cách mở một <h2> nhưng đóng lại bằng một </h3>, thì trình duyệt sẽ tìm ra ý định của bạn và HTML trong DOM sẽ đóng chính xác <h2> đang mở bằng một .special { color: orange; } 1. DOM cũng sẽ hiển thị mọi thay đổi do JavaScript thực hiện

Xem Nguồn, so sánh, là mã nguồn HTML như được lưu trữ trên máy chủ. Cây HTML trong DevTools của bạn hiển thị chính xác những gì trình duyệt đang hiển thị tại bất kỳ thời điểm nào, do đó, nó cung cấp cho bạn thông tin chi tiết về những gì đang thực sự diễn ra

Kiểm tra CSS được áp dụng

Chọn một phần tử trên trang của bạn, bằng cách nhấp chuột phải/ctrl vào phần tử đó và chọn Kiểm tra hoặc chọn phần tử đó từ cây HTML ở bên trái màn hình DevTools. Thử chọn phần tử có lớp là .special { color: orange; } 2;

Nếu bạn nhìn vào chế độ xem Quy tắc ở bên phải HTML của mình, bạn sẽ có thể thấy các thuộc tính và giá trị CSS được áp dụng cho thành phần đó. Bạn sẽ thấy các quy tắc được áp dụng trực tiếp cho lớp .special { color: orange; } 2 và cả CSS đang được hộp kế thừa từ tổ tiên của nó, trong trường hợp này là từ lớp .special { color: orange; } 4. Điều này hữu ích nếu bạn thấy một số CSS đang được áp dụng mà bạn không mong đợi. Có lẽ nó đang được kế thừa từ phần tử cha và bạn cần thêm quy tắc để ghi đè lên phần tử đó trong ngữ cảnh của phần tử này

Cũng hữu ích là khả năng mở rộng các thuộc tính tốc ký. Trong ví dụ của chúng tôi, tốc ký .special { color: orange; } 5 được sử dụng

Nhấp vào mũi tên nhỏ để mở rộng chế độ xem, hiển thị các thuộc tính viết tay khác nhau và giá trị của chúng

Bạn có thể bật và tắt các giá trị trong chế độ xem Quy tắc khi bảng đó đang hoạt động — nếu bạn giữ chuột trên bảng đó, các hộp kiểm sẽ xuất hiện. Bỏ chọn hộp kiểm của quy tắc, ví dụ như .special { color: orange; } 0 và CSS sẽ ngừng áp dụng

Bạn có thể sử dụng công cụ này để thực hiện so sánh A/B, quyết định xem thứ gì đó có đẹp hơn khi áp dụng quy tắc hay không và cũng để giúp gỡ lỗi — ví dụ: nếu bố cục bị sai và bạn đang cố gắng tìm ra thuộc tính nào là

Video sau đây cung cấp một số mẹo hữu ích về gỡ lỗi CSS bằng Firefox DevTools

Chỉnh sửa giá trị

Ngoài việc bật và tắt thuộc tính, bạn có thể chỉnh sửa giá trị của chúng. Có lẽ bạn muốn xem liệu một màu khác có đẹp hơn hay muốn điều chỉnh kích thước của một thứ gì đó?

Với .special { color: orange; } 2 được chọn, nhấp vào mẫu màu (vòng tròn nhỏ màu) hiển thị màu được áp dụng cho đường viền. Bộ chọn màu sẽ mở ra và bạn có thể thử một số màu khác nhau; . Theo cách tương tự, bạn có thể thay đổi độ rộng hoặc kiểu của đường viền

Thêm một thuộc tính mới

Bạn có thể thêm thuộc tính bằng DevTools. Có lẽ bạn đã nhận ra rằng bạn không muốn hộp của mình kế thừa kích thước phông chữ của phần tử .special { color: orange; } 4 và muốn đặt kích thước cụ thể của riêng nó?

Bạn có thể nhấp vào dấu ngoặc nhọn đóng trong quy tắc để bắt đầu nhập một khai báo mới vào đó, tại thời điểm đó, bạn có thể bắt đầu nhập thuộc tính mới và DevTools sẽ hiển thị cho bạn một danh sách tự động hoàn thành các thuộc tính phù hợp. Sau khi chọn .special { color: orange; } 3, hãy nhập giá trị bạn muốn thử. Bạn cũng có thể nhấp vào nút + để thêm quy tắc bổ sung với cùng bộ chọn và thêm quy tắc mới của mình vào đó

Ghi chú. Ngoài ra còn có các tính năng hữu ích khác trong chế độ xem Quy tắc, chẳng hạn như các khai báo có giá trị không hợp lệ sẽ bị gạch bỏ. Bạn có thể tìm hiểu thêm tại Kiểm tra và chỉnh sửa CSS

Hiểu mô hình hộp

Trong các bài học trước, chúng ta đã thảo luận về Mô hình hộp và thực tế là chúng ta có một mô hình hộp thay thế thay đổi cách tính kích thước của các phần tử dựa trên kích thước bạn cung cấp cho chúng, cộng với phần đệm và đường viền. DevTools thực sự có thể giúp bạn hiểu cách tính kích thước của một phần tử

Chế độ xem Bố cục hiển thị cho bạn sơ đồ của mô hình hộp trên phần tử đã chọn, cùng với mô tả về các thuộc tính và giá trị thay đổi cách bố trí phần tử. Điều này bao gồm mô tả các thuộc tính mà bạn có thể không sử dụng rõ ràng trên phần tử, nhưng có các giá trị ban đầu được đặt

Trong bảng điều khiển này, một trong những thuộc tính chi tiết là thuộc tính .special { color: orange; } 4, điều khiển mô hình hộp mà phần tử sử dụng

So sánh hai hộp với lớp .special { color: orange; } 2 và .special { color: orange; } 6. Cả hai đều có cùng chiều rộng được áp dụng (400px), tuy nhiên .special { color: orange; } 2 rộng hơn về mặt trực quan. Bạn có thể thấy trong bảng bố cục rằng nó đang sử dụng .special { color: orange; } 8. Đây là giá trị lấy kích thước bạn cung cấp cho phần tử và sau đó thêm vào phần đệm và chiều rộng đường viền

Phần tử có lớp .special { color: orange; } 6 đang sử dụng <h2>0, vì vậy ở đây phần đệm và đường viền được trừ khỏi kích thước mà bạn đã cung cấp cho phần tử. Điều này có nghĩa là không gian mà hộp chiếm trên trang có kích thước chính xác mà bạn đã chỉ định — trong trường hợp của chúng tôi là <h2>1

Ghi chú. Tìm hiểu thêm trong Kiểm tra và Kiểm tra Mô hình Hộp

Giải quyết các vấn đề cụ thể

Đôi khi trong quá trình phát triển, đặc biệt là khi bạn cần chỉnh sửa CSS trên một trang web hiện có, bạn sẽ thấy mình gặp khó khăn khi lấy một số CSS để áp dụng. Bất kể bạn làm gì, phần tử dường như không lấy CSS. Điều thường xảy ra ở đây là một bộ chọn cụ thể hơn đang ghi đè các thay đổi của bạn và ở đây DevTools sẽ thực sự giúp bạn giải quyết

Trong tệp ví dụ của chúng tôi, có hai từ đã được gói trong phần tử <h2>2. Một cái đang hiển thị là màu cam và cái còn lại màu hồng. Trong CSS chúng tôi đã áp dụng

em { color: hotpink; font-weight: bold; }

Tuy nhiên, trên đó trong biểu định kiểu là một quy tắc với bộ chọn <h2>3

.special { color: orange; }

Như bạn sẽ nhớ lại từ bài học về xếp tầng và kế thừa, nơi chúng ta đã thảo luận về tính cụ thể, bộ chọn lớp cụ thể hơn bộ chọn phần tử và do đó, đây là giá trị được áp dụng. DevTools có thể giúp bạn tìm ra những vấn đề như vậy, đặc biệt nếu thông tin bị chôn vùi ở đâu đó trong một biểu định kiểu lớn

Kiểm tra <h2>2 với lớp <h2>3 và DevTools sẽ cho bạn thấy màu cam là màu được áp dụng, đồng thời thuộc tính <h2>6 được áp dụng cho <h2>2 bị gạch bỏ. Bây giờ bạn có thể thấy rằng bộ chọn lớp đang ghi đè bộ chọn phần tử

Tìm hiểu thêm về Firefox DevTools

Có rất nhiều thông tin về Firefox DevTools tại đây trên MDN. Hãy xem phần DevTools chính và để biết thêm chi tiết về những điều chúng tôi đã trình bày ngắn gọn trong bài học này, hãy xem phần Hướng dẫn Cách thực hiện

Gỡ lỗi các vấn đề trong CSS

DevTools có thể là một trợ giúp tuyệt vời khi giải quyết các vấn đề về CSS, vì vậy, khi bạn thấy mình ở trong một tình huống mà CSS không hoạt động như bạn mong đợi, bạn nên giải quyết nó như thế nào?

Lùi một bước khỏi vấn đề

Bất kỳ vấn đề mã hóa nào cũng có thể gây khó chịu, đặc biệt là các vấn đề về CSS vì bạn thường không nhận được thông báo lỗi để tìm kiếm trực tuyến nhằm giúp tìm ra giải pháp. Nếu bạn đang trở nên thất vọng, hãy tạm rời xa vấn đề này một chút - đi dạo, gọi đồ uống, trò chuyện với đồng nghiệp hoặc làm việc gì đó trong một thời gian. Đôi khi giải pháp sẽ xuất hiện một cách kỳ diệu khi bạn ngừng suy nghĩ về vấn đề đó, và ngay cả khi không, thì việc giải quyết nó khi cảm thấy sảng khoái sẽ dễ dàng hơn nhiều

Bạn có HTML và CSS hợp lệ không?

Các trình duyệt mong đợi CSS và HTML của bạn được viết chính xác, tuy nhiên, các trình duyệt cũng rất dễ tha thứ và sẽ cố gắng hết sức để hiển thị các trang web của bạn ngay cả khi bạn có lỗi trong đánh dấu hoặc biểu định kiểu. Nếu bạn có lỗi trong mã của mình, trình duyệt cần đoán ý của bạn và nó có thể đưa ra quyết định khác với những gì bạn đã nghĩ. Ngoài ra, hai trình duyệt khác nhau có thể xử lý sự cố theo hai cách khác nhau. Do đó, bước đầu tiên tốt là chạy HTML và CSS của bạn thông qua trình xác thực, để nhận và sửa bất kỳ lỗi nào

• Trình xác thực CSS
• Trình xác thực HTML

Thuộc tính và giá trị có được trình duyệt bạn đang thử nghiệm hỗ trợ không?

Trình duyệt bỏ qua CSS mà họ không hiểu. Nếu thuộc tính hoặc giá trị bạn đang sử dụng không được trình duyệt mà bạn đang thử nghiệm hỗ trợ thì sẽ không có nội dung nào bị hỏng, nhưng CSS đó sẽ không được áp dụng. DevTools nói chung sẽ làm nổi bật các thuộc tính và giá trị không được hỗ trợ theo một cách nào đó. Trong ảnh chụp màn hình bên dưới, trình duyệt không hỗ trợ giá trị lưới con của <h2>8

Bạn cũng có thể xem bảng tương thích Trình duyệt ở cuối mỗi trang thuộc tính trên MDN. Chúng hiển thị cho bạn hỗ trợ của trình duyệt cho thuộc tính đó, thường được chia nhỏ nếu có hỗ trợ cho một số cách sử dụng thuộc tính chứ không phải những thứ khác. Xem bảng tương thích cho thuộc tính <h2>9

Có điều gì khác ghi đè lên CSS của bạn không?

Đây là nơi thông tin bạn đã học về tính đặc hiệu sẽ được sử dụng nhiều. Nếu bạn có điều gì đó cụ thể hơn lấn át những gì bạn đang cố gắng thực hiện, bạn có thể tham gia vào một trò chơi rất khó chịu khi cố gắng tìm ra điều gì. Tuy nhiên, như đã mô tả ở trên, DevTools sẽ cho bạn biết CSS đang áp dụng những gì và bạn có thể tìm ra cách làm cho bộ chọn mới đủ cụ thể để ghi đè lên nó

Thực hiện một trường hợp thử nghiệm rút gọn của vấn đề

Nếu sự cố không được giải quyết bằng các bước trên, thì bạn sẽ cần thực hiện thêm một số điều tra. Điều tốt nhất để làm vào thời điểm này là tạo ra một cái gì đó được gọi là trường hợp thử nghiệm rút gọn. Có thể "giảm thiểu vấn đề" là một kỹ năng thực sự hữu ích. Nó sẽ giúp bạn tìm ra các vấn đề trong mã của chính bạn và của đồng nghiệp, đồng thời cũng sẽ cho phép bạn báo cáo lỗi và yêu cầu trợ giúp hiệu quả hơn

Trường hợp thử nghiệm rút gọn là một ví dụ mã thể hiện sự cố theo cách đơn giản nhất có thể, với nội dung xung quanh và kiểu dáng không liên quan đã bị xóa. Điều này thường có nghĩa là lấy mã có vấn đề ra khỏi bố cục của bạn để tạo một ví dụ nhỏ chỉ hiển thị mã hoặc tính năng đó

Để tạo một trường hợp thử nghiệm rút gọn

1. Nếu đánh dấu của bạn được tạo động — ví dụ như thông qua CMS — hãy tạo một phiên bản tĩnh của đầu ra hiển thị sự cố. Một trang web chia sẻ mã như CodePen rất hữu ích để lưu trữ các trường hợp thử nghiệm đã giảm bớt, khi đó chúng có thể truy cập trực tuyến và bạn có thể dễ dàng chia sẻ chúng với đồng nghiệp. Bạn có thể bắt đầu bằng cách thực hiện Xem nguồn trên trang và sao chép HTML vào CodePen, sau đó lấy bất kỳ CSS và JavaScript có liên quan nào và thêm vào đó. Sau đó, bạn có thể kiểm tra xem sự cố có còn rõ ràng hay không
2. Nếu việc xóa JavaScript không giải quyết được sự cố, thì đừng bao gồm JavaScript. Nếu việc xóa JavaScript không làm cho sự cố biến mất, thì hãy xóa càng nhiều JavaScript càng tốt, để lại bất kỳ nguyên nhân nào gây ra sự cố
3. Xóa mọi HTML không góp phần gây ra sự cố. Xóa các thành phần hoặc thậm chí các thành phần chính của bố cục. Một lần nữa, hãy cố gắng giảm số lượng mã nhỏ nhất mà vẫn hiển thị sự cố
4. Xóa bất kỳ CSS nào không ảnh hưởng đến sự cố

Trong quá trình thực hiện việc này, bạn có thể phát hiện ra nguyên nhân gây ra sự cố hoặc ít nhất có thể bật và tắt sự cố bằng cách xóa nội dung cụ thể. Thật đáng để thêm một số nhận xét vào mã của bạn khi bạn khám phá mọi thứ. Nếu bạn cần nhờ giúp đỡ, họ sẽ chỉ cho người giúp bạn những gì bạn đã thử. Điều này cũng có thể cung cấp cho bạn đủ thông tin để có thể tìm kiếm các sự cố có thể xảy ra và cách giải quyết

Nếu bạn vẫn đang vật lộn để khắc phục sự cố thì việc giảm bớt trường hợp thử nghiệm sẽ mang đến cho bạn điều gì đó để yêu cầu trợ giúp, bằng cách đăng lên diễn đàn hoặc hiển thị cho đồng nghiệp. Bạn có nhiều khả năng nhận được trợ giúp hơn nếu bạn có thể chứng minh rằng bạn đã hoàn thành công việc giảm thiểu vấn đề và xác định chính xác nơi nó xảy ra, trước khi yêu cầu trợ giúp. Một nhà phát triển có kinh nghiệm hơn có thể nhanh chóng phát hiện ra vấn đề và chỉ cho bạn đi đúng hướng, và ngay cả khi không, trường hợp thử nghiệm rút gọn của bạn sẽ cho phép họ xem nhanh và hy vọng có thể cung cấp ít nhất một số trợ giúp

Trong trường hợp vấn đề của bạn thực sự là một lỗi trong trình duyệt, thì trường hợp kiểm thử rút gọn cũng có thể được sử dụng để gửi báo cáo lỗi cho nhà cung cấp trình duyệt có liên quan (e. g. trên trang bugzilla của Mozilla)

Khi bạn có nhiều kinh nghiệm hơn với CSS, bạn sẽ thấy rằng bạn phát hiện ra các vấn đề nhanh hơn. Tuy nhiên, ngay cả những người có kinh nghiệm nhất trong chúng ta đôi khi cũng thấy mình tự hỏi chuyện gì đang xảy ra vậy?. Thực hiện một cách tiếp cận có phương pháp, thực hiện một trường hợp thử nghiệm rút gọn và giải thích vấn đề cho người khác thường sẽ dẫn đến việc tìm ra cách khắc phục

Bản tóm tắt

Vì vậy, chúng tôi đã có nó. phần giới thiệu về cách gỡ lỗi CSS, sẽ cung cấp cho bạn một số kỹ năng hữu ích cần có khi bạn bắt đầu gỡ lỗi CSS và các loại mã khác sau này trong sự nghiệp của mình

Tại sao kiểu dáng CSS của tôi không hoạt động?

Tại sao kiểu CSS không cập nhật?

Tại sao CSS của tôi không hoạt động trong Chrome?

Tại sao HTML không liên kết với CSS?