Các phiên bản trình duyệt không được hỗ trợ bởi CSS3 là gì?

Rachel Andrew là nhà phát triển web, nhà văn và diễn giả. Cô ấy là tác giả của một số cuốn sách, bao gồm Bố cục CSS mới. Cô ấy là một trong những người đứng sau … Thông tin thêm về Rachel ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

• SmashingConf Freiburg 2023

• Các mẫu thiết kế giao diện thông minh, khóa học 9h-video

• Giao diện người dùng SmashingConf 2023

• Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

• Các mẫu thiết kế giao diện Đào tạo UX

Có thể khó chịu khi bạn muốn sử dụng một tính năng và phát hiện ra rằng nó không được hỗ trợ hoặc hoạt động khác nhau giữa các trình duyệt. Trong bài viết này, Rachel Andrew trình bày chi tiết các loại sự cố hỗ trợ trình duyệt khác nhau và cho biết CSS đang phát triển như thế nào để giúp bạn giải quyết chúng dễ dàng hơn

Chúng ta sẽ không bao giờ sống trong một thế giới mà mọi người xem trang web của chúng ta đều có trình duyệt và phiên bản trình duyệt giống hệt nhau, cũng như chúng ta sẽ không bao giờ sống trong một thế giới mà mọi người đều có cùng kích thước màn hình và độ phân giải. Điều này có nghĩa là xử lý các trình duyệt cũ — hoặc các trình duyệt không hỗ trợ thứ gì đó mà chúng ta muốn sử dụng — là một phần công việc của nhà phát triển web. Điều đó nói rằng, mọi thứ bây giờ tốt hơn nhiều so với trước đây và trong bài viết này, tôi sẽ xem xét các loại sự cố hỗ trợ trình duyệt khác nhau mà chúng tôi có thể gặp phải. Tôi sẽ chỉ cho bạn một số cách để đối phó với chúng, đồng thời xem xét những thứ có thể sắp ra mắt có thể giúp ích cho bạn.

Tại sao chúng ta có những khác biệt này?

Ngay cả trong một thế giới mà phần lớn các trình duyệt đều dựa trên Chromium, những trình duyệt đó không phải tất cả đều chạy cùng một phiên bản Chromium như Google Chrome. Điều này có nghĩa là một trình duyệt dựa trên Chromium chẳng hạn như Vivaldi, có thể chậm hơn Google Chrome một vài phiên bản

Và tất nhiên, không phải lúc nào người dùng cũng nhanh chóng cập nhật trình duyệt của mình, mặc dù tình trạng đó đã được cải thiện trong những năm gần đây khi hầu hết các trình duyệt đều âm thầm tự nâng cấp.

Ngoài ra còn có cách thức mà các tính năng mới được đưa vào trình duyệt ngay từ đầu. Không phải trường hợp nào các tính năng mới cho CSS được thiết kế bởi Nhóm làm việc CSS và thông số kỹ thuật hoàn chỉnh được chuyển cho các nhà cung cấp trình duyệt cùng với hướng dẫn triển khai tính năng đó. Thông thường, chỉ khi triển khai thử nghiệm xảy ra, tất cả các chi tiết tốt hơn của thông số kỹ thuật mới có thể được giải quyết. Do đó, phát triển tính năng là một quá trình lặp đi lặp lại và yêu cầu các trình duyệt triển khai các thông số kỹ thuật này trong quá trình phát triển. Mặc dù hiện nay, việc triển khai diễn ra thường xuyên nhất sau một lá cờ trong trình duyệt hoặc chỉ khả dụng trong phiên bản Nightly hoặc phiên bản xem trước, nhưng khi một trình duyệt có tính năng hoàn chỉnh, nó có khả năng bật tính năng đó cho mọi người ngay cả khi chưa có trình duyệt nào khác hỗ trợ

Tất cả điều này có nghĩa là — dù chúng ta có thích thế nào đi chăng nữa — chúng ta sẽ không bao giờ tồn tại trong một thế giới mà các tính năng có sẵn một cách kỳ diệu trên mọi máy tính để bàn và điện thoại đồng thời. Nếu bạn là một nhà phát triển web chuyên nghiệp thì công việc của bạn là đối phó với thực tế đó

Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓

Gặp gỡ các Hội thảo Smashing về giao diện người dùng & UX, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Christine Vallaure và rất nhiều người khác

Chuyển đến hội thảo ↬

Lỗi so với. thiếu hỗ trợ

Có ba vấn đề mà chúng tôi gặp phải liên quan đến hỗ trợ trình duyệt

1. 
   Vấn đề đầu tiên (và dễ giải quyết nhất) là khi trình duyệt hoàn toàn không hỗ trợ tính năng này
2. 
   Thứ hai là khi trình duyệt tuyên bố hỗ trợ tính năng này, nhưng thực hiện theo cách khác với cách mà các trình duyệt khác hỗ trợ tính năng này. Một vấn đề như vậy là những gì chúng tôi có xu hướng gọi là "lỗi trình duyệt" vì kết quả cuối cùng là hành vi không nhất quán
3. 
   Điều này đang trở nên phổ biến hơn;

Sẽ rất hữu ích nếu bạn hiểu những gì bạn đang giải quyết khi thấy sự khác biệt giữa các trình duyệt, vì vậy, hãy lần lượt xem xét từng vấn đề này

1. Không hỗ trợ tính năng

Nếu bạn sử dụng thuộc tính hoặc giá trị CSS mà trình duyệt không hiểu, trình duyệt sẽ bỏ qua nó. Điều này giống nhau cho dù bạn sử dụng một tính năng không được hỗ trợ hay tạo ra một tính năng và cố gắng sử dụng nó. Nếu trình duyệt không hiểu dòng CSS đó, nó sẽ bỏ qua nó và tiếp tục với điều tiếp theo mà nó hiểu

Nguyên tắc thiết kế này của CSS có nghĩa là bạn có thể vui vẻ sử dụng các tính năng mới, với sự hiểu biết rằng sẽ không có gì xấu xảy ra với một trình duyệt không có hỗ trợ. Đối với một số CSS, được sử dụng hoàn toàn như một phần nâng cao, đó là tất cả những gì bạn cần làm. Sử dụng tính năng, đảm bảo khi không có tính năng đó trải nghiệm vẫn tốt, thế là xong. Cách tiếp cận này là ý tưởng cơ bản đằng sau cải tiến liên tục, sử dụng tính năng này của nền tảng cho phép sử dụng an toàn những thứ mới trong các trình duyệt không hiểu chúng

Nếu bạn muốn kiểm tra xem một tính năng bạn đang sử dụng có được trình duyệt hỗ trợ hay không thì bạn có thể xem trang web Tôi có thể sử dụng không. Một nơi tốt khác để tìm kiếm thông tin hỗ trợ chi tiết là trang dành cho từng thuộc tính CSS trên MDN. Dữ liệu hỗ trợ trình duyệt ở đó có xu hướng rất chi tiết

CSS mới hiểu CSS cũ

Khi các tính năng CSS mới được phát triển, hãy cẩn thận về cách chúng tương tác với CSS hiện có. Ví dụ: trong đặc tả Grid và Flexbox, nó được trình bày chi tiết về cách display: grid và display: flex xử lý các tình huống chẳng hạn như khi một mục nổi trở thành một mục lưới hoặc một hộp chứa nhiều màu được chuyển thành một lưới. Điều này có nghĩa là một số hành vi nhất định sẽ bị bỏ qua, giúp bạn chỉ cần ghi đè CSS cho trình duyệt không hỗ trợ. Các phần ghi đè này được trình bày chi tiết trong trang dành cho Nâng cao lũy tiến và Bố cục lưới trên MDN

Phát hiện hỗ trợ với các truy vấn tính năng

Phương pháp trên chỉ hoạt động nếu CSS bạn cần sử dụng không cần các thuộc tính khác đi cùng với nó. Bạn có thể cần thêm các thuộc tính bổ sung vào CSS của mình cho các trình duyệt cũ hơn, các thuộc tính này sau đó cũng sẽ được các trình duyệt hỗ trợ tính năng này giải thích

