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
			103
		100	102
		99	101	TP ⁽²⁾
11	99	98	100	15.4 ⁽²⁾	83
10	98	97	99	15.2-15.3 ⁽²⁾	82
9	97	96	98	15.1 ⁽²⁾	81
8	96	95	97	15 ⁽²⁾	80
Show all
7	95	94	96	14.1 ⁽²⁾	79
6	94	93	95	14 ⁽²⁾	78
5.5	93	92	94	13.1 ⁽²⁾	77
	92	91	93	13 ^(2,3)	76
	91	90	92	12.1 ^(2,3)	75 ⁽²⁾
	90	89	91	12 ^(2,3)	74 ⁽²⁾
	89	88	90	11.1 ^(2,3)	73 ⁽²⁾
	88 ⁽²⁾	87	89	11	72 ⁽²⁾
	87 ⁽²⁾	86	88 ⁽²⁾	10.1	71 ⁽²⁾
	86 ⁽²⁾	85	87 ⁽²⁾	10	70 ⁽²⁾
	85 ⁽²⁾	84	86 ⁽²⁾	9.1	69 ⁽²⁾
	84 ⁽²⁾	83	85 ⁽²⁾	9	68 ⁽²⁾
	83 ⁽²⁾	82	84 ⁽²⁾	8	67 ⁽²⁾
	81 ⁽²⁾	81	83 ⁽²⁾	7.1	66 ⁽²⁾
	80 ⁽²⁾	80	81 ⁽²⁾	7	65 ⁽²⁾
	79 ⁽²⁾	79	80 ⁽²⁾	6.1	64 ⁽²⁾
	18	78	79 ⁽²⁾	6	63 ⁽²⁾
	17	77	78 ⁽²⁾	5.1	62 ⁽²⁾
	16	76	77 ⁽²⁾	5	60 ⁽²⁾
	15	75	76 ⁽²⁾	4	58 ⁽²⁾
	14	74	75 ⁽²⁾	3.2	57 ⁽²⁾
	13	73	74 ⁽²⁾	3.1	56 ⁽²⁾
	12	72	73 ⁽²⁾		55 ⁽²⁾
		71	72 ⁽²⁾		54 ⁽²⁾
		70	71 ⁽²⁾		53 ⁽²⁾
		69	70 ⁽²⁾		52 ⁽²⁾
		68	69 ⁽²⁾		51
		67	68 ⁽²⁾		50
		66	67 ⁽²⁾		49
		65	66 ⁽²⁾		48
		64	65 ⁽²⁾		47
		63	64 ⁽¹⁾		46
		62	63 ⁽¹⁾		45
		61 ⁽²⁾	62 ⁽¹⁾		44
		60 ⁽²⁾	61 ⁽¹⁾		43
		59 ⁽²⁾	60 ⁽¹⁾		42
		58 ⁽²⁾	59 ⁽¹⁾		41
		57 ⁽²⁾	58 ⁽¹⁾		40
		56 ⁽²⁾	57		39
		55 ⁽²⁾	56		38
		54 ⁽²⁾	55		37
		53 ⁽²⁾	54		36
		52 ⁽²⁾	53		35
		51 ⁽²⁾	52		34
		50 ⁽²⁾	51		33
		49 ⁽²⁾	50		32
		48 ⁽²⁾	49		31
		47 ⁽²⁾	48		30
		46 ⁽²⁾	47		29
		45 ⁽²⁾	46		28
		44 ⁽²⁾	45		27
		43 ⁽²⁾	44		26
		42 ⁽²⁾	43		25
		41 ⁽²⁾	42		24
		40 ⁽²⁾	41		23
		39 ⁽²⁾	40		22
		38 ⁽²⁾	39		21
		37 ⁽²⁾	38		20
		36	37		19
		35	36		18
		34	35		17
		33	34		16
		32	33		15
		31	32		12.1
		30	31		12
		29	30		11.6
		28	29		11.5
		27	28		11.1
		26	27		11
		25	26		10.6
		24	25		10.5
		23	24		10.0-10.1
		22	23		9.5-9.6
		21	22		9
		20	21
		19	20
		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.4 ⁽²⁾	all	99	10	64	100	98	11	12.12	16.0	10.4 ⁽²⁾	7.12	2.5 ⁽²⁾
15.2-15.3 ⁽²⁾		4.4.3-4.4.4	7	12.1			10		15.0
15.0-15.1 ⁽²⁾		4.4		12					14.0 ⁽²⁾
14.5-14.8 ⁽²⁾		4.2-4.3		11.5					13.0 ⁽²⁾
Show all
14.0-14.4 ⁽²⁾		4.1		11.1					12.0 ⁽²⁾
13.4-13.7 ⁽²⁾		4		11					11.1-11.2 ⁽²⁾
13.3 ^(2,3)		3		10					10.1 ⁽²⁾
13.2 ^(2,3)		2.3							9.2 ⁽²⁾
13.0-13.1 ^(2,3)		2.2							8.2
12.2-12.5 ^(2,3)		2.1							7.2-7.4
12.0-12.1 ^(2,3)									6.2-6.4
11.3-11.4 ^(2,3)									5.0-5.4
11.0-11.2									4
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 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

Name	Support Tables
Version
Badge
Last Updated	2022-04-11T17:49:08Z