Kiểm tra trình duyệt hỗ trợ CSS

Đầu năm 2017, tôi đã trình bày một vài hội thảo về chủ đề phát hiện tính năng CSS, có tiêu đề Phát hiện tính năng CSS năm 2017

Một người bạn của tôi, Justin Slack từ New Media Labs, gần đây đã gửi cho tôi một liên kết đến tiện ích mở rộng Trình quản lý truy vấn tính năng phi thường (có sẵn cho cả Chrome và Firefox), của nhà phát triển người Nigeria Ire Aderinokun. Đây dường như là một bổ sung hoàn hảo cho tài liệu hội thảo của tôi về chủ đề này

Tuy nhiên, khi quay lại tài liệu, tôi nhận ra công việc của mình về chủ đề này đã cũ đi bao nhiêu trong 18 tháng qua

Cảnh quan CSS đã trải qua một số thay đổi kiến ​​tạo

• Cách tiếp cận Atomic CSS, mặc dù lúc đầu bị ghét bỏ rộng rãi, nhưng đã đạt được một số sức hút thông qua các thư viện như Tailwind và có lẽ đã ảnh hưởng đến việc bổ sung một số lớp tiện ích mới vào Bootstrap 4
• CSS-in-JS bùng nổ về mức độ phổ biến, với các Thành phần được tạo kiểu đi đầu trong phong trào
• Thông số kỹ thuật Bố cục lưới CSS đã được các nhà cung cấp trình duyệt áp dụng với tốc độ đáng ngạc nhiên và gần như ngay lập tức bị xử phạt khi sẵn sàng sản xuất

Điều trên thôi thúc tôi không chỉ xem lại tài liệu hiện có của mình mà còn suy nghĩ về trạng thái phát hiện tính năng CSS trong 18 tháng tới

Nói ngắn gọn

1. ❓ Tại sao chúng ta lại cần phát hiện tính năng CSS?
2. 🛠️ Đâu là những cách tốt (và không tốt) để phát hiện tính năng?
3. 🤖 Tương lai của tính năng phát hiện tính năng CSS sẽ như thế nào?

CSS tương thích với nhiều trình duyệt

Khi làm việc với CSS, có vẻ như một trong những mối quan tâm hàng đầu luôn là hỗ trợ tính năng không nhất quán giữa các trình duyệt. Điều này có nghĩa là kiểu dáng CSS có thể trông hoàn hảo trên các trình duyệt tôi chọn, nhưng có thể bị hỏng hoàn toàn trên một trình duyệt khác (có lẽ còn phổ biến hơn)

May mắn thay, xử lý hỗ trợ trình duyệt không nhất quán là chuyện nhỏ do một tính năng chính trong thiết kế của chính ngôn ngữ CSS. Hành vi này, được gọi là khả năng chịu lỗi, có nghĩa là trình duyệt bỏ qua mã CSS mà họ không hiểu. Điều này hoàn toàn trái ngược với các ngôn ngữ như JavaScript hoặc PHP dừng mọi thực thi để đưa ra lỗi

Hàm ý quan trọng ở đây là nếu chúng ta phân lớp CSS phù hợp, các thuộc tính sẽ chỉ được áp dụng nếu trình duyệt hiểu ý nghĩa của chúng. Ví dụ: bạn có thể bao gồm quy tắc CSS sau và trình duyệt sẽ bỏ qua nó— ghi đè màu vàng ban đầu, nhưng bỏ qua giá trị vô nghĩa thứ ba

background-color: yellow;
background-color: blue; /* Overrides yellow */
background-color: aqy8godf857wqe6igrf7i6dsgkv; /* Ignored */

Để minh họa cách điều này có thể được sử dụng trong thực tế, hãy để tôi bắt đầu với một tình huống giả định nhưng đơn giản

Một khách hàng đến với bạn với mong muốn mạnh mẽ đưa lời kêu gọi hành động (ở dạng cửa sổ bật lên) trên trang chủ của họ. Với kỹ năng front-end tuyệt vời của mình, bạn có thể nhanh chóng tạo ra thông báo bật lên khó chịu nhất mà con người từng biết

Thật không may, hóa ra vợ anh ta có một máy Windows XP cũ chạy Internet Explorer 8. Bạn bị sốc khi biết rằng những gì cô ấy nhìn thấy không còn giống với cửa sổ bật lên ở bất kỳ hình dạng hoặc hình thức nào

