@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 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à 8 và nó trông như thế này Show
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, 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ểnVí 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
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
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 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…
“Dự phòng” là mã bên ngoài khối 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 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 độngLưu ý rằng tôi phải đặt lại lề trên các div bên trong khối 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ụngJen 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 0Lưu ý toán tử 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ểmThật hấp dẫn khi viết mã trong các khối 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… 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 8 sử dụng toán tử 4 để kiểm tra hỗ trợ 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 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ệtCó 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 gianSau khi 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 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ànChromeFirefoxIEEdgeSafari2822No129Di động / Máy tính bảngAndroid ChromeAndroid FirefoxAndroidiOS Safari108< . 41074.49. 0-9. 2Về 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 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 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
(Tôi không chắc bạn đã đặt gì vào khối 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 íchTôi đã thấy một số lượng lớn 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ụ… 4Ở 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 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 @supportsCó hai người trong số họ
Cả hai đều tập trung vào ý tưởng rằng chúng ta có thể viết các khối 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 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ợ 8Dưới đây là một số chi tiết tôi đã đi qua
4 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. ” 46 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 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 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à 8 mà thay vào đó là 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 2Logic trong @supportsCăn bản 3Không 4Và 0Hoặc 1kết hợp 2Biến thể JavaScriptJavaScript có API cho việc này. Để kiểm tra nếu nó tồn tại… 3Để 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 4…hoặc cung cấp tất cả trong một chuỗi phản ánh cú pháp CSS 5kiểm tra bộ chọnTạ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 8.
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ị. |