Có thể tìm thấy một ví dụ điển hình về điều này khi sử dụng Grid Layout. Trong khi một mục nổi trở thành một mục lưới sẽ mất tất cả hành vi nổi, có khả năng là nếu bạn đang cố gắng tạo một dự phòng cho bố cục lưới với mục nổi, thì bạn sẽ thêm phần trăm độ rộng và có thể là lề cho các mục

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

Sử dụng float, chúng ta có thể tạo bố cục bốn cột, chiều rộng và lề cần được đặt trong

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1%;
}

0. (Xem trước lớn)

Các chiều rộng và lề này sau đó sẽ vẫn áp dụng khi mục nổi là một mục lưới. Chiều rộng trở thành tỷ lệ phần trăm của rãnh lưới thay vì toàn bộ chiều rộng của vùng chứa;

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1%;
}

Chiều rộng hiện là tỷ lệ phần trăm của đường lưới — không phải vùng chứa. (Xem trước lớn)

Rất may, có một tính năng được tích hợp trong CSS và được triển khai trong các trình duyệt hiện đại giúp chúng tôi giải quyết tình huống này. Truy vấn tính năng cho phép chúng tôi hỏi trực tiếp trình duyệt những gì họ hỗ trợ và sau đó thực hiện phản hồi. Giống như Truy vấn phương tiện — kiểm tra một số thuộc tính của thiết bị hoặc màn hình — Truy vấn tính năng kiểm tra sự hỗ trợ của thuộc tính và giá trị CSS

Kiểm tra hỗ trợ

Kiểm tra hỗ trợ là trường hợp đơn giản nhất, chúng tôi sử dụng

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1%;
}

1 và sau đó kiểm tra thuộc tính và giá trị CSS. Nội dung bên trong Feature Query sẽ chỉ chạy nếu trình duyệt phản hồi đúng, tôi. e. nó hỗ trợ tính năng

Kiểm tra không hỗ trợ

Bạn có thể hỏi trình duyệt nếu nó không hỗ trợ một tính năng. Trong trường hợp này, mã bên trong Truy vấn tính năng sẽ chỉ chạy nếu trình duyệt cho biết nó không được hỗ trợ

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

Kiểm tra nhiều thứ

Nếu bạn cần hỗ trợ nhiều tài sản, hãy sử dụng

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1%;
}

2

@supports (display: grid) and (shape-outside: circle()){
    .item {
        /* CSS from browsers which support grid and CSS shapes */
    }
}

Nếu bạn cần hỗ trợ tài sản này hay tài sản khác, hãy sử dụng

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1%;
}

3

________số 8_______

Chọn một tài sản và giá trị để kiểm tra

Bạn không cần kiểm tra mọi thuộc tính mà bạn muốn sử dụng — chỉ cần kiểm tra thứ gì đó cho biết hỗ trợ cho các tính năng bạn định sử dụng. Do đó, nếu bạn muốn sử dụng Bố cục lưới, bạn có thể kiểm tra display: grid. Trong tương lai (và sau khi hỗ trợ lưới con xuất hiện trong trình duyệt), bạn có thể cần cụ thể hơn và kiểm tra chức năng của lưới con. Trong trường hợp đó, bạn sẽ kiểm tra

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1%;
}

5 để chỉ nhận được phản hồi đúng từ những trình duyệt đã triển khai hỗ trợ lưới con

Nếu bây giờ chúng ta quay lại ví dụ dự phòng thả nổi, chúng ta có thể xem các truy vấn tính năng sẽ sắp xếp nó như thế nào cho chúng ta. Những gì chúng ta cần làm là truy vấn trình duyệt để tìm hiểu xem nó có hỗ trợ bố cục dạng lưới không. Nếu đúng như vậy, chúng tôi có thể đặt chiều rộng trên mục trở lại

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1%;
}

6 và lề thành

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1%;
}

7

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

@supports(display: grid) {
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 1%;
    }

    .grid > .item {
        width: auto;
        margin: 0;
    }
}

Xem Truy vấn tính năng bút và lưới của (Rachel Andrew) trên CodePen

