“This is the 12th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”
CSS substitutable elements and non-substitutable elements
There are a lot of elements in the HTML5 specification, and most of the ones we’ve seen before are divided into inline elements and block-level elements from a layout perspective. During the interview, I was asked about the concept of replacement elements (completely unheard of). This article is mainly a brief introduction.
The presentation of replacement elements is not controlled by CSS. These elements are external objects, and the rendering of their appearance is CSS independent.
The contents of non-replacement elements are rendered directly to the client by CSS.
Anonymous replaceable elements: Objects inserted with the CSS Content attribute are anonymous replaceable elements. They do not exist in HTML tags and are therefore “anonymous.”
Simply put, the content of the replaceable element is not affected by the style of the current document. CSS can affect the position of the replaceable element, but not the content of the replaceable element itself.
1. Replace elements
Typical substitutable elements are:
<iframe><video><embed><img>
Some elements are treated as substitutable elements only in certain cases:
<option><audio><canvas><object><applet>
The HTML specification also says that elements are replaceable, because elements of type “image” are replaced just like
. But other forms of control elements, including other types of elements, are explicitly listed as non-replacement elements. The specification uses the term Widgets to describe their default platform-specific rendering behavior.
2. Non-replacement elements
An element that is not a replacement element is a non-replacement element. Most elements in the HTML5 specification are non-replaceable, such as
,
,
…
Third, doubt
- Input elements are only replaceable if type=image
MDN input element description:
Inputs, being replaced elements, have a few features not applicable to non form elements. There are CSS selectors that can specification target form controls based on their UI features, also known as UI pseudo-classes. The input element can also be targeted by type with attribute selectors. There are some properties that are especially useful as well.
The MDN describes the substitutable element as follows:
The HTML specification also says that elements are replaceable, because elements of type “image” are replaced just like
. But other forms of control elements, including other types of elements, are explicitly listed as non-replacement elements. The specification uses the term Widgets to describe their default platform-specific rendering behavior.
Other types of elements mentioned here are explicitly listed as non-replaceable elements. I looked for information on the Internet, but did not find out where it was explained. Have the friend that understands can comment area exchanges.
Fourth, some misunderstandings existed before
- The difference between replaceable and modifiable. It would be a mistake to assume that input elements are replaceable because substitutable means you can change the content of an element. The essence of a replaceable element is that the representation of the element is not
CSSStyle is controlled, but element content is determined.
What is a non-replacement inline element?