CSS3 có được hỗ trợ đầy đủ không?

Trong JavaScript, có thể truy cập

@supports (transform-origin: 5% 5%) {
}

@supports (transform-origin: 5% 5%) {
}

Quy tắc tại

@supports (transform-origin: 5% 5%) {
}

@supports (transform-origin: 5% 5%) {
}

@supports (<supports-condition>) {
  /* If the condition is true, use the CSS in this block. */
}

Các điều kiện có thể được kết hợp bởi các liên từ (

@supports (transform-origin: 5% 5%) {
}

@supports (transform-origin: 5% 5%) {
}

@supports (transform-origin: 5% 5%) {
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

Thứ tự ưu tiên của các toán tử có thể được xác định bằng dấu ngoặc đơn. Các điều kiện hỗ trợ có thể sử dụng cú pháp khai báo

@supports (transform-origin: 5% 5%) {
}

@supports (transform-origin: 5% 5%) {
}

Cú pháp khai báo kiểm tra xem trình duyệt có hỗ trợ khai báo

@supports (transform-origin: 5% 5%) {
}

@supports selector(h2 > p) {
}

@supports (transform-origin: 5% 5%) {
}

Cú pháp hàm kiểm tra xem trình duyệt có hỗ trợ các giá trị hoặc biểu thức trong hàm không. Các chức năng được hỗ trợ trong cú pháp chức năng được mô tả trong các phần sau

@supports selector(h2 > p) {
}

2 Thử nghiệm

Hàm này đánh giá xem trình duyệt có hỗ trợ cú pháp bộ chọn đã chỉ định hay không. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ bộ kết hợp con

@supports selector(h2 > p) {
}

@supports selector(h2 > p) {
}

3

Hàm này kiểm tra xem trình duyệt có hỗ trợ công nghệ phông chữ được chỉ định để bố cục và hiển thị không. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ công nghệ phông chữ

@supports selector(h2 > p) {
}

@supports font-tech(color-COLRv1) {
}

Bảng dưới đây mô tả các công nghệ phông chữ có sẵn có thể được truy vấn bằng chức năng này

@supports selector(h2 > p) {
}

@supports selector(h2 > p) {
}

@supports selector(h2 > p) {
}

@supports selector(h2 > p) {
}

@supports selector(h2 > p) {
}

@supports font-tech(color-COLRv1) {
}

@supports font-tech(color-COLRv1) {
}

@supports font-tech(color-COLRv1) {
}

@supports font-tech(color-COLRv1) {
}

@supports font-tech(color-COLRv1) {
}

@supports font-tech(color-COLRv1) {
}

@supports font-tech(color-COLRv1) {
}

@supports font-tech(color-COLRv1) {
}

@supports font-tech(color-COLRv1) {
}

@supports font-tech(color-COLRv1) {
}

@supports font-format(opentype) {
}

@supports font-format(opentype) {
}

@supports font-format(opentype) {
}

@supports font-format(opentype) {
}

@supports font-format(opentype) {
}

@supports font-format(opentype) {
}

6

Hàm này kiểm tra xem trình duyệt có hỗ trợ định dạng phông chữ được chỉ định cho bố cục và hiển thị không. Ví dụ sau trả về true và áp dụng kiểu CSS nếu trình duyệt hỗ trợ định dạng phông chữ

@supports font-format(opentype) {
}

@supports font-format(opentype) {
}

Bảng sau đây mô tả các định dạng có sẵn có thể được truy vấn bằng chức năng này

@supports font-format(opentype) {
}

@supports font-format(opentype) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

@supports font-format(opentype) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

Toán tử

@supports (transform-origin: 5% 5%) {
}

@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

@supports not (transform-origin: 10em 10em 10em) {
}

Như với bất kỳ toán tử nào, toán tử

@supports (transform-origin: 5% 5%) {
}

@supports not (not (transform-origin: 2px)) {
}
@supports (display: grid) and (not (display: inline-grid)) {
}

Ghi chú. Không cần đặt toán tử

@supports (transform-origin: 5% 5%) {
}

@supports (transform-origin: 5% 5%) {
}

@supports (transform-origin: 5% 5%) {
}

Toán tử

@supports (transform-origin: 5% 5%) {
}

@supports (display: table-cell) and (display: list-item) {
}

Nhiều liên từ có thể được đặt cạnh nhau mà không cần thêm dấu ngoặc đơn. Sau đây là cả hai tương đương

@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
  ((display: list-item) and (display: contents)) {
}

Toán tử

@supports (transform-origin: 5% 5%) {
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

Nhiều phân đoạn có thể được đặt cạnh nhau mà không cần thêm dấu ngoặc đơn. Sau đây là cả hai tương đương

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

Ghi chú. Khi sử dụng cả hai toán tử

@supports (transform-origin: 5% 5%) {
}

@supports (transform-origin: 5% 5%) {
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

Các quy tắc có điều kiện của CSS cung cấp khả năng kiểm tra sự hỗ trợ của bộ chọn, chẳng hạn như

@supports (display: table-cell) and (display: list-item) {
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

Ví dụ sau áp dụng kiểu CSS nếu trình duyệt hỗ trợ công nghệ phông chữ

@supports selector(h2 > p) {
}

@supports (<supports-condition>) and (<supports-condition>) {
  /* If both conditions are true, use the CSS in this block. */
}

Cũng có thể kiểm tra sự hỗ trợ của công nghệ phông chữ bằng cách sử dụng hàm

@supports (display: table-cell) and (display: list-item) {
}

@supports (display: table-cell) and (display: list-item) {
}

@supports (display: table-cell) and (display: list-item) and (display: contents) {
}
@supports (display: table-cell) and
  ((display: list-item) and (display: contents)) {
}

Những trình duyệt nào hỗ trợ CSS3?

Safari không hỗ trợ CSS nào?

Tôi có thể sử dụng CSS hỗ trợ không?

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