CSS với tính năng phát hiện tính tương thích trình duyệt chéo


Ngô Hồng Anh
10 tháng trước
Hữu ích 3 Chia sẻ Viết bình luận 0
Đã xem 4415

Mục tiêu hàng đầu của mọi nhà phát triển web là xây dựng trang web với thiết kế hiện đại và trực quan, mang lại trải nghiệm người dùng mượt mà và liền mạch, bất kể họ có thể sử dụng trình duyệt nào để lướt web. Internet đã chứng kiến ​​một sự bùng nổ lớn chưa từng thấy trong những thập kỷ gần đây. Tính đến tháng 12 năm 2018, có hơn 4,1 tỷ người dùng internet trên thế giới và gần 1,94 tỷ trang web trên web. Do đó, điều này ngụ ý việc mở rộng một số cách mà các trang web đang được truy cập bởi khán giả trên toàn cầu. Điều này dẫn đến câu hỏi hóc búa về khả năng tương thích giữa các trình duyệt, điều này đặt ra một thách thức lớn cho các nhà phát triển. Vì số lượng trình duyệt và các phiên bản của chúng đang tăng với tốc độ nhanh như vậy mỗi năm, nhiệm vụ cố gắng làm cho một trang web xuất hiện và hoạt động nhất quán trên tất cả các trình duyệt là cơn ác mộng của mọi nhà phát triển. Tuy nhiên, có thể tẻ nhạt và tốn thời gian như thử nghiệm trên nhiều trình duyệt, đây là giai đoạn bắt buộc của mọi chu kỳ thử nghiệm. Mặc dù được coi là gần như không thể có một trang web xuất hiện và hoạt động giống hệt nhau trên mọi trình duyệt, nhưng vẫn có một số cách để cung cấp trải nghiệm người dùng nhất quán và tiếp cận đối tượng mục tiêu rộng hơn. Trong bài viết này, chúng ta sẽ khám phá những gìCác vấn đề tương thích giữa các trình duyệt là và tại sao chúng xảy ra, cách CSS với phát hiện tính năng thuận lợi hơn cho việc phát hiện trình duyệt và các mẹo để đạt được khả năng tương thích trình duyệt gần như hoàn hảo khi thiết kế trang web.

Tại sao trình duyệt kết xuất nội dung không nhất quán

Trước khi tìm hiểu sâu hơn về khả năng tương thích giữa các trình duyệt và CSS với phát hiện tính năng, điều quan trọng là phải có hiểu biết cơ bản về cách trình duyệt internet hoạt động và tại sao xảy ra sự cố tương thích. Trong khi duyệt web, bất cứ khi nào bạn nhấp vào liên kết hoặc nhập URL trong trình duyệt của mình, bạn sẽ hướng dẫn trình duyệt web của mình thực hiện yêu cầu máy chủ tải nội dung mà bạn đang tìm kiếm và hiển thị nó trong trình duyệt. Điều này được thực hiện bằng cách sử dụng một công cụ kết xuất chịu trách nhiệm phân tích mã HTML và CSS và hiển thị nội dung được phân tích cú pháp trên màn hình. Vì mỗi trình duyệt có công cụ kết xuất riêng, nội dung không được hiển thị giống hệt nhau trên tất cả các trình duyệt. Kết quả là, có thể có sự khác biệt rõ ràng trong bố cục và diện mạo của trang web.

Safari sử dụng công cụ kết xuất 'Webkit', Google Chrome sử dụng 'Blink' (bộ web trước đó) cùng với tất cả các trình duyệt dựa trên crom như Microsoft Edge và Opera, Firefox sử dụng 'Gecko' và cuối cùng, Internet Explorer sử dụng 'Trident'. Các phiên bản cũ hơn của Opera đã sử dụng 'Presto.'

Kẻ thù đáng sợ nhất của mọi nhà phát triển front-end là sự 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à các trang web xuất hiện và hoạt động hoàn hảo trong giai đoạn phát triển trên trình duyệt do nhà phát triển lựa chọn nhưng cuối cùng có thể trông hoàn toàn khó hiểu trên các trình duyệt khác trong giai đoạn thử nghiệm cuối cùng.

Xu hướng ưu tiên trình duyệt