Nhưng mà. Chúng tôi nhớ rằng bằng cách sử dụng khả năng chịu lỗi kỳ diệu của CSS, chúng tôi có thể khắc phục tình trạng này. Chúng tôi xác định tất cả các phần nhiệm vụ quan trọng của phong cách (e. g. , cái bóng là tốt để có, nhưng không thêm bất kỳ thứ gì hữu ích về khả năng sử dụng) và bộ đệm chuẩn bị trước tất cả kiểu dáng cốt lõi với dự phòng

Điều này có nghĩa là CSS của chúng ta bây giờ trông giống như sau (phần ghi đè được tô sáng cho rõ ràng)

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

Ví dụ trên thường thuộc cách tiếp cận rộng hơn của Nâng cao lũy tiến. Nếu bạn muốn tìm hiểu thêm về Nâng cao tiến bộ, hãy xem ấn bản thứ hai của Aaron Gustafson trong cuốn sách xuất sắc của anh ấy về chủ đề này, có tiêu đề Thiết kế web thích ứng. Chế tạo trải nghiệm phong phú với tính năng tăng cường lũy ​​tiến (2016)

Nếu bạn là người mới bắt đầu phát triển giao diện người dùng, bạn có thể thắc mắc làm thế quái nào mà một người biết được mức độ hỗ trợ của các thuộc tính CSS cụ thể. Câu trả lời ngắn gọn là bạn càng làm việc với CSS nhiều, bạn sẽ càng học thuộc lòng những điều này. Tuy nhiên, có một số công cụ có thể giúp chúng tôi trên đường đi

• Tôi có thể sử dụng là một thư mục được sử dụng rộng rãi chứa các ma trận hỗ trợ có thể tìm kiếm, cập nhật cho tất cả các tính năng CSS
• Stylelint có một plugin phi thường được gọi là Không có tính năng trình duyệt không được hỗ trợ, đưa ra lỗi quét đối với CSS không được hỗ trợ (được xác định qua Danh sách trình duyệt) trong chính trình chỉnh sửa của bạn hoặc thông qua lệnh đầu cuối
• Có một số công cụ như BrowserStack hoặc Kiểm tra trình duyệt chéo cho phép bạn kiểm tra từ xa trang web của mình trên các trình duyệt khác nhau. Lưu ý rằng đây là những dịch vụ trả phí, mặc dù BrowserStack có một bậc miễn phí dành cho các dự án nguồn mở

Ngay cả khi chúng tôi có tất cả những điều trên, việc học thuộc lòng hỗ trợ CSS sẽ giúp chúng tôi lập kế hoạch tạo kiểu từ trước và tăng hiệu quả khi viết nó

Giới hạn của khả năng chịu lỗi CSS

Tuần sau, khách hàng của bạn trở lại với một yêu cầu mới. Anh ấy muốn thu thập một số phản hồi từ người dùng về những thay đổi trước đó đã được thực hiện cho trang chủ—một lần nữa, với cửa sổ bật lên

Một lần nữa, nó sẽ trông như sau trong Internet Explorer 8

Lần này chủ động hơn, bạn sử dụng các kỹ năng dự phòng mới của mình để thiết lập mức kiểu dáng cơ bản hoạt động trên Internet Explorer 8 và kiểu dáng nâng cao cho mọi thứ khác. Thật không may, chúng tôi vẫn gặp sự cố…

Để thay thế các nút radio mặc định bằng trái tim ASCII, chúng tôi sử dụng phần tử giả

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

0. Tuy nhiên, phần tử giả này không được hỗ trợ trong Internet Explorer 8. Điều này có nghĩa là biểu tượng trái tim không hiển thị; . Ngụ ý là cả hành vi thay thế lẫn hành vi mặc định đều không được hiển thị

Ghi công cho John Faulds vì đã chỉ ra rằng thực sự có thể khiến phần tử giả

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

0 hoạt động trong Internet Explorer 8 nếu bạn thay thế cú pháp dấu hai chấm chính thức bằng một dấu hai chấm

Nói tóm lại, chúng tôi có một quy tắc (

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

1) mà việc thực thi của nó không bị ràng buộc với hỗ trợ của chính nó (và do đó là cấu trúc dự phòng của chính nó), nhưng với mức hỗ trợ của một tính năng CSS hoàn toàn riêng biệt (

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

0)

Đối với tất cả ý định và mục đích, cách tiếp cận phổ biến là khám phá liệu có giải pháp đơn giản hơn mà không dựa vào

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

