Tìm hiểu về Initial, Inherit và Unset trong CSS

1442

30-03-2020

Tìm hiểu về Initial, Inherit và Unset trong CSS

Inherit, initial và unset là 3 giá trị thường được sử dụng bởi các web developer để reset style trong CSS. Nhưng nhiều người vẫn chưa hiểu rõ ý nghĩa của từng giá trị này dẫn tới nhầm lẫn và sử dụng không hiệu quả. Trong bài viết này, Bizfly Cloud sẽ tìm hiểu về inherit, initial và unset trong CSS và học cách sử dụng chúng thành thục nhất.

Sự khác nhau giữa initial, inherit và unset

Mỗi thuộc tính CSS thường có 3 giá trị là inherit, initial và unset. Mặc dù inherit và initial đã ra đời từ rất lâu, thì unset là một khái niệm mới được bổ sung trong thời gian trở lại đây. Về cơ bản thì:

- Inherit: kế thừa thuộc tính của các phần tử cha gần nó nhất (parent element).

- Initial: sử dụng style mặc định của trình duyệt.

- Unset: khi đặt giá trị của thuộc tính là unset, trình duyệt sẽ sử dụng một trong hai thuộc tính inherit hoặc initial tùy thuộc vào thuộc tính của phần tử cha. Nếu phần tử cha có các thuộc tính đó, nó sẽ kế thừa (inherit) giá trị thuộc tính từ phần tử cha, nếu không có thì unset sẽ sử dụng giá trị mặc định của trình duyệt (initial).

Để dễ hiểu hơn, hãy xem xét ví dụ:

HTML:

<p class="one">Snake<p>

<p class="two">Lizard<p>

<p class="three">Alligator</p>

<p>Komodo Dragon</p>

</div>

CSS:

.wrapper { color: orange; }

.wrapper p { color: purple; }

p.one { color: inherit; }

p.two { color: initial; }

p.three { color: unset; }

Kết quả trả về:

- Snake có màu cam, nó đã thừa kế giá trị này từ div wrapper => Inherit

- Lizard có màu đen, nó sử dụng style mặc định của trình duyệt => Initial

- Alligator có màu cam, trong trường hợp này unset hoạt động như inherit bởi vì parent element (wrapper) có thuộc tính color.

- Komodo Dragon màu tím, đây là đoạn paragraph duy nhất lấy giá trị từ .wrapper p

Trên đây là những nét chính về inherit, initial và unset. Để tìm hiểu kỹ hơn, ta cần nắm rõ các style cơ bản hiển thị trên trình duyệt.

Các style cơ bản

Style gốc của thuộc tính CSS

Mỗi thuộc tính CSS đều có một style gốc (initial style). Dù cho bạn sử dụng một thuộc tính CSS cho bất kỳ phần tử HTML nào thì style gốc của thuộc tính vẫn không thay đổi.

Tìm hiểu về Initial, Inherit và Unset trong CSS - Ảnh 1.

Giá trị mặc định của thuộc tính line-height là normal.

Style của trình duyệt phía user

Sau khi áp dụng style gốc của tất cả CSS trong một trang web, trình duyệt sẽ load style của riêng nó.

Mỗi trình duyệt khác nhau có style mặc định khác nhau (Chrome, Firefox, Edge,…). Lưu ý là giá trị này của browser hoàn toàn không liên quan tới style gốc của CSS.

Dưới đây là một ví dụ về style của trình duyệt phía người dùng:

Tìm hiểu về Initial, Inherit và Unset trong CSS - Ảnh 2.

Một lưu ý khác là bản thân các nguyên tố HTML không có style! Các style cơ bản của một nguyên tố HTML (ví dụ thẻ <h1>) mà chúng ta nhìn thấy trên web, thực chất chính là style mặc định của trình duyệt.

Ok, bây giờ hãy cùng tìm hiểu về các keyword "inherit", "initial" và "unset".

Initial, inherit, unset trong CSS hoạt động như thế nào?

Inherit trong CSS

Inherit còn được gọi là kế thừa giá trị. Khi sử dụng inherit trong CSS, trình duyệt sẽ tìm kiếm giá trị từ thành phần HTML cha gần nó nhất và sử dụng lại giá trị đó. Nếu như phần tử cha cũng có giá trị là inherit, thì trình duyệt sẽ tiếp tục đi lên cho tới khi tìm thấy một giá trị nào đó. Nếu không có giá trị nào, nó sẽ sử dụng style của trình duyệt. Nếu vẫn không có, nó sẽ sử dụng style mặc định của CSS đã đề cập ở trên.

Initial trong CSS

Để hiểu initial, có 2 điều cần chú ý:

- Mỗi thuộc tính CSS đều có style gốc, hoàn toàn không liên quan tới Style của trình duyệt.

- Khi tải trang web, trình duyệt sẽ mặc định sử dụng style của nó làm mặc định.

Vậy, trong trường hợp chúng ta không muốn sử dụng style mặc định của trình duyệt, mà muốn sử dụng style gốc của CSS, thì khi đó ta cần tới "initial".

Initial ra lệnh cho trình duyệt sử dụng giá trị gốc của mỗi thuộc tính CSS. Ví dụ:

- Giá trị initial của thuộc tính color luôn là black.

- Giá trị initial của thuộc tính display luôn là inline. => Trường hợp này khá đặc biệt. Bởi vì giá trị mặc định của trình duyệt (user agent style) dành cho thẻ display lại là block. Chính vì thế, nếu bạn không sử dụng initial, thì trình duyệt sẽ mặc định hiển thị dạng block. Ngược lại, nếu sử dụng initial cho bất kỳ thẻ <div> nào, thì nó sẽ gọi ra giá trị mặc định của thuộc tính display là inline.

Unset trong CSS

Unset là một keyword đặc biệt, bởi vì nó có giá trị khác nhau trong những trường hợp khác nhau. Trong CSS, có hai loại thuộc tính:

- Thuộc tính kế thừa (inherited properties): là những thuộc tính ảnh hưởng tới thuộc tính con của nó. Tất cả các thuộc tính ảnh hưởng tới text đều là thuộc tính kế thừa. Ví dụ, nếu chúng ta chọn font-size cho một phần tử HTML, giá trị đó sẽ được áp dụng cho tất cả các phần tử con của nó.

Tìm hiểu về Initial, Inherit và Unset trong CSS - Ảnh 3.

- Thuộc tính không kế thừa (non-inherited properties): là tất cả những thuộc tính mà chỉ ảnh hưởng tới một phần tử mà nó define. Tất cả các thuộc tính không ảnh hưởng tới text đều là thuộc tính không kế thừa. Ví dụ, nếu bạn set border cho một phần tử cha, thì phần tử con sẽ không có border (không bị ảnh hưởng).

Tìm hiểu về Initial, Inherit và Unset trong CSS - Ảnh 4.

Quay trở về unset, nó sẽ hoạt động giống inherit cho những thuộc tính kế thừa (inherited properties). Ví dụ, với thuộc tính text-color, unset sẽ buộc trình duyệt phải tìm ngược lên các giá trị text-color của các phần tử cha.

Với những thuộc tính không kế thừa, unset sẽ có giá trị tương đương với initial. Ví dụ, với thuộc tính border color, unset sẽ gọi ra giá trị gốc của CSS (initial style).

.some-class{

color: unset; /* hoạt động như 'inherit' */

display: unset; /* hoạt động như 'initial' */

}

Tại sao phải sử dụng unset nếu nó hoạt động giống inherit và initial?

Rất đơn giản, nếu chúng ta chỉ reset một thuộc tính duy nhất, thì không cần unset. Chỉ cần sử dụng inherit hoặc initial là đủ.

Tuy nhiên ngày nay, chúng ta có một thuộc tính mới là all. Với thuộc tính này, ta có thể reset toàn bộ thuộc tính kế thừa và thuộc tính không kế thừa cùng lúc.

Bằng cách này, bạn không cần phải reset từng thuộc tính một. Thay vào đó, sử dụng all: unset sẽ giúp bạn reset toàn bộ các thuộc tính kế thừa thành inherit, và thuộc tính không kế thừa thành initial.

Đây là lý do duy nhất mà giá trị unset ra đời!

Ví dụ, thay vì reset từng thuộc tính một:

.common-content *{

font-size: inherit;

font-weight: inherit;border-width: initial;

background-color: initial;

}

Ta có thể reset tất cả cùng một lúc, bằng cách ngắn gọn hơn nhiều:

.common-content *{

all: unset;

}

Revert Keyword

Nhưng nếu chúng ta muốn reset style của thuộc tính về mặc định của trình duyệt thay vì style gốc của nó thì sao?

Ví dụ, để thay đổi thuộc tính display của một <div> từ inline (CSS base style) về dạng block (user-agent style) thì làm thế nào?

Để làm điều đó, chúng ta cần sử dụng keyword revert. Sử dụng revert sẽ tương tự với unset, điểm khác biệt duy nhất là nó ưu tiên style của trình duyệt hơn style gốc của CSS. Ví dụ, thay vì sử dụng:

div{

display: revert; /* = block */

}

h1{

font-weight: revert; /* = bold */

font-size: revert; /* = 2em */

}

Ta có thể rút ngắn đoạn code trên như sau:

.common-content *{

all: revert;

}

Lệnh trên sẽ reset toàn bộ HTML tag về style mặc định của browser. Vì vậy, revert mang lại khả năng mạnh mẽ hơn so với unset. Nhưng cho tới thời điểm hiện tại, revert mới chỉ hoạt động trên Firefox và Safari.