Tiền tố trình duyệt có bắt buộc đối với gradient tuyến tính không?

Question

Tôi vẫn cần sử dụng tiền tố trình duyệt cho thuộc tính linear-gradient không?

background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
    background-image: -moz-linear-gradient(top, #2F2727, #1a82f7); 
    background-image:  -ms-linear-gradient(top, #2F2727, #1a82f7); 
    background-image:  -o-linear-gradient(top, #2F2727, #1a82f7); 

Tôi chỉ muốn hỗ trợ các phiên bản trình duyệt mới nhất. Tôi đã thử làm theo, nhưng không hoạt động.

background-image: linear-gradient(top, #2F2727, #1a82f7); 

Answer 1

Theo Can I use, tính đến tháng 6 năm 2017, 93,75% của việc sử dụng Internet là một trình duyệt hỗ trợ gradient tuyến tính không tiền tố (97,2% ở Mỹ). Đối với hầu hết mọi người, điều này có nghĩa là bạn không cần phải thêm tiền tố cho gradient của mình nữa.

Dưới đây là lần đầu tiên tương thích phiên bản và ngày phát hành cho các trình duyệt máy tính để bàn phổ biến nhất:

• IE v10, phát hành tháng chín 2012
• Firefox v16, phát hành tháng 8 năm 2012
• Chrome v26, phát hành tháng 2 năm 2013
• Safari v6.1, phát hành tháng 10 năm 2013
• Opera 12.1, phát hành tháng 11 năm 2012

Thông tin về lịch sử tương thích của các trình duyệt khác (bao gồm cả trình duyệt di động) có sẵn tại Can I use.

Answer 2

Ví dụ sau

 background: rgb(238,238,238); /* Old browsers */ 
    background: -moz-linear-gradient(-45deg, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */ 
    background: linear-gradient(-45deg, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=1); /* IE6-9 fallback on horizontal gradient */ 

cho thấy linear gradient là hơn ngoài tiền tố đơn giản. Ví dụ, một trong đó chạy trên IE đòi hỏi một tiền tố và đối tượng DXImageTransform. Do đó, linear gradient có nhiều thuộc tính SVG yêu cầu một số công việc phụ ngoài tiền tố.

Answer 3

Bây giờ bạn có thể sử dụng:

linear-gradient 

mà không tiền tố và nó sẽ được hỗ trợ bởi IE10 + cũng như các phiên bản hiện hành của Safari, Chrome và Firefox. Để biết thêm thông tin chi tiết, hãy xem: http://caniuse.com/#search=linear-gradient

Nhưng câu trả lời ngắn gọn là: Không cần tiền tố.