0. Tuy nhiên, vì lợi ích của ví dụ này, giả sử rằng giải pháp trên là không thể thương lượng (và đôi khi là như vậy)

Nhập Phát hiện tác nhân người dùng

Một giải pháp có thể là xác định trình duyệt mà người dùng đang sử dụng và sau đó chỉ áp dụng

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

1 nếu trình duyệt của họ hỗ trợ phần tử giả

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

0

Trên thực tế, cách tiếp cận này gần như lâu đời như chính trang web. Nó được gọi là Phát hiện tác nhân người dùng hay thông tục hơn là đánh hơi trình duyệt

Nó thường được thực hiện như sau

• Tất cả các trình duyệt đều thêm thuộc tính JavaScript trên đối tượng cửa sổ chung có tên là

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  9 và đối tượng này chứa thuộc tính chuỗi

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  20
• Trong trường hợp của tôi, chuỗi

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  20 là.

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  22
• Mozilla Developer Network có một danh sách toàn diện về cách sử dụng những điều trên để xác định trình duyệt
• Nếu chúng tôi đang sử dụng Chrome, thì điều sau đây sẽ trả về true.

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  23
• Tuy nhiên, trong phần Internet Explorer trên MDN, chúng tôi chỉ nhận được

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  24. IE không đặt tên của nó ở định dạng

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  25/

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  26
• May mắn thay, Internet Explorer cung cấp khả năng phát hiện gốc của riêng nó dưới dạng Nhận xét có điều kiện

Điều này có nghĩa là việc thêm phần sau vào HTML của chúng ta là đủ

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

2

Điều này có nghĩa là những điều trên sẽ được áp dụng, nếu trình duyệt là phiên bản Internet Explorer thấp hơn phiên bản 9 (IE 9 hỗ trợ

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

0)—ghi đè hiệu quả thuộc tính

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

1.
Có vẻ đủ đơn giản phải không?

Thật không may, theo thời gian, một số lỗi nghiêm trọng đã xuất hiện trong Phát hiện tác nhân người dùng. Nhiều đến mức Internet Explorer ngừng hỗ trợ Nhận xét có điều kiện từ phiên bản 10 trở đi. Bạn cũng sẽ nhận thấy rằng trong chính liên kết Mạng nhà phát triển Mozilla, phần sau đây được hiển thị trong một cảnh báo màu cam

Nó đáng để lặp lại. rất hiếm khi nên sử dụng tác nhân người dùng đánh hơi. Bạn hầu như luôn có thể tìm ra cách tốt hơn, tương thích rộng rãi hơn để giải quyết vấn đề của mình

Hạn chế lớn nhất của Phát hiện tác nhân người dùng là các nhà cung cấp trình duyệt bắt đầu giả mạo chuỗi tác nhân người dùng của họ theo thời gian do những điều sau

• Nhà phát triển thêm tính năng CSS không được hỗ trợ trong trình duyệt
• Nhà phát triển thêm mã Phát hiện tác nhân người dùng để cung cấp dự phòng cho trình duyệt
• Trình duyệt cuối cùng đã thêm hỗ trợ cho tính năng CSS cụ thể đó
• Mã phát hiện tác nhân người dùng ban đầu không được cập nhật để xem xét điều này
• Mã luôn hiển thị dự phòng, ngay cả khi trình duyệt hiện hỗ trợ tính năng CSS
• Trình duyệt sử dụng chuỗi tác nhân người dùng giả để cung cấp cho người dùng trải nghiệm tốt nhất trên web

Hơn nữa, ngay cả khi chúng tôi có thể xác định chính xác mọi loại và phiên bản trình duyệt, chúng tôi sẽ phải tích cực duy trì và cập nhật Phát hiện tác nhân người dùng của mình để phản ánh trạng thái hỗ trợ tính năng của các trình duyệt đó (mặc dù các trình duyệt thậm chí còn chưa được phát triển)

Điều quan trọng cần lưu ý là mặc dù có những điểm tương đồng bề ngoài giữa phát hiện tính năng và Phát hiện tác nhân người dùng, nhưng phát hiện tính năng có một cách tiếp cận hoàn toàn khác so với Phát hiện tác nhân người dùng. Theo Mạng nhà phát triển Mozilla, khi chúng tôi sử dụng tính năng phát hiện, về cơ bản chúng tôi đang làm như sau

