programming css

@page CSS tại Hỗ trợ quy tắc là gì?

CSS có một tính năng gọn gàng cho phép chúng tôi kiểm tra xem trình duyệt có hỗ trợ một thuộc tính hoặc thuộc tính cụ thể hay không. kết hợp giá trị trước khi áp dụng một khối kiểu — chẳng hạn như cách một truy vấn

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

7 đối sánh khi, chẳng hạn, chiều rộng của cửa sổ trình duyệt hẹp hơn một số kích thước đã chỉ định và khi đó CSS bên trong nó sẽ có hiệu lực. Cũng theo tinh thần đó, CSS bên trong tính năng này sẽ có hiệu lực khi thuộc tính. cặp giá trị đang được kiểm tra được hỗ trợ trong trình duyệt hiện tại. Tính năng đó được gọi là

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 và nó trông như thế này

@supports [display: grid] {
  .main {
    display: grid;
  }
}

Tại sao? . Cá nhân tôi thấy không cần thiết thường xuyên như vậy. CSS có các cơ chế dự phòng tự nhiên để nếu trình duyệt không hiểu một thuộc tính. kết hợp giá trị, sau đó nó sẽ bỏ qua nó và sử dụng thứ gì đó được khai báo trước nó nếu có thứ gì đó, nhờ vào thác. Đôi khi điều đó có thể được sử dụng để xử lý các dự phòng và kết quả cuối cùng sẽ ít dài dòng hơn một chút. Tôi chắc chắn không phải là kiểu người-phải-thích-giống-trong-mọi-trình- duyệt, nhưng tôi cũng không phải là kiểu người-viết-xử-cụ-chi-tiết-để-đến-gần. Tôi thường thích một tình huống mà một tài sản bị hư hỏng tự nhiên. giá trị không làm bất cứ điều gì quyết liệt để phá hủy chức năng

Điều đó nói rằng,

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 chắc chắn có trường hợp sử dụng. Và khi tôi phát hiện ra khi đặt bài đăng này lại với nhau, rất nhiều người sử dụng nó cho nhiều tình huống thú vị

Một trường hợp sử dụng cổ điển

Ví dụ tôi đã sử dụng trong phần giới thiệu là một ví dụ cổ điển mà bạn sẽ thấy được sử dụng trong nhiều bài viết về chủ đề này. Ở đây nó là một chút thịt ra

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

lưới đẹp. Các cột lặp lại và tự động điền là một tính năng thú vị của lưới CSS. Nhưng, tất nhiên, có những trình duyệt không hỗ trợ lưới hoặc không hỗ trợ tất cả các tính năng cụ thể của nó mà tôi đang sử dụng ở trên đó

Ví dụ: iOS đã hỗ trợ lưới CSS trong phiên bản 10. 2, nhưng iOS đã hỗ trợ flexbox kể từ phiên bản 7. Đó là một khoảng cách khá lớn đối với những người có thiết bị iOS cũ hơn hỗ trợ flexbox nhưng không hỗ trợ grid. Tôi chắc chắn rằng có nhiều khoảng trống ví dụ như vậy, nhưng bạn có thể hiểu

Tôi đang chạy trên phiên bản cũ hơn của safari di động và rất nhiều rất nhiều trang web đã bị hỏng hoàn toàn khi sử dụng lưới
Tôi đang đợi thêm một năm nữa trước khi loay hoay với nó
– David Wells [@DavidWells] ngày 6 tháng 2 năm 2019

Có thể chấp nhận để dự phòng cho điều này là không có gì, tùy thuộc vào yêu cầu. Ví dụ: các phần tử cấp khối được xếp chồng lên nhau theo chiều dọc thay vì bố cục lưới nhiều cột. Điều đó thường tốt với tôi. Nhưng hãy nói rằng nó không ổn, chẳng hạn như một thư viện ảnh hoặc thứ gì đó nhất thiết phải có một số cấu trúc giống như lưới cơ bản. Trong trường hợp đó, bắt đầu với flexbox làm mặc định và sử dụng

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 để áp dụng các tính năng lưới khi chúng được hỗ trợ có thể hoạt động tốt hơn…

.photo-layout {
  display: flex;
  flex-wrap: wrap;
  > div {
    flex: 200px;
    margin: 1rem;
  }
}

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
    > div {
      margin: 0;
    }
  }
}

