Tiền tố nhà cung cấp trong CSS là gì?

Gần đây tôi đang dạy một nhà phát triển mới bắt đầu những kiến ​​thức cơ bản về thiết kế web bằng CSS. Tôi có thể nói rằng cô ấy đã không bị choáng ngợp cho đến khi tôi bỏ từ "tiền tố. " Cô ấy thực sự thất vọng với số lượng thứ mà cô ấy phải nắm bắt trong giai đoạn đầu. Cuối cùng, chúng tôi phải tạm nghỉ và tôi đã hứa với cô ấy rằng tôi sẽ viết một hướng dẫn dễ hiểu, thân thiện với người mới bắt đầu về các tiền tố CSS trên Hashnode

Tiền tố CSS là gì?

Tiền tố CSS, còn được gọi là tiền tố Nhà cung cấp, là một tập hợp các từ khóa dành riêng cho trình duyệt mà bạn cần thêm vào các thuộc tính CSS thử nghiệm hoặc phi tiêu chuẩn để các kiểu của bạn tương thích với nhiều trình duyệt

Đối với các trình duyệt chính, tiền tố CSS là

• -webkit-. Đối với các trình duyệt Chromium như Google Chrome, Safari, Opera, Brave, v.v.
• -moz-. Đối với Mozilla Firefox
• -o-. Đối với phiên bản Trình duyệt Opera cũ hơn (Bạn có thể bỏ qua tiền tố này một cách an toàn, vì số lượng người dùng sử dụng trình duyệt này rất ít)
• -ms-. Đối với trình duyệt Microsoft Internet Explorer và Microsoft Edge

Khi nào sử dụng tiền tố CSS?

Bạn phải sử dụng các tiền tố CSS cụ thể của Nhà cung cấp khi bạn đang cố gắng sử dụng các thuộc tính CSS thử nghiệm hoặc phi tiêu chuẩn. Như là

1. display: flex;

   Các tiền tố để sử dụng với điều này là

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
   

   Tái bút. Hỗ trợ Flexbox có mặt trong hầu hết các trình duyệt hiện đại ngày nay. CanIUse nói, 93. 99% người dùng có trình duyệt hỗ trợ Flexbox không trộn tiền tố trên toàn cầu

2. ________số 8

   Tiền tố để sử dụng

    -webkit-transform: scale(1.2);
          transform: scale(1.2);
   

1. animation: blink .3s ease-in-out;

   tiền tố

    -webkit-animation: blink .3s ease-in-out;
    animation: blink .3s ease-in-out;
   

Trong trường hợp bạn không chắc thuộc tính CSS mình muốn sử dụng là thuộc tính thử nghiệm hay tiêu chuẩn, hãy xác minh thuộc tính đó từ caniuse. com

Các công cụ để tự động hóa các tiền tố CSS của nhà cung cấp

Điểm hay của việc học viết mã vào năm 2019 là có nhiều công cụ giúp bạn thực hiện các công việc tẻ nhạt như thêm tiền tố nhà cung cấp

1. postcss/bộ sửa lỗi tự động

   Thêm autoprefixer vào dự án của bạn và phân tích cú pháp CSS dự án của bạn thông qua nó. Nó sẽ tự động tìm và thêm các tiền tố CSS dành riêng cho nhà cung cấp

2. vui lòng. io/chơi

   Đây là một công cụ trực tuyến để ghi hoặc dán tệp CSS của bạn vào một bên và nhận kết quả ở bên còn lại. Tôi đã sử dụng nó trong một thời gian dài

3. sindresorhus/gulp-autoprefixer

4. nDmitry/grunt-autoprefixer

Hai công cụ cuối cùng dành cho các nhà phát triển nâng cao. Trong trường hợp bạn đã quen với các công cụ được xây dựng bằng gulp và grunt, bạn có thể thiết lập trình tự sửa lỗi và chạy các tệp CSS của mình thông qua chúng

Chúng ta hãy lướt qua dòng ký ức để xem lại cách các thuộc tính CSS có tiền tố của nhà cung cấp ra đời. Tôi hy vọng tôi không kích hoạt PTSD cho bất kỳ ai

Không rõ ai đã bắt đầu tiền tố hoặc khi nào nó bắt đầu chính xác. Điều rõ ràng là vào năm 2006, các tính năng tiền tố đã có trong Internet Explorer và Firefox. Lý do tồn tại của các tiền tố là chỉ định các tính năng dành riêng cho trình duyệt. Nó được coi là một cách để triển khai các tính năng không chuẩn và cung cấp bản xem trước của các tính năng chuẩn mới

Đến năm 2012, Nhóm làm việc CSS của W3C đã ban hành hướng dẫn về việc sử dụng tiền tố của nhà cung cấp