Xem Truy vấn tính năng bút và lưới của (Rachel Andrew) trên CodePen

Lưu ý rằng mặc dù tôi đã bao gồm tất cả mã lưới bên trong truy vấn tính năng của mình, nhưng tôi không cần. Nếu một trình duyệt không hiểu các thuộc tính lưới, nó sẽ bỏ qua chúng để chúng có thể nằm ngoài truy vấn tính năng một cách an toàn. Những thứ phải có trong một truy vấn tính năng trong ví dụ này là các thuộc tính lề và chiều rộng, vì chúng cần thiết cho mã trình duyệt cũ nhưng cũng sẽ được áp dụng bởi các trình duyệt hỗ trợ

Ôm lấy dòng thác

Một cách rất đơn giản để cung cấp dự phòng là tận dụng thực tế là các trình duyệt bỏ qua CSS mà họ không hiểu và thực tế là khi mọi thứ khác có tính đặc hiệu như nhau, thì thứ tự nguồn được tính đến theo đó CSS ​​được áp dụng cho một phần tử

Trước tiên, bạn viết CSS của mình cho các trình duyệt không hỗ trợ tính năng này. Sau đó kiểm tra tính hỗ trợ của thuộc tính bạn muốn sử dụng, nếu trình duyệt xác nhận nó có hỗ trợ, hãy ghi đè mã dự phòng bằng mã mới của bạn

Đây gần giống với quy trình mà bạn có thể sử dụng khi sử dụng truy vấn phương tiện cho thiết kế đáp ứng, theo cách tiếp cận ưu tiên thiết bị di động. Theo cách tiếp cận đó, bạn bắt đầu với bố cục của mình cho màn hình nhỏ hơn, sau đó thêm hoặc ghi đè mọi thứ cho màn hình lớn hơn khi bạn di chuyển lên qua các điểm dừng của mình

Dữ liệu về hỗ trợ Truy vấn tính năng CSS trên các trình duyệt chính từ caniuse. com

Cách thức hoạt động trên giúp bạn không cần lo lắng về việc các trình duyệt không hỗ trợ Feature Queries. Như bạn có thể thấy từ Can I Use, Feature Queries có hỗ trợ thực sự tuyệt vời. Các trình duyệt nổi bật không hỗ trợ chúng là bất kỳ phiên bản Internet Explorer nào

Tuy nhiên, có khả năng tính năng mới mà bạn muốn sử dụng cũng không được hỗ trợ trong IE. Vì vậy, ở thời điểm hiện tại hầu như bạn sẽ bắt đầu bằng việc viết CSS cho các trình duyệt không hỗ trợ, sau đó bạn test bằng một Feature Query. Truy vấn tính năng này sẽ kiểm tra hỗ trợ

1. Các trình duyệt hỗ trợ Truy vấn tính năng sẽ trả về true nếu chúng có hỗ trợ và do đó mã bên trong truy vấn sẽ được sử dụng, ghi đè mã cho các trình duyệt cũ hơn
2. Nếu trình duyệt hỗ trợ Truy vấn tính năng nhưng không hỗ trợ tính năng đang được kiểm tra, nó sẽ trả về false. Mã bên trong truy vấn tính năng sẽ bị bỏ qua
3. Nếu trình duyệt không hỗ trợ Truy vấn tính năng thì mọi thứ bên trong khối Truy vấn tính năng sẽ bị bỏ qua, điều đó có nghĩa là một trình duyệt như IE11 sẽ sử dụng mã trình duyệt cũ của bạn, rất có thể chính xác là những gì bạn muốn

2. Xử lý “Bugs” của trình duyệt

Rất may, sự cố hỗ trợ trình duyệt thứ hai đang trở nên ít phổ biến hơn. Nếu bạn đọc “What We Wished For” (xuất bản vào cuối năm ngoái), bạn có thể tham quan một chút về một số lỗi trình duyệt khó hiểu hơn trong quá khứ. Điều đó nói rằng, bất kỳ phần mềm nào cũng có thể có lỗi, trình duyệt cũng không ngoại lệ. Và, nếu chúng tôi thêm vào đó một thực tế là do tính chất vòng tròn của việc triển khai thông số kỹ thuật, đôi khi một trình duyệt đã triển khai một cái gì đó và sau đó thông số kỹ thuật thay đổi, vì vậy bây giờ họ cần phát hành bản cập nhật. Cho đến khi bản cập nhật đó xuất hiện, chúng ta có thể rơi vào tình huống các trình duyệt làm điều gì đó khác biệt với nhau

