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à
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
________số 8
Tiền tố để sử dụng
-webkit-transform: scale(1.2); transform: scale(1.2);
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
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
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
sindresorhus/gulp-autoprefixer
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); 0 và -webkit-transform: scale(1.2); transform: scale(1.2); 1 — khỏi Firefox. Sau đó, họ liên tục loại bỏ các thuộc tính có tiền tố sau khi phiên bản tiêu chuẩn của thuộc tính đó được triển khai đầy đủ
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
20132021Trình duyệt- 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); 61; . 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 đó
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); 63, CSS -webkit-transform: scale(1.2); transform: scale(1.2); 64 và CSS -webkit-transform: scale(1.2); transform: scale(1.2); 65)
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à
- Mô-đun bố cục hộp linh hoạt CSS
- Kích thước hộp CSS3
- Hoạt hình CSS
- Chuyển đổi CSS3 2D
- Chuyển đổi CSS3 3D
- Hiệu ứng bộ lọc CSS
14 tính năng khác ít nổi bật hơn
- -webkit-transform: scale(1.2); transform: scale(1.2); 66
- -webkit-transform: scale(1.2); transform: scale(1.2); 67
- -webkit-transform: scale(1.2); transform: scale(1.2); 68
- -webkit-transform: scale(1.2); transform: scale(1.2); 69
- -webkit-transform: scale(1.2); transform: scale(1.2); 70
- -webkit-transform: scale(1.2); transform: scale(1.2); 71
- -webkit-transform: scale(1.2); transform: scale(1.2); 72
- -webkit-transform: scale(1.2); transform: scale(1.2); 73
- -webkit-transform: scale(1.2); transform: scale(1.2); 74
- -webkit-transform: scale(1.2); transform: scale(1.2); 75
- Con trỏ CSS -webkit-transform: scale(1.2); transform: scale(1.2); 34 và -webkit-transform: scale(1.2); transform: scale(1.2); 35
- 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)
- Con trỏ CSS3 -webkit-transform: scale(1.2); transform: scale(1.2); 36 và -webkit-transform: scale(1.2); transform: scale(1.2); 37
- 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 tiền tốHỗ trợ không tiền tốHỗ trợ tiền tốCải tiến có tiền tố1 -webkit-transform: scale(1.2); transform: scale(1.2); 80 -webkit-transform: scale(1.2); transform: scale(1.2); 81Xác định cách các phần tử (đặc biệt là điều khiển biểu mẫu) xuất hiện theo mặc định. Việc đặt giá trị thành -webkit-transform: scale(1.2); transform: scale(1.2); 82 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
( -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)
- 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)
- Safari
( -webkit-transform: scale(1.2); transform: scale(1.2); 83) - Safari iOS
( -webkit-transform: scale(1.2); transform: scale(1.2); 83)
- 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)
- 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)
- 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)
- Safari
( -webkit-transform: scale(1.2); transform: scale(1.2); 83)
- 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)
- Firefox
( -webkit-transform: scale(1.2); transform: scale(1.2); 136)
- Safari iOS
( -webkit-transform: scale(1.2); transform: scale(1.2); 83)
- 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)
- 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)
- Safari
( -webkit-transform: scale(1.2); transform: scale(1.2); 83) - Safari iOS
( -webkit-transform: scale(1.2); transform: scale(1.2); 83)
- 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)
- Safari 7. 1-12. 1
( -webkit-transform: scale(1.2); transform: scale(1.2); 83)
- 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); 182 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 -webkit-transform: scale(1.2); transform: scale(1.2); 181. Chúng có thể được định nghĩa như một tốc ký (e. g. -webkit-transform: scale(1.2); transform: scale(1.2); 184) hoặc dưới dạng tài sản đơn lẻ (e. g. -webkit-transform: scale(1.2); transform: scale(1.2); 185).
- 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); 191 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ý -webkit-transform: scale(1.2); transform: scale(1.2); 190 và các thuộc tính cấu thành ________ 1193 và ________ 1194 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 -webkit-transform: scale(1.2); transform: scale(1.2); 195, 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+
( -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); 83)90. 88%94. 84%3. 96%20 -webkit-transform: scale(1.2); transform: scale(1.2); 57 -webkit-transform: scale(1.2); transform: scale(1.2); 207Kiể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
( -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)
- 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)
- Safari
( -webkit-transform: scale(1.2); transform: scale(1.2); 83)
- 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); 226 và -webkit-transform: scale(1.2); transform: scale(1.2); 227, 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 Reflections -webkit-transform: scale(1.2); transform: scale(1.2); 228Phương thức hiển thị phản chiếu của một phần tử- 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); 238Cá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
( -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)
______1247 propertiesPhương thức khai báo độ rộng và màu của nét viền (nét) cho văn bản.
- 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); 259
-webkit-transform: scale(1.2); transform: scale(1.2); 260
-webkit-transform: scale(1.2); transform: scale(1.2); 261 (trước đây là -webkit-transform: scale(1.2); transform: scale(1.2); 262). 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
( -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)
- 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); 83 hỗ trợ -webkit-transform: scale(1.2); transform: scale(1.2); 281 và -webkit-transform: scale(1.2); transform: scale(1.2); 282 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 hàm -webkit-transform: scale(1.2); transform: scale(1.2); 283 và Bản vẽ CSS Canvas thuộc danh mục đó. Safari gần đây đã bỏ tiền tố cho -webkit-transform: scale(1.2); transform: scale(1.2); 284 -webkit-transform: scale(1.2); transform: scale(1.2); 285, 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 -webkit-transform: scale(1.2); transform: scale(1.2); 61 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
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); 287 và -webkit-transform: scale(1.2); transform: scale(1.2); 288 để đặt lại kiểu dáng mặc định cho phần tử -webkit-transform: scale(1.2); transform: scale(1.2); 289. Nó cũng cần định vị cố định, vì vậy tôi phải thêm tiền tố -webkit-transform: scale(1.2); transform: scale(1.2); 171 để 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 -webkit-transform: scale(1.2); transform: scale(1.2); 292. Hầu hết các trình duyệt đều yêu cầu phiên bản có tiền tố -webkit-transform: scale(1.2); transform: scale(1.2); 83 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 -webkit-transform: scale(1.2); transform: scale(1.2); 294 để 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ó lệnh -webkit-transform: scale(1.2); transform: scale(1.2); 295 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ố