1. 🔎 Kiểm tra xem trình duyệt có thực sự chạy được một (hoặc nhiều dòng) mã HTML, CSS hoặc JavaScript cụ thể hay không
2. 💪 Thực hiện một hành động cụ thể dựa trên kết quả của bài kiểm tra này

Chúng ta cũng có thể xem Wikipedia để có định nghĩa chính thức hơn (nhấn mạnh của tôi)

Phát hiện tính năng (cũng là kiểm tra tính năng) là một kỹ thuật được sử dụng trong phát triển web để xử lý sự khác biệt giữa các môi trường thời gian chạy (thường là trình duyệt web hoặc tác nhân người dùng), bằng cách kiểm tra theo chương trình để tìm manh mối mà môi trường có thể cung cấp hoặc không cung cấp chức năng nhất định. Thông tin này sau đó được sử dụng để làm cho ứng dụng thích ứng theo một cách nào đó để phù hợp với môi trường. để sử dụng một số API nhất định hoặc điều chỉnh để có trải nghiệm người dùng tốt hơn

Mặc dù hơi bí truyền nhưng định nghĩa này làm nổi bật hai khía cạnh quan trọng của việc phát hiện tính năng

• Phát hiện tính năng là một kỹ thuật, trái ngược với một công cụ hoặc công nghệ cụ thể. Điều này có nghĩa là có nhiều cách khác nhau (có giá trị như nhau) để thực hiện phát hiện tính năng
• Phát hiện tính năng kiểm tra mã theo chương trình. Điều này có nghĩa là các trình duyệt thực sự chạy một đoạn mã để xem điều gì xảy ra, trái ngược với việc chỉ sử dụng suy luận hoặc so sánh nó với danh sách/tham chiếu lý thuyết như được thực hiện với Phát hiện tác nhân người dùng

Phát hiện tính năng CSS với @supports

Khái niệm cốt lõi là không hỏi "Trình duyệt này là gì?"

—Rob Larson, Trang web không chắc chắn. Phát triển web trong bối cảnh thay đổi (2014)

Hầu hết các trình duyệt hiện đại đều hỗ trợ một bộ quy tắc CSS gốc được gọi là quy tắc có điều kiện CSS. Những điều này cho phép chúng tôi kiểm tra các điều kiện nhất định trong chính biểu định kiểu. Lần lặp lại mới nhất (được gọi là mô-đun cấp 3) được Nhóm làm việc Cascading Style Sheets mô tả như sau

Mô-đun này chứa các tính năng của CSS để xử lý có điều kiện các phần của biểu định kiểu, tùy thuộc vào khả năng của bộ xử lý hoặc tài liệu mà biểu định kiểu đang được áp dụng cho. Nó bao gồm và mở rộng chức năng của CSS cấp 2 [CSS21], được xây dựng trên CSS cấp 1 [CSS1]. Các tiện ích mở rộng chính so với cấp 2 là cho phép lồng các quy tắc nhất định bên trong '@media' và bổ sung quy tắc '@supports' để xử lý có điều kiện

Nếu bạn đã từng sử dụng

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

29,

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

30 hoặc

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

31 thì bạn đã có kinh nghiệm làm việc với các quy tắc có điều kiện của CSS. Ví dụ: khi sử dụng truy vấn phương tiện CSS, chúng tôi thực hiện như sau

• Gói một hoặc nhiều khai báo CSS trong một khối mã bằng dấu ngoặc nhọn,

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  32
• Thêm vào trước khối mã một truy vấn

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  29 với thông tin bổ sung
• Bao gồm một loại phương tiện tùy chọn. Đây có thể là

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  34,

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  35,

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  36 hoặc loại

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  37 thường được sử dụng
• Biểu thức chuỗi với

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  38/______239 để xác định phạm vi. Ví dụ: nếu chúng tôi sử dụng

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  30, nó sẽ kích hoạt truy vấn nếu kích thước màn hình rộng hơn 300 pixel và nhỏ hơn 800 pixel

Thông số truy vấn tính năng (bản nháp của biên tập viên) quy định hành vi tương tự như ví dụ trên. Thay vì sử dụng biểu thức truy vấn để đặt điều kiện dựa trên kích thước màn hình, chúng tôi viết một biểu thức để xác định phạm vi khối mã của mình theo hỗ trợ CSS của trình duyệt (nhấn mạnh của tôi)