Truy vấn tính năng không thể giúp chúng tôi nếu trình duyệt báo cáo hỗ trợ thứ gì đó hỗ trợ không tốt. Không có chế độ nào mà trình duyệt có thể nói, “Có, nhưng bạn có thể sẽ không thích nó. ” Khi một lỗi về khả năng tương tác thực sự xuất hiện, đó là lúc bạn có thể cần phải sáng tạo hơn một chút

Nếu bạn nghĩ rằng bạn đang nhìn thấy một lỗi thì điều đầu tiên cần làm là xác nhận rằng. Đôi khi chúng tôi nghĩ rằng chúng tôi thấy hành vi có lỗi và trình duyệt làm những việc khác nhau, lỗi nằm ở chúng tôi. Có lẽ chúng tôi đã sử dụng một số cú pháp không hợp lệ hoặc đang cố định kiểu HTML không đúng định dạng. Trong những trường hợp đó, trình duyệt sẽ cố gắng làm điều gì đó; . Kiểm tra nhanh xem HTML và CSS của bạn có hợp lệ hay không là bước đầu tiên tuyệt vời

Tại thời điểm đó, có lẽ tôi sẽ tìm kiếm nhanh và xem vấn đề của mình đã được hiểu rộng rãi chưa. Có một số repos của các vấn đề đã biết, e. g. Flexbugs và Gridbugs. Tuy nhiên, thậm chí chỉ một vài từ khóa được lựa chọn tốt cũng có thể hiển thị các bài đăng hoặc bài viết về Stack Overflow bao gồm chủ đề và có thể đưa ra giải pháp thay thế cho bạn

Nhưng giả sử bạn không thực sự biết nguyên nhân gây ra lỗi, điều này khiến việc tìm kiếm giải pháp trở nên khá khó khăn. Vì vậy, bước tiếp theo là tạo một trường hợp thử nghiệm rút gọn cho vấn đề của bạn, tôi. e. loại bỏ mọi thứ không liên quan để giúp bạn xác định chính xác nguyên nhân gây ra lỗi. Nếu bạn cho rằng mình có lỗi CSS, bạn có thể xóa bất kỳ JavaScript nào hoặc tạo lại cùng một kiểu dáng bên ngoài khung không?

Hầu hết thời gian, khi bạn đã cô lập vấn đề, bạn có thể nghĩ ra một cách khác để đạt được kết quả mong muốn. Bạn sẽ thấy rằng người khác đã nghĩ ra một cách giải quyết xảo quyệt hoặc bạn có thể đăng ở đâu đó để xin đề xuất

Như đã nói, nếu bạn cho rằng mình gặp lỗi trình duyệt và không thể tìm thấy bất kỳ ai khác nói về vấn đề tương tự, thì rất có thể bạn đã tìm thấy điều gì đó mới cần được báo cáo. Với tất cả các CSS mới đã xuất hiện gần đây, các vấn đề đôi khi có thể xuất hiện khi mọi người bắt đầu sử dụng mọi thứ kết hợp với các phần khác của CSS

Hãy xem bài đăng này từ Lea Verou về việc báo cáo các vấn đề như vậy, “Trợ giúp Cộng đồng. Báo lỗi trình duyệt. ”. Bài viết cũng có những mẹo hay để tạo test case rút gọn

3. Hỗ trợ một phần thuộc tính CSS

Loại vấn đề thứ ba đã trở nên phổ biến hơn do cách thiết kế các thông số kỹ thuật CSS hiện đại. Nếu chúng ta nghĩ về Grid Layout và Flexbox, cả hai thông số kỹ thuật này đều sử dụng các thuộc tính và giá trị trong Box Alignment Level 3, để thực hiện căn chỉnh. Do đó, các thuộc tính như

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1%;
}

