Thuộc tính CSS `content` hoạt động như thế nào cho phần tử` img` trong WebKit?

Question

Thời gian dài trước đây đã có bản nháp của đặc tả nội dung tạo CSS3 cho phép thuộc tính contentfor any HTML element (không chỉ :: trước/:: sau phần tử giả), không có bất kỳ hạn chế chính thức nào cho các phần tử trống hoặc thay thế. Nó đã từng được hỗ trợ bởi Opera Presto (1, 2) và, ít nhất là ở một mức độ nào đó, bởi WebKit (3). Đến cuối năm 2011, việc triển khai content của WebKit cho thành phần img dường như chuyển đổi hiệu quả từ yếu tố thay thế trống sang thành phần không được thay thế như span (ngay cả menu ngữ cảnh của nó đã thay đổi, xóa các tùy chọn như 'Lưu hình ảnh thành ...'). Nó cũng làm cho nó có thể áp dụng các phần tử giả như img::before.

Trong triển khai Blink (Chrome v.v.) hiện tại, việc đánh số content thuộc tính vào thành phần img không có hiệu lực rõ ràng. Nhưng phần tử img rõ ràng có cấu trúc khác nhau tùy thuộc vào việc nó được tải đúng hay bị hỏng: nếu được tải, nó được hiển thị bởi DOM Inspector như là một phần tử rỗng đơn giản, nhưng nếu bị hỏng, nó sẽ hiển thị cấu trúc Shadow DOM bên trong như sau:

<div id="alttext-container" style="overflow: hidden; border: 1px solid silver; display: inline-block; box-sizing: border-box; padding: 1px;"> 
    <img id="alttext-image" width="16" height="16" align="left" style="margin: 0px; float: left; display: inline;"> 
    <div id="alttext" style="overflow: hidden; display: block;">Alt text</div> 
</div> 

Có thể là do img bị hỏng được hiển thị với sự trợ giúp của bóng div s, có thể áp dụng các phần tử giả cho nó trong trường hợp này chỉ (4).

WebKit hiện tại không hỗ trợ các phần tử giả cho img. Nhưng, thú vị, ít nhất iOS 9.2.1 Safari bắt đầu hỗ trợ chúng sau khi thiết lập thuộc tính content cho rằng img (5).

Tại sao thuộc tính này thực hiện thay đổi như vậy? Tôi đoán rằng nếu một phần tử trống có bất kỳ nội dung nào (thậm chí được tạo), trình duyệt phải cung cấp nội dung nào đó để thay thế thành phần trống bằng một loại container (như bóng tối của Blink div id="alttext-container") và vùng chứa này có thể có pseudos. Liệu tôi có sai? Và hành vi này có bị xóa khỏi phiên bản WebKit mới nhất không?

Answer 1

The content property as defined in CSS 2.1 áp dụng cho: trước và sau: chỉ phần tử giả. Theo quy tắc CSS, bạn có thể chỉ định bất kỳ thuộc tính nào cho bất kỳ phần tử nào, nhưng thông số kỹ thuật có những giới hạn về những thuộc tính "áp dụng cho" (tức là, có hiệu lực trên) các phần tử khác nhau.

CSS3 Generated and Replaced Content Module, Bản nháp làm việc, mô tả thuộc tính nội dung như áp dụng cho tất cả các yếu tố. Nó có một ví dụ về việc thay thế nội dung của phần tử h1 bằng một hình ảnh, và chắc chắn điều tương tự có thể được thực hiện với một phần tử img.

Nhưng đó chỉ là bản nháp làm việc. Các tài nguyên thông thường về trạng thái triển khai CSS, thông tin CSS QuirksMode.org và Caniuse.com, không cho biết tình huống; họ chỉ mô tả sự hỗ trợ cho nội dung cho: trước và sau (phổ biến hơn ngoại trừ IE 7 và trước đó)