Tại sao mã html của tôi không hoạt động trong chrome

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ụ .audio-player ul a

Đố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

1. Cài đặt Atom (nếu bạn chưa cài đặt phiên bản cập nhật) — tải xuống từ trang Atom được liên kết ở trên
2. Chuyển đến hộp thoại Preferences… của Atom (e. g. bằng cách Chọn Atom > Preferences… trên Mac, hoặc File > Preferences… trên Windows/Linux) và chọn tùy chọn Install trong menu bên trái
3. Trong trường văn bản Tìm kiếm gói, nhập "lint" và nhấn Enter/Return để tìm kiếm các gói liên quan đến xơ vải
4. Bạn sẽ thấy một gói có tên là lint ở đầu danh sách. Cài đặt cái này trước (bằng cách sử dụng nút Cài đặt), vì các phần mềm khác dựa vào nó để hoạt động. Sau đó, cài đặt plugin linter-csslint để linting CSS và plugin linter-tidy để linting HTML
5. Sau khi các gói cài đặt xong, hãy thử tải lên tệp HTML và tệp CSS. bạn sẽ thấy bất kỳ sự cố nào được đánh dấu bằng các vòng tròn màu lục (đối với cảnh báo) và màu đỏ (đối với lỗi) bên cạnh số dòng và một bảng điều khiển riêng biệt ở dưới cùng cung cấp số dòng, thông báo lỗi và đôi khi là các giá trị được đề xuất hoặc các bản sửa lỗi khác

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

• SublimeLinter cho văn bản tuyệt vời
• Kẻ nói dối Notepad++
• kẻ nói dối VSCode

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 HTML

Mộ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ử ). Ví dụ, bạn vẫn có thể gọi chúng bằng tên và tạo kiểu cho chúng bằng CSS — bạn chỉ cần đảm bảo rằng chúng hoạt động như bạn muốn. Tạo kiểu cho chúng giống như cách bạn làm với bất kỳ phần tử nào khác, bao gồm đặt thuộc tính

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

Các yếu tố phức tạp hơn như HTML

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

Ví dụ

<video id="video" controls preload="metadata" poster="img/poster.jpg">
  <source
    src="video/tears-of-steel-battle-clip-medium.webm"
    type="video/webm" />
  
  <p>
    Your browser does not support WebM video; here is a link to
    <a href="video/tears-of-steel-battle-clip-medium.mp4"
      >view the video directlya
    >
  p>
video>

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

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

Ví dụ sau đây hiển thị đầu vào ngày và giờ

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

Đầ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 CSS

CSS đượ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

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

Ở đây, chúng tôi đang cung cấp một RGBA

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

Để giải quyết vấn đề này, chúng tôi đã thêm một khai báo

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

Ghi 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

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

hỗ trợ bộ chọn

Tấ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ố

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

form > #date

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

form > #date

form > #date

Chú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

form > #date

(Đầu vào biểu mẫu

form > #date

form > #date

Xử lý tiền tố CSS

Mộ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

form > #date

form > #date

form > #date

.masked {
  -webkit-mask-image: url(MDN.svg);
  mask-image: url(MDN.svg);
  -webkit-mask-size: 50%;
  mask-size: 50%;
}

Cá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

form > #date

form > #date

Nế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ố;

.masked {
  -webkit-mask-image: url(MDN.svg);
  mask-image: url(MDN.svg);
  -webkit-mask-size: 50%;
  mask-size: 50%;
}

Hãy thử ví dụ đơn giản này

1. Sử dụng trang này hoặc một trang web khác có tiêu đề nổi bật hoặc yếu tố cấp độ khối khác
2. Phải/Cmd + nhấp vào phần tử được đề cập và chọn Kiểm tra/Kiểm tra phần tử (hoặc bất kỳ tùy chọn nào trong trình duyệt của bạn) - điều này sẽ mở ra các công cụ dành cho nhà phát triển trong trình duyệt của bạn, với phần tử được đánh dấu trong trình kiểm tra DOM
3. Tìm kiếm một tính năng bạn có thể sử dụng để chọn phần tử đó. Ví dụ: tại thời điểm viết bài này, trang này trên MDN có logo có ID là

   .masked {
     -webkit-mask-image: url(MDN.svg);
     mask-image: url(MDN.svg);
     -webkit-mask-size: 50%;
     mask-size: 50%;
   }
   

   3
4. Lưu trữ một tham chiếu đến phần tử này trong một biến, ví dụ

   const test = document.getElementById("mdn-docs-logo");
   

5. Bây giờ hãy thử đặt một giá trị mới cho thuộc tính CSS mà bạn quan tâm trên phần tử đó;

   test.style.transform = "rotate(90deg)";
   

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

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

button {
  /* … */

  background-color: #ff0000;
  background-color: rgba(255 0 0 / 1);
  box-shadow: inset 1px 1px 3px rgba(255 255 255 / 0.4), inset -1px -1px 3px
      rgba(0 0 0 / 0.4);
}

button:hover {
  background-color: rgba(255 0 0 / 0.5);
}

button:active {
  box-shadow: inset 1px 1px 3px rgba(0 0 0 / 0.4), inset -1px -1px 3px rgba(255
          255 255 / 0.4);
}

Các vấn đề về thiết kế đáp ứng

Thiế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

<form>
  <div>
    <label for="date">Enter a date:label>
    <input id="date" type="date" />
  div>
  <div>
    <label for="time">Enter a time:label>
    <input id="time" type="time" />
  div>
form>

.masked {
  -webkit-mask-image: url(MDN.svg);
  mask-image: url(MDN.svg);
  -webkit-mask-size: 50%;
  mask-size: 50%;
}

Có 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

• Reference material with browser support information for client-side web technologies, e.g. the
• Tài liệu tham khảo hỗ trợ khác, e. g. Hướng dẫn về các loại và định dạng phương tiện trên web,
• Các hướng dẫn hữu ích giải quyết các vấn đề cụ thể, chẳng hạn như Tạo trình phát video trên nhiều trình duyệt

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?

Tại sao mã HTML của tôi không hoạt động?

Tại sao mã HTML của tôi hiển thị dưới dạng văn bản trong Chrome?

Tại sao mã HTML của tôi không chạy trong mã VS?