“Dự phòng” là mã bên ngoài khối

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 [thuộc tính phía trên khối trong ví dụ trên] và mã lưới nằm bên trong hoặc sau khối. Khối

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 không thay đổi bất kỳ tính đặc hiệu nào, vì vậy chúng tôi cần thứ tự nguồn để giúp đảm bảo phần ghi đè hoạt động

Lưu ý rằng tôi phải đặt lại lề trên các div bên trong khối

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8. Đó là điều mà tôi thấy hơi khó chịu. Có đủ sự giao thoa giữa hai kịch bản mà nó đòi hỏi phải siêu ý thức về cách chúng tác động lẫn nhau

Điều đó không khiến bạn ước nó có thể được tách biệt hoàn toàn một cách hợp lý sao…

Có logic “không” trong các khối @supports, nhưng điều đó không có nghĩa là nó luôn được sử dụng

Jen Simmons đưa ra ví dụ này trong một bài viết có tên Sử dụng Truy vấn Tính năng trong CSS cách đây vài năm

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

Lưu ý toán tử

.photo-layout {
  display: flex;
  flex-wrap: wrap;
  > div {
    flex: 200px;
    margin: 1rem;
  }
}

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
    > div {
      margin: 0;
    }
  }
}

4 trong khối đầu tiên. Đó là kiểm tra các trình duyệt không hỗ trợ lưới để áp dụng các kiểu nhất định cho các trình duyệt đó. Lý do phương pháp này được coi là thực hành không tốt là vì bản thân hỗ trợ @supports của trình duyệt phải được xem xét. Đó là những gì làm cho điều này rất nguy hiểm

Thật hấp dẫn khi viết mã trong các khối

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 được phân tách hợp lý như thế bởi vì sau đó nó sẽ bắt đầu lại từ đầu mỗi lần và không cần phải ghi đè các giá trị trước đó và xử lý những người suy nghĩ logic đó. Nhưng hãy quay lại tình huống iOS tương tự mà chúng ta đã xem xét trước đây…

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 được xuất xưởng trong iOS ở phiên bản 9 [ngay giữa thời điểm flexbox được xuất xưởng trong iOS 7 và grid được xuất xưởng trong iOS 10. 2]. Điều đó có nghĩa là bất kỳ mã dự phòng flexbox nào trong khối

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 sử dụng toán tử

.photo-layout {
  display: flex;
  flex-wrap: wrap;
  > div {
    flex: 200px;
    margin: 1rem;
  }
}

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
    > div {
      margin: 0;
    }
  }
}

4 để kiểm tra hỗ trợ

.photo-layout {
  display: flex;
  flex-wrap: wrap;
  > div {
    flex: 200px;
    margin: 1rem;
  }
}

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
    > div {
      margin: 0;
    }
  }
}

9 sẽ không hoạt động trong iOS 7 hoặc 8, nghĩa là dự phòng hiện cần một dự phòng hoạt động trong các trình duyệt mà nếu không nó sẽ có. Phù

Lý do chính để tiếp cận với

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 là tính đến các triển khai rất khác nhau của một thứ gì đó tùy thuộc vào hỗ trợ tính năng, nơi việc lý luận và phân biệt giữa các triển khai đó trở nên dễ dàng hơn nếu các khối mã được tách biệt

Có lẽ chúng ta sẽ đạt đến điểm mà chúng ta có thể sử dụng các khối loại trừ lẫn nhau như thế mà không phải lo lắng. Nói về mà…

@supports có thể sẽ hữu ích hơn theo thời gian

Sau khi

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 được hỗ trợ trong tất cả các trình duyệt mà bạn cần hỗ trợ, thì bạn nên bắt đầu sử dụng nó tích cực hơn mà không cần phải tính đến sự phức tạp của việc xem xét liệu bản thân

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 có được hỗ trợ hay không. Đây là lưới hỗ trợ về điều đó

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

ChromeFirefoxIEEdgeSafari2822No129

Di động / Máy tính bảng

Android ChromeAndroid FirefoxAndroidiOS Safari108< . 41074.49. 0-9. 2

Về cơ bản, IE 11 và bất kỳ thiết bị iOS nào bị mắc kẹt trên iOS 8 đều là những điểm đau. Nếu các yêu cầu của bạn đã vượt quá những yêu cầu đó, thì bạn nên sử dụng

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 một cách tự do hơn