Cho dù sự từ chối có thể nghiêm trọng đến mức nào, mọi nhà phát triển đều có một 'thiên vị ưu tiên trình duyệt' bí mật. Trình duyệt mà nhà phát triển dựa vào trong quá trình phát triển của trang web đóng vai trò là tiêu chuẩn để đánh giá hiệu suất của trang web. Phần lớn các nhà phát triển đương nhiên có thiên vị đối với Google Chrome, nơi có thị phần hàng đầu trên toàn thế giới và được trang bị bộ công cụ dành cho nhà phát triển mạnh nhất. Điều này có thể khiến các nhà phát triển bỏ qua và bỏ qua các trình duyệt như Mozilla Firefox, Safari, Opera và Internet Explorer khét tiếng. Trong mọi trường hợp, nhà phát triển không nên bỏ qua hỗ trợ cho bất kỳ trình duyệt nào có thể được sử dụng bởi ngay cả một phần nhỏ đối tượng mục tiêu. Mặc dù Google Chrome và Mozilla Firefox cùng với Safari có thị phần gần 90-95%, nhưng thống kê này, tùy thuộc vào bản chất của trang web và các yếu tố khác, có thể chứng minh là lừa dối. Tùy chọn trình duyệt thay đổi lớn theo vị trí địa lý và nhân khẩu học theo độ tuổi. Ví dụ: Safari được sử dụng ít hơn đáng kể ngoài Hoa Kỳ và IE vẫn là trình duyệt được lựa chọn cho thế hệ cũ.

Thị phần trình duyệt

Google Chrome là công ty dẫn đầu thị trường rõ ràng với ít nhất 67% thị phần, theo sau là Firefox với 11%. Thật thú vị khi lưu ý rằng Internet Explorer khét tiếng, thường bị các nhà phát triển bỏ qua, vẫn giữ được thị phần gần 7-10% trong năm 2018. Thực tế này càng khuếch đại nhu cầu không thể thiếu của các nhà phát triển để chú ý đến khả năng tương thích giữa các trình duyệt . Bạn có thể tiếp tục sử dụng Google Analytics hoặc bất kỳ công cụ phân tích web nào khác để xác định trình duyệt nào được đa số khách truy cập trang web của bạn ưa thích. Nếu tỷ lệ của phiên bản trình duyệt hoặc trình duyệt dưới 1%, nhà phát triển nên coi đó là mức ưu tiên thấp đối với những người chịu trách nhiệm chính trong việc hướng lưu lượng truy cập đến trang web của bạn.

Sự cần thiết cho CSS tương thích trình duyệt chéo

Trong những năm gần đây, chúng ta đã chứng kiến ​​sự xuất hiện của các tính năng mới, mạnh mẽ trong CSS, đã khai sinh ra các xu hướng thiết kế hiện đại mới. Tuy nhiên, nhờ các vấn đề tương thích giữa các trình duyệt, phần lớn các thuộc tính CSS3 mạnh mẽ mới được giới thiệu này không được tất cả các trình duyệt chính hỗ trợ. Trong trường hợp không có dự phòng, các thuộc tính này không được trình duyệt giải thích và bỏ qua hoàn toàn, điều này có thể tàn phá thiết kế trang web của bạn trên các trình duyệt cũ hơn, không được hỗ trợ, đặc biệt là IE đáng sợ. Các tính năng mới và thú vị như CSS Grid, Flexbox, CSS Blend Modes và 3D Transform đã đẩy phong bì thiết kế web lên một tầm cao mới. Tuy nhiên, nhiều nhà phát triển đã chậm chấp nhận các bản giới thiệu mới này do sự hoài nghi của họ về hỗ trợ trình duyệt chéo.

Đây là một phần ngắn gọn để giúp bạn hiểu các thuộc tính CSS không được hỗ trợ bởi các trình duyệt web khác nhau. Bạn có thể sử dụng nền tảng Tôi có thể sử dụng để tìm các yếu tố được hỗ trợ và không được hỗ trợ cho các trình duyệt và phiên bản trình duyệt khác nhau.

  • Các thuộc tính CSS không được hỗ trợ bởi phiên bản Internet Explorer mới nhất (câu 11):
  • Các thuộc tính CSS không được hỗ trợ bởi các phiên bản Firefox mới nhất:
  • Các thuộc tính CSS không được hỗ trợ bởi các phiên bản mới nhất của Google Chrome:
  • Các thuộc tính CSS không được hỗ trợ bởi các phiên bản mới nhất của Opera:

Trên hết, ngay cả một số thành phần và thuộc tính HTML cũng không được một số trình duyệt hỗ trợ. Ví dụ: thuộc tính biểu mẫu 'giữ chỗ' không được hỗ trợ bởi bất kỳ phiên bản IE hoặc Edge nào.

Phương pháp tiếp cận để hỗ trợ trình duyệt không đồng đều

Suy thoái duyên dáng so với tăng cường tiến bộ

Có hai triết lý phát triển đối lập cực thường được các nhà phát triển sử dụng để chống lại sự hỗ trợ trình duyệt không đồng đều và đảm bảo rằng người dùng được hưởng một mức độ nhất quán trên tất cả các trình duyệt: xuống cấp duyên dáng và tăng cường tiến bộ.

  • Suy thoái duyên dáng có nghĩa là xây dựng trang web của bạn với đầy đủ chức năng và tính năng thiết kế như được hỗ trợ bởi các trình duyệt hiện đại mới nhất và sau đó dần dần mã hóa xuống để cung cấp hỗ trợ cho các trình duyệt cũ hơn bằng cách tước lớp này qua lớp khác, hạ cấp phiên bản nâng cao. Phiên bản thấp hơn của trang web bị tước bỏ các tính năng UI và chức năng nâng cao nhưng vẫn cung cấp phiên bản cơ bản cho người dùng.
  • Tăng cường tiến bộ là đối nghịch chính xác với sự xuống cấp duyên dáng. Đầu tiên, một phiên bản cơ bản / cơ bản của trang web được tạo ra và sau đó, dần dần di chuyển lên trên, các tính năng xuất hiện và chức năng nâng cao được thêm cho các trình duyệt hiện đại và các phiên bản mới hơn để mang lại trải nghiệm giàu tính năng.

Tăng cường tiến bộ được coi là cách tiếp cận tốt hơn của cả hai, vì nó bắt đầu với phiên bản cơ bản và bổ sung thêm các cải tiến trên đầu trang sau này. Nó đảm bảo rằng trang web sẽ hoạt động trong mọi trình duyệt, mới hay cũ và sẽ hiển thị các phiên bản nâng cao trong tất cả các trình duyệt hỗ trợ tự động. Nó cũng được coi là thuận lợi để thử nghiệm và thu thập dữ liệu bởi các công cụ tìm kiếm.

CSS dung sai lỗi là gì?

Trong các ngôn ngữ như JavaScript, Ruby và PHP, việc thực thi bị chấm dứt khi gặp lỗi. Mặt khác, CSS được ban phước với một tính năng có tên là Fault Tolerance. Mỗi khi trình duyệt bắt gặp một dòng mã CSS mà nó không thể hiểu hoặc hiểu, nó chỉ cần bỏ qua và bỏ qua dòng mã đó và nhảy sang dòng tiếp theo. Ví dụ, xem xét ví dụ.

Chúng tôi chọn div phần tử và thay đổi thuộc tính màu thành giá trị hex, Số # 777 Trực tiếp

div {
color: #777;
 }   
/*Now look at the following code: */
div {
color: #777;
color: #000; 
}

Vì chúng tôi đã đặt giá trị thuộc tính màu thành Số # 000 từ từ #cccc, nên giá trị thứ hai sẽ được sử dụng. Bây giờ, nếu chúng ta sử dụng một giá trị thuộc tính không hợp lệ, CSS sẽ sử dụng tính năng chịu lỗi của nó và sẽ bỏ qua dòng CSS mà nó không thể giải thích.

div { 
color: #777;
color: foobar(10); 
}

foobar(10)không phải là giá trị CSS hợp lệ, trình duyệt không thể giải thích dòng này nên chỉ cần bỏ qua nó. Giá trị màu sắc # 777 gỗ được giữ lại.

Chúng ta có thể tận dụng tính năng chịu lỗi này của CSS để mã thuộc tính dự phòng. Với kỹ thuật này, bạn không cần phải gặp rắc rối khi tạo hai tệp riêng biệt hoặc viết các câu điều kiện khó hiểu. Trang web của bạn sẽ không phải gửi hai yêu cầu HTTP riêng biệt, trước tiên là cho tệp CSS hiện đại và sau đó là tệp sửa lỗi IE như trong trường hợp này:

