Có thể bạn chưa biết về các At Rules trong CSS |
A. @charset
At-rule @charset xác định bộ mã ký tự hay nói cách đơn giản hơn quy định trang web ta sử dụng bộ mã kí tự nào. Nó thường là phần tử đầu tiên trong file CSS, sử dụng trong thẻ meta
@charset "UTF-8"; : trang web chúng ta sử dụng tiếng việt vì thế dùng bộ mã code UTF-8 Để giải mã chúng
Tương thích trình duyệt
Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox For Android | Opera Android | Safari IOS | WebView Android | ||
---|---|---|---|---|---|---|---|---|---|---|---|
@charset |
|||||||||||
2 | 12 | 1.5 | 9 | 4 | 18 | 4 | 10.1 | 4 | 2 |
B. @color-profile
- At-rule @color-profile màu là một tập hợp các thông tin định nghĩa, các màu trên nhiều thiết bị khác nhau. cách để mà một màu cụ thể nên hiển thị trên các thiết bị khác nhau (như màn hình, máy in, v.v.). Các thiết bị khác nhau có thể hiển thị màu sắc khác nhau, nên profile màu giúp đảm bảo rằng màu sắc được hiển thị nhất quán trên tất cả các thiết bị.
- Profile màu thường được sử dụng trong các trường hợp yêu cầu độ chính xác màu sắc cao, chẳng hạn như trong thiết kế đồ họa, in ấn hoặc các ứng dụng đa phương tiện.
Lưu Ý Quan Trọng
-
Tính Tương Thích: Không phải tất cả các trình duyệt đều hỗ
trợ
@color-profile
. Hiện tại, việc sử dụng@color-profile
vẫn đang trong giai đoạn thử nghiệm và không được hỗ trợ rộng rãi. -
File Profile Màu: Các profile màu thường được lưu trữ trong
các file
.icc
hoặc.icm
. Bạn có thể tìm hoặc tạo các file này bằng phần mềm chuyên dụng.
Ví Dụ Và Cách Dùng
Giả sử bạn có một profile màu lưu trong file myprofile.icc
. Bạn
muốn sử dụng profile này để đảm bảo rằng màu sắc trên trang web của bạn hiển
thị nhất quán trên tất cả các thiết bị.
@color-profile myProfile {
src: url('myprofile.icc');
}
body {
color-profile: myProfile;
color: rgb(255, 0, 0); /* Màu đỏ trong profile myProfile */
}
Giải Thích
1.Định nghĩa Profile Màu
@color-profile myProfile { src: url('myprofile.icc');
-
@color-profile myProfile { ... }
định nghĩa một profile màu có tên làmyProfile
. -
src: url('myprofile.icc');
chỉ ra rằng profile màu này được lưu trong filemyprofile.icc
.
2.Áp Dụng Profile Màu
@color-profile myProfile { ... }
định nghĩa một
profile màu có tên là myProfile
.
color: rgb(255, 0, 0);
định nghĩa màu đỏ sử dụng
profile myProfile
.
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: "😀" "😁" "😂" "🤣" "😃" "😄" "😅" "😆" "😉" "😊";
}
- @counter-style smiley { ... } định nghĩa một kiểu đếm tùy chỉnh có tên là smiley.
- system: cyclic; xác định hệ thống đếm là "cyclic" (tuần hoàn), có nghĩa là các biểu tượng sẽ lặp lại sau khi hết danh sách.
- symbols: "😀" "😁" "😂" "🤣" "😃" "😄" "😅" "😆" "😉" "😊"; xác định danh sách các biểu tượng được sử dụng cho kiểu đếm này.
2. Áp Dụng Kiểu Đếm:
ol { list-style: smiley; }
-
list-style: smiley;
áp dụng kiểu đếmsmiley
cho các phần tử<ol>
(danh sách có thứ tự).
Hệ Thống Đếm (system) : <hệ-thống>
Có một số hệ thống đếm mà bạn có thể sử dụng:
cyclic
: Các biểu tượng sẽ lặp lại tuần hoàn.numeric
: Sử dụng số.alphabetic
: Sử dụng chữ cái.symbolic
: Sử dụng các biểu tượng cụ thể.additive
: Sử dụng một hệ thống cộng dồn.
Các Thuộc Tính Khác
Bạn có thể thêm các thuộc tính khác để tùy chỉnh thêm:
suffix
: Ký tự thêm vào sau mỗi số đếm.prefix
: Ký tự thêm vào trước mỗi số đếm.range
: Phạm vi giá trị mà kiểu đếm áp dụng.
Ví Dụ Phức Tạp Hơn
<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;
}
-
system: alphabetic;
sử dụng hệ thống đếm chữ cái. symbols
định nghĩa các chữ cái được sử dụng.-
suffix: " -";
thêm dấu gạch ngang sau mỗi số đếm. prefix: "(";
thêm dấu ngoặc mở trước mỗi số đếm.
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.
h moi bt toi may cai tips nay lun ak