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

Spec	https://drafts.csswg.org/css-display/
Status	W3C Working Draft

IE	Edge	Firefox	Chrome	Safari	Opera
			98
		95	97
		94	96	TP ⁽²⁾
11	95	93	95	15 ⁽²⁾	80
10	94	92	94	14.1 ⁽²⁾	79
9	93	91	93	14 ⁽²⁾	78
8	92	90	92	13.1 ⁽²⁾	77
Show all
7	91	89	91	13 ^(2,3)	76
6	90	88	90	12.1 ^(2,3)	75 ⁽²⁾
5.5	89	87	89	12 ^(2,3)	74 ⁽²⁾
	88 ⁽²⁾	86	88 ⁽²⁾	11.1 ^(2,3)	73 ⁽²⁾
	87 ⁽²⁾	85	87 ⁽²⁾	11	72 ⁽²⁾
	86 ⁽²⁾	84	86 ⁽²⁾	10.1	71 ⁽²⁾
	85 ⁽²⁾	83	85 ⁽²⁾	10	70 ⁽²⁾
	84 ⁽²⁾	82	84 ⁽²⁾	9.1	69 ⁽²⁾
	83 ⁽²⁾	81	83 ⁽²⁾	9	68 ⁽²⁾
	81 ⁽²⁾	80	81 ⁽²⁾	8	67 ⁽²⁾
	80 ⁽²⁾	79	80 ⁽²⁾	7.1	66 ⁽²⁾
	79 ⁽²⁾	78	79 ⁽²⁾	7	65 ⁽²⁾
	18	77	78 ⁽²⁾	6.1	64 ⁽²⁾
	17	76	77 ⁽²⁾	6	63 ⁽²⁾
	16	75	76 ⁽²⁾	5.1	62 ⁽²⁾
	15	74	75 ⁽²⁾	5	60 ⁽²⁾
	14	73	74 ⁽²⁾	4	58 ⁽²⁾
	13	72	73 ⁽²⁾	3.2	57 ⁽²⁾
	12	71	72 ⁽²⁾	3.1	56 ⁽²⁾
		70	71 ⁽²⁾		55 ⁽²⁾
		69	70 ⁽²⁾		54 ⁽²⁾
		68	69 ⁽²⁾		53 ⁽²⁾
		67	68 ⁽²⁾		52 ⁽²⁾
		66	67 ⁽²⁾		51
		65	66 ⁽²⁾		50
		64	65 ⁽²⁾		49
		63	64 ⁽¹⁾		48
		62	63 ⁽¹⁾		47
		61 ⁽²⁾	62 ⁽¹⁾		46
		60 ⁽²⁾	61 ⁽¹⁾		45
		59 ⁽²⁾	60 ⁽¹⁾		44
		58 ⁽²⁾	59 ⁽¹⁾		43
		57 ⁽²⁾	58 ⁽¹⁾		42
		56 ⁽²⁾	57		41
		55 ⁽²⁾	56		40
		54 ⁽²⁾	55		39
		53 ⁽²⁾	54		38
		52 ⁽²⁾	53		37
		51 ⁽²⁾	52		36
		50 ⁽²⁾	51		35
		49 ⁽²⁾	50		34
		48 ⁽²⁾	49		33
		47 ⁽²⁾	48		32
		46 ⁽²⁾	47		31
		45 ⁽²⁾	46		30
		44 ⁽²⁾	45		29
		43 ⁽²⁾	44		28
		42 ⁽²⁾	43		27
		41 ⁽²⁾	42		26
		40 ⁽²⁾	41		25
		39 ⁽²⁾	40		24
		38 ⁽²⁾	39		23
		37 ⁽²⁾	38		22
		36	37		21
		35	36		20
		34	35		19
		33	34		18
		32	33		17
		31	32		16
		30	31		15
		29	30		12.1
		28	29		12
		27	28		11.6
		26	27		11.5
		25	26		11.1
		24	25		11
		23	24		10.6
		22	23		10.5
		21	22		10.0-10.1
		20	21		9.5-9.6
		19	20		9
		18	19
		17	18
		16	17
		15	16
		14	15
		13	14
		12	13
		11	12
		10	11
		9	10
		8	9
		7	8
		6	7
		5	6
		4	5
		3.6	4
		3.5
		3
		2

Safari on iOS	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser	KaiOS Browser
15 ⁽²⁾	all	94	10	64	94	92	11	12.12	15.0	10.4 ⁽²⁾	7.12	2.5 ⁽²⁾
14.5-14.8 ⁽²⁾		4.4.3-4.4.4	7	12.1			10		14.0 ⁽²⁾
14.0-14.4 ⁽²⁾		4.4		12					13.0 ⁽²⁾
13.4-13.7 ⁽²⁾		4.2-4.3		11.5					12.0 ⁽²⁾
Show all
13.3 ^(2,3)		4.1		11.1					11.1-11.2 ⁽²⁾
13.2 ^(2,3)		4		11					10.1 ⁽²⁾
13.0-13.1 ^(2,3)		3		10					9.2 ⁽²⁾
12.2-12.5 ^(2,3)		2.3							8.2
12.0-12.1 ^(2,3)		2.2							7.2-7.4
11.3-11.4 ^(2,3)		2.1							6.2-6.4
11.0-11.2									5.0-5.4
10.3									4
10.0-10.2
9.3
9.0-9.2
8.1-8.4
8
7.0-7.1
6.0-6.1
5.0-5.1
4.2-4.3
4.0-4.1
3.2

Notes

Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags
Partial support refers to severe implementation bug that renders the content inaccessible.
Safari support is buggy, see WebKit bug 188259 & WebKit bug 193567

Bugs

iOS Safari 10 and 11, and Safari 11 renders display:contents as display:inline. @supports will also report as true.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-display-contents