Quy tắc '@supports cho phép CSS được điều chỉnh dựa trên hỗ trợ triển khai cho các thuộc tính và giá trị CSS. Quy tắc này giúp các tác giả sử dụng các tính năng CSS mới dễ dàng hơn nhiều và cung cấp dự phòng tốt cho các triển khai không hỗ trợ các tính năng đó. Điều này đặc biệt quan trọng đối với các tính năng CSS cung cấp các cơ chế bố cục mới và đối với các trường hợp khác khi một tập hợp các kiểu liên quan cần được điều chỉnh dựa trên hỗ trợ thuộc tính

Tóm lại, truy vấn tính năng là một công cụ CSS tích hợp nhỏ cho phép chúng tôi chỉ thực thi mã (như ví dụ

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

1 ở trên) khi trình duyệt hỗ trợ một tính năng CSS riêng biệt—và giống như truy vấn phương tiện, chúng tôi có thể xâu chuỗi các biểu thức như sau.

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

32

Vì vậy, về mặt lý thuyết, chúng ta sẽ có thể làm như sau

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

3

Thật không may, có vẻ như trong ví dụ của chúng tôi ở trên, thuộc tính

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

1 không kích hoạt, mặc dù thực tế là trình duyệt của bạn có thể hỗ trợ

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

0

Đó là bởi vì có một số lưu ý khi sử dụng

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

35

• Trước hết, các truy vấn tính năng CSS chỉ hỗ trợ các thuộc tính CSS chứ không hỗ trợ phần tử giả CSS, chẳng hạn như

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  0
• Thứ hai, bạn sẽ thấy rằng trong ví dụ trên, điều kiện

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  37 của chúng tôi kích hoạt chính xác. Tuy nhiên, nếu chúng tôi thử nghiệm nó trong Internet Explorer 11 (hỗ trợ cả

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  38 và

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  39) thì nó không kích hoạt. Đưa cái gì?

Phát hiện tính năng CSS với Modernizr

May mắn thay, cách khắc phục khá dễ dàng. Nó xuất hiện dưới dạng một thư viện JavaScript mã nguồn mở có tên Modernizr, ban đầu được phát triển bởi Faruk Ateş (mặc dù hiện tại nó có một số tên tuổi khá lớn đằng sau nó, như Paul Irish từ Chrome và Alex Sexton từ Stripe)

Trước khi tìm hiểu về Modernizr, chúng ta hãy giải quyết một chủ đề gây nhầm lẫn lớn cho nhiều nhà phát triển (một phần do chính cái tên “Modernizr”). Modernizr không biến đổi mã của bạn hoặc kích hoạt một cách kỳ diệu các tính năng không được hỗ trợ. Trên thực tế, thay đổi duy nhất mà Modernzr thực hiện đối với mã của bạn là thêm các lớp CSS cụ thể vào thẻ

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

51 của bạn

Điều này có nghĩa là bạn có thể kết thúc với một cái gì đó như sau

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

3

Đó là một thẻ HTML lớn. Tuy nhiên, nó cho phép chúng ta làm điều gì đó siêu mạnh mẽ. sử dụng bộ chọn hậu duệ CSS để áp dụng có điều kiện các quy tắc CSS

Khi Modernizr chạy, nó sử dụng JavaScript để phát hiện những gì trình duyệt của người dùng hỗ trợ và nếu nó hỗ trợ tính năng đó, Modernizr sẽ thêm tên của nó dưới dạng một lớp vào

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

51. Ngoài ra, nếu trình duyệt không hỗ trợ tính năng này, nó sẽ thêm tiền tố vào lớp được thêm vào bằng

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

53 (e. g. ,

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

54 trong ví dụ

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

0 của chúng tôi). Điều này có nghĩa là chúng ta có thể viết quy tắc có điều kiện của mình trong biểu định kiểu như sau

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

5

Ngoài ra, chúng tôi có thể sao chép chuỗi các biểu thức

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

35 trong Modernizr như sau

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

3

Vì Modernizr chạy bằng JavaScript (và không sử dụng bất kỳ API trình duyệt gốc nào), nó được hỗ trợ hiệu quả trên hầu hết các trình duyệt. Điều này có nghĩa là bằng cách tận dụng các lớp như

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

57 và

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

58, chúng tôi có thể bao gồm tất cả các cơ sở của mình cho Internet Explorer 8, trong khi vẫn cung cấp CSS tiên tiến nhất cho các trình duyệt mới nhất

