What's the meaning of “propagated to the viewp

2019-01-19 06:47发布

站内问答 / HTML/CSS
2022 1 6

There are some chapters in the CSS spec mentioning "propagated to the viewport"; for example: calculating the height.

This section also applies to block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' but has been propagated to the viewport.

What kind of attribute can propagate? And does it contradict with the rule in which a child element inherits an attribute from its parent?

1条回答
太酷不给撩
2楼-- · 2019-01-19 07:14

As the quote states, the overflow property is capable of being propagated from body to html, and from html to the viewport:

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.

The other property that can be propagated in this manner is background:

Since no element corresponds to the canvas, in order to allow styling of the canvas CSS propagates the background of the root element (or, in the case of HTML, the <body> element) as described below.

3.11.1. The Canvas Background and the Root Element

The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas. However, any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) The root element does not paint this background again, i.e., the used value of its background is transparent.

3.11.2. The Canvas Background and the HTML <body> Element

For documents whose root element is an HTML HTML element [HTML401] or an XHTML html element [XHTML11]: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.

This propagating behavior is specified for historical reasons (<body background="..." bgcolor="...">) as well as to enable authors to style the entire page background, something that cannot normally be done solely through the html or body elements without first removing their default margins and forcing them to fill the page.

Authors not aware of this behavior who try to apply these two properties to body and html may be surprised by the results, especially when comparing the behavior with other elements. On the other hand, authors have also exploited this behavior to create interesting workarounds for browser bugs dating back over 15 years.

This behavior does not conflict with inheritance because it works in the opposite direction. Inheritance "propagates" property values from a parent element to a child element; this behavior propagates property values from a child box to a parent box (body to html, and html to the viewport respectively).

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)