<link href="modern.css" rel="stylesheet" />
<!--[if lte IE 8]>
    <link href="legacy.css" rel="stylesheet">

Bây giờ chúng ta đã thảo luận vấn đề tương thích giữa các trình duyệt là gì, bây giờ chúng ta hãy xem xét các cách để vượt qua thách thức này. Hai phương pháp chính mà chúng ta sẽ thảo luận là:

  1. Phát hiện trình duyệt
  2. Phát hiện tính năng

1. Phát hiện trình duyệt

Nhận dạng trình duyệt dựa trên việc phát hiện Chuỗi tác nhân người dùng . Các NavigatorID.userAgent tài sản trả về chuỗi tác nhân người dùng của trình duyệt hiện tại. Tiêu đề yêu cầu Tác nhân Người dùng chứa một chuỗi đặc trưng cho phép xác định loại ứng dụng, HĐH, nhà cung cấp phần mềm hoặc phiên bản phần mềm, v.v.

Cú pháp
var ua = window.navigator.userAgent;
Nơi ualưu trữ giá trị chuỗi tác nhân người dùng của trình duyệt hiện tại.

Ví dụ: đây là chuỗi Firefox UA:

Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

Dưới đây là chuỗi User Agent của các trình duyệt web phổ biến -

Nguồn: https://goo.gl/W6i9B5

Cách tiếp cận phổ biến nhất là sử dụng JavaScript để truy vấn tiêu đề tác nhân người dùng:

<!DOCTYPE html>
<html>     
<body>     
<p>Find the name of your browser using User Agent</p>     
<button onclick="myFunction()">Try it</button>     
<p id="demo"></p>     
<script>       
function myFunction() {
    if (navigator.userAgent.indexOf("Chrome") != -1) {
        alert('Your Browser is Google Chrome');
    } else if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) {
        alert('Your Browser is Opera');
    } else if (navigator.userAgent.indexOf("Safari") != -1) {
        alert('Your Browser is Safari');
    } else if (navigator.userAgent.indexOf("Firefox") != -1) {
        alert('Your Browser is Firefox');
    } else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) //IF IE > 10     
    {
        alert('Your Browser is Internet Explorer');
    } else {
        alert('Unknown Browser');
    }
} 
</script>       
</body>     
</html>

Báo cáo có điều kiện của IE

Một cách khác để phát hiện hoặc xác định trình duyệt là sử dụng các nhận xét có điều kiện của Internet Explorer. Cú pháp này mở rộng các nhận xét HTML tiêu chuẩn và là duy nhất cho IE.

Các câu lệnh có điều kiện là các quy tắc CSS cụ thể của Internet Explorer, tức là chúng chỉ được Internet Explorer nhận ra và bị bỏ qua bởi tất cả các trình duyệt khác vì chúng coi chúng là các nhận xét bình thường. Lưu ý rằng trong trường hợp thứ hai (nhắm mục tiêu các trình duyệt khác trừ IE), nội dung không nằm trong một nhận xét. Do đó, nó sẽ được công nhận bởi các trình duyệt khác.

Nhắm mục tiêu tất cả các phiên bản trình duyệt IE

<!--[if IE]>
Place content here to target all IE users.
<![endif]-->

Các trình duyệt mục tiêu không phải là IE:

<![if !IE]>
Place content here to target all users not using Internet Explorer.
<![endif]>

Nhắm mục tiêu một phiên bản IE cụ thể:

<!--[if IE 6]>
Place content here to target all users of IE version 6. 
<![endif]-->

Các phiên bản IE mục tiêu lớn hơn hoặc bằng 7: 

<!--[if gte IE 7]>
Place content here to target users of IE7 or higher.
<![endif]-->

Các phiên bản IE mục tiêu nhỏ hơn 7 (tức là 6 hoặc thấp hơn): 

