CSS tiền tố Webkit

Autoprefixer trực tuyến — web thay thế cho Autoprefixer gốc. Nó phân tích cú pháp CSS của bạn và thêm các tiền tố của nhà cung cấp vào các quy tắc CSS bằng cách sử dụng các giá trị từ Tôi có thể sử dụng không. Nó là của Google và được sử dụng bởi Twitter và Taobao

Làm thế nào nó hoạt động

Autoprefixer sử dụng dữ liệu về mức độ phổ biến của trình duyệt và hỗ trợ tiền tố nhà cung cấp của trình duyệt. Dựa trên thông tin này, nó sắp xếp và xóa các tiền tố. Nó có thể giúp bạn lấy tiền tố cho. hoạt hình, chuyển tiếp, biến đổi, lưới, flex, flexbox và những thứ khác

bộ lọc trình duyệt

Bạn có thể định cấu hình trình duyệt nào sẽ tạo tiền tố cho bản phân phối. Thông tin chi tiết về cú pháp có trong. Ngoài ra còn có một khối trong

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

any-link

dir[]

focus-visible

is[]

:placeholder

:placeholder-shown

________số 8

:read-write

-moz-box-shadow0

-moz-box-shadow1

-moz-box-shadow2

-moz-box-shadow3

-moz-box-shadow4

-moz-box-shadow5

-moz-box-shadow6

-moz-box-shadow7

-moz-box-shadow8

-moz-box-shadow9

any-link0

any-link1

any-link2

any-link3

any-link4

any-link5

any-link6

any-link7

any-link8

any-link9

dir[]0

dir[]1

dir[]2

dir[]3

Hoạt hình CSS

Bản vẽ CSS Canvas

Thích ứng thiết bị CSS

Con trỏ CSS. dir[]4 và dir[]5

Con trỏ CSS. Con trỏ dir[]6 và dir[]7

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

• dir[]8
• -moz-box-shadow1
• focus-visible0
• focus-visible1
• -moz-box-shadow3
• focus-visible3
• focus-visible4
• focus-visible5 [HTML]
• focus-visible6
• focus-visible7
• focus-visible8
• any-link3
• is[]0
• is[]1
• is[]2
• is[]3
• any-link9
• is[]5
• is[]6
• is[]7
• is[]8
• is[]9
• :placeholder0
• 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

Tổng số tính năng5335

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 nhóm thuộc tính mà tất cả đều yêu cầu tiền tố, chẳng hạn như :placeholder1; . Hãy cùng khám phá các đặc điểm thực tế để hiểu rõ hơn về hoàn cảnh, bắt đầu bằng cách xem xét những gì đã thay đổi trong khoảng thời gian đó

Hai mươi tính năng không được trộn 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 [:placeholder3, CSS :placeholder4 và CSS :placeholder5]

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. :placeholder6
2. :placeholder7
3. :placeholder8
4. :placeholder9
5. :placeholder-shown0
6. :placeholder-shown1
7. :placeholder-shown2
8. :placeholder-shown3
9. :placeholder-shown4
10. :placeholder-shown5
11. Con trỏ CSS dir[]4 và dir[]5
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 dir[]6 và dir[]7
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

#NameProperties/ValuesDescriptionYêu cầu có tiền tốHỗ trợ không có tiền tốHỗ trợ có tiền tốCải tiến có tiền tố1read-only0read-only1Xác định cách các phần tử [đặc biệt là các điều khiển biểu mẫu] xuất hiện theo mặc định. Việc đặt giá trị thành read-only2 khiến giao diện mặc định của phần tử được xác định lại hoàn toàn bằng cách sử dụng các thuộc tính CSS khác

• Safari
  [read-only3]
• Opera
  [read-only3]
• Trình duyệt Android 2. 1-4. 4. 4
  [read-only3]

69. 80%97. 03%27. 23%2read-only6read-only7Phương pháp cắt hình nền không chuẩn vào văn bản nền trước

