CODEWITHSUNDEEP
csssafaridisplay
Kid
Kid

Reputation: 1240

CSS display:content not working in Safari

I've found that display:content doesn't work in Safari. What is the alternative of it for Safari? I found a solution here. But the answer was down voted.

Upvotes: 0

Views: 5118

Answers (1)

Moob
Moob

Reputation: 16204

I imagine that you're trying to use :content incorrectly, or are trying to use a pseudo on an element that doesn't support them.

Regarding `display:contents` declaration:

This is not well supported. Note that as documented in https://caniuse.com/#feat=css-display-contents:

iOS Safari 10 and 11, and Safari 11 renders display:contents as display:inline.

Also note that according to https://drafts.csswg.org/css-display/#box-generation:

Note: As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and property inheritance, are not affected. As of writing, however, this is not implemented correctly in major browsers, so using this feature on the Web must be done with care as it can prevent accessibility tools from accessing the element’s semantics.

Regarding the `content:` property:

This is well supported but can only be applied to ::before and ::after pseudo-elements. Some elements (such as inputs) will not support pseudo elements. See: https://developer.mozilla.org/en-US/docs/Web/CSS/content for more info.

Demo:

Here's a very basic working example (tested in Chrome and Safari 13) of both the content: property and the contents display value.

#somediv:before {
  content: "(prepended) ";
  color: red;
}

#somediv:after {
  content: " (appended)";
  color: blue;
}

#someotherdiv {/* pointless styles */
  display:contents;
  border:2px solid red;
  background:yellow;
}

#someotherdiv p {
  color:purple;
}
<div id="somediv">
  Example of content on pseudos.
</div>


<div id="someotherdiv">
  <p>Example of display:contents. Note that parent container isn't rendered?</p>
</div>

Upvotes: 1

Related Questions