Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CodePen
Webdesign

Chỉ dẫn nhanh: Thêm một File CSS @supports vào các Demo của bạn ở trên CodePen

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Khi các demo trên CodePen của bạn dựa trên các tính năng CSS mới, tốt nhất là chúng ta nên cảnh báo mọi người. Hãy cung cấp một thông báo khi trình duyệt không hỗ trợ các demo của chúng ta bằng cách sử dụng luật @supports để tạo một bộ tài nguyên đơn giản, có thể sử dụng lại trên CodePen.

Kết quả cuối cùng

Dưới đây là những gì chúng ta làm tiếp theo; một thông báo có thể sử dụng lại để nhấn mạnh có một tính năng CSS không được hỗ trợ. Nó sẽ giữ toàn bộ ở trong chính pen của nó, cái mà chúng ta có thểm thêm vào các demo khác thông qua một liên kết CSS Ngoài:

Bạn sẽ thấy chúng tôi sử dụng nó trong các bài hướng dẫn CSS cho Tuts+ CSS như sau:

Quy tắc @supports

CSS @supports đã xuất hiện được vài năm và được khá nhiều trình duyệt hỗ trợ cho chính nó. Nó cho phép chúng ta thực hiện các chức năng truy vấn, áp dụng CSS chỉ khi thuộc tính cụ thể được hỗ trợ bởi trình duyệt vào lúc đó. Điều này ngăn chặn một phần style được thực thi và còn cho phép chúng ta hiện thị một cảnh báo nếu chúng ta thích.

Nó hoạt động bằng cách đóng gói các khai báo style trong một mệnh đề điều kiện, như thế này:

Các thông báo

Hãy kích hoạt một số thông báo nhanh:

Chúng ta thêm nội dung văn bản thông qua một phần tử giả (pseudo element), do đó chúng ta có thể kiểm soát nó từ một nơi duy nhất. Các nhãn này cuối cùng sẽ được sử dụng trong nhiều minh hoạ, vì vậy giữ nội dung riêng biệt có nghĩa là chúng ta có thể thay đổi chúng tất cả trong một.

Tự trang trí những cái này theo ý bạn.

Thêm điều kiện @supports

Các thông báo của chúng ta có thể nhìn thấy theo mặc định, nhưng chúng ta chỉ muốn chúng được hiển thị tương ứng với khi các thuộc tính không được hỗ trợ. Hãy thêm một điều kiện để làm điều đó:

Ở đây chúng ta nói “nếu initial-letter or -webkit-initial-letter được hỗ trợ, đừng hiện thị thông báo .support-initial-letter”.

Sau đó chúng ta lặp lại điều này cho mỗi điều kiện, tạo ra cho chúng ta pen dưới đây:

Có bao nhiêu thông báo mà bạn thấy?

Sử dụng lại như một Tài nguyên Bên ngoài trên CodePen

Với pen của chúng ta được lưu chúng ta có thể tham chiếu nó từ các pen khác, tạo cho chúng ta một tài nguyên bên ngoài cực kỳ hữu ích. Thêm nó vào một pen mới như là một file CSS bên ngoài:

Điều này sẽ chỉ kéo về CSS, bỏ qua bất kỳ HTML hoặc JS mà chúng ta có trong đó, vì vậy bây giờ thêm bất cứ thành phần thông báo nào mà bạn cần vào HTML của pen mới của bạn:

Và như vậy là xong! Bất cứ khi nào bạn cập nhật pen @supports của bạn, những thay đổi đó sẽ được ánh xạ qua tất cả những demo mà bạn đã sử dụng nó.

Kết luận

Bạn sẽ để ý thấy rất nhiều CodePenner có tính năng CSS mới sử dụng một thông báo @supports trong các pen của họ; Jen Simmons làm vậy, Rachel Andrew làm vậy và chúng ta cũng làm vậy. Kéo các style thông báo của bạn vào một pen bên ngoài là cách hoàn hảo để quản lý các thứ trong khi vẫn giữ file html của bạn gọn gàng và sạch sẽ. Cập nhật các thông báo, thêm các thuộc tính CSS mới, áp dụng kiểu dáng theo mùa, rất thú vị! Hãy cho chúng tôi biết cách bạn sử dụng @supports trong các bình luận.

Xem thêm các tài liệu dưới đây

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.