<!--[if lt IE 7]>
Place content here to target users of IE6 or lower (less than 7).
<![endif]-->
<!--[if IE]>
Place content here to target all IE users.
<![endif]-->
  • Hạn chế lớn nhất của việc phát hiện trình duyệt bởi các tác nhân người dùng là nhà phát triển cần liên tục theo dõi hỗ trợ trình duyệt. Hơn nữa, phát hiện trình duyệt không tính đến các bản cập nhật phiên bản trình duyệt mới. Các phiên bản trình duyệt mới có thể hỗ trợ cho các tính năng không được hỗ trợ trước đây làm cho mã bổ sung của bạn trở nên dư thừa hoặc phiên bản mới có thể xóa hỗ trợ cho một tính năng có thể phá hỏng hiệu suất của trang web của bạn.
  • Mã dự phòng sẽ được hiển thị ngay cả khi có khả năng các phiên bản mới của trình duyệt hỗ trợ tính năng đó.
  • Một số trình duyệt cũng sử dụng một tác nhân người dùng giả để che dấu bản gốc.
  • Nhiều trình duyệt cũng đã bắt đầu giả mạo chuỗi tác nhân người dùng của họ. Theo thời gian, một số lỗ hổng nghiêm trọng đã xuất hiện trong Phát hiện tác nhân người dùng, do đó IE đã bỏ hỗ trợ cho nó từ phiên bản 10 trở lên.

Phát hiện tính năng

Một cách tiếp cận tốt hơn để phát hiện trình duyệt được gọi là phát hiện tính năng của Cameron. t. CSS với tính năng phát hiện liên quan đến việc kiểm tra xem trình duyệt có khả năng chạy các dòng mã nhất định hay không và tùy thuộc vào kết quả của thử nghiệm, một khối mã cụ thể được chạy bởi trình duyệt hỗ trợ, dẫn đến tính nhất quán gần như hoàn hảo và trình duyệt chéo khả năng tương thích.

Bằng cách này, bạn có thể đảm bảo rằng trình duyệt có thể mang lại trải nghiệm người dùng liền mạch và nhất quán cho dù người dùng có trình duyệt nào. Một nhà phát triển không phải lo lắng về việc theo dõi các biểu đồ hỗ trợ trình duyệt cồng kềnh và cập nhật phiên bản mới. Cùng với triết lý tăng cường tiến bộ, các nhà phát triển trước tiên mã hóa trang web để cung cấp phiên bản cơ sở được hỗ trợ trong tất cả các trình duyệt và tiến hành thêm các lớp tùy thuộc vào hỗ trợ trong các trình duyệt hiện đại mới. Nếu bạn không tuân theo cách tiếp cận CSS với phát hiện tính năng, các trình duyệt không hỗ trợ các tính năng sẽ không hiển thị trang web của bạn như dự định và sẽ mang lại trải nghiệm người dùng kém. Khác với việc cung cấp CSS tương thích trình duyệt chéo, nó cũng giúp các nhà phát triển viết CSS sạch có thể đọc được bằng cách tránh các dự phòng đa dòng hỗn loạn.

Phát hiện trình duyệt và so sánh phát hiện tính năng

Hãy xem xét các kịch bản thử nghiệm sau đây. Trong cả hai trường hợp, chúng tôi có một dự phòng sẵn sàng cho sự vắng mặt của hỗ trợ trình duyệt.

Nếu cấu hình trình duyệt được biết và tác nhân người dùng hoạt động như dự định, tức là với việc phát hiện thành công, cả hai phương pháp đều hoạt động.

Tuy nhiên, khi gặp phải cấu hình trình duyệt không xác định hoặc không chính xác, các phương pháp phát hiện trình duyệt thất bại hoàn toàn và không thể hiển thị trang chính xác. Mặt khác, tính năng phát hiện xử lý thách thức này theo cách liền mạch hơn nhiều. CSS với tính năng phát hiện tính năng chạy thử nghiệm và xác định rằng trình duyệt có khả năng hiển thị Tính năng A nhưng khi không hỗ trợ tính năng B, nó chỉ dựa vào dự phòng cho tính năng B và hiển thị thành công trang mà nhà phát triển muốn.

Phát hiện tính năng CSS

@supports Tính năng truy vấn

Có một số công cụ có sẵn trong kho vũ khí của nhà phát triển để đạt được khả năng tương thích giữa nhiều trình duyệt như Modernizr và polyfill. Thay vì sử dụng các công cụ của bên thứ ba, chúng tôi có thể đạt được kết quả tương tự bằng cách sử dụng các truy vấn tính năng CSS. Đây là các quy tắc có điều kiện cho phép chúng tôi áp dụng các kiểu khác nhau cho cùng một yếu tố tùy thuộc vào sự hỗ trợ của trình duyệt. Các truy vấn tính năng tương tự như các câu lệnh điều kiện @media, @document hoặc @import. Không giống như truy vấn @media, sử dụng các điều kiện dựa trên kích thước màn hình, truy vấn tính năng tạo các điều kiện dựa trên hỗ trợ CSS của trình duyệt. Nếu trình duyệt hiểu và hỗ trợ thuộc tính bên trong truy vấn tính năng, thì tất cả các quy tắc kiểu CSS bên trong dấu ngoặc truy vấn sẽ được áp dụng. Nếu không, nó được bỏ qua và bỏ qua.

