W3cubDocs

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://w3c.github.io/csswg-drafts/css-display/
Status	W3C Candidate Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
			108
		107	107	TP ⁽⁵⁾
		106	106	16.1 ⁽⁵⁾
11	105	105	105	16.0 ^(4,5)	91
10	104	104	104	15.6 ⁽²⁾	90
9	103	103	103	15.5 ⁽²⁾	89
8	102	102	102	15.4 ⁽²⁾	88
Show all
7	101	101	101	15.2-15.3 ⁽²⁾	87
6	100	100	100	15.1 ⁽²⁾	86
5.5	99	99	99	15 ⁽²⁾	85
	98	98	98	14.1 ⁽²⁾	84
	97	97	97	14 ⁽²⁾	83
	96	96	96	13.1 ⁽²⁾	82
	95	95	95	13 ^(2,3)	81
	94	94	94	12.1 ^(2,3)	80
	93	93	93	12 ^(2,3)	79
	92	92	92	11.1 ^(2,3)	78
	91	91	91	11	77
	90	90	90	10.1	76
	89	89	89	10	75 ⁽²⁾
	88 ⁽²⁾	88	88 ⁽²⁾	9.1	74 ⁽²⁾
	87 ⁽²⁾	87	87 ⁽²⁾	9	73 ⁽²⁾
	86 ⁽²⁾	86	86 ⁽²⁾	8	72 ⁽²⁾
	85 ⁽²⁾	85	85 ⁽²⁾	7.1	71 ⁽²⁾
	84 ⁽²⁾	84	84 ⁽²⁾	7	70 ⁽²⁾
	83 ⁽²⁾	83	83 ⁽²⁾	6.1	69 ⁽²⁾
	81 ⁽²⁾	82	81 ⁽²⁾	6	68 ⁽²⁾
	80 ⁽²⁾	81	80 ⁽²⁾	5.1	67 ⁽²⁾
	79 ⁽²⁾	80	79 ⁽²⁾	5	66 ⁽²⁾
	18	79	78 ⁽²⁾	4	65 ⁽²⁾
	17	78	77 ⁽²⁾	3.2	64 ⁽²⁾
	16	77	76 ⁽²⁾	3.1	63 ⁽²⁾
	15	76	75 ⁽²⁾		62 ⁽²⁾
	14	75	74 ⁽²⁾		60 ⁽²⁾
	13	74	73 ⁽²⁾		58 ⁽²⁾
	12	73	72 ⁽²⁾		57 ⁽²⁾
		72	71 ⁽²⁾		56 ⁽²⁾
		71	70 ⁽²⁾		55 ⁽²⁾
		70	69 ⁽²⁾		54 ⁽²⁾
		69	68 ⁽²⁾		53 ⁽²⁾
		68	67 ⁽²⁾		52 ⁽²⁾
		67	66 ⁽²⁾		51
		66	65 ⁽²⁾		50
		65	64 ⁽¹⁾		49
		64	63 ⁽¹⁾		48
		63	62 ⁽¹⁾		47
		62	61 ⁽¹⁾		46
		61 ⁽²⁾	60 ⁽¹⁾		45
		60 ⁽²⁾	59 ⁽¹⁾		44
		59 ⁽²⁾	58 ⁽¹⁾		43
		58 ⁽²⁾	57		42
		57 ⁽²⁾	56		41
		56 ⁽²⁾	55		40
		55 ⁽²⁾	54		39
		54 ⁽²⁾	53		38
		53 ⁽²⁾	52		37
		52 ⁽²⁾	51		36
		51 ⁽²⁾	50		35
		50 ⁽²⁾	49		34
		49 ⁽²⁾	48		33
		48 ⁽²⁾	47		32
		47 ⁽²⁾	46		31
		46 ⁽²⁾	45		30
		45 ⁽²⁾	44		29
		44 ⁽²⁾	43		28
		43 ⁽²⁾	42		27
		42 ⁽²⁾	41		26
		41 ⁽²⁾	40		25
		40 ⁽²⁾	39		24
		39 ⁽²⁾	38		23
		38 ⁽²⁾	37		22
		37 ⁽²⁾	36		21
		36	35		20
		35	34		19
		34	33		18
		33	32		17
		32	31		16
		31	30		15
		30	29		12.1
		29	28		12
		28	27		11.6
		27	26		11.5
		26	25		11.1
		25	24		11
		24	23		10.6
		23	22		10.5
		22	21		10.0-10.1
		21	20		9.5-9.6
		20	19		9
		19	18
		18	17
		17	16
		16	15
		15	14
		14	13
		13	12
		12	11
		11	10
		10	9
		9	8
		8	7
		7	6
		6	5
		5	4
		4
		3.6
		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
16.1 ⁽⁵⁾
16.0 ^(4,5)	all	105	10	64	105	104	11	13.4 ⁽²⁾	18.0	13.1 ⁽²⁾	13.18	2.5 ⁽²⁾
15.6 ⁽²⁾		4.4.3-4.4.4	7	12.1			10		17.0
15.5 ⁽²⁾		4.4		12					16.0
15.4 ⁽²⁾		4.2-4.3		11.5					15.0
Show all
15.2-15.3 ⁽²⁾		4.1		11.1					14.0 ⁽²⁾
15.0-15.1 ⁽²⁾		4		11					13.0 ⁽²⁾
14.5-14.8 ⁽²⁾		3		10					12.0 ⁽²⁾
14.0-14.4 ⁽²⁾		2.3							11.1-11.2 ⁽²⁾
13.4-13.7 ⁽²⁾		2.2							10.1 ⁽²⁾
13.3 ^(2,3)		2.1							9.2 ⁽²⁾
13.2 ^(2,3)									8.2
13.0-13.1 ^(2,3)									7.2-7.4
12.2-12.5 ^(2,3)									6.2-6.4
12.0-12.1 ^(2,3)									5.0-5.4
11.3-11.4 ^(2,3)									4
11.0-11.2
10.3
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 through the "experimental Web Platform features" flag in chrome://flags.
Partial support refers to severe implementation bug that renders content inaccessible.
Buggy support. See 188259 and 193567
Buttons are not accessible with display: contents applied. See 243486
HTML Tables are not accessible with display: contents applied. See 239479 and 239478

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