Menu
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?
476
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
HTMLelement [HTML401] or an XHTMLhtmlelement [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 HTMLBODYor XHTMLbodychild element. The used values of thatBODYelement'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 theBODYelement rather than theHTMLelement.
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).
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