Trong CSS, chúng tôi sử dụng tiền tố của nhà cung cấp cho các thuộc tính, giá trị, quy tắc @. – phần mở rộng dành riêng cho nhà cung cấp (theo CSS 2. 1) hoặc – triển khai thử nghiệm (theo CSS Snapshot 2010) (e. g. trong bản thảo làm việc)

Nó đã trở thành một tiêu chuẩn công nghiệp. Số lượng tiền tố tăng lên và cùng với nó, mọi thứ trở nên khó hiểu. Nó dẫn đến việc triển khai một phần các tính năng CSS, đưa ra các lỗi và cuối cùng tạo ra sự rạn nứt trong hệ sinh thái trình duyệt, khiến các nhà phát triển không hài lòng. Các nhà phát triển đã phản hồi bằng cách tạo ra các công cụ để tự động giải quyết vấn đề

Các nhà cung cấp trình duyệt dần dần bắt đầu rời bỏ tiền tố, thay vào đó, ưu tiên các cờ tính năng bên trong cài đặt trình duyệt. Có vẻ như các vấn đề do tiền tố của nhà cung cấp tạo ra sẽ biến mất theo thời gian. Câu hỏi là. thời điểm đó đã đến chưa?

Tôi đã thực hiện một số phân tích về bộ dữ liệu caniuse và bộ dữ liệu Mozilla Developer Network Compat để trả lời câu hỏi này

Xu hướng áp dụng

Bạn có thể thấy xu hướng triển khai các tính năng có tiền tố trên các trình duyệt chính trong biểu đồ trên. Tôi đã loại trừ Chrome dành cho Android do không đủ dữ liệu

Từ năm 2007 đến năm 2011, số lượng các tính năng có tiền tố trong tất cả các trình duyệt đã tăng lên đều đặn. Internet Explorer chỉ tăng trong năm 2011. Sau đó, vào năm 2012, Mozilla bắt đầu xóa các tính năng có tiền tố — chẳng hạn như

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

Năm 2013, Mozilla bắt đầu. Cùng năm đó, Chrome đã chuyển công cụ kết xuất của mình từ WebKit sang Blink (một phần của dự án Chromium). Đây là một bước ngoặt lớn trong việc loại bỏ một số tính năng tiền tố

Chỉ đến tháng 4 năm 2016, WebKit mới thông báo rằng họ sẽ không còn phát hành các tính năng thử nghiệm có tiền tố nữa

Theo thời gian, chiến lược này hóa ra không hoạt động tốt. Nhiều trang web đã phụ thuộc vào các thuộc tính tiền tố. Họ thường sử dụng mọi biến thể có tiền tố của một tính năng, điều này làm cho CSS khó bảo trì hơn và các chương trình JavaScript khó viết hơn. Các trang web thường chỉ sử dụng phiên bản có tiền tố của một tính năng, điều này khiến các trình duyệt khó bỏ hỗ trợ cho biến thể có tiền tố khi thêm hỗ trợ cho phiên bản tiêu chuẩn, không có tiền tố. Cuối cùng, các trình duyệt cảm thấy bị áp lực bởi những lo ngại về khả năng tương thích để triển khai các tiền tố của nhau

Vì các trình duyệt Safari và iOS luôn sử dụng công cụ kết xuất WebKit nên số lượng tiền tố đã giảm dần sau đó đối với các trình duyệt này

Microsoft chưa bao giờ “gung ho” về tiền tố và luôn có ít tính năng có tiền tố nhất. Vào năm 2019, Edge đã chuyển từ công cụ kết xuất của riêng mình sang Blink. Nói một cách hài hước, thay đổi thực sự đã làm tăng số lượng thuộc tính có tiền tố trong Edge

Xu hướng tính năng

Bảng dưới đây so sánh các tính năng có tiền tố trong năm 2013 (đỉnh cao của tiền tố) với năm 2021

• Chrome 31
• Firefox 26
• Internet Explorer 11
• Safari 11
• iOS 7. 0-7. 1

• Chrome 89
• Cạnh 89
• Firefox 88
• Internet Explorer 11
• Safari 14
• Chrome Android 89
• iOS 14. 0-14. 5

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  2

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  3

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  4

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  5

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  6

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  7

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  8

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  9

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  10

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  11

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  12

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  13

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  14

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  15

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  16

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  17

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  18

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  19

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  20

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  21

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  22

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  23

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  24

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  25

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  26

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  27

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  28

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  29

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  30

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  31

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  32

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  33
• Hoạt hình CSS
• Bản vẽ CSS Canvas
• Thích ứng thiết bị CSS
• Con trỏ CSS.

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  34 và 

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  35
• Con trỏ CSS. Con trỏ

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  36 và

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  37
• Loại trừ CSS cấp 1
• Hiệu ứng bộ lọc CSS
• Mô-đun bố cục hộp linh hoạt CSS
• Bố cục lưới CSS Cấp 1
• Thuộc tính logic CSS
• Mặt nạ CSS
• Phản ánh CSS
• Vùng CSS
• Chụp cuộn CSS
• CSS Thanh cuộn Tạo kiểu
• Chuyển đổi CSS3 2D
• Chuyển đổi CSS3 3D
• Bố cục nhiều cột CSS3
• Tô và vuốt văn bản CSS
• Định cỡ bên trong & bên ngoài
• Truy vấn phương tiện truyền thông. Tính năng độ phân giải

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  38

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  11

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  40

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  41

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  13

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  43

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  44

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  45 (HTML)

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  46

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  47

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  48

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  23

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  50

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  51

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  52

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  53

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  29

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  55

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  56

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  57

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  58

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  59