Quy tắc @supports

@supports là quy tắc nhóm có điều kiện kiểm tra xem trình duyệt có hỗ trợ các cặp giá trị thuộc tính CSS hay không. Trình duyệt thực hiện kiểm tra trình duyệt chéo để kiểm tra xem một thuộc tính hoặc giá trị CSS nhất định có được hỗ trợ hay không. Kết quả xác định liệu một khối mã CSS có được áp dụng hay không. Cú pháp tương tự như truy vấn phương tiện, nhưng thay vì truy vấn phương tiện, chúng tôi đặt khai báo CSS làm điều kiện kiểm tra để xác thực CSS tương thích trình duyệt chéo. Trình duyệt thực hiện kiểu CSS dựa trên điều kiện đó.

Cú pháp:

@supports(test condition) {
    /* apply rules */
}

Thí dụ:

Xem xét ví dụ sau liên quan đến thuộc tính chiều rộng vmax:

.container {
 height: 100%;
}

@supports (height: 100vmax) {
 .container {
      height: 100vmax;
 }
}

@supports truy vấn kiểm tra xem vmax có được trình duyệt của người dùng hỗ trợ hay không. Nếu được hỗ trợ, chiều cao của container sẽ được đặt thành 100vmax, nếu không, nếu tính năng này không được hỗ trợ, chiều cao của container sẽ được đặt thành 100%.

Một ví dụ khác để kiểm tra xem trình duyệt có hỗ trợ lưới CSS hay không.

div {
  background-color: yellow;
}

@supports (display:grid) {
  div {
    background-color: green;
  }
}

Trong các trình duyệt hỗ trợ tính năng lưới, màu nền của phần tử div sẽ được đặt thành màu xanh lá cây (vì điều kiện giải quyết thành đúng), trong khi đối với các trình duyệt không hỗ trợ lưới, nền của div sẽ được đặt thành màu vàng.

Nhà điều hành @supports

Chúng tôi có thể sử dụng nhiều toán tử logic để tăng thêm tính năng @supports để tạo các bài kiểm tra điều kiện phức tạp.

(a). không phải nhà điều hành

Nhà điều hành không phải là người dùng có thể được sử dụng với @supports để kiểm tra Không hỗ trợ.

@supports not (display: flex) {
div { display: inline-block; } /* alternative style if display:flex is not supported */
}
(b). Và nhà điều hành

Toán tử có thể được sử dụng để kiểm tra nhiều điều kiện thử nghiệm cùng một lúc. Kết quả chỉ đúng nếu tất cả các điều kiện là đúng. Nếu ngay cả một điều kiện duy nhất là sai thì boolean kết quả cũng sai.

@supports (mix-blend-mode: overlay) and 
  (background: linear-gradient(rgb(45, 145, 245), rgb(20,120,220))) {

  .wrapper {
    background: linear-gradient(rgb(45, 145, 245), rgb(20, 120, 220));
  }

  .wrapper img {
    mix-blend-mode: overlay;
  }

}
(c). Hoặc nhà điều hành

Toán tử có thể được sử dụng để kiểm tra xem ít nhất một điều kiện trong số nhiều điều kiện có đúng hay không. Kết quả là sai chỉ khi tất cả các điều kiện là sai.

@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {

    section {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      float: none;
    }
}

Hỗ trợ phát hiện bằng Javascript

Các truy vấn tính năng cũng có thể được sử dụng với JavaScript. JavaScript cung cấp  CSS.supports() method cái có thể được thực hiện theo hai cách:

  1. CSS.supports (propertyName. Value);
    1. Thí dụ: CSS.supports("text-decoration-style", "blink");
  2. CSS.supports (testCondition);
    1. Thí dụ: CSS.supports("display: flex");

Hơi lạc đề một chút, nhưng nếu bạn đang vật lộn với rò rỉ bộ nhớ liên quan đến JavaScript thì tôi cũng đã viết một blog chi tiết về việc loại bỏ rò rỉ bộ nhớ trong JavaScript .

