Sử dụng giá trị 'ban đầu' trong CSS là gì?

Question

Tôi nghĩ rằng giá trị initial sẽ khôi phục các kiểu được hiển thị ban đầu (như được áp dụng bởi kiểu dáng user-agent nội bộ của).

Ví dụ:

div.inline { 
    display: inline; 
} 

div.initial { 
    display: initial; 
} 

tôi mong đợi sự cai trị div.inline sẽ hiển thị <div class="inline"> trong chế độ inline, và sự cai trị div.initial sẽ hiển thị <div class="initial"> sử dụng một giá trị hiển thị div 's ban đầu của block.

Nhưng khi tôi khám phá điều này, <div class="initial"> hiển thị nội dòng. Liệu tôi có sai? Bất cứ ai có thể xây dựng thêm về điều này?

Answer 1

Các initial value (không thuộc tính) biểu thị giá trị ban đầu của tài sản, theo quy định tại thông số kỹ thuật CSS: “Các từ khóa 'ban đầu' đại diện cho giá trị quy định mà được chỉ định là giá trị ban đầu của tài sản” Như vậy , ý nghĩa của nó phụ thuộc vào tài sản, nhưng không phụ thuộc vào bất cứ điều gì khác, ví dụ không có trên trình duyệt hoặc trên phần tử mà thuộc tính đang được áp dụng cho. Do đó, không phải là là mặc định của trình duyệt.

Ví dụ, đối với các display tài sản, initialluôn nghĩa inline, bởi vì đó là giá trị ban đầu chỉ định của bất động sản. Trong trường hợp mẫu, trình duyệt mặc định là block, vì phần tử là div.

Do đó, giá trị initial có tính hữu ích hạn chế. Hiệu ứng chính của nó dường như gây nhầm lẫn cho mọi người, do hiểu lầm. Trường hợp sử dụng có thể là dành cho thuộc tính color, vì giá trị ban đầu của nó phụ thuộc vào trình duyệt (chủ yếu là màu đen, như chúng ta biết, nhưng không nhất thiết). Đối với nó, initial nghĩa là trình duyệt mặc định, vì đó là cách xác định thuộc tính, trường hợp sử dụng tương tự là font-family: bằng cách khai báo font-family: initial, bạn sẽ nhận được phông chữ mặc định của trình duyệt (có thể phụ thuộc vào cài đặt trình duyệt).

Tính hữu dụng bị hạn chế thêm do thiếu sự hỗ trợ trên IE (thậm chí là IE 10).

Answer 2

Source

Từ khóa CSS ban đầu áp dụng giá trị ban đầu của một tài sản để một phần tử. Nó được cho phép trên mọi thuộc tính CSS và gây ra phần tử mà nó được chỉ định để sử dụng giá trị ban đầu của thuộc tính.

/* give headers a green border */ 
h2 { border: medium solid green } 

/* but make those in the sidebar use the value of the "color" property */ 
#sidebar h2 { border-color: initial; } 
<p style="color:red"> 
    this text is red 
     <em style="color:initial"> 
      this text is in the initial color (e.g. black) 
     </em> 
    this is red again 
</p>