Có thể bạn chưa biết về các At Rules trong CSS

C. @container

At-rule @container được sử dụng để áp dụng các style khác nhau cho từng các kích cỡ màng hình khác nhau. Điều này giúp cho code chúng ta thích hợp với nhiều giao diện tùy biến dễ hơn, responsive dễ hơn. nâng cao sự trãi nghiệm của người dùng.

Ví Dụ Và Giải Thích

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>
   

    .container {
  container-type: inline-size;
  width: 100%; /* Để kích thước container thay đổi theo khung nhìn */
}

@container (max-width: 500px) { // kích cỡ này cho điện thoại
  .item {
    font-size: 1.5rem; // container có độ rộng nhở hơn 500 thì fontsize là 1.5rem
    background-color: lightblue;
  }
}

@container (max-width: 1060px) { // kích cỡ cho máy tính
  .item {
    font-size: 2rem;  // container có độ rộng nhở hơn 1060px thì fontsize là rem
    background-color: lightcoral;
  }
}

   

D. @counter-style

@counter-style là một quy tắc CSS được sử dụng để định nghĩa các kiểu đếm tùy chỉnh cho danh sách (list) hoặc các phần tử khác sử dụng bộ đếm (counter). Điều này cho phép bạn tạo các kiểu đếm số hoặc ký tự độc đáo thay vì chỉ dựa vào các kiểu đếm chuẩn như số, chữ cái, hoặc ký tự La Mã.

@counter-style <tên-kiểu> {
  system: <hệ-thống>;
  symbols: <danh-sách-ký-hiệu>;
  /* các thuộc tính khác */
   }

Ví Dụ

@counter-style smiley {
  system: cyclic;
  symbols: "😀" "😁" "😂" "🤣" "😃" "😄" "😅" "😆" "😉" "😊";
}

ol {
  list-style: smiley;
}

Giải Thích 

  1. Định Nghĩa Kiểu Đếm

@counter-style smiley {
  system: cyclic;
  symbols: "😀" "😁" "😂" "🤣" "😃" "😄" "😅" "😆" "😉" "😊";
}

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

@counter-style customAlpha {
  system: alphabetic;
  symbols: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m" "n" "o" "p" "q" "r" "s" "t" "u" "v" "w" "x" "y" "z";
  suffix: " -";
  prefix: "(";
}

ol {
  list-style: customAlpha;
} 

E. @document (Không chuẩn - Đã ngừng sử dụng)

At-rule @document được sử dụng để áp dụng các style dựa trên URL của tài liệu. Tuy nhiên, nó không còn được khuyến khích sử dụng và đã bị ngừng hỗ trợ.

@document url("https://example.com/") {
    body {
        background-color: yellow;
    }
}
   

F. @font-face

At-rule @font-face cho phép bạn định nghĩa các font chữ tùy chỉnh để sử dụng trong stylesheet của bạn. Bạn có thể chỉ định file font và các thuộc tính của nó.

@font-face {
    font-family: 'MyCustomFont';
    src: url('mycustomfont.woff2') format('woff2');
}
body {
    font-family: 'MyCustomFont', sans-serif;
}
   

G. @font-feature-values

At-rule @font-feature-values cho phép bạn xác định các giá trị tính năng font tùy chỉnh.

@font-feature-values MyFont {
    @styleset {
        cool-style: 1;
    }
}
   

H. @font-palette-values

At-rule @font-palette-values được sử dụng để xác định các bảng màu tùy chỉnh cho font chữ.

@font-palette-values MyPalette {
    font-family: 'MyFont';
    base-palette: 1;
}
   

I. @import

At-rule @import cho phép bạn nhập một stylesheet bên ngoài vào stylesheet hiện tại. Điều này hữu ích để giữ cho CSS của bạn modular và dễ quản lý.

@import url('styles.css');

J. @keyframes

At-rule @keyframes được sử dụng để định nghĩa các animation. Bạn chỉ định tên của animation và các keyframe, là các thay đổi style tại các điểm khác nhau trong quá trình animation.

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}
div {
    animation: slideIn 2s forwards;
}
   

K. @layer

At-rule @layer được sử dụng để kiểm soát độ ưu tiên của các stylesheet, tương tự như z-index cho các phần tử.

@layer reset {
    body {
        margin: 0;
        padding: 0;
    }
}
@layer base {
    body {
        font-family: Arial, sans-serif;
    }
}
   

L. @media

At-rule @media được sử dụng cho thiết kế responsive. Nó áp dụng các style chỉ khi các điều kiện nhất định được đáp ứng, chẳng hạn như chiều rộng của viewport.

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}
   

M. @namespace

At-rule @namespace được sử dụng để khai báo một namespace XML cho các selector CSS.

@namespace url(http://www.w3.org/1999/xhtml);

N. @page

At-rule @page được sử dụng để thay đổi kiểu của trang khi in ấn.

@page {
    margin: 1cm;
}
   

O. @property

At-rule @property cho phép bạn tạo các thuộc tính CSS tùy chỉnh.

@property --main-bg-color {
    syntax: '';
    initial-value: #f0f0f0;
    inherits: false;
}
    

Q. @scope

At-rule @scope được sử dụng để áp dụng các style cho một phạm vi phần tử cụ thể.

@scope (.component) {
    .button {
        background-color: blue;
    }
}
   

R. @starting-style (Thử nghiệm)

At-rule @starting-style là một tính năng thử nghiệm cho phép bạn đặt các style ban đầu cho một phần tử trước khi các animation được áp dụng.

@starting-style {
    .box {
        opacity: 0;
    }
}
   

S. @supports

At-rule @supports cho phép bạn áp dụng các style chỉ khi trình duyệt hỗ trợ một tính năng CSS nhất định. Điều này hữu ích cho việc cải thiện dần dần.

@supports (display: grid) {
    div {
        display: grid;
    }
}
   

T. @view-transition

At-rule @view-transition được sử dụng để xác định các hiệu ứng chuyển cảnh cho các phần tử khi chuyển đổi giữa các trạng thái khác nhau.

@view-transition {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
   

Kết luận

Các At-rules trong CSS cung cấp những cách mạnh mẽ để kiểm soát hành vi của stylesheet. Bằng cách hiểu và sử dụng chúng hiệu quả, bạn có thể tạo ra các thiết kế linh hoạt, dễ bảo trì và responsive hơn. Thích hợp và tương thích nhiều trình duyệt.  không bị lỗi css khi đổi trình duyệt khác.