Làm thế nào để xác định trình duyệt Microsoft Edge qua CSS?

Tôi đang phát triển ứng dụng web và tôi cần xác định trình duyệt của Microsoft Edge riêng biệt với các trình duyệt khác, để áp dụng kiểu duy nhất. Có cách nào để xác định Edge bằng cách sử dụng CSS không? Giống như,

<!--[if IE 11]>
Special instructions for IE 11 here
<![endif]-->

/ * Trình duyệt Microsoft Edge 12-18 (Tất cả các phiên bản trước Chromium) * /

Cái này sẽ hoạt động:

@supports (-ms-ime-align:auto) {
    .selector {
        property: value;
    }
}

Để biết thêm, hãy xem: Sự kỳ lạ của trình duyệt

/* Microsoft Edge Browser 12-18 (All versions before Chromium) - one-liner method */

_:-ms-lang(x), _:-webkit-full-screen, .selector { property:value; }

Điều đó hoạt động tuyệt vời!

// for instance:
_:-ms-lang(x), _:-webkit-full-screen, .headerClass 
{ 
  border: 1px solid brown;
}

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

Chính xác hơn cho Edge (không bao gồm IE 15 mới nhất) là:

@supports (display:-ms-grid) { ... }

@supports (-ms-ime-align:auto) { ... } hoạt động cho tất cả các phiên bản Edge (hiện tại lên đến IE15).

For Internet Explorer 

@media all and (-ms-high-contrast: none) {
        .banner-wrapper{
            background: rgba(0, 0, 0, 0.16)
         }
}

For Edge
@supports (-ms-ime-align:auto) {
    .banner-wrapper{
            background: rgba(0, 0, 0, 0.16);
         }
}

Tính năng phát hiện, phát hiện tính năng, phát hiện tính năng. Vẫn chưa tìm thấy một trường hợp sử dụng nào tốt về lý do tại sao ai đó sẽ cần UA đánh hơi hoặc phát hiện bằng CSS. Bạn có thể vui lòng giải thích một chút chi tiết, một trường hợp sử dụng?

CSS

Tôi tìm thấy bài đăng này từ Jeff Clayton , bài này minh họa cách tìm Edge thông qua CSS, nhưng nó cũng sẽ phát hiện Chrome và Safari.

/* Chrome, Safari, AND NOW ALSO the Windows 10 Edge Browser */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .selector { property:value; } 
}

Nhưng nếu bạn PHẢI đánh hơi UA:

Chuỗi UA của Microsoft Edge:

Mozilla / 5.0 (Windows NT 10.0) AppleWebKit / 537.36 (KHTML, như Gecko) Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

Tôi nêu chi tiết lý do tại sao trong bài đăng trên blog này.

Neowin gần đây đã báo cáo rằng trình duyệt mới của Microsoft dành cho Windows 10, Spartan, sử dụng chuỗi Chrome UA, “Mozilla / 5.0 (Windows NT 10.0; WOW64) AppleWebKit / 537.36 (KHTML, như Gecko) Chrome / 39.0.2171.71 Safari / 537.36 Edge / 12.0 ″. Điều đó được thực hiện có mục đích.

Bạn cũng sẽ nhận thấy rằng toàn bộ chuỗi kết thúc bằng “Edge / 12.0 ″, Chrome thì không.

Tôi nên chỉ ra rằng đây không phải là một sự khác biệt so với những gì Microsoft đã làm với IE 11, mà trên Windows 8 có nội dung: Mozilla / 5.0 (Windows NT 6.3; Trident / 7.0; rv: 11.0) như Gecko, như đã giải thích trong phần này bài đăng.

Đánh hơi tác nhân người dùng là gì?

Thông thường, các nhà phát triển web sẽ UA đánh hơi để phát hiện trình duyệt. Mozilla giải thích điều đó trên blog của họ:

Cung cấp các trang web hoặc dịch vụ khác nhau cho các trình duyệt khác nhau thường là một ý tưởng tồi. Tất cả mọi người đều có thể truy cập Web, bất kể họ đang sử dụng trình duyệt hoặc thiết bị nào. Có nhiều cách để phát triển trang web của bạn để tự nâng cao dần dần dựa trên sự sẵn có của các tính năng thay vì nhắm mục tiêu các trình duyệt cụ thể.

Đây là một bài viết tuyệt vời giải thích lịch sử của Tác nhân người dùng.

Thông thường, các nhà phát triển lười biếng sẽ chỉ dò tìm chuỗi UA và vô hiệu hóa nội dung trên trang web của họ dựa trên trình duyệt mà họ tin rằng người xem đang sử dụng. Internet Explorer 8 là một điểm chung gây thất vọng cho các nhà phát triển, vì vậy họ sẽ thường xuyên kiểm tra xem người dùng có đang sử dụng BẤT KỲ phiên bản IE nào hay không và tắt các tính năng.

Nhóm Edge chi tiết điều này thậm chí còn sâu hơn trên blog của họ.

Tất cả các chuỗi tác nhân người dùng chứa nhiều thông tin hơn về trình duyệt khác ngoài trình duyệt thực mà bạn đang sử dụng - không chỉ mã thông báo, mà còn cả số phiên bản 'có ý nghĩa'.

Chuỗi UA của Internet Explorer 11:

Mozilla / 5.0 (Windows NT 6.3; Trident / 7.0; rv: 11.0) như Gecko

Chuỗi UA của Microsoft Edge:

Mozilla / 5.0 (Windows NT 10.0) AppleWebKit / 537.36 (KHTML, như Gecko) Chrome / 42.0.2311.135 Safari / 537.36 Edge / 12.10136

Thuộc tính userAgent đã được Patrick H. Lauke mô tả một cách khéo léo là “một gói dối trá ngày càng phát triển” trong các cuộc thảo luận của W3C. (“Hay đúng hơn là một hành động cân bằng việc thêm đủ các từ khóa kế thừa để không làm mất mã UA cũ ngay lập tức, trong khi vẫn cố gắng truyền tải một chút thông tin thực sự hữu ích và chính xác.”)

Chúng tôi khuyến nghị rằng các nhà phát triển web nên tránh tối đa việc đánh hơi UA; các tính năng của nền tảng web hiện đại gần như có thể được phát hiện theo những cách dễ dàng. Trong năm qua, chúng tôi đã thấy một số trang web theo dõi UA đã được cập nhật để phát hiện Microsoft Edge… chỉ để cung cấp cho nó một đường dẫn mã IE11 cũ. Đây không phải là cách tiếp cận tốt nhất, vì Microsoft Edge khớp với các hành vi của 'WebKit' chứ không phải các hành vi của IE11 (bất kỳ sự khác biệt nào giữa Edge-WebKit là các lỗi mà chúng tôi muốn sửa).

Theo kinh nghiệm của chúng tôi, Microsoft Edge chạy tốt nhất trên các đường dẫn mã 'WebKit' trong các trang web này. Ngoài ra, với việc Internet trở nên khả dụng trên nhiều loại thiết bị hơn, hãy giả sử rằng các trình duyệt không xác định là tốt - vui lòng không giới hạn trang web của bạn chỉ hoạt động trên một nhóm nhỏ các trình duyệt hiện tại đã biết. Nếu bạn làm điều này, trang web của bạn gần như chắc chắn sẽ bị phá vỡ trong tương lai.

Phần kết luận

Bằng cách trình bày chuỗi Chrome UA, chúng tôi có thể khắc phục các lỗi mà các nhà phát triển này đang sử dụng để mang đến trải nghiệm tốt nhất cho người dùng.