Tại sao mã html của tôi không hoạt động trong chrome
Với bối cảnh được thiết lập, bây giờ chúng ta sẽ xem xét cụ thể các sự cố phổ biến trên nhiều trình duyệt mà bạn sẽ gặp phải trong mã HTML và CSS cũng như những công cụ nào có thể được sử dụng để ngăn sự cố xảy ra hoặc khắc phục sự cố xảy ra. Điều này bao gồm mã linting, xử lý các tiền tố CSS, sử dụng các công cụ dành cho nhà phát triển trình duyệt để theo dõi các sự cố, sử dụng các polyfill để thêm hỗ trợ vào trình duyệt, giải quyết các vấn đề về thiết kế đáp ứng, v.v. Show Một số rắc rối với HTML và CSS nằm ở chỗ cả hai ngôn ngữ này đều khá đơn giản và thường thì các nhà phát triển không coi trọng chúng, xét về mặt đảm bảo mã được chế tạo tốt, hiệu quả và mô tả đúng ngữ nghĩa mục đích của HTML và CSS. . Trong trường hợp xấu nhất, JavaScript được sử dụng để tạo toàn bộ nội dung và kiểu trang web, khiến các trang của bạn không thể truy cập được và kém hiệu quả hơn (việc tạo các phần tử DOM rất tốn kém). Trong các trường hợp khác, các tính năng mới không được hỗ trợ nhất quán trên các trình duyệt, điều này có thể khiến một số tính năng và kiểu không hoạt động đối với một số người dùng. Các vấn đề về thiết kế đáp ứng cũng rất phổ biến — một trang web trông đẹp mắt trên trình duyệt máy tính để bàn có thể mang lại trải nghiệm tồi tệ trên thiết bị di động, vì nội dung quá nhỏ để đọc hoặc có lẽ trang web chậm do hoạt ảnh đắt tiền Hãy tiếp tục và xem xét cách chúng tôi có thể giảm lỗi trình duyệt chéo do HTML/CSS Chúng tôi đã nói rằng một chiến lược tốt để bắt đầu là thử nghiệm trong một vài trình duyệt hiện đại trên máy tính để bàn/thiết bị di động, để đảm bảo mã của bạn hoạt động bình thường, trước khi tiếp tục tập trung vào các vấn đề của nhiều trình duyệt Trong các bài viết Gỡ lỗi HTML và Gỡ lỗi CSS của chúng tôi, chúng tôi đã cung cấp một số hướng dẫn thực sự cơ bản về cách gỡ lỗi HTML/CSS — nếu bạn không quen với những điều cơ bản, bạn chắc chắn nên nghiên cứu các bài viết này trước khi tiếp tục Về cơ bản, vấn đề là kiểm tra xem mã HTML và CSS của bạn có được định dạng tốt và không chứa bất kỳ lỗi cú pháp nào không Ghi chú. Một vấn đề phổ biến với CSS và HTML phát sinh khi các quy tắc CSS khác nhau bắt đầu xung đột với nhau. Điều này đặc biệt có vấn đề khi bạn đang sử dụng mã của bên thứ ba. Ví dụ: bạn có thể sử dụng khung CSS và thấy rằng một trong các tên lớp mà nó sử dụng xung đột với tên bạn đã sử dụng cho mục đích khác. Hoặc bạn có thể thấy rằng HTML được tạo bởi một số loại API của bên thứ ba (ví dụ: tạo biểu ngữ quảng cáo) bao gồm tên lớp hoặc ID mà bạn đang sử dụng cho mục đích khác. Để đảm bảo điều này không xảy ra, trước tiên bạn cần nghiên cứu các công cụ bạn đang sử dụng và thiết kế mã của bạn xung quanh chúng. Nó cũng có giá trị "không gian tên" CSS, e. g. nếu bạn có một tiện ích, hãy đảm bảo rằng tiện ích đó có một lớp riêng biệt, sau đó khởi động bộ chọn để chọn các thành phần bên trong tiện ích có lớp này, do đó ít xảy ra xung đột hơn. Ví dụ Đối với HTML, việc xác thực liên quan đến việc đảm bảo rằng tất cả các thẻ của bạn được đóng và lồng vào nhau đúng cách, bạn đang sử dụng DOCTYPE và bạn đang sử dụng các thẻ cho đúng mục đích của chúng. Một chiến lược tốt là xác thực mã của bạn thường xuyên. Một dịch vụ có thể thực hiện việc này là Dịch vụ xác thực đánh dấu W3C, cho phép bạn trỏ tới mã của mình và trả về danh sách lỗi CSS cũng có câu chuyện tương tự — bạn cần kiểm tra xem tên thuộc tính của mình đã được viết đúng chính tả chưa, các giá trị thuộc tính đã được viết đúng chính tả chưa và có hợp lệ đối với các thuộc tính mà chúng được sử dụng hay không, bạn có bỏ sót bất kỳ dấu ngoặc nhọn nào không, v.v. W3C cũng có sẵn Trình xác thực CSS cho mục đích này Một tùy chọn tốt khác để chọn là cái gọi là ứng dụng Linter, ứng dụng này không chỉ chỉ ra lỗi mà còn có thể gắn cờ cảnh báo về các hành vi xấu trong CSS của bạn và các điểm khác bên cạnh đó. Linters nói chung có thể được tùy chỉnh để chặt chẽ hơn hoặc thoải mái hơn trong báo cáo lỗi/cảnh báo của họ Có nhiều ứng dụng kẻ nói dối trực tuyến, trong đó tốt nhất có lẽ là Dirty Markup (HTML, CSS, JavaScript) và CSS Lint (chỉ dành cho CSS). Những thứ này cho phép bạn dán mã của mình vào một cửa sổ và nó sẽ đánh dấu bất kỳ lỗi nào có dấu gạch chéo, sau đó có thể di chuột qua mã này để nhận thông báo lỗi cho bạn biết vấn đề là gì. Đánh dấu bẩn cũng cho phép bạn sửa lỗi đánh dấu của mình bằng nút Dọn dẹp Tuy nhiên, sẽ không thuận tiện lắm khi phải sao chép và dán mã của bạn vào một trang web để kiểm tra tính hợp lệ của nó nhiều lần. Những gì bạn thực sự muốn là một kẻ nói dối sẽ phù hợp với quy trình làm việc tiêu chuẩn của bạn với ít rắc rối nhất Nhiều trình chỉnh sửa mã có plugin linter. Ví dụ, trình chỉnh sửa mã Atom của GitHub có sẵn một hệ sinh thái plugin phong phú, với nhiều tùy chọn linting. Để cho bạn thấy một ví dụ về cách các plugin như vậy thường hoạt động
Các trình chỉnh sửa phổ biến khác có sẵn các gói linting tương tự. Ví dụ, xem
Các công cụ dành cho nhà phát triển được tích hợp trong hầu hết các trình duyệt cũng có các công cụ hữu ích để tìm lỗi, chủ yếu dành cho CSS Ghi chú. Các lỗi HTML không có xu hướng hiển thị dễ dàng như vậy trong các công cụ dành cho nhà phát triển, vì trình duyệt sẽ cố gắng tự động sửa phần đánh dấu có định dạng sai; Ví dụ: trong Firefox, trình kiểm tra CSS sẽ hiển thị các khai báo CSS không được áp dụng bị gạch bỏ, với hình tam giác cảnh báo. Di chuột vào tam giác cảnh báo sẽ cung cấp thông báo lỗi mô tả Devtools trình duyệt khác có tính năng tương tự Bây giờ, hãy chuyển sang xem xét một số sự cố HTML và CSS trên nhiều trình duyệt phổ biến nhất. Các lĩnh vực chính mà chúng tôi sẽ xem xét là thiếu hỗ trợ cho các tính năng hiện đại và các vấn đề về bố cục Đây là một vấn đề phổ biến, đặc biệt khi bạn cần hỗ trợ các trình duyệt cũ (chẳng hạn như Internet Explorer) hoặc bạn đang sử dụng các tính năng được triển khai trong một số trình duyệt nhưng chưa có trong tất cả. Nói chung, hầu hết chức năng HTML và CSS cốt lõi (chẳng hạn như các thành phần HTML cơ bản, màu cơ bản CSS và kiểu văn bản) hoạt động trên tất cả các trình duyệt mà bạn muốn hỗ trợ; . MDN hiển thị dữ liệu tương thích trình duyệt cho từng tính năng được ghi lại; Khi bạn đã xác định danh sách các công nghệ bạn sẽ sử dụng không được hỗ trợ phổ biến, bạn nên nghiên cứu xem chúng được hỗ trợ trên trình duyệt nào và những kỹ thuật liên quan nào hữu ích. Xem bên dưới Hành vi dự phòng HTMLMột số vấn đề có thể được giải quyết chỉ bằng cách tận dụng cách thức hoạt động tự nhiên của HTML/CSS Các phần tử HTML không được công nhận được trình duyệt coi là các phần tử nội tuyến ẩn danh (các phần tử nội tuyến hiệu quả không có giá trị ngữ nghĩa, tương tự như các phần tử 0 thành một thứ khác với 1 nếu cầnCác yếu tố phức tạp hơn như HTML 2, 3, 4, 5 và 6 (và các tính năng khác bên cạnh) có cơ chế tự nhiên để thêm dự phòng trong trường hợp các tài nguyên được liên kết đến không được hỗ trợ. Bạn có thể thêm nội dung dự phòng vào giữa thẻ mở và thẻ đóng và các trình duyệt không hỗ trợ sẽ bỏ qua phần tử bên ngoài một cách hiệu quả và chạy nội dung lồng nhauVí dụ
Ví dụ này bao gồm một liên kết đơn giản cho phép bạn tải xuống video ngay cả khi trình phát video HTML không hoạt động, vì vậy ít nhất người dùng vẫn có thể truy cập video Một ví dụ khác là các phần tử biểu mẫu. Khi các loại 7 mới được giới thiệu để nhập thông tin cụ thể vào các biểu mẫu, chẳng hạn như thời gian, ngày tháng, màu sắc, số, v.v. , nếu trình duyệt không hỗ trợ tính năng mới, trình duyệt sẽ sử dụng giá trị mặc định là 8. Các loại đầu vào đã được thêm vào, rất hữu ích, đặc biệt là trên nền tảng di động, nơi cung cấp cách nhập dữ liệu dễ dàng là rất quan trọng đối với trải nghiệm người dùng. Các nền tảng cung cấp các tiện ích giao diện người dùng khác nhau tùy thuộc vào loại đầu vào, chẳng hạn như tiện ích lịch để nhập ngày. Nếu trình duyệt không hỗ trợ kiểu nhập, người dùng vẫn có thể nhập dữ liệu cần thiếtVí dụ sau đây hiển thị đầu vào ngày và giờ
Đầu ra của mã này như sau Ghi chú. Bạn cũng có thể thấy điều này đang chạy trực tiếp dưới dạng kiểm tra biểu mẫu. html trên GitHub (cũng xem mã nguồn) Nếu bạn xem ví dụ, bạn sẽ thấy các tính năng giao diện người dùng đang hoạt động khi bạn cố gắng nhập dữ liệu. Trên các thiết bị có bàn phím động, các bàn phím dành riêng cho loại sẽ được hiển thị. Trên trình duyệt không hỗ trợ như Internet Explorer, các đầu vào sẽ chỉ mặc định là kiểu nhập văn bản thông thường, nghĩa là người dùng vẫn có thể nhập thông tin chính xác Hành vi dự phòng CSSCSS được cho là tốt hơn ở các dự phòng so với HTML. Nếu một trình duyệt gặp một tuyên bố hoặc quy tắc mà nó không hiểu, nó sẽ bỏ qua nó hoàn toàn mà không áp dụng nó hoặc đưa ra một lỗi. Điều này có thể gây khó chịu cho bạn và người dùng của bạn nếu một lỗi như vậy lọt vào mã sản xuất, nhưng ít nhất điều đó có nghĩa là toàn bộ trang web không bị sập vì một lỗi và nếu được sử dụng khéo léo, bạn có thể tận dụng nó để tạo lợi thế cho mình Hãy xem một ví dụ — một hộp đơn giản được tạo kiểu bằng CSS, có một số kiểu được cung cấp bởi các tính năng CSS khác nhau Ghi chú. Bạn cũng có thể xem ví dụ này đang chạy trực tiếp trên GitHub dưới dạng nút có dự phòng. html (cũng xem mã nguồn) Nút này có một số cách khai báo theo kiểu đó, nhưng hai cách chúng tôi quan tâm nhất như sau
Ở đây, chúng tôi đang cung cấp một RGBA 9 thay đổi độ mờ khi di chuột để cung cấp cho người dùng gợi ý rằng nút này có tính tương tác và một số sắc thái 0 bên trong bán trong suốt để cung cấp cho nút một chút kết cấu và chiều sâu. Mặc dù hiện được hỗ trợ đầy đủ, màu RGBA và bóng hộp vẫn chưa tồn tại mãi mãi; . Các trình duyệt không hỗ trợ màu RGBA sẽ bỏ qua ý nghĩa khai báo trong các trình duyệt cũ, nền hoàn toàn không hiển thị nên văn bản sẽ không thể đọc được, không tốt chút nàoĐể giải quyết vấn đề này, chúng tôi đã thêm một khai báo 9 thứ hai, chỉ định một màu hex — đây là cách được hỗ trợ trong các trình duyệt thực sự cũ và hoạt động như một phương án dự phòng nếu các tính năng sáng bóng hiện đại không hoạt động. Điều xảy ra là một trình duyệt truy cập trang này trước tiên sẽ áp dụng giá trị 9 đầu tiên; . Nếu không, nó sẽ bỏ qua toàn bộ khai báo và tiếp tụcGhi chú. Điều này cũng đúng với các tính năng CSS khác như truy vấn phương tiện, khối 4 và khối 5 — nếu chúng không được hỗ trợ, trình duyệt sẽ bỏ qua chúnghỗ trợ bộ chọnTất nhiên, sẽ không có tính năng CSS nào được áp dụng nếu bạn không sử dụng đúng bộ chọn để chọn thành phần bạn muốn tạo kiểu Trong danh sách các bộ chọn được phân tách bằng dấu phẩy, nếu bạn viết sai một bộ chọn, nó có thể không khớp với bất kỳ phần tử nào. Tuy nhiên, nếu bộ chọn không hợp lệ, toàn bộ danh sách bộ chọn sẽ bị bỏ qua, cùng với toàn bộ khối kiểu. Vì lý do này, chỉ bao gồm lớp giả hoặc phần tử giả có tiền tố 6 trong a , chẳng hạn như 7. Không bao gồm một lớp giả hoặc phần tử giả có tiền tố 6 trong một nhóm bộ chọn được phân tách bằng dấu phẩy bên ngoài danh sách bộ chọn dễ tha thứ 9 hoặc 0 vì tất cả các trình duyệt khác ngoài Firefox sẽ bỏ qua toàn bộ khối. Lưu ý rằng cả 9 và 0 đều có thể được chuyển thành tham số trong các danh sách bộ chọn khác, bao gồm :has() và 4Chúng tôi thấy rằng sẽ rất hữu ích khi kiểm tra phần tử mà bạn đang cố tạo kiểu bằng cách sử dụng công cụ phát triển của trình duyệt, sau đó xem xét đường dẫn breadcrumb của cây DOM mà trình kiểm tra DOM có xu hướng cung cấp để xem liệu bộ chọn của bạn có hợp lý so với phần tử đó hay không Ví dụ: trong các công cụ dành cho nhà phát triển Firefox, bạn nhận được loại đầu ra này ở cuối trình kiểm tra DOM Ví dụ: nếu bạn đang cố gắng sử dụng bộ chọn này, bạn có thể thấy rằng nó sẽ không chọn phần tử đầu vào như mong muốn
(Đầu vào biểu mẫu 5 không phải là con trực tiếp của 6; tốt hơn hết bạn nên sử dụng bộ chọn hậu duệ chung thay vì bộ chọn con)Xử lý tiền tố CSSMột loạt vấn đề khác xảy ra với tiền tố CSS — đây là một cơ chế ban đầu được sử dụng để cho phép các nhà cung cấp trình duyệt triển khai phiên bản tính năng CSS (hoặc JavaScript) của riêng họ trong khi công nghệ đang ở trạng thái thử nghiệm, vì vậy họ có thể sử dụng và lấy nó Ví dụ: Firefox sử dụng 7 và Chrome/Edge/Opera/Safari sử dụng 8. Các tiền tố khác mà bạn có thể gặp trong mã cũ bao gồm 9, được sử dụng bởi Internet Explorer và các phiên bản đầu tiên của Edge và 0, được sử dụng trong các phiên bản gốc của OperaCác tính năng có tiền tố không bao giờ được phép sử dụng trong các trang web sản xuất — chúng có thể bị thay đổi hoặc xóa mà không có cảnh báo, có thể gây ra sự cố về hiệu suất trong các phiên bản trình duyệt cũ yêu cầu chúng và là nguyên nhân gây ra sự cố giữa các trình duyệt. Đây đặc biệt là một vấn đề, chẳng hạn như khi các nhà phát triển quyết định chỉ sử dụng phiên bản 8 của một thuộc tính, điều này ngụ ý rằng trang web sẽ không hoạt động trong các trình duyệt khác. Điều này thực sự đã xảy ra nhiều đến mức các nhà cung cấp trình duyệt khác đã triển khai các phiên bản tiền tố 8 của một số thuộc tính CSS. Mặc dù các trình duyệt vẫn hỗ trợ một số tên thuộc tính có tiền tố, giá trị thuộc tính và lớp giả, giờ đây các tính năng thử nghiệm được đặt sau cờ để các nhà phát triển web có thể kiểm tra chúng trong quá trình phát triểnNếu sử dụng tiền tố, hãy chắc chắn rằng nó cần thiết; . Bạn có thể tra cứu những trình duyệt nào yêu cầu tiền tố trên các trang tham khảo MDN và các trang web như caniuse. com. Nếu không chắc chắn, bạn cũng có thể tìm hiểu bằng cách thực hiện một số thử nghiệm trực tiếp trên trình duyệt. Bao gồm phiên bản tiêu chuẩn không có tiền tố sau phần khai báo kiểu có tiền tố;
Hãy thử ví dụ đơn giản này
Khi bạn bắt đầu nhập biểu thị tên thuộc tính sau dấu chấm thứ hai (lưu ý rằng trong JavaScript, tên thuộc tính CSS được viết bằng chữ thường, không có gạch nối), bảng điều khiển JavaScript sẽ bắt đầu tự động điền tên của các thuộc tính tồn tại trong trình duyệt . Điều này rất hữu ích để tìm hiểu những thuộc tính nào được triển khai trong trình duyệt đó Nếu bạn cần bao gồm các tính năng hiện đại, hãy kiểm tra hỗ trợ tính năng bằng cách sử dụng 5, điều này cho phép bạn triển khai các thử nghiệm phát hiện tính năng gốc và lồng tính năng mới hoặc tiền tố vào trong khối 5Các vấn đề về thiết kế đáp ứngThiết kế đáp ứng là thực hành tạo bố cục web thay đổi để phù hợp với các yếu tố hình thức thiết bị khác nhau — ví dụ: chiều rộng, hướng màn hình khác nhau (dọc hoặc ngang) hoặc độ phân giải. Ví dụ: bố cục máy tính để bàn sẽ trông rất tệ khi được xem trên thiết bị di động, vì vậy bạn cần cung cấp bố cục phù hợp cho thiết bị di động bằng cách sử dụng truy vấn phương tiện và đảm bảo bố cục đó được áp dụng chính xác bằng cách sử dụng chế độ xem. Bạn có thể tìm thấy tài khoản chi tiết về các phương pháp như vậy trong Các khối xây dựng của thiết kế đáp ứng Độ phân giải cũng là một vấn đề lớn — ví dụ: thiết bị di động ít có khả năng cần hình ảnh lớn nặng hơn máy tính để bàn và có nhiều khả năng có kết nối internet chậm hơn và thậm chí có thể có gói dữ liệu đắt tiền khiến băng thông lãng phí trở thành vấn đề lớn hơn. Ngoài ra, các thiết bị khác nhau có thể có nhiều độ phân giải khác nhau, nghĩa là hình ảnh nhỏ hơn có thể xuất hiện theo pixel. Có một số kỹ thuật cho phép bạn giải quyết các vấn đề như vậy, từ truy vấn phương tiện di động đầu tiên đơn giản đến phức tạp hơn, bao gồm các thuộc tính và phần tử của 4 và 7Có nhiều vấn đề khác mà bạn sẽ gặp phải với HTML và CSS, khiến kiến thức về cách tìm câu trả lời trực tuyến trở nên vô giá Trong số các nguồn thông tin hỗ trợ tốt nhất là Mạng nhà phát triển Mozilla (đó là nơi bạn đang ở. ), tràn ngăn xếp. com, và caniuse. com Để sử dụng Mạng nhà phát triển Mozilla (MDN), hầu hết mọi người thực hiện tìm kiếm trên công cụ tìm kiếm về công nghệ mà họ đang cố gắng tìm thông tin, cộng với thuật ngữ "mdn", ví dụ: "mdn HTML video". MDN chứa một số loại nội dung hữu ích
chó săn. com cung cấp thông tin hỗ trợ, cùng với một số liên kết tài nguyên bên ngoài hữu ích. Ví dụ: xem (bạn chỉ cần nhập tính năng bạn đang tìm kiếm vào hộp văn bản) ngăn xếp chồng lên nhau. com (SO) là một trang diễn đàn nơi bạn có thể đặt câu hỏi và nhờ các nhà phát triển đồng nghiệp chia sẻ giải pháp của họ, tra cứu các bài đăng trước đó và trợ giúp các nhà phát triển khác. Bạn nên xem và xem liệu đã có câu trả lời cho câu hỏi của bạn chưa, trước khi đăng câu hỏi mới. Ví dụ: chúng tôi đã tìm kiếm "tắt tự động lấy nét trên hộp thoại HTML" trên SO và rất nhanh chóng tìm ra Vô hiệu hóa lấy nét tự động showModal bằng các thuộc tính HTML Ngoài ra, hãy thử tìm kiếm công cụ tìm kiếm yêu thích của bạn để tìm câu trả lời cho vấn đề của bạn. Việc tìm kiếm các thông báo lỗi cụ thể nếu bạn có chúng thường rất hữu ích — các nhà phát triển khác có thể sẽ gặp vấn đề tương tự như bạn Bây giờ, bạn đã quen với các loại sự cố HTML và CSS chính của trình duyệt chéo mà bạn sẽ gặp phải trong quá trình phát triển web và cách khắc phục chúng Tại sao mã HTML của tôi không chạy trong Chrome?Bạn có thể chưa lưu các thay đổi sau khi viết mã (rất có thể). Sự cố với trình duyệt (tải trong trình duyệt khác) Kiểm tra tiện ích mở rộng (chỉ để làm rõ)
Tại sao mã HTML của tôi không hoạt động?Đảm bảo rằng trình chỉnh sửa của bạn được đặt thành văn bản thuần túy để không có ký tự đặc biệt nào được chèn vào HTML và CSS của bạn . Nếu bạn gặp sự cố, hãy xem nguồn bằng menu “xem nguồn” (trong Safari, Xem > Nguồn). Điều này thường sẽ phát hiện ra các vấn đề như các ký tự đặc biệt mà bạn có thể không thấy trong trình chỉnh sửa thông thường của mình.
Tại sao mã HTML của tôi hiển thị dưới dạng văn bản trong Chrome?Lý do phổ biến nhất khiến HTML xuất hiện trong trình duyệt là do tiêu đề Loại nội dung được gửi bởi máy chủ web . Để hiển thị trang HTML, trình duyệt sẽ kiểm tra tiêu đề này, tìm kiếm giá trị văn bản/html. Nếu bạn đang nhìn thấy mã thô trên màn hình, giá trị của tiêu đề này có thể là văn bản/thuần túy.
Tại sao mã HTML của tôi không chạy trong mã VS?Đôi khi điều tốt nhất bạn có thể làm là bắt đầu VSCode từ đầu. Đầu tiên, lưu tất cả công việc của bạn. Sau đó, đóng VSCode, điều này cũng sẽ dừng tất cả các tiện ích mở rộng bạn đã cài đặt. Sau đó, mở lại VSCode và thử lại – chuyển đến tệp HTML bạn muốn xem, nhấp chuột phải và chọn "Mở bằng Máy chủ Trực tiếp" |