•  -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  60
• Bản vẽ CSS Canvas
• Thích ứng thiết bị CSS
• Loại trừ CSS cấp 1
• Bố cục lưới CSS cấp 1
• Mặt nạ CSS
• Phản ánh CSS
• Vùng CSS
• Chụp cuộn CSS
• Tạo kiểu thanh cuộn CSS
• Tô và vuốt văn bản CSS
• Định cỡ bên trong & bên ngoài
• Truy vấn phương tiện truyền thông. Tính năng độ phân giải

Có thể ngạc nhiên khi thấy những con số thô. Số lượng tính năng yêu cầu tiền tố đã giảm ~33% từ năm 2013 đến năm 2021. Con số đó nghe có vẻ khá khiêm tốn với tôi

Tất nhiên, có thể gây hiểu nhầm nếu chỉ tập trung vào các con số. Tác động khác nhau. Nó có thể là một họ thuộc tính mà tất cả đều yêu cầu tiền tố, chẳng hạn như

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

20 tính năng không có tiền tố (được triển khai đầy đủ trên các trình duyệt chính) và ba tính năng có tiền tố đã được giới thiệu (

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

Theo ý kiến ​​​​của tôi, các tính năng đáng chú ý nhất hiện không được sửa đổi, đó là những điểm đau đáng kể là

1. Mô-đun bố cục hộp linh hoạt CSS
2. Kích thước hộp CSS3
3. Hoạt hình CSS
4. Chuyển đổi CSS3 2D
5. Chuyển đổi CSS3 3D
6. Hiệu ứng bộ lọc CSS

14 tính năng khác ít nổi bật hơn

1.  -webkit-transform: scale(1.2);
          transform: scale(1.2);
   

   66

2.  -webkit-transform: scale(1.2);
          transform: scale(1.2);
   

   67

3.  -webkit-transform: scale(1.2);
          transform: scale(1.2);
   

   68

4.  -webkit-transform: scale(1.2);
          transform: scale(1.2);
   

   69

5.  -webkit-transform: scale(1.2);
          transform: scale(1.2);
   

   70

6.  -webkit-transform: scale(1.2);
          transform: scale(1.2);
   

   71

7.  -webkit-transform: scale(1.2);
          transform: scale(1.2);
   

   72

8.  -webkit-transform: scale(1.2);
          transform: scale(1.2);
   

   73

9.  -webkit-transform: scale(1.2);
          transform: scale(1.2);
   

   74

10.  -webkit-transform: scale(1.2);
           transform: scale(1.2);
    

    75
11. Con trỏ CSS

     -webkit-transform: scale(1.2);
           transform: scale(1.2);
    

    34 và

     -webkit-transform: scale(1.2);
           transform: scale(1.2);
    

    35
12. Thuộc tính logic CSS (sẽ được sử dụng nhiều hơn trong tương lai, hiện tại đã hỗ trợ tốt hơn)
13. Con trỏ CSS3

     -webkit-transform: scale(1.2);
           transform: scale(1.2);
    

    36 và

     -webkit-transform: scale(1.2);
           transform: scale(1.2);
    

    37
14. Bố cục nhiều cột CSS3

Nếu bạn chọn không hỗ trợ Internet Explorer 11 vào năm 2021, thì bảy tính năng bổ sung không còn yêu cầu tiền tố. Điều đó làm giảm số lượng tính năng yêu cầu tiền tố vào năm 2021 xuống còn 28, tức là giảm 46% kể từ năm 2013

tiền tố vào năm 2021

Hãy xem xét các thuộc tính yêu cầu tiền tố. Đó là một nhóm hỗn tạp

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android 2. 1-4. 4. 4
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Chrome dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Chrome dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera Mobile
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt AndroidOpera Mobile
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  129)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  129)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  129)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  129)
• Điện thoại di động Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  129)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Firefox
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  136)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  142)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  142)
• Firefox
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  144)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  142)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  142)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Internet Explorer 10+
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  149)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Firefox
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Chrome dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Firefox dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera Mobile
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Safari 7. 1-12. 1
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Firefox 4+
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  136)
• Firefox dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  136)
• Opera 11. 5-12-1
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  179)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Firefox 6-35
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  136)
• Safari 7. 1+
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari dành cho iOS 8 trở lên
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome 25+
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh 79+
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera 15+
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Chrome dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera Mobile
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Cạnh 12-18
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  149)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Firefox dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  136)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Internet Explorer 10-11
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  149)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android 2. 1-4. 4. 4
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Safari iOSAndroid
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Chrome dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera Mobile
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