• Chrome
  [read-only3]
• Cạnh
  [read-only3]
• Safari
  [read-only3]
• Opera
  [read-only3]
• Safari iOS
  [read-only3]
• Trình duyệt Android
  [read-only3]
• Chrome dành cho Android
  [read-only3]

3. 89%96. 65%92. 76%3 focus-visible0:placeholder3 Phương pháp áp dụng hiệu ứng bộ lọc [như :read-write7, :read-write8 hoặc :read-write9] cho nội dung hoặc thành phần bên dưới thành phần mục tiêu

• Safari
  [read-only3]
• Safari iOS
  [read-only3]

70. 20%88. 20%18. 00%4-moz-box-shadow3-moz-box-shadow03Chức năng tạo ảnh “làm mờ chéo” giữa các ảnh. Điều này cho phép một hình ảnh chuyển đổi [mờ dần] sang hình ảnh khác dựa trên giá trị phần trăm

• Chrome
  [read-only3]
• Cạnh
  [read-only3]
• Opera
  [read-only3]
• Trình duyệt Android
  [read-only3]
• Chrome dành cho Android
  [read-only3]

17. 77%92. 62%74. 85%5 -moz-box-shadow09 -moz-box-shadow10 Phương pháp cho phép trình duyệt chọn hình nền CSS phù hợp nhất từ ​​một tập hợp nhất định, chủ yếu dành cho màn hình PPI cao

• Chrome
  [read-only3]
• Cạnh
  [read-only3]
• Opera
  [read-only3]
• Trình duyệt Android
  [read-only3]
• Opera Mobile
  [read-only3]

17. 77%92. 48%74. 71%6______44-moz-box-shadow17Kiểm soát xem lề, đường viền, phần đệm và các trang trí khác của hộp có bao bọc các cạnh bị hỏng của các mảnh hộp hay không, khi hộp được chia theo dấu ngắt, chẳng hạn như trang, cột, vùng hoặc dòng

• Chrome
  [read-only3]
• Cạnh
  [read-only3]
• Safari
  [read-only3]
• Opera
  [read-only3]
• Safari iOS
  [read-only3]
• Trình duyệt AndroidOpera Mobile
  [read-only3]

6. 39%97. 17%90. 78%7focus-visible5-moz-box-shadow25Phương pháp xác định vùng hiển thị của phần tử HTML bằng cách sử dụng SVG hoặc định nghĩa hình dạng

• Safari
  [read-only3]

72. 00%96. 33%24. 33%8_______46_______128Một tiện ích mở rộng CSS không chuẩn có thể được sử dụng để ép màu nền và hình ảnh để in

• Chrome
  [-moz-box-shadow29]
• Cạnh
  [-moz-box-shadow29]
• Safari
  [-moz-box-shadow29]
• Opera
  [-moz-box-shadow29]
• Điện thoại di động Android
  [-moz-box-shadow29]

3. 69%39. 77%36. 08%9focus-visible7-moz-box-shadow35Hàm này hiển thị hình ảnh trực tiếp được tạo từ phần tử HTML tùy ý

• Firefox
  [-moz-box-shadow36]

0. 00%4. 04%4. 04%10is[]9-moz-box-shadow38Kiểm soát việc sử dụng khoảng cách giữa các chữ cái được lưu trữ trong phông chữ. Lưu ý rằng điều này chỉ ảnh hưởng đến các phông chữ OpenType có thông tin kerning, nó không ảnh hưởng đến các phông chữ khác

• Safari iOS
  [read-only3]

81. 73%96. 03%14. 30%11focus-visible8-moz-box-shadow41Kiểm soát cách áp dụng khử răng cưa khi hiển thị phông chữ. Mặc dù có mặt trong các bản nháp đầu năm 2002 của đặc tả Phông chữ CSS3, thuộc tính này đã bị xóa và hiện không nằm trong tiêu chuẩn

