Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alternative for display:contents in Chrome?

What is the alternate solution to implement the following in chrome.

display:contents;

Currently only firefox supports them in all versions.

Is there any other way to get the same features as this css tag.

enter image description here

like image 501
FAntony Avatar asked Jan 31 '18 05:01

FAntony


People also ask

Does EDGE support display contents?

Many desktop applications, such as Visual Studio Code, Microsoft Teams, and Microsoft Edge already do this: The Window Controls Overlay API does the following: Allows you to display web content over the entire surface area of the app.

How do I use display contents?

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

What is the use of display content in CSS?

The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex. Formally, the display property sets an element's inner and outer display types.


1 Answers

You can use an alternative approach, instead using display:content (that is marked as experimental at the moment) you can create a container class and add the property display:grid, and, in case the browser supports display:content use it with this code:

@supports (display: contents) {
  article { display: contents; }
}
like image 137
Antonio Baena Guerrero Avatar answered Oct 05 '22 09:10

Antonio Baena Guerrero