Podcast CSS – 004: The Cascade
CSS là viết tắt của Cascading Campaignss (Biểu định kiểu xếp chồng). Thác nước là thuật toán giải quyết các xung đột trong đó nhiều quy tắc CSS áp dụng cho một phần tử HTML. Đó là lý do mà văn bản của nút có kiểu CSS sau sẽ có màu xanh dương.
button {
color: red;
}
button {
color: blue;
}
Việc hiểu thuật toán phân tầng giúp bạn hiểu cách trình duyệt giải quyết các xung đột như thế này. Thuật toán phân tầng được chia thành 4 giai đoạn riêng biệt.
- Vị trí và thứ tự xuất hiện: thứ tự xuất hiện của các quy tắc CSS
- Tính cụ thể: thuật toán xác định bộ chọn CSS nào có kết quả phù hợp nhất
- Nguồn gốc: thứ tự thời điểm CSS xuất hiện và nguồn gốc của CSS, cho dù đó là một kiểu trình duyệt, CSS từ một tiện ích của trình duyệt hoặc CSS do bạn tạo ra
- Mức độ quan trọng: một số quy tắc CSS có trọng số cao hơn các quy tắc khác,
đặc biệt là với loại quy tắc
!important
Vị trí và thứ tự xuất hiện
Thứ tự xuất hiện của các quy tắc CSS và cách các quy tắc đó xuất hiện được tầng này xem xét trong khi tính toán giải quyết xung đột.
Bản minh hoạ ngay đầu bài học này là ví dụ đơn giản nhất về vị trí. Có hai quy tắc có bộ chọn giống hệt nhau về tính cụ thể, nên người cuối cùng được tuyên bố là chiến thắng.
Kiểu có thể đến từ nhiều nguồn trên một trang HTML,
chẳng hạn như thẻ <link>
,
một thẻ <style>
được nhúng
và cùng dòng CSS như được xác định trong thuộc tính style
của một phần tử.
Nếu bạn có một <link>
bao gồm CSS ở đầu trang HTML,
sau đó là một <link>
khác bao gồm CSS ở cuối trang của bạn: <link>
ở dưới cùng sẽ có đặc điểm cụ thể nhất.
Điều tương tự cũng xảy ra với các phần tử <style>
được nhúng.
Chúng càng cụ thể hơn về phía dưới trang.
Thứ tự này cũng áp dụng cho các phần tử <style>
được nhúng.
Nếu được khai báo trước <link>
,
CSS của biểu định kiểu được liên kết sẽ có tính cụ thể nhất.
Thuộc tính style
cùng dòng có CSS được khai báo trong đó sẽ ghi đè tất cả CSS khác,
bất kể vị trí, trừ phi nội dung khai báo đã xác định !important
.
Vị trí cũng được áp dụng theo thứ tự của quy tắc CSS.
Trong ví dụ này, phần tử sẽ có nền màu tím vì background: purple
được khai báo lần gần đây nhất.
Vì nền xanh lục đã được khai báo trước nền màu tím nên giờ đây nền tảng này bị trình duyệt bỏ qua.
.my-element {
background: green;
background: purple;
}
Việc có thể chỉ định hai giá trị cho cùng một thuộc tính
có thể là một cách đơn giản để tạo tính năng dự phòng cho các trình duyệt không hỗ trợ một giá trị cụ thể.
Trong ví dụ tiếp theo, font-size
được khai báo hai lần.
Nếu trình duyệt hỗ trợ clamp()
,
thì nội dung khai báo font-size
trước đó sẽ bị loại bỏ.
Nếu trình duyệt không hỗ trợ clamp()
,
trong phần khai báo ban đầu sẽ được tuân thủ và cỡ chữ sẽ là 1, 5rem
.my-element {
font-size: 1.5rem;
font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về thác
Nếu bạn có HTML sau trên trang của mình:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="/styles.css" /> </head> <body> <button>I am a button</button> <style> button { background: pink; } </style> </body> </html>
Bên trong styles.css
là quy tắc CSS sau:
button { background: yellow; }
Nền của nút này có màu gì?
Mức độ cụ thể
Tính cụ thể là thuật toán xác định bộ chọn CSS nào cụ thể nhất, sử dụng hệ thống tính trọng số hoặc tính điểm để thực hiện các phép tính đó. Bằng cách làm cho quy tắc cụ thể hơn, bạn có thể để áp dụng bộ chọn ngay cả khi một số CSS khác khớp với bộ chọn xuất hiện sau đó trong CSS.
Trong bài học tiếp theo, bạn có thể tìm hiểu chi tiết về cách tính cụ thể, tuy nhiên, việc lưu ý một vài điều sẽ giúp bạn tránh quá nhiều vấn đề cụ thể.
CSS nhắm mục tiêu một lớp trên một phần tử sẽ làm cho quy tắc đó cụ thể hơn
và do đó được coi là quan trọng hơn được áp dụng,
so với việc CSS chỉ nhắm mục tiêu đến phần tử này.
Điều này có nghĩa là với CSS sau đây,
h1
sẽ có màu đỏ mặc dù cả hai quy tắc đều trùng khớp và quy tắc cho bộ chọn h1
xuất hiện sau trong biểu định kiểu.
<h1 class="my-element">Heading</h1>
.my-element {
color: red;
}
h1 {
color: blue;
}
id
làm cho CSS thậm chí còn cụ thể hơn,
vì vậy, các kiểu được áp dụng cho một mã nhận dạng sẽ ghi đè các kiểu được áp dụng theo nhiều cách khác.
Đây là một lý do tại sao bạn không nên đính kèm kiểu vào id
.
Việc ghi đè kiểu đó bằng kiểu khác có thể gây khó khăn cho việc ghi đè.
Mức độ cụ thể có tính tích luỹ
Như bạn có thể tìm hiểu trong bài học tiếp theo,
mỗi loại bộ chọn được thưởng điểm cho biết mức độ cụ thể của bộ chọn đó,
các điểm cho tất cả bộ chọn mà bạn đã dùng để nhắm mục tiêu một phần tử sẽ được thêm lại với nhau.
Điều này có nghĩa là nếu bạn nhắm mục tiêu một phần tử bằng danh sách bộ chọn, chẳng hạn như
a.my-class.another-class[href]:hover
, bạn sẽ thấy một điều gì đó khá khó ghi đè bằng CSS khác.
Vì lý do này và để giúp CSS của bạn có thể tái sử dụng nhiều hơn,
bạn nên giữ bộ chọn của mình càng đơn giản càng tốt.
Sử dụng tính cụ thể như một công cụ để truy cập các phần tử khi cần,
nhưng hãy luôn cân nhắc việc tái cấu trúc các danh sách bộ chọn dài, cụ thể nếu có thể.
Điểm gốc
CSS mà bạn viết không phải là CSS duy nhất được áp dụng cho trang. Thác này có tính đến nguồn gốc của CSS. Nguồn gốc này bao gồm biểu định kiểu nội bộ của trình duyệt, các kiểu được thêm bởi tiện ích của trình duyệt hoặc hệ điều hành, và CSS đã tạo của bạn. Thứ tự tính đặc thù của những nguồn gốc này, từ ít cụ thể nhất đến cụ thể nhất như sau:
- Kiểu cơ sở tác nhân người dùng. Đây là những kiểu mà trình duyệt của bạn áp dụng cho các phần tử HTML theo mặc định.
- Kiểu người dùng cục bộ. Các ký tự này có thể đến từ cấp hệ điều hành, chẳng hạn như cỡ chữ cơ bản, hoặc ưu tiên giảm chuyển động. Chúng cũng có thể đến từ các tiện ích của trình duyệt, chẳng hạn như tiện ích của trình duyệt cho phép người dùng viết CSS tuỳ chỉnh của riêng họ cho một trang web.
- Dịch vụ so sánh giá (CSS) đã tạo. CSS mà bạn tác giả.
- Tác giả:
!important
. Mọi!important
mà bạn thêm vào nội dung khai báo do bạn tạo. - Kiểu người dùng cục bộ
!important
. Mọi!important
thuộc cấp hệ điều hành, hoặc CSS cấp tiện ích của trình duyệt. - Tác nhân người dùng
!important
. Mọi!important
được xác định trong CSS mặc định, do trình duyệt cung cấp.
Nếu bạn có loại quy tắc !important
trong CSS mà bạn đã tạo
và người dùng có loại quy tắc !important
trong CSS tuỳ chỉnh của họ, CSS của ai sẽ giành chiến thắng?
Kiểm tra kiến thức
Kiểm tra kiến thức về nguồn gốc tầng
Kiểm tra kiến thức của bạn về nguồn gốc tầng, hãy cân nhắc sử dụng kiểu sau quy tắc từ nhiều nguồn gốc:
Kiểu tác nhân người dùng
h1 { margin-block-start: 0.83em; }
Tự thân khởi nghiệp
h1 { margin-block-start: 20px; }
Kiểu Tác giả trang
h1 { margin-block-start: 2ch; } @media (max-width: 480px) { h1 { margin-block-start: 1ch; } }
Kiểu tùy chỉnh người dùng
h1 { margin-block-start: 2rem !important; }
Sau đó, với HTML sau:
<h1>Lorem ipsum</h1>
margin-block-start
cuối cùng của h1
là gì?
Mức độ quan trọng
Không phải tất cả các quy tắc CSS đều được tính toán giống nhau, hoặc có đặc điểm giống nhau.
Thứ tự mức độ quan trọng, từ ít quan trọng nhất, quan trọng nhất là:
- loại quy tắc thông thường, chẳng hạn như
font-size
,background
hoặccolor
animation
loại quy tắc- Loại quy tắc
!important
(theo cùng thứ tự như nguồn gốc) transition
loại quy tắc
Các loại quy tắc chuyển đổi và ảnh động đang hoạt động có tầm quan trọng cao hơn các quy tắc thông thường.
Trong trường hợp chuyển đổi có tầm quan trọng cao hơn so với loại quy tắc !important
.
Đó là vì khi một ảnh động hoặc hiệu ứng chuyển đổi hoạt động,
hành vi dự kiến của ứng dụng là thay đổi trạng thái hình ảnh.
Sử dụng Công cụ cho nhà phát triển để tìm hiểu lý do một số CSS không áp dụng
Công cụ của trình duyệt thường sẽ hiển thị tất cả CSS có thể khớp với một phần tử, với những ký tự không được sử dụng bị gạch ngang.
Nếu CSS bạn dự kiến áp dụng không hề xuất hiện, thì nó không khớp với phần tử đó. Trong trường hợp đó, bạn cần phải tìm ở nơi khác, có thể là do lỗi đánh máy trong tên lớp hoặc phần tử hoặc CSS không hợp lệ.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về thác
Cascade có thể được sử dụng cho...