• Chrome
  [-moz-box-shadow42]
• Cạnh
  [-moz-box-shadow42]
• Firefox
  [-moz-box-shadow44]
• Safari
  [-moz-box-shadow42]
• Opera
  [-moz-box-shadow42]

0. 00%39. 64%39. 64%12-moz-box-shadow47-moz-box-shadow48Phương pháp kiểm soát khi các từ ở cuối dòng nên được gạch nối

• Internet Explorer 10+
  [-moz-box-shadow49]
• Safari
  [read-only3]
• Safari iOS
  [read-only3]

76. 49%96. 51%20. 02%13is[]1_______65Phương pháp tạo nắp mở rộng, bao gồm nắp giảm hoặc nắp nâng, một cách mạnh mẽ

• Safari
  [read-only3]
• Safari iOS
  [read-only3]

0. 00%18. 00%18. 00%14is[]2-moz-box-shadow57Chứa văn bản với số lượng dòng nhất định khi được sử dụng kết hợp với -moz-box-shadow58. Bất kỳ văn bản nào tràn vào không gian đều tạo ra dấu chấm lửng khi bao gồm -moz-box-shadow59

• Chrome
  [read-only3]
• Cạnh
  [read-only3]
• Firefox
  [read-only3]
• Safari
  [read-only3]
• Opera
  [read-only3]
• Safari iOS
  [read-only3]
• Trình duyệt Android
  [read-only3]
• Chrome dành cho Android
  [read-only3]
• Firefox dành cho Android
  [read-only3]
• Opera Mobile
  [read-only3]

0. 19%96. 28%96. 09%15is[]3-moz-box-shadow71Giữ các phần tử được định vị là "cố định" hoặc "tương đối" tùy thuộc vào cách nó xuất hiện trong chế độ xem. Kết quả là phần tử bị "kẹt" tại chỗ khi cuộn

• Safari 7. 1-12. 1
  [read-only3]

93. 50%95. 36%1. 86%16 :placeholder0-moz-box-shadow74 Cách tùy chỉnh độ rộng của ký tự Tab. Chỉ hiệu quả cùng với -moz-box-shadow75 hoặc -moz-box-shadow76

• Firefox 4+
  [-moz-box-shadow36]
• Firefox dành cho Android
  [-moz-box-shadow36]
• Opera 11. 5-12-1
  [-moz-box-shadow79]

92. 33%97. 38%5. 05%17any-link9____181
-moz-box-shadow82 tài sản. Phương pháp xác định loại, kiểu dáng và màu sắc của các dòng trong thuộc tính -moz-box-shadow81. Chúng có thể được định nghĩa như một tốc ký [e. g. -moz-box-shadow84] hoặc dưới dạng các tài sản đơn lẻ [e. g. -moz-box-shadow85].

• Firefox 6-35
  [-moz-box-shadow36]
• Safari 7. 1+
  [read-only3]
• Safari dành cho iOS 8 trở lên
  [read-only3]

80. 25%94. 86%14. 61%18dir[]0_______190
-moz-box-shadow91 propertiesPhương pháp sử dụng các ký hiệu nhỏ bên cạnh mỗi nét chữ để nhấn mạnh một dòng văn bản, thường được sử dụng trong các ngôn ngữ Đông Á. Thuộc tính tốc ký -moz-box-shadow90 và các thuộc tính cấu thành -moz-box-shadow93 và -moz-box-shadow94 của nó có thể được sử dụng để áp dụng các dấu cho văn bản. Thuộc tính -moz-box-shadow95, kế thừa riêng, cho phép thiết lập vị trí của các dấu nhấn đối với văn bản.

• Chrome 25+
  [read-only3]
• Cạnh 79+
  [read-only3]
• Opera 15+
  [read-only3]
• Trình duyệt Android
  [read-only3]
• Chrome dành cho Android
  [read-only3]
• Opera Mobile
  [read-only3]

