Some HTML elements have always caused headaches for front-end developers everywhere, like iframes, applets, embedded objects or form controls. One could never have complete control over their display, because they look different from one browser to another, from one OS to another.
Countless libraries and frameworks created replacements, from jQueryUI to Bootstrap, and many more. But have you ever wondered why those elements behave the way they do? Some voices (including a few well-known websites) will point their finger to a fairly obscure definition from W3C, namely the one concerning replaced elements. But are they 100% right? This is the quest we will chase together today.
What are Replaced Elements?
Any good quest must start with research. Therefore let’s have a look at what the official specs say a replaced element is:
An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. For example, the content of the HTML IMG element is often replaced by the image that its “src” attribute designates. Replaced elements often have intrinsic dimensions: an intrinsic width, an intrinsic height, and an intrinsic ratio. For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units (from which the intrinsic ratio can obviously be determined). On the other hand, other documents may not have any intrinsic dimensions (for example, a blank HTML document).
So far, so good – we got a general description of what a replaced element is. Before we go deeper into this spec section, let’s make a small detour and clarify the “intrinsic dimensions” part.
What are Intrinsic Dimensions?
The best definition available now for intrinsic dimensions comes from the CSS Image Values and Replaced Content Module Level 3 document:
The term intrinsic dimensions refers to the set of the intrinsic height, intrinsic width, and intrinsic aspect ratio (the ratio between the width and height), each of which may or may not exist for a given object. These intrinsic dimensions represent a preferred or natural size of the object itself; that is, they are not a function of the context in which the object is used. CSS does not define how the intrinsic dimensions are found in general.
Here are some examples:
- A normal image has all three dimensions: width, height and aspect ratio.
- An SVG image can have only the aspect ratio. Its scaling nature means that the width and height are not restricted to a single value.
- An empty HTML page, inserted via an
iframeelement has no dimensions at all.
The way these properties are tied to one another means that there can be no object with only two dimensions. Knowing two of them automatically determines the third one.
Overall this means that such an object, when placed into the page, will provide these intrinsic dimensions to the document so that they can be rendered properly. This information will be useful later, but for now, let’s return to the main path.
Replaced Elements in the Real World
For a full description of the replaced elements we need to go to a different resource, namely the Rendering section of the HTML Living Standard document. As one goes deeper into the specs, it’s easy to see how this topic can be confusing. This is because some HTML elements act as replaced elements all the time, while other do it only in specific circumstances.
Fortunately the Subsection 14.4 gives us all the information we need to properly understand each case.
The first category of replaced elements is embedded content. This includes any element that imports another resource into the document, or content from another vocabulary that is inserted into the document. These external resources, by their own nature, have the intrinsic dimensions that match the requirements of the definition.
The main elements in this category are
video. These elements are always treated as replaced elements because they always import external content into your document.
Things are a bit more complicated with elements that fall into this category only in special circumstances:
applet– Treated as a replaced element when it represents a plugin, otherwise it’s treated as an ordinary element.
audio– Treated as a replaced element only when it is “exposing a user interface element”. Will render about one line high, as wide as is necessary to expose the user agent’s user interface features.
object– Treated as a replaced element when it represents an image, plugin, or nested browsing context (similar to an
canvas– Treated as a replaced element when it represents embedded content. That is, it contains the element’s bitmap, if any, or else a transparent black bitmap with the same intrinsic dimensions as the element.
These are the only cases where the elements above are treated as replaced elements (which covers almost all cases where these elements are used). For full details on this, please see WHATWG’s rendering rules for embedded content.
Continue reading %Replaced Elements in HTML: Myths and Realities%