Skip to content

[css-display][css-cascade] Should display: contents affect inheritance? #1098

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Loirooriol opened this issue Mar 12, 2017 · 4 comments
Closed
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-display-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

display: contents replaces an element by its children, so I wonder if the children should still inherit from that element.

I think it would make more sense if they didn't (except maybe for the display property itself?). But on Firefox and Chrome, the inheritance is not affected.

Example (https://jsfiddle.net/xyeL8ewr/):

<div>
  <p>
    <span>Foo</span>
  </p>
  <span>Bar</span>
</div>
div {
  color: blue;
}
p {
  display: contents;
  color: red;
}

"Foo" is red and "Bar" is blue. But with display: contents, it's like if the markup was

<div>
  <span>Foo</span>
  <span>Bar</span>
</div>

so maybe both should be blue.

@SelenIT
Copy link
Collaborator

SelenIT commented Mar 16, 2017

The spec also has the following statements:

Note: As only the box tree is affected, any semantics based on the document tree, such as selector-matching and event handling, are not affected.

and

Markup-based relationships, however, are not affected by these values, as they are solely rendering-time effects.

As the CSS Cascade spec states,

Inheritance propagates property values from parent elements to their children. The inherited value of a property on an element is the computed value of the property on the element’s parent element.

the CSS inheritance concept is also based on the document tree, not the box tree, and shouldn't be affected by any display changes.

I believe that inheriting properties from the "virtual" container that is not directly affected by them may make much sense. For example, inheriting table-specific properties like border-spacing from a non-table container like div is very useful for styling tables in the user-generated content. In my opinion, inheriting from non-rendered containers may have similar use cases, so neither the spec nor the behavior of browsers needs change.

@Loirooriol
Copy link
Contributor Author

But note inheritance is not always a document tree concept. From CSS display,

Unlike element-generated boxes, whose styles inherit strictly through the element tree, anonymous boxes (which only exist in the box tree) inherit through their box tree parentage.

And some pseudo-elements like ::first-line have a customized inheritance which doesn't respect the element tree.

Anyways, you are right there might also be some advantage in inheriting from non-rendered containers, and with at least two implementations and a near-CR spec, maybe it's not worth to change.

@tabatkins
Copy link
Member

No, inheritance is definitely not affected by display:contents, and that's very intentional. Inheritance always runs thru the element tree, except for the one case it can't (anonymous boxes). Pseudo-elements inherit from their originating element.

(Otherwise, how would display: inherit work?)

@upsuper
Copy link
Member

upsuper commented Mar 21, 2017

Pseudo-elements inherit from their originating element.

This isn't necessarily true... e.g. :backdrop defined in the Fullscreen API spec doesn't inherit from anything per that spec.

If you think that is wrong... probably an issue should be filed to that spec.

@fantasai fantasai added css-display-3 Current Work Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. labels Jan 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-display-3 Current Work
Projects
None yet
Development

No branches or pull requests

5 participants