css - Default settings of unrecognized HTML elements

Question

If I use custom or unsupported elements in my HTML they can still be styled and the browser will render them.

For instance, the HTML5 main element is not supported by Internet Explorer 11 and older (source). When main is rendered by IE, CSS rules involving margin and overflow are ignored. This implies that the display value of an unrecognized element is inline.

Where are the initial settings for an unrecognized element defined?

(NOTE: I'm not asking about the pros and cons of using custom elements. I just want to know what CSS does by default.)

Answer 1

It's not so much unrecognized elements, as all elements. Remember that CSS supports XML as well as HTML. In XML, all elements are unrecognized

In the CSS 2.1 spec, section 6.1.1 says:

6.1.1 Specified values

User agents must first assign a specified value to each property based on the following mechanisms (in order of precedence):

1. If the cascade results in a value, use it. Except that, if the value is 'inherit', the specified value is defined in “The 'inherit' value” below.

2. Otherwise, if the property is inherited and the element is not the root of the document tree, use the computed value of the parent element.

3. Otherwise use the property's initial value. The initial value of each property is indicated in the property's definition.

By definition, unrecognized elements won't be mentioned in the user agent style sheet, and since we're talking about the default behaviour, won't be mentioned in the author style sheet either. So 1 does not apply.

The display property is defined in 9.2.4 The 'display' property. In the rules there, it says Inherited: no, so 2 does not apply.

So 3 applies. Again from the rules at 9.2.4, we have Initial: inline, so the elements are inline.

For HTML block level elements, they are block by default simply because they are listed as such in the user-agent's style sheet. Similarly for other display values such as table, list-item etc.