21. 96%95. 99%74. 03%19is[]6:placeholder4Chỉ định hướng của văn bản trong một dòng. Các giá trị hiện tại chỉ có tác dụng trong chế độ in dọc [được xác định bằng thuộc tính :placeholder-shown5]. Safari
[read-only3]90. 88%94. 84%3. 96%20is[]7any-link07Kiểm soát nếu và cách áp dụng thuật toán tăng văn bản cho nội dung văn bản của thành phần mà nó được áp dụng.

• Cạnh 12-18
  [-moz-box-shadow49]
• Safari iOS
  [read-only3]
• Firefox dành cho Android
  [-moz-box-shadow36]

72. 75%87. 48%14. 73%21is[]8any-link12Phương pháp ngăn chọn văn bản hoặc phần tử

• Internet Explorer 10-11
  [-moz-box-shadow49]
• Safari
  [read-only3]
• Safari iOS
  [read-only3]
• Trình duyệt Android 2. 1-4. 4. 4
  [read-only3]

74. 81%96. 49%21. 68%22CSS Canvas Drawingsany-link17Phương pháp sử dụng HTML5 Canvas làm hình nền. Hiện tại không phải là một phần của bất kỳ thông số kỹ thuật nào

• Safari
  [read-only3]

0. 00%19. 40%19. 40%23CSS Masksany-link19 propertiesPhương thức hiển thị một phần của phần tử, sử dụng hình ảnh được chọn làm mặt nạ

• Chrome
  [read-only3]
• Cạnh
  [read-only3]
• Safari
  [read-only3]
• Trình duyệt Safari iOSAndroid
  [read-only3]
• Chrome dành cho Android
  [read-only3]
• Opera Mobile
  [read-only3]

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 any-link26 và any-link27, nhưng thiếu hỗ trợ cho các phần khác của thông số kỹ thuật

4. 18%96. 93%92. 75%24CSS Reflectionsany-link28Phương thức hiển thị phản chiếu của một phần tử

• Chrome
  [read-only3]
• Cạnh
  [read-only3]
• Safari
  [read-only3]
• Opera
  [read-only3]
• Safari iOS
  [read-only3]
• Trình duyệt Android
  [read-only3]
• Chrome dành cho Android
  [read-only3]
• Opera Mobile
  [read-only3]

0. 00%91. 20%91. 20%25CSS Tạo kiểu cho thanh cuộn_______237
any-link38Các phương pháp tạo kiểu cho màu sắc và chiều rộng của thanh cuộn.

• Chrome
  [read-only3]
• Cạnh
  [read-only3]
• Safari
  [read-only3]
• Opera
  [read-only3]
• Safari iOS
  [read-only3]
• Trình duyệt Android
  [read-only3]
• Chrome dành cho Android
  [read-only3]

4. 28%96. 87%92. 59%26CSS Text Fill & Strokingany-link46
any-link47 propertiesPhương pháp khai báo độ rộng và màu của nét viền [nét] cho văn bản.

• Chrome
  [read-only3]
• Cạnh
  [read-only3]
• Firefox
  [read-only3]
• Safari
  [read-only3]
• Opera
  [read-only3]
• Safari iOS
  [read-only3]
• Trình duyệt Android
  [read-only3]
• Chrome dành cho Android
  [read-only3]
• Firefox dành cho Android
  [read-only3]
• Opera Mobile
  [read-only3]

0. 00%96. 65%96. 65%27Định cỡ bên trong & bên ngoàiany-link58
any-link59
any-link60
any-link61 [trước đây là any-link62]. Cho phép chỉ định chiều cao và chiều rộng của phần tử theo giá trị nội tại thay vì giá trị số cố định.

• Chrome 22-45
  [read-only3]
• Cạnh 3-65
  [read-only3]
• Firefox [-moz-có sẵn]
• Opera 15-32
  [read-only3]
• Safari 6. 1-10-1
  [read-only3]