Điều quan trọng cần lưu ý là kể từ khi phát hành Modernizr 3. 0, chúng tôi không còn có thể tải xuống tệp

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

59 tiêu chuẩn chứng khoán với mọi thứ ngoại trừ bồn rửa trong nhà bếp. Thay vào đó, chúng tôi phải tạo rõ ràng mã Modernizr tùy chỉnh của riêng mình thông qua trình hướng dẫn của họ (để sao chép hoặc tải xuống). Điều này rất có thể là để đáp ứng với sự tập trung toàn cầu ngày càng tăng vào hiệu suất web trong vài năm qua. Kiểm tra nhiều tính năng hơn góp phần tải nhiều hơn, vì vậy Modernizr muốn chúng tôi chỉ kiểm tra những gì chúng tôi cần

Vì vậy, tôi nên luôn luôn sử dụng Modernizr?

Cho rằng Modernizr được hỗ trợ hiệu quả trên tất cả các trình duyệt, liệu có bất kỳ điểm nào trong việc sử dụng các truy vấn tính năng CSS không?

Đầu tiên và quan trọng nhất, việc Modernizr không cắm trực tiếp vào API trình duyệt là điểm mạnh nhất của nó—nó không phụ thuộc vào tính khả dụng của một API trình duyệt cụ thể. Tuy nhiên, lợi ích này đi kèm với chi phí và chi phí đó là chi phí bổ sung cho một số thứ mà hầu hết các trình duyệt hỗ trợ thông qua

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

35—đặc biệt là khi bạn phân phối chi phí bổ sung này cho tất cả người dùng một cách bừa bãi để hướng tới một lượng nhỏ người dùng biên. Điều quan trọng cần lưu ý là, trong ví dụ của chúng tôi ở trên, Internet Explorer 8 hiện chỉ đứng ở mức 0. 18% sử dụng toàn cầu)

So với cảm ứng nhẹ của

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

35 thì Modernizr có những nhược điểm sau

• Cách tiếp cận củng cố sự phát triển của Modernizr được thúc đẩy bởi giả định rằng Modernizr “có nghĩa là từ ngày đầu tiên trở thành không cần thiết. ”
• Trong phần lớn các trường hợp, Modernizr cần được hiển thị chặn. Điều này có nghĩa là Modernizr cần được tải xuống và thực thi bằng JavaScript trước khi một trang web thậm chí có thể hiển thị nội dung trên màn hình—tăng thời gian tải trang của chúng tôi (đặc biệt là trên thiết bị di động)
• Để chạy thử nghiệm, Modernizr thường phải thực sự xây dựng các nút HTML ẩn và kiểm tra xem nó có hoạt động hay không. Ví dụ: để kiểm tra hỗ trợ

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  32, Modernizr thực thi mã JavaScript sau.

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  33. Điều này tiêu tốn sức mạnh xử lý của CPU có thể được sử dụng ở nơi khác
• Mẫu bộ chọn hậu duệ CSS được Modernizr sử dụng làm tăng tính đặc hiệu của CSS. (Xem bài viết xuất sắc của Harry Roberts về lý do tại sao “tính cụ thể là một đặc điểm tốt nhất nên tránh. ”)
• Mặc dù Modernizr bao gồm rất nhiều thử nghiệm (150+), nhưng nó vẫn không bao gồm toàn bộ các thuộc tính CSS như

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  34. Nhóm Modernizr tích cực duy trì một danh sách những thứ không thể phát hiện này

Cho rằng các truy vấn tính năng đã được triển khai rộng rãi trên toàn bộ trình duyệt, (bao gồm khoảng 93. 42% trình duyệt toàn cầu tại thời điểm viết), tôi đã sử dụng Modernizr được một thời gian rồi. Tuy nhiên, thật tốt khi biết rằng nó tồn tại dưới dạng tùy chọn nếu chúng tôi gặp phải các hạn chế của

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

35 hoặc nếu chúng tôi cần hỗ trợ người dùng vẫn bị khóa trong các trình duyệt hoặc thiết bị cũ hơn vì nhiều lý do tiềm ẩn

Hơn nữa khi sử dụng Modernizr thường kết hợp với

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

35 như sau

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

4

Điều này kích hoạt những điều sau đây xảy ra