Sử dụng CSS @supports để tạo dự phòng cho lưới CSS

Bây giờ chúng ta có thể sử dụng các truy vấn tính năng để tạo bố cục nhỏ đầy đủ chức năng cho phần thư viện hoặc danh mục đầu tư. Chúng ta có thể thực hiện điều này thông qua cách tiếp cận nâng cao lũy tiến bằng cách tạo phiên bản bố cục cơ bản trước rồi thêm hỗ trợ trình duyệt cho flexbox và lưới CSS.

<!DOCTYPE html>
<html>
<head>
<style>
  body {
text-align: center;
  }

  .grid-wrapper {
display: inline-block;
  }

  .grid-card {
width: 18em;
display: inline-block;
margin: 1.5em 1em;
text-align: left;
  }

  .grid-card-img {
width: 100%;

  }

  @supports (display:flex) {
.grid-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: -1.5em 0 1.5em -1em;
  justify-content: space-around;
}

.grid-card {
  padding: 1.5em 0 0 1em;
  flex: 1 0 18em;
  max-width: 18em;
  width: auto;
  margin: initial;
}
  }

  @supports (display:grid) {
.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18em, 1fr));
  grid-gap: 0.8em;
  margin: initial;
}

.grid-card {
  padding: initial;
  max-width: none;
}
  }
</style>
</head>
<body>

  <div class="grid-wrapper">
<div class="grid-card">
  <img class="grid-card-img" src="https://unsplash.it/640/425?image=40">
  <h2>Grid Card 1</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam amet laudantium maxime suscipit. Ratione, eos.</p>
</div>
<div class="grid-card">
  <img class="grid-card-img" src="https://unsplash.it/640/425?image=41">
  <h2>Grid Card 2</h2>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti veniam quod consectetur mollitia quam voluptas.</p>
</div>

<div class="grid-card">
  <img class="grid-card-img" src="https://unsplash.it/640/425?image=42">
  <h2>Grid Card 3</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam ipsam accusantium voluptas! Provident, magnam non!</p>
</div>

<div class="grid-card">
  <img class="grid-card-img" src="https://unsplash.it/640/425?image=43">
  <h2>Grid Card 4</h2>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione deleniti praesentium delectus quas maiores perferendis!</p>
</div>

<div class="grid-card">
  <img class="grid-card-img" src="https://unsplash.it/640/425?image=44">
  <h2>Grid Card 5</h2>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto cum quia tempore totam a! Explicabo?</p>
</div>
<div class="grid-card">
  <img class="grid-card-img" src="https://unsplash.it/640/425?image=45">
  <h2>Grid Card 6</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae recusandae quidem, nihil maxime dicta suscipit.</p>
</div>
<div class="grid-card">
  <img class="grid-card-img" src="https://unsplash.it/640/425?image=46">
  <h2>Grid Card 7</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit odit saepe, facere iste adipisci aliquam?</p>
</div>

  </div>
</body>
</html>

Các kết quả:




Hỗ trợ trình duyệt cho Truy vấn tính năng

Một điểm gắn bó với việc sử dụng các truy vấn tính năng @supports là thiếu hỗ trợ trình duyệt trong một số trình duyệt cổ xưa.

Không có phiên bản Internet Explorer nào, kể cả phiên bản 11, hỗ trợ truy vấn tính năng. Safari triển khai hỗ trợ cho các truy vấn tính năng nhưng chỉ trong các phiên bản gần đây. Nhưng phải lưu ý rằng khi CSS xuống cấp một cách duyên dáng nếu trình duyệt không nhận ra quy tắc @supports, nó sẽ đơn giản bỏ qua toàn bộ khối mã mà không làm hỏng trang web. Do đó, cách tiếp cận tốt nhất là mã hóa các kiểu CSS cơ sở của bạn mà mọi trình duyệt có thể xử lý. Sau đó, sử dụng các truy vấn tính năng @supports để ghi đè kiểu dáng cơ sở đó với các chức năng và giao diện nâng cao hơn cho các trình duyệt hiện đại có thể xử lý các tính năng đó.

Một số nhà phát triển đang tìm kiếm hỗ trợ trình duyệt IE thích sử dụng các công cụ như Modernizr, Post-CSS và các polyfill khác để giải quyết các nhu cầu tương thích trình duyệt chéo của họ.

