CSS có các từ khóa mặc định cho các giá trị khác nhau. Trong bài viết này tôi sẽ nói về ba trong số họ.
/* Bad */1,
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */2, và cái tương đối mới,
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */3
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Có một cơ hội tốt là mặc dù hầu hết các nhà phát triển web đã gặp phải chúng, nhưng nhiều người trong số những người có kinh nghiệm nhất cũng không hiểu hết về chúng
Trong một thời gian dài, điều duy nhất tôi biết về những từ khóa này là chúng được sử dụng để đặt lại kiểu trong CSS. Nhưng nếu tất cả những từ khóa đó là một loại thiết lập lại, thì tại sao lại có nhiều từ khóa như vậy?
Các kiểu cơ bản của webTrước khi chúng tôi bắt đầu hiểu các từ khóa CSS, điều quan trọng là phải hiểu chúng tôi lấy các kiểu cơ bản từ đâu trong trình duyệt của mình
Giá trị ban đầu của mọi thuộc tính trong CSS
Mọi thuộc tính của CSS đều có giá trị ban đầu. Giá trị ban đầu này không có kết nối với loại phần tử HTML được áp dụng cho
Một ví dụ từ MDN về giá trị
/* Bad */1
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Giá trị ban đầu của chiều cao dòng là “bình thường”
Các kiểu trình duyệt tác nhân người dùng
Sau khi áp dụng các kiểu ban đầu của tất cả các thuộc tính CSS, trình duyệt sẽ tải các kiểu của nó. Các kiểu này không liên quan gì đến các giá trị ban đầu cơ bản của các thuộc tính CSS
Một ví dụ về kiểu tác nhân người dùng
kiểu phần tử h1 từ tác nhân người dùng trình duyệt chrome
Các phần tử HTML không có giá trị kiểu dáng ban đầu. Các kiểu cơ bản của phần tử HTML, chẳng hạn như thẻ
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
0 chẳng hạn, xuất phát từ biểu định kiểu tác nhân người dùng của trình duyệt chứ không phải từ giá trị /* Bad */1 của các thuộc tính của CSS
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Bây giờ hãy bắt đầu nói về các từ khóa CSS
Từ khóa người thừa kếGiá trị từ khóa của
/* Bad */2 yêu cầu trình duyệt tìm kiếm giá trị của phần tử cha gần nhất và để phần tử hiện tại kế thừa giá trị đó. Nếu cha gần nhất có giá trị cố hữu, trình duyệt sẽ tiếp tục đi lên DOM cho đến khi tìm thấy giá trị nào đó. Nếu không có bất kỳ giá trị nào, trình duyệt sẽ sử dụng kiểu tác nhân người dùng của nó và nếu không có bất kỳ kiểu tác nhân người dùng nào, trình duyệt sẽ sử dụng kiểu cơ sở
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */1Từ khóa ban đầu CSS
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Để hiểu từ khóa
/* Bad */1, chúng ta phải nhớ một sự thật quan trọng. Mọi thuộc tính trong CSS đều có giá trị mặc định, không liên quan gì đến giá trị mặc định của tác nhân người dùng. Kiểu tác nhân người dùng là kiểu cơ bản mà trình duyệt áp dụng cho các phần tử HTML trong trình duyệt. Chúng tôi có xu hướng nghĩ rằng chúng tự động đến với HTML, nhưng chúng không
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Từ khóa
/* Bad */1 yêu cầu trình duyệt sử dụng giá trị mặc định CSS của thuộc tính đã cho. Ví dụ
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
- Giá trị của ________ 06 thuộc tính ________ 31 sẽ luôn là ________ 08
Hành vi này có thể rất khó hiểu vì như chúng tôi đã nói trước đây, giá trị mặc định của thuộc tính CSS không nhất thiết phải là giá trị mặc định mà trình duyệt xác định cho một phần tử. Ví dụ: giá trị
/* Bad */1 của thuộc tính
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */0 là
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */1, cho tất cả các phần tử. Do đó, nếu một phần tử
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */2 nhận được giá trị
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */1 trên thuộc tính
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */0 của nó, thì màn hình của nó sẽ là
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */1 chứ không phải
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */6, đó là kiểu tác nhân người dùng của nó
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Thí dụ
div.box{
background-color: red;
display: initial; /* will be equal to inline and not to block */
}
Một ví dụ trên CodePen của thuộc tính hiển thị Ban đầu trên phần tử div
hiển thị giá trị ban đầu — thông tin trong MDNThe Unset Keyword
Từ khóa
/* Bad */3 độc đáo ở chỗ nó hoạt động khác nhau trên các loại thuộc tính khác nhau. Trong CSS, có hai loại thuộc tính
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
- Thuộc tính kế thừa - thuộc tính ảnh hưởng đến con cái của họ. Tất cả các thuộc tính ảnh hưởng đến văn bản đều có hành vi tự nhiên này. Ví dụ: nếu chúng tôi xác định một
/* Bad */
8 trên phần tử HTML, nó sẽ áp dụng cho tất cả các phần tử HTML cho đến khi bạn đặt một
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}/* Bad */
8 khác trên một kiểu phần tử HTML bên trong
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
thuộc tính kế thừa kích thước phông chữ - được lấy từ MDN
- Thuộc tính không được kế thừa — Tất cả các thuộc tính tự nhiên khác, chỉ ảnh hưởng đến phần tử mà chúng xác định. Đây là tất cả các thuộc tính không áp dụng cho văn bản. Ví dụ: nếu bạn đặt
.some-class{
20 trên phần tử cha, phần tử con của nó sẽ không có đường viền
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
thuộc tính không kế thừa đường viền - được lấy từ MDN
Giá trị
/* Bad */3 hoạt động giống như
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */2 đối với các loại thuộc tính kế thừa. Ví dụ: đối với thuộc tính văn bản
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
6, thuộc tính này sẽ hoạt động giống như giá trị /* Bad */2, nghĩa là tìm kiếm phần tử cha có định nghĩa cho thuộc tính và nếu không tìm thấy thuộc tính nào — hãy sử dụng giá trị tác nhân người dùng và nếu không có
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Đối với các thuộc tính không được kế thừa, giá trị
/* Bad */3 sẽ hoạt động giống như giá trị
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */1, tức là áp dụng giá trị mặc định của CSS;
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
Tại sao lại sử dụng Unset nếu nó hoạt động chính xác như Inherit và Initial?
Nếu các hoạt động không được đặt như
/* Bad */1 và
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */2, tại sao chúng tôi muốn sử dụng
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */3?
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Nếu chúng tôi chỉ đặt lại một thuộc tính thì không cần thiết phải đặt lại
/* Bad */3. thay vào đó, chúng ta chỉ có thể sử dụng các giá trị
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */2 hoặc
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */1
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Nhưng ngày nay chúng ta có một thuộc tính mới có tên là
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
66 mang theo một khả năng mới. để đặt lại tất cả các thuộc tính được kế thừa và các thuộc tính không được kế thừa cùng một lúcTheo cách mới này, bạn không cần phải đặt lại từng thuộc tính. Do đó, Áp dụng giá trị
/* Bad */3 cho thuộc tính
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
66 sẽ đặt lại tất cả các thuộc tính kế thừa thành /* Bad */2 và tất cả các thuộc tính không được kế thừa thành
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
80Đây là lý do duy nhất cho sự tồn tại của giá trị từ khóa
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
81 mới. Mặt khác, chúng ta có thể sử dụng các giá trị .some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
82 và .some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
83 để thay thếThay vì đặt lại từng thuộc tính một, ví dụ
/* Bad */
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Ví dụ, chúng ta có thể sử dụng thuộc tính
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
66 mới với giá trị /* Bad */3, điều này sẽ ảnh hưởng đến tất cả các thuộc tính hiện có
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
2Tôi đã viết một ví dụ nhỏ để minh họa cách các thuộc tính hoạt động khi sử dụng thuộc tính
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
66 với giá trị /* Bad */3. một số hành động như thể giá trị
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */2 đã được áp dụng và một số - như thể giá trị
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */1 đã được áp dụng. Ví dụ về CodePen của
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */10Hoàn nguyên từ khóa
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
Nhưng nếu chúng ta muốn đặt lại kiểu của thuộc tính về kiểu tác nhân người dùng ban đầu chứ không phải kiểu cơ sở của thuộc tính thì sao?
Kiểu cơ sở của tác nhân người dùng của thẻ div HTML
Vì vậy, chúng tôi sẽ sớm nhận được một từ khóa CSS mới.
/* Bad */15. Từ khóa
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */15 rất giống với
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
/* Bad */3, điểm khác biệt duy nhất là nó ưu tiên kiểu của tác nhân người dùng hơn kiểu cơ bản của thuộc tính CSS. Ví dụ
.common-content *{
font-size: inherit;
font-weight: inherit;border-width: initial;
background-color: initial;
}
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
6Bằng cách này nếu chúng ta muốn đặt lại tất cả các kiểu của thẻ HTML về kiểu cơ sở của trình duyệt, chúng ta có thể làm như thế này