• Nếu

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  0 không được hỗ trợ, CSS của chúng tôi sẽ dự phòng về lựa chọn radio HTML mặc định
• Nếu cả

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  38 và

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  39 đều không được hỗ trợ nhưng lại có

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  0, thì biểu tượng trái tim sẽ chuyển sang màu đen thay vì hoạt hình khi được chọn
• Nếu

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  41,

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  39 và

  .overlay {
    background: grey;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    padding: 64px;
    padding: 4rem;
    display: block;
    display: flex;
    justify-content: center; /* if flex is supported */
    align-items: center; /* if flex is supported */
    height: 100%;
    width: 100%;
  }
  
  .popup {
    background: white;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 8px;
    border: 1px solid grey;
    border: 1px solid rgba(0, 0, 0, 0.4);
    box-shadow: 
      0 7px 8px -4px rgba(0,0, 0, 0.2),
      0 13px 19px 2px rgba(0, 0, 0, 0.14),
      0 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 32px;
    padding: 2rem;
    min-width: 240px;
  }
  
  button {
    background-color: #e0e1e2;
    background-color: rgba(225, 225, 225, 1);
    border-width: 0;
    border-radius: 4px;
    border-radius: 0.25rem;
    box-shadow: 
      0 1px 3px 0 rgba(0,0,0,.2), 
      0 1px 1px 0 rgba(0,0,0,.14), 
      0 2px 1px -1px rgba(0,0,0,.12);
    color: #5c5c5c;
    color: rgba(95, 95, 95, 1);
    cursor: pointer;
    font-weight: bold;
    font-weight: 700;
    padding: 16px;
    padding: 1rem;
  }
  
  button:hover {
    background-color: #c8c8c8;
    background-color: rgb(200,200,200); 
  }

  0 được hỗ trợ thì biểu tượng trái tim sẽ hoạt hình khi được chọn

Tương lai của tính năng phát hiện tính năng CSS

Cho đến thời điểm này, tôi đã tránh nói về việc phát hiện tính năng trong một thế giới đang bị JavaScript nuốt chửng, hoặc thậm chí có thể là một thế giới hậu JavaScript. Có lẽ thậm chí cố ý như vậy, vì các lần lặp lại hiện tại ở giao điểm giữa CSS và JavaScript cực kỳ gây tranh cãi và chia rẽ

Kể từ thời điểm đó, cộng đồng web bị chia thành hai nửa bởi một cuộc tranh luận gay gắt giữa những người coi CSS là lớp không thể chạm tới trong mô hình “tách biệt các mối quan tâm” (nội dung + trình bày + hành vi, HTML + CSS + JS) và những người coi . Cuộc tranh luận này mỗi ngày một gay gắt hơn, gây chia rẽ trong một cộng đồng từng miễn nhiễm với kiểu “chiến tranh tôn giáo” này.

—Cristiano Rastelli, Hãy để hòa bình trên CSS (2017)

Tuy nhiên, tôi nghĩ rằng việc khám phá cách áp dụng tính năng phát hiện trong chuỗi công cụ CSS-in-JS hiện đại có thể có giá trị như sau

• Nó cung cấp cơ hội để khám phá cách phát hiện tính năng CSS sẽ hoạt động trong một môi trường hoàn toàn khác
• Nó giới thiệu tính năng phát hiện như một kỹ thuật, trái ngược với một công nghệ hoặc công cụ cụ thể

Với suy nghĩ này, chúng ta hãy bắt đầu bằng cách kiểm tra việc triển khai cửa sổ bật lên của mình bằng thư viện CSS-in-JS được sử dụng rộng rãi nhất (ít nhất là tại thời điểm viết bài), Styled Components

Đây là giao diện của nó trong Internet Explorer 8

Trong các ví dụ trước của chúng tôi, chúng tôi đã có thể thực thi các quy tắc CSS một cách có điều kiện dựa trên sự hỗ trợ của trình duyệt của

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

0 (thông qua Modernizr) và

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

45 (thông qua

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

35). Tuy nhiên, bằng cách tận dụng JavaScript, chúng tôi có thể tiến xa hơn nữa. Vì cả

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

35 và Modernizr đều hiển thị API của họ thông qua JavaScript, nên chúng tôi có thể tải toàn bộ các phần của cửa sổ bật lên của mình một cách có điều kiện chỉ dựa trên sự hỗ trợ của trình duyệt

Hãy nhớ rằng bạn có thể sẽ cần phải thực hiện rất nhiều công việc nặng nhọc để React và Styled Components hoạt động trong một trình duyệt thậm chí không hỗ trợ

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