Phát hiện tính năng CSS bằng Modernizr

Modernizr is an extremely useful JavaScript library that helps to automatically detect the availability of next-generation HTML and CSS features in a user’s browser. Rather than relying upon user-agent sniffing, Modernizr depends on CSS feature detection to allow developers to deliver specific user experiences based on a user’s browser capability. It runs a test on the user’s browser to check whether it supports a particular feature or not. If the feature is deemed to be “unsupported” a developer can deliver an appropriate script or function to imitate the unsupported feature. Unlike CSS feature detection using @supports feature queries, Modernizr also allows for the building of custom tests.

Setting Up Modernizr

Older versions of Modernizr gave you two options to download the file: Development and Production version. However, in the recent version of Modernizr, a single development version, modernizr.js, is no longer available.

  1. Visit the Download page to custom select only the features you want in your project. This helps reduce file size and boost loading speed of the webpage.
  2. Insert the file inside the <head> section. For example: <script src=”modernizr.js type=”text/javascript></script>
  3. Modernizr adds many CSS classes on the root <html> tag by default. These classes are generated by Modernizr and vary depending on the browser’s capabilities. Classes are added for each feature when it is supported, and added with a no- prefix when it is not (e.g. .feature  or  .no-feature ).
    1. For example: <html class=” js flexbox flexboxlegacy csstransforms no-csstransforms3d csstransitions”>
  4. Lastly, we also need to add a no-js class to the <html>tag, <html class=”no-js”>. This class is necessary, so if the user’s browser is running without the JavaScript enabled we can add necessary fallback using this class. If it does support JS, then Modernizr will replace this class with just JS.

Consider the case of Modernizr’s detection for CSS gradients. Depending on the feature detection for the the given browser, the result will be either <html class=”cssgradients”> or <html class=”no-cssgradients”>. We can use progressive enhancement methodology to target both cases easily thanks to Modernizr classes.

.no-cssgradients .header {
  background: url("https://unsplash.it/640/425?image=44");
}

.cssgradients .header {
 background-image: url("https://unsplash.it/640/425?image=44"), linear-gradient(red, yellow);
}

Modernizr Feature Detection Using JavaScript

We can also use Modernizr with JavaScript to test the browser feature with the following syntax:-

// Test for flexbox
if (Modernizr.flexbox) {
 console.log('flexbox is available.');
 /* Script A */
} else {
 console.log('flexbox is not available.');
 /* Script B */
}

Modernizr vs. Feature Queries

Modernizr is supported by practically all browsers imaginable unlike feature queries, which are not supported by any Internet Explorer version, including 11. Excluding IE, feature queries have already been widely implemented ,covering 91.68% of global users. Unlike feature queries which are natively supported by browsers, Modernizr needs to be first downloaded and executed in JavaScript, which decreases page load speeds and can affect ranking son SERPs. Modernizr still does not cover the complete spectrum of CSS properties like @support queries can.

Cross-Browser Testing Is Indispensable

It is inconceivable to achieve cross-browser compatibility by using feature detection with feature queries or Modernizr alone, if a developer can’t even detect rendering issues across different browsers and browser versions. The more browsers and browser versions you validate your website on, the more robust your UI becomes. Not only does this help to deliver a seamless experience to your customers, but it also helps in delivering a sense of accomplishment and relief to the developers. This is why using a cross-browser testing tool is vital. Without cross browser testing, developers won’t be able to validate whether changes they have made to achieve browser compatibility are working as intended or not. 

Conclusion

Cross-browser compatibility, without a doubt, is an indispensable dimension of web development which can no longer be ignored. However, contrary to popular belief, websites don’t need to look and function exactly the same on each browser. It is crucial to comprehend that full, 100% compatibility is simply impossible to achieve. Therefore, the key goal of every developer should be to make their websites accessible across different browsers and provide a pleasant, seamless viewing experience to as many users as pragmatically possible. So far, the developer community has relied on JavaScript, especially Modernizr, to resolve their cross-browser compatibility issues. But in recent times CSS feature detection has emerged as a viable, lightweight, and easy to use an alternative solution that is finding its way into the mainstream and gaining popularity among developers.

Hữu ích 3 Chia sẻ Viết bình luận 0
Đã xem 4415