• Safari iOS 7-13. 7
  [read-only3]
• Trình duyệt Android 4. 4-4. 4. 4
  [read-only3]

91. 99%96. 36%4. 37%28Truy vấn phương tiện. Tính năng Độ phân giảiany-link69 { … }, any-link70Cho phép đặt truy vấn phương tiện dựa trên pixel thiết bị được sử dụng trên mỗi đơn vị CSS. Trong khi tiêu chuẩn sử dụng any-link71 và any-link72, một số trình duyệt hỗ trợ truy vấn phương tiện any-link73 không chuẩn cũ hơn

• Chrome 4-28
  [read-only3]
• Safari 4+
  [read-only3]
• Opera 10-11. 5
  [read-only3]
• Safari iOS
  [read-only3]
• Trình duyệt Android [2. 3-4. 3] Opera Mobile 12
  [read-only3]
• Firefox 3. 5-15
  [any-link79]

Các trình duyệt hỗ trợ read-only3 hỗ trợ any-link81 và any-link82 không chuẩn

80. 40%99. 16%18. 76%

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 rằng hàm any-link83 và Bản vẽ CSS Canvas thuộc danh mục đó. Safari gần đây đã bỏ tiền tố cho any-link84 any-link85, vì vậy có khả năng sẽ sớm bị loại khỏi danh sách

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 :placeholder1 làm ví dụ. Chrome là trình duyệt cuối cùng bỏ tiền tố trong năm 2015. Vậy mà hôm nay, 1. 3% người dùng trên toàn thế giới vẫn đang sử dụng trình duyệt không hỗ trợ phiên bản chưa sửa đổi

any-link87 và any-link88 để đặt lại kiểu dáng mặc định cho phần tử any-link89. Nó cũng cần định vị cố định, vì vậy tôi phải thêm tiền tố -moz-box-shadow71 để hỗ trợ định vị cố định trong Safari

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 any-link92. Hầu hết các trình duyệt đều yêu cầu phiên bản có tiền tố read-only3 của thuộc tính này, vì vậy bạn cần sử dụng phiên bản này

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 any-link94 để tự động chèn tiền tố cho bạn. Tôi chưa xác minh xem nó có hiện hành hay không, nhưng nó đáng được coi là một phần của môi trường phát triển của bạn

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ó một lệnh any-link95 cập nhật giá trị của tất cả các phiên bản có tiền tố của cùng một thuộc tính trong một quy tắc. Bạn có thể đọc tài liệu Emmet để biết thêm thông tin về khả năng tiền tố

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ố WebKit trong CSS là gì?

Khi nào tôi nên sử dụng CSS tiền tố WebKit?

Rất nhiều lập trình viên sử dụng CanIUse để xác định xem một thuộc tính CSS cụ thể có được hỗ trợ trong tất cả các trình duyệt mà họ muốn hỗ trợ hay không. Nếu nó không được hỗ trợ đầy đủ trong tất cả các trình duyệt mà họ muốn hỗ trợ , lập trình viên nên sử dụng tiền tố nhà cung cấp [i. e. -webkit-].

Tiền tố trong CSS là gì?

Bộ mô tả tiền tố của quy tắc kiểu @counter chỉ định nội dung sẽ được thêm vào trước biểu diễn đánh dấu . Nếu không được chỉ định, giá trị mặc định sẽ là "" [một chuỗi rỗng].

Làm cách nào để sử dụng tiền tố CSS của nhà cung cấp?

Bằng cách sử dụng các tiền tố, chúng tôi có thể sử dụng các tính năng CSS mới hơn này với các trình duyệt hỗ trợ chúng — thay vì đợi tất cả các trình duyệt bắt kịp. .

-webkit- [Chrome, Safari, iOS Safari / iOS WebView, Android]

-moz- [Firefox]

-ms- [Cạnh, Internet Explorer]

-o- [Opera, Opera Mini]