0 (kiểm tra

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

49 có thể hợp lý hơn trong ngữ cảnh này), nhưng vì mục đích duy trì

Trong ví dụ trên, bạn sẽ nhận thấy rằng chúng tôi đã tạo một thành phần, được gọi là

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

80. Thành phần này trả về một nút có thể nhấp để tăng số lượt thích khi nhấp. Nếu bạn đang xem ví dụ trên trình duyệt cũ hơn một chút, bạn có thể nhận thấy rằng thay vì nút, bạn sẽ thấy danh sách thả xuống có giá trị từ 0 đến 9

Để đạt được điều này, chúng tôi chỉ trả lại phiên bản nâng cao của thành phần theo điều kiện nếu các điều kiện sau được đáp ứng

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

8

Điều hấp dẫn về cách tiếp cận này là thành phần

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

80 chỉ hiển thị hai tham số

• Lượng like hiện tại
• Chức năng chạy khi lượng like cập nhật

.overlay {
  background: grey;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  padding: 64px;
  padding: 4rem;
  display: block;
  display: flex;
  justify-content: center; /* if flex is supported */
  align-items: center; /* if flex is supported */
  height: 100%;
  width: 100%;
}

.popup {
  background: white;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid grey;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 
    0 7px 8px -4px rgba(0,0, 0, 0.2),
    0 13px 19px 2px rgba(0, 0, 0, 0.14),
    0 5px 24px 4px rgba(0, 0, 0, 0.12);
  padding: 32px;
  padding: 2rem;
  min-width: 240px;
}

button {
  background-color: #e0e1e2;
  background-color: rgba(225, 225, 225, 1);
  border-width: 0;
  border-radius: 4px;
  border-radius: 0.25rem;
  box-shadow: 
    0 1px 3px 0 rgba(0,0,0,.2), 
    0 1px 1px 0 rgba(0,0,0,.14), 
    0 2px 1px -1px rgba(0,0,0,.12);
  color: #5c5c5c;
  color: rgba(95, 95, 95, 1);
  cursor: pointer;
  font-weight: bold;
  font-weight: 700;
  padding: 16px;
  padding: 1rem;
}

button:hover {
  background-color: #c8c8c8;
  background-color: rgb(200,200,200); 
}

1

Nói cách khác, logic của thành phần hoàn toàn tách biệt với cách trình bày của nó. Bản thân thành phần sẽ quyết định nội bộ bản trình bày nào hoạt động tốt nhất với ma trận hỗ trợ của trình duyệt. Bản thân phần trình bày có điều kiện được trừu tượng hóa bên trong thành phần sẽ mở ra cơ hội cho những cách mới thú vị để xây dựng giao diện tương thích với nhiều trình duyệt khi làm việc trong nhóm thiết kế và/hoặc giao diện người dùng

Đây là sản phẩm cuối cùng

…và nó sẽ trông như thế nào về mặt lý thuyết trong Internet Explorer 8

Tài nguyên bổ sung

Nếu bạn muốn tìm hiểu sâu hơn về những điều trên, bạn có thể truy cập các tài nguyên sau

• Bài viết trên Mạng nhà phát triển Mozilla về phát hiện tính năng
• Bài viết của Mozilla Developer Network về phát hiện tác nhân người dùng
• Bài viết trên Mạng nhà phát triển Mozilla về truy vấn tính năng CSS
• Tài liệu truy vấn tính năng chính thức của CSSWG
• Tài liệu Modernizr

---

Schalk là một nhà phát triển/nhà thiết kế front-end người Nam Phi đam mê công nghệ vai trò và web có thể đóng vai trò là động lực cho những điều tốt đẹp ở quê hương của anh ấy. Anh ấy làm việc toàn thời gian với một nhóm các nhà phát triển có đầu óc công nghệ dân sự tại một tổ chức phi lợi nhuận của Nam Phi có tên là OpenUp

Anh ấy cũng giúp quản lý một không gian cộng tác có tên Codebridge, nơi các nhà phát triển được khuyến khích đến và thử nghiệm công nghệ như một công cụ để thu hẹp khoảng cách xã hội và giải quyết các vấn đề cùng với cộng đồng địa phương

Làm cách nào để kiểm tra tính tương thích của trình duyệt trong CSS?

CSS3 có được hỗ trợ đầy đủ bởi tất cả các trình duyệt không?

Làm cách nào để phát hiện trình duyệt Safari trong CSS?

Trình duyệt nào hỗ trợ lưới CSS?