Tiền tố mở rộng CSS cho WebKit là gì?

Thuộc tính CSS -webkit-appearance cho phép các tác giả web thay đổi giao diện của các thành phần HTML để giống với các điều khiển Giao diện người dùng (UI) gốc

Thuộc tính CSS -webkit-appearance là một phần mở rộng CSS độc quyền được hỗ trợ bởi công cụ trình duyệt WebKit. Tiện ích mở rộng WebKit chứa tiền tố -webkit-, cho biết rằng nó thuộc về khung mã nguồn mở WebKit

Mặc dù thuộc tính -webkit-appearance không phải là một phần của đặc tả CSS chính thức của W3C, nhưng nó được thiết kế để hoạt động trên các trình duyệt được cung cấp bởi công cụ trình duyệt WebKit, chẳng hạn như Apple Safari và Google Chrome

Chạy

Trình chỉnh sửa ngăn xếp Trình chỉnh sửa ngăn xếp

cú pháp

Cú pháp của thuộc tính -webkit-appearance là

Trong đó đại diện cho điều khiển giao diện người dùng mà phần tử sẽ giống với

Mã ví dụ

Đây là một ví dụ về cách sử dụng (lưu ý rằng ví dụ này cũng bao gồm các tiện ích mở rộng độc quyền khác)

Giá trị được chấp nhận

Dưới đây là các giá trị được chấp nhận cho thuộc tính -webkit-appearance

• -webkit-appearance: button; /* WebKit */
  -moz-appearance: button; /* Mozilla */
  -o-appearance: button; /* Opera */
  -ms-appearance: button; /* Internet Explorer */
  appearance: button; /* CSS3 */
  

  1

• -webkit-appearance: button; /* WebKit */
  -moz-appearance: button; /* Mozilla */
  -o-appearance: button; /* Opera */
  -ms-appearance: button; /* Internet Explorer */
  appearance: button; /* CSS3 */
  

  2

• -webkit-appearance: button; /* WebKit */
  -moz-appearance: button; /* Mozilla */
  -o-appearance: button; /* Opera */
  -ms-appearance: button; /* Internet Explorer */
  appearance: button; /* CSS3 */
  

  3 (Chỉ báo xuất hiện trong trường mật khẩu khi Caps Lock đang hoạt động. Có sẵn trong Safari4. 0 trở lên và iOS 2. 0 trở lên)

• -webkit-appearance: button; /* WebKit */
  -moz-appearance: button; /* Mozilla */
  -o-appearance: button; /* Opera */
  -ms-appearance: button; /* Internet Explorer */
  appearance: button; /* CSS3 */
  

  4

• -webkit-appearance: button; /* WebKit */
  -moz-appearance: button; /* Mozilla */
  -o-appearance: button; /* Opera */
  -ms-appearance: button; /* Internet Explorer */
  appearance: button; /* CSS3 */
  

  5

• -webkit-appearance: button; /* WebKit */
  -moz-appearance: button; /* Mozilla */
  -o-appearance: button; /* Opera */
  -ms-appearance: button; /* Internet Explorer */
  appearance: button; /* CSS3 */
  

  6

• -webkit-appearance: button; /* WebKit */
  -moz-appearance: button; /* Mozilla */
  -o-appearance: button; /* Opera */
  -ms-appearance: button; /* Internet Explorer */
  appearance: button; /* CSS3 */
  

  7

• -webkit-appearance: button; /* WebKit */
  -moz-appearance: button; /* Mozilla */
  -o-appearance: button; /* Opera */
  -ms-appearance: button; /* Internet Explorer */
  appearance: button; /* CSS3 */
  

  8

• -webkit-appearance: button; /* WebKit */
  -moz-appearance: button; /* Mozilla */
  -o-appearance: button; /* Opera */
  -ms-appearance: button; /* Internet Explorer */
  appearance: button; /* CSS3 */
  

  9
• -webkit-appearance0
• -webkit-appearance1
• -webkit-appearance2
• -webkit-appearance3
• -webkit-appearance4
• -webkit-appearance5 (Không được hỗ trợ trong Safari 4. 0)
• -webkit-appearance6 (Không được hỗ trợ trong Safari 4. 0)
• -webkit-appearance7 (Không được hỗ trợ trong Safari 4. 0)
• -webkit-appearance8 (Không được hỗ trợ trong Safari 4. 0)
• -webkit-appearance9 (Không được hỗ trợ trong Safari 4. 0)
• -webkit-appearance0 (Không được hỗ trợ trong Safari 4. 0)
• -webkit-appearance1 (Không được hỗ trợ trong Safari 4. 0)
• -webkit-appearance2 (Không được hỗ trợ trong Safari 4. 0)
• -webkit-appearance3 (Không được hỗ trợ trong Safari 4. 0)
• -webkit-appearance4 (Không được hỗ trợ trong Safari 4. 0)
• -webkit-appearance5
• -webkit-appearance6
• -webkit-appearance7
• -webkit-appearance8
• -webkit-appearance9
• -webkit-0
• -webkit-1
• -webkit-2
• -webkit-3
• -webkit-4
• -webkit-5
• -webkit-6

khả dụng

Tài sản -webkit-appearance có sẵn trong

• Safari 3. 0 trở lên
• iOS1. 0 trở lên

CSS3 tương đương

CSS3 tương đương với thuộc tính -webkit-appearance là thuộc tính -webkit-9

tính tương thích của trình duyệt web

Thuộc tính này là tiện ích mở rộng độc quyền chỉ được hỗ trợ trong trình duyệt Chrome và Safari. Để tương thích với trình duyệt tối đa, bạn nên thêm W3C CSS3 tương đương với mã của bạn. Điều này thường được thực hiện bằng cách loại bỏ tiền tố -webkit-, tuy nhiên, bạn phải luôn kiểm tra cú pháp chính xác trước khi triển khai mã của mình (tại thời điểm viết bài, CSS3 vẫn đang trong quá trình hoàn thiện)

Ngoài ra, hãy xem xét thêm các tiện ích mở rộng độc quyền khác, chẳng hạn như -webkit-appearance1 cho Internet Explorer, -webkit-appearance2 cho Firefox, -webkit-appearance3 cho Opera, v.v. Tuy nhiên, bạn nên kiểm tra xem có tồn tại tiện ích mở rộng tương ứng hay không trước khi thực hiện việc này, vì không phải tất cả các trình duyệt đều có tiện ích mở rộng tương ứng và những trình duyệt không nhất thiết phải chấp nhận các tham số giống nhau

WebKit trong CSS là gì?

Trình duyệt nào hỗ trợ WebKit?

WebKit và MS là gì?

Tại sao chúng tôi sử dụng moz trong CSS?