Điều trớ trêu là đã không có nhiều tính năng CSS được vận chuyển có các trường hợp sử dụng

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 rõ ràng — nhưng có một số. Rõ ràng, có thể thử nghiệm những thứ mới lạ như Houdini

Sử dụng nó trên trang web đám cưới của tôi để kiểm tra sự hỗ trợ của Houdini 🎩🐰
– Sam Richard [@Snugug] ngày 6 tháng 2 năm 2019

[Tôi không chắc bạn đã đặt gì vào khối

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 để làm điều đó. Đã có thêm ai làm xong cái này chưa?]

Khi @supports không làm gì hữu ích

Tôi đã thấy một số lượng lớn

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 được sử dụng ngoài tự nhiên mà kết quả cuối cùng chính xác như khi không sử dụng nó. Ví dụ…

@supports [display: grid] {
  .main {
    display: grid;
  }
}

Ở một mức độ nào đó, điều đó có ý nghĩa logic hoàn hảo. Nếu các biến đổi được hỗ trợ, hãy sử dụng chúng. Nhưng không cần thiết nếu không có gì khác biệt xảy ra trong trường hợp không hỗ trợ. Trong trường hợp này, phép biến đổi có thể thất bại nếu không có khối

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 và kết quả vẫn như vậy

Đây là một ví dụ khác về sự rũ bỏ đó

Có các tiện ích mở rộng trình duyệt để chơi với @supports

Có hai người trong số họ

Trình quản lý truy vấn tính năng của Ire Aderinokun
Tiện ích chuyển đổi tính năng CSS của Keith Clark

Cả hai đều tập trung vào ý tưởng rằng chúng ta có thể viết các khối

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 bằng CSS, sau đó bật và tắt chúng như thể chúng ta đang xem kết xuất mã trong trình duyệt hỗ trợ hoặc không hỗ trợ tính năng đó

Đây là video về công cụ của Keith được áp dụng cho kịch bản sử dụng lưới với dự phòng flexbox

Điều này rất thú vị để chơi và là công nghệ rất gọn gàng. Nhưng trong trường hợp chính xác này, nếu tôi có thể thực hiện bố cục giống hệt với flexbox, thì có lẽ tôi chỉ cần làm điều đó và tiết kiệm được một chút nợ kỹ thuật đó

Công cụ của Ire, mà cô ấy đã viết trong bài viết Tạo tiện ích mở rộng DevTools của trình quản lý truy vấn tính năng, có một cách tiếp cận hơi khác ở chỗ nó hiển thị các truy vấn tính năng mà bạn thực sự đã viết trong CSS của mình và cung cấp các nút chuyển đổi để bật và tắt chúng. Tuy nhiên, tôi không nghĩ rằng nó hoạt động thông qua iframe, vì vậy tôi đã mở Chế độ gỡ lỗi để sử dụng nó trên CodePen

Nhiều trường hợp sử dụng trong thế giới thực hơn cho @supports

Đây là một từ Erik Vorhes. Anh ấy đang tạo kiểu cho một số hộp kiểm tùy chỉnh và nút radio ở đây, nhưng gói gọn tất cả chúng trong một khối

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8. Không kiểu dáng nào được áp dụng trừ khi khối vượt qua kiểm tra hỗ trợ

@supports [display: grid] {
  .main {
    display: grid;
  }
}

Dưới đây là một số chi tiết tôi đã đi qua

Joe Wright và Tiago Nunes đã đề cập đến việc sử dụng nó cho
```
@supports [display: grid] {
  .main {
    display: grid;
  }
}
```
40. Tôi muốn xem một bản demo ở đây. Như trong trường hợp bạn truy cập vào
```
@supports [display: grid] {
  .main {
    display: grid;
  }
}
```
40, nhưng sau đó phải làm điều gì đó khác ngoài việc để nó bị lỗi đối với một trình duyệt không hỗ trợ
Keith Grant và Matthias Ott đề cập đến việc sử dụng nó cho
```
@supports [display: grid] {
  .main {
    display: grid;
  }
}
```
42. Matthias có một bản demo trong đó thủ thuật định vị được sử dụng để tạo một loại hình ảnh lấp đầy vùng chứa, sau đó việc này được thực hiện dễ dàng và tốt hơn thông qua thuộc tính đó khi có sẵn
Ryan Filler đề cập đến việc sử dụng nó cho
```
@supports [display: grid] {
  .main {
    display: grid;
  }
}
```
43. Ví dụ của anh ấy đặt nhiều độ mờ hơn cho một phần tử, nhưng nếu
```
@supports [display: grid] {
  .main {
    display: grid;
  }
}
```
43 được hỗ trợ, thì nó sẽ sử dụng ít hơn một chút và thuộc tính đó có thể tự nó có tác dụng nhìn xuyên qua một phần tử

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