8,

.grid > .item {
    width: 23%;
    margin: 0 1%;
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 1%;
}

9 và

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

0 được chỉ định để sử dụng trong cả Grid và Flexbox cũng như các phương thức bố cục khác

Tuy nhiên, tại thời điểm viết bài, các thuộc tính

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

1 hoạt động trong Bố cục lưới trong tất cả các trình duyệt hỗ trợ lưới và

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

0 hoạt động trong Multicol;

Nếu tôi sử dụng các lề để tạo dự phòng cho Flexbox, sau đó kiểm tra

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

0 và xóa các lề, các hộp của tôi sẽ không có khoảng cách giữa chúng trong các trình duyệt hỗ trợ

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

0 trong Grid hoặc nhiều màu, vì vậy khoảng cách dự phòng của tôi sẽ bị xóa

@supports(column-gap: 20px) {
    .flex {
        margin: 0; /* almost everything supports column-gap so this will always remove the margins, even if we do not have gap support in flexbox. */
    }
}

Đây là hạn chế hiện tại của Truy vấn tính năng. Chúng tôi không có cách nào để kiểm tra sự hỗ trợ của một tính năng trong một tính năng khác. Trong tình huống trên, điều tôi muốn hỏi trình duyệt là “Bạn có hỗ trợ khoảng cách cột trong Flexbox không?”

Có một vấn đề tương tự với các thuộc tính phân mảnh CSS

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

5,

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

6 và

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

7. Vì những thứ này có hỗ trợ tốt hơn khi trang được in, các trình duyệt sẽ thường yêu cầu hỗ trợ. Tuy nhiên, nếu bạn đang kiểm tra hỗ trợ trong nhiều màu, bạn sẽ nhận được kết quả có vẻ là dương tính giả. Tôi đã nêu vấn đề tại Nhóm làm việc CSS về vấn đề này, tuy nhiên, đây không phải là vấn đề đơn giản để giải quyết. Nếu bạn có suy nghĩ, xin vui lòng thêm chúng ở đó

Kiểm tra hỗ trợ bộ chọn

Hiện tại, Truy vấn tính năng chỉ có thể kiểm tra các thuộc tính và giá trị CSS. Một điều khác mà chúng tôi có thể muốn kiểm tra là sự hỗ trợ của các bộ chọn mới hơn, chẳng hạn như các bộ chọn trong Cấp 4 của đặc tả Bộ chọn. Có một ghi chú giải thích và cũng là một triển khai đằng sau một lá cờ trong Firefox Nightly về một tính năng mới cho Truy vấn tính năng sẽ đạt được điều này

Nếu bạn truy cập

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

8 trong Firefox và bật cờ

@supports not (display: grid) {
    .item {
        /* CSS from browsers which do not support grid layout */
    }
}

9 thì bạn có thể kiểm tra xem các bộ chọn khác nhau có được hỗ trợ hay không. Cú pháp hiện tại rất đơn giản, ví dụ để kiểm tra bộ chọn

@supports (display: grid) and (shape-outside: circle()){
    .item {
        /* CSS from browsers which support grid and CSS shapes */
    }
}

0

@supports selector(:has){
  .item {
      /* CSS for support of :has */
  }
}

Đây là một thông số kỹ thuật đang được phát triển, tuy nhiên, bạn có thể thấy cách các tính năng giúp chúng tôi quản lý các vấn đề luôn tồn tại về hỗ trợ trình duyệt đang được thêm vào khi chúng tôi nói chuyện

Đọc thêm

Bạn có thể cảm thấy khó chịu khi muốn sử dụng một tính năng và phát hiện ra rằng tính năng đó không được hỗ trợ bởi một trình duyệt chính hoặc nếu mọi thứ dường như hoạt động theo những cách khác nhau. Tôi đã làm tròn một số bài đọc thêm thực tế có thể hữu ích

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

Cái nào sau đây không hỗ trợ CSS3?

CSS có hoạt động trên tất cả các trình duyệt không?

Safari không hỗ trợ CSS nào?