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 Show Làm thế nào nó hoạt độngAutoprefixer 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ệtBạ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
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ụngBạ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ư 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
Bởi 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 nhất quá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ăngBả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
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ư 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 ( 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à
14 tính năng khác ít nổi bật hơn
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 2021Hã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ác69. 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
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êu70. 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
-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
-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
focus-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
focus-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 ý
is()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
focus-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
-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ối76. 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ẽ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
is()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
: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
any-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). 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.
is()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.
is()8any-link12Phương pháp ngăn chọn văn bản hoặc phần tử
any-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
any-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ạ
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-link28Phương thức hiển thị phản chiếu của một phần tử
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.
any-link46any-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.
any-link58any-link59any-link60any-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.
any-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
Các trình duyệt hỗ trợ 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 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 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 một blog và cần sử dụng 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 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 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 Phần kết luậnTiề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) |