Rik Schennink đã đề cập đến tài sản
```
@supports [display: grid] {
  .main {
    display: grid;
  }
}
```
45. Anh ấy nói, “khi nó được hỗ trợ, độ mờ của màu nền thường cần một số tinh chỉnh. ”
Nour Saud đã đề cập rằng nó có thể được sử dụng để phát hiện Edge thông qua một thuộc tính có tiền tố của nhà cung cấp cụ thể.
```
@supports [display: grid] {
  .main {
    display: grid;
  }
}
```
46
Amber Weinberg đã đề cập đến việc sử dụng nó cho
```
@supports [display: grid] {
  .main {
    display: grid;
  }
}
```
47 vì việc điều chỉnh kích thước hoặc phần đệm của một phần tử sẽ phù hợp khi không có tính năng cắt
Ralph Holzmann đã đề cập đến việc sử dụng nó để kiểm tra thứ "khắc" đó [biến môi trường]
Stacy Kvernmo đã đề cập đến việc sử dụng nó cho nhiều thuộc tính cần thiết cho các ký tự giới hạn thả. Jen Simmons cũng đề cập đến trường hợp sử dụng này trong bài viết của cô ấy. Có một thuộc tính CSS
```
@supports [display: grid] {
  .main {
    display: grid;
  }
}
```
48 khá tuyệt vời cho drop cap, nhưng được sử dụng cùng với các thuộc tính khác mà bạn có thể không muốn áp dụng nếu
```
@supports [display: grid] {
  .main {
    display: grid;
  }
}
```
48 không được hỗ trợ [hoặc nếu có một kịch bản dự phòng hoàn toàn khác]

Đây là phần thưởng từ Nick Colley không phải là

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

8 mà thay vào đó là

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

7. Tinh thần cũng vậy. Nó có thể ngăn tình trạng di chuột "bị kẹt" trên các thiết bị cảm ứng như thế này

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

Logic trong @supports

Căn bản

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

Không

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

Và

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

Hoặc

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

kết hợp

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

Biến thể JavaScript

JavaScript có API cho việc này. Để kiểm tra nếu nó tồn tại…

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

Để sử dụng nó, hãy chuyển thuộc tính cho nó trong một tham số và giá trị trong một tham số khác

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

…hoặc cung cấp tất cả trong một chuỗi phản ánh cú pháp CSS

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

kiểm tra bộ chọn

Tại thời điểm viết bài này, chỉ có Firefox hỗ trợ loại thử nghiệm này [đằng sau cờ thử nghiệm], nhưng có một cách để kiểm tra sự hỗ trợ của bộ chọn với

/* We're gonna write a fallback up here in a minute */

@supports [display: grid] {
  .photo-layout {
    display: grid;
    grid-template-columns: repeat[auto-fill, minmax[200px, 1fr]];
    grid-gap: 2rem;
  }
}

CSS tại Hỗ trợ quy tắc là gì?

Quy tắc @supports CSS cho phép bạn chỉ định các khai báo CSS phụ thuộc vào sự hỗ trợ của trình duyệt đối với các tính năng CSS . Sử dụng quy tắc này thường được gọi là truy vấn tính năng. Quy tắc phải được đặt ở cấp cao nhất trong mã của bạn hoặc được lồng vào bên trong bất kỳ quy tắc nhóm có điều kiện nào khác.

3 quy tắc CSS là gì?

Kế thừa, Tầng và Tính đặc hiệu là ba yếu tố quan trọng. Hiểu những khái niệm này sẽ cho phép bạn viết các biểu định kiểu rất mạnh mẽ và cũng tiết kiệm thời gian bằng cách viết ít quy tắc CSS hơn.

Quy tắc trong ví dụ CSS là gì?

Bộ quy tắc CSS chứa một hoặc nhiều bộ chọn và một hoặc nhiều phần khai báo . [Các] bộ chọn, trong ví dụ này là h1 , trỏ đến một phần tử HTML. [Các] khai báo, trong ví dụ này là màu. màu xanh và căn chỉnh văn bản. căn giữa tạo kiểu cho phần tử với thuộc tính và giá trị.