Thác

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.

  1. Vị trí và thứ tự xuất hiện: thứ tự xuất hiện của các quy tắc CSS
  2. 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
  3. 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
  4. 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.

Nút này có nền màu xanh dương do CSS xác định và có trong phần tử <link />. Quy tắc CSS đặt thành tối nằm trong biểu định kiểu thứ hai được liên kết và được áp dụng vì vị trí phía sau.

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.

Phần tử <style> được khai báo trong <head>, trong khi phần tử <link /> được khai báo trong <body>. Tức là phần tử này cụ thể hơn so với phần tử <style>

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àu hồng
Nguồn <style> được nhúng nằm ở phía dưới trang so với <link>, vì vậy, mặc dù tính cụ thể của button là như nhau, nhưng vị trí của quy tắc kiểu giúp quy tắc giành chiến thắng.
vàng
Đối với tài liệu HTML, nền của nút màu vàng có thể đã được đọc đầu tiên, nhưng một quy tắc mới hơn có cùng tính cụ thể được phát hiện sau đó, làm cho quy tắc này không được áp dụng cho nút.

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:

  1. 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.
  2. 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.
  3. Dịch vụ so sánh giá (CSS) đã tạo. CSS mà bạn tác giả.
  4. 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.
  5. 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.
  6. 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.
Bản minh hoạ bằng hình ảnh về thứ tự của các nguồn gốc như được giải thích trong danh sách.

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ì?

20px
Tự thân khởi nghiệp là một phần của nguồn gốc được tạo và sẽ mất đi phong cách quan trọng của người dùng cục bộ.
0,83em
Nguồn gốc kiểu tác nhân người dùng sẽ mất kiểu người dùng quan trọng trên máy.
2 mét
Kiểu tuỳ chỉnh cho người dùng của !important này có nguồn gốc cụ thể nhất.
2 kênh
Kiểu tác giả này là một phần của nguồn gốc tác giả và sẽ bị mất kiểu người dùng quan trọng cục bộ.
1 kênh
Kiểu tác giả này là một phần của nguồn gốc tác giả và sẽ bị mất kiểu người dùng quan trọng cục bộ.

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à:

  1. loại quy tắc thông thường, chẳng hạn như font-size, background hoặc color
  2. animation loại quy tắc
  3. Loại quy tắc !important (theo cùng thứ tự như nguồn gốc)
  4. 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.

Hình ảnh Công cụ cho nhà duyệt của trình duyệt có CSS bị ghi đè và bị gạch bỏ

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...

Giải quyết xung đột khi áp dụng nhiều kiểu cho một phần tử.
Đây là một trong những mục tiêu chính, giải quyết xung đột.
Đảm bảo chỉ có một giá trị kiểu cho mỗi thuộc tính tại thời điểm vẽ.
Văn bản chỉ có thể có một màu và Cascade là cách xác định màu nào nên là màu nào.
Quy tắc kiểu tính điểm và trọng số.
Tính điểm và trọng số là một phần trong giai đoạn sắp xếp của The Cascade.
Sắp xếp và lọc các thuộc tính kiểu.
Sắp xếp và lọc là các giai đoạn của Cascade để giúp hiểu rõ các khía cạnh giải quyết xung đột.

Tài nguyên