Hỗ trợ một phần trong trình duyệt WebKit/Blink đề cập đến việc hỗ trợ các thuộc tính

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Chrome dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera Mobile
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Chrome dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Firefox
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Chrome dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Firefox dành cho Android
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera Mobile
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome 22-45
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Cạnh 3-65
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Firefox (-moz-có sẵn)
• Opera 15-32
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari 6. 1-10-1
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS 7-13. 7
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android 4. 4-4. 4. 4
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

• Chrome 4-28
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari 4+
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Opera 10-11. 5
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Safari iOS
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Trình duyệt Android (2. 3-4. 3) Opera Mobile 12
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  83)
• Firefox 3. 5-15
  (

   -webkit-transform: scale(1.2);
         transform: scale(1.2);
  

  279)

Các trình duyệt hỗ trợ

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

Sau khi tổng hợp danh sách này lại với nhau, ấn tượng ban đầu của tôi là đây không phải là những thứ mà tôi thường xuyên gặp phải. Một số thuộc tính chưa — và có thể sẽ không — được triển khai đầy đủ. Tôi muốn nói hàm

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

Bạn có thể sàng lọc danh sách và tránh xa những tình huống nhất định nếu bạn muốn. Bạn có thể bỏ qua nó và nói rằng nó không quan trọng, vậy tại sao phải bận tâm? . Một câu hỏi thích hợp để trả lời là. bạn có muốn cải thiện hỗ trợ nhiều trình duyệt lên mức cao không?

Điều quan trọng cần nhớ là không chỉ về các thuộc tính này và các trình duyệt hiện tại. Vẫn có những người sử dụng các thiết bị cũ hơn với các trình duyệt cũ hơn, không hỗ trợ các phiên bản chưa được sửa đổi của một số tính năng. Lấy tài sản

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

Gần đây, tôi đã gặp phải một số tình huống yêu cầu các thuộc tính có tiền tố. Ví dụ: tôi đang tạo thanh tiến trình đọc cho blog và cần sử dụng

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

Dự phòng nhúng CodePen

Một vi dụ khac? . Mặt nạ thường hơi thất thường vì hầu hết các trình duyệt chỉ hỗ trợ một phần thông số kỹ thuật

Dự phòng nhúng CodePen

Đây là một cái khác. Flavio Copes, trong “Cách áp dụng phần đệm cho nhiều dòng trong CSS,” đã viết về cách anh ấy muốn có cùng một phần đệm trên mỗi dòng của tiêu đề nhiều dòng. Giải pháp là sử dụng

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

Dự phòng nhúng CodePen

Công cụ

Một số công cụ được tạo ra để giải quyết các vấn đề về tiền tố và hỗ trợ trình duyệt đã bị loại bỏ. Tôi khuyên bạn nên kiểm tra trước để xem liệu một công cụ có được cập nhật hay không trước khi sử dụng nó

Chắc chắn, Autoprefixer (một plugin PostCSS) được duy trì và nó sử dụng dữ liệu trực tiếp từ caniuse để luôn cập nhật

Emmet cũng có khả năng tiền tố tuyệt vời. Cụ thể, nó có tùy chọn

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

Vì hầu hết các trình chỉnh sửa mã đều hỗ trợ Emmet nên việc chỉnh sửa các thuộc tính có tiền tố trở nên dễ dàng hơn rất nhiều. Emmet có lệnh

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

Phần kết luận

Tiền tố nhà cung cấp không chết, thật không may. Chúng ta vẫn đang sống với di sản. Đồng thời, chúng tôi có thể biết ơn rằng các tính năng có tiền tố đang giảm dần. Một số công việc tốt đã được các nhà cung cấp trình duyệt thực hiện để triển khai các tính năng không có tiền tố thay cho các tính năng có tiền tố. Điều này đã loại bỏ gánh nặng từ các nhà phát triển

Tuy nhiên, đôi khi bạn có thể gặp phải các tình huống yêu cầu tiền tố. Và nếu bạn muốn hỗ trợ nhiều trình duyệt nhất có thể, bạn nên tiếp tục với chiến lược tự động thêm tiền tố

Tiền tố nhà cung cấp là gì?

Tiền tố CSS có nghĩa là gì?

Tiền tố CSS nào được sử dụng cho Chrome?