8

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.)

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • If it's unrecognised...how can it have default properties? You have to check the spec. I'd suggest it's browser specific. = https://www.w3.org/TR/custom-elements/ – Paulie_D Feb 28 '16 at 23:26
  • Thanks, @Paulie_D. I'm under the impression that CSS has rules for processing unrecognized elements (see the [comments in this answer](http://stackoverflow.com/a/35688664/3597276)). The rule may just be to take the initial value of a CSS property. I'm trying to find where in the spec the handling is defined, but my searches have yielded no results. – Michael Benjamin Feb 28 '16 at 23:30
  • What I'm thinking is that they **aren't** defined...because the developer is supposed to define them...so it's arbitrary as to what each browser does. – Paulie_D Feb 28 '16 at 23:32
  • 2
    All sort of interesting stuff here - http://stackoverflow.com/questions/20353613/why-does-css-work-with-fake-elements – Paulie_D Feb 28 '16 at 23:36
  • 1
    ..especially this - https://www.w3.org/TR/2011/WD-html5-20110405/infrastructure.html#other-applicable-specifications – Paulie_D Feb 28 '16 at 23:37
  • ...and a comment from @Boltclock *"As far as CSS is concerned, if there is no browser default display value it uses the **initial** value. "* - my emphasis – Paulie_D Feb 28 '16 at 23:42
  • ...and this http://www.html5rocks.com/en/tutorials/webcomponents/customelements/ – Paulie_D Feb 28 '16 at 23:47

1 Answers1

7

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.

Community
  • 1
  • 1
Alohci
  • 78,296
  • 16
  • 112
  • 156
  • Just to be clear: Were it not for the user agent stylesheets, all elements would be `display: inline` by default? All elements would use the initial values of CSS properties? – Michael Benjamin Feb 28 '16 at 23:51
  • 1
    @Michael_B - That's correct. More or less anyway: There are a few things in HTML that can't be replicated directly in CSS. Form elements, for example, and rowspan & colspan in tables. So occasionally, browsers do treat some HTML elements as "magic". – Alohci Feb 29 '16 at 00:09
  • 1
    @Michael_B: Yes - this is why the concept of an initial value exists. – BoltClock Feb 29 '16 at 16:33
  • @BoltClock, interesting to note: Not all CSS properties have an initial value (ex. [***font-family***](https://www.w3.org/TR/CSS21/fonts.html#propdef-font-family) and [***color***](https://www.w3.org/TR/CSS2/colors.html#colors)). – Michael Benjamin Mar 19 '16 at 14:32
  • 1
    @Michael_B: Yep, some of these are determined by the browser, and in many cases can be configured via user preferences. – BoltClock Mar 19 '16 at 14:46