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
		147 ⁽²⁾	144 ⁽²⁾
		146 ⁽²⁾	143 ⁽²⁾	TP ⁽²⁾
		145 ⁽²⁾	142 ⁽²⁾	26.1 ⁽²⁾
11	141 ⁽²⁾	144 ⁽²⁾	141 ⁽²⁾	26.0 ⁽²⁾	122 ⁽²⁾
10	140 ⁽²⁾	143 ⁽²⁾	140 ⁽²⁾	18.5-18.6 ⁽²⁾	121 ⁽²⁾
9	139 ⁽²⁾	142 ⁽²⁾	139 ⁽²⁾	18.4 ⁽²⁾	120 ⁽²⁾
8	138 ⁽²⁾	141 ⁽²⁾	138 ⁽²⁾	18.3 ⁽²⁾	119 ⁽²⁾
Show all
7	137 ⁽²⁾	140 ⁽²⁾	137 ⁽²⁾	18.2 ⁽²⁾	118 ⁽²⁾
6	136 ⁽²⁾	139 ⁽²⁾	136 ⁽²⁾	18.1 ⁽²⁾	117 ⁽²⁾
5.5	135 ⁽²⁾	138 ⁽²⁾	135 ⁽²⁾	18.0 ⁽²⁾	116 ⁽²⁾
	134 ⁽²⁾	137 ⁽²⁾	134 ⁽²⁾	17.6 ⁽²⁾	115 ⁽²⁾
	133 ⁽²⁾	136 ⁽²⁾	133 ⁽²⁾	17.5 ⁽²⁾	114 ⁽²⁾
	132 ⁽²⁾	135 ⁽²⁾	132 ⁽²⁾	17.4 ⁽²⁾	113 ⁽²⁾
	131 ⁽²⁾	134 ⁽²⁾	131 ⁽²⁾	17.3 ⁽²⁾	112 ⁽²⁾
	130 ⁽²⁾	133 ⁽²⁾	130 ⁽²⁾	17.2 ⁽²⁾	111 ⁽²⁾
	129 ⁽²⁾	132 ⁽²⁾	129 ⁽²⁾	17.1 ⁽²⁾	110 ⁽²⁾
	128 ⁽²⁾	131 ⁽²⁾	128 ⁽²⁾	17.0 ⁽²⁾	109 ⁽²⁾
	127 ⁽²⁾	130 ⁽²⁾	127 ⁽²⁾	16.6 ^(2,3)	108 ⁽²⁾
	126 ⁽²⁾	129 ⁽²⁾	126 ⁽²⁾	16.5 ^(2,3)	107 ⁽²⁾
	125 ⁽²⁾	128 ⁽²⁾	125 ⁽²⁾	16.4 ^(2,3)	106 ⁽²⁾
	124 ⁽²⁾	127 ⁽²⁾	124 ⁽²⁾	16.3 ^(2,3)	105 ⁽²⁾
	123 ⁽²⁾	126 ⁽²⁾	123 ⁽²⁾	16.2 ^(2,3)	104 ⁽²⁾
	122 ⁽²⁾	125 ⁽²⁾	122 ⁽²⁾	16.1 ^(2,3)	103 ⁽²⁾
	121 ⁽²⁾	124 ⁽²⁾	121 ⁽²⁾	16.0 ^(2,3)	102 ⁽²⁾
	120 ⁽²⁾	123 ⁽²⁾	120 ⁽²⁾	15.6 ⁽¹⁾	101 ⁽²⁾
	119 ⁽²⁾	122 ⁽²⁾	119 ⁽²⁾	15.5 ⁽¹⁾	100 ⁽²⁾
	118 ⁽²⁾	121 ⁽²⁾	118 ⁽²⁾	15.4 ⁽¹⁾	99 ⁽²⁾
	117 ⁽²⁾	120 ⁽²⁾	117 ⁽²⁾	15.2-15.3 ⁽¹⁾	98 ⁽²⁾
	116 ⁽²⁾	119 ⁽²⁾	116 ⁽²⁾	15.1 ⁽¹⁾	97 ⁽²⁾
	115 ⁽²⁾	118 ⁽²⁾	115 ⁽²⁾	15 ⁽¹⁾	96 ⁽²⁾
	114 ⁽²⁾	117 ⁽²⁾	114 ⁽²⁾	14.1 ⁽¹⁾	95 ⁽²⁾
	113 ⁽²⁾	116 ⁽²⁾	113 ⁽²⁾	14 ⁽¹⁾	94 ⁽²⁾
	112 ⁽²⁾	115 ⁽²⁾	112 ⁽²⁾	13.1 ⁽¹⁾	93 ⁽²⁾
	111 ⁽²⁾	114 ⁽²⁾	111 ⁽²⁾	13 ⁽¹⁾	92 ⁽²⁾
	110 ⁽²⁾	113 ⁽²⁾	110 ⁽²⁾	12.1 ⁽¹⁾	91 ⁽²⁾
	109 ⁽²⁾	112 ⁽²⁾	109 ⁽²⁾	12 ⁽¹⁾	90 ⁽²⁾
	108 ⁽²⁾	111 ⁽²⁾	108 ⁽²⁾	11.1 ⁽¹⁾	89 ⁽²⁾
	107 ⁽²⁾	110 ⁽²⁾	107 ⁽²⁾	11	88 ⁽²⁾
	106 ⁽²⁾	109 ⁽²⁾	106 ⁽²⁾	10.1	87 ⁽²⁾
	105 ⁽²⁾	108 ⁽²⁾	105 ⁽²⁾	10	86 ⁽²⁾
	104 ⁽²⁾	107 ⁽²⁾	104 ⁽²⁾	9.1	85 ⁽²⁾
	103 ⁽²⁾	106 ⁽²⁾	103 ⁽²⁾	9	84 ⁽²⁾
	102 ⁽²⁾	105 ⁽²⁾	102 ⁽²⁾	8	83 ⁽²⁾
	101 ⁽²⁾	104 ⁽²⁾	101 ⁽²⁾	7.1	82 ⁽²⁾
	100 ⁽²⁾	103 ⁽²⁾	100 ⁽²⁾	7	81 ⁽²⁾
	99 ⁽²⁾	102 ⁽²⁾	99 ⁽²⁾	6.1	80 ⁽²⁾
	98 ⁽²⁾	101 ⁽²⁾	98 ⁽²⁾	6	79 ⁽²⁾
	97 ⁽²⁾	100 ⁽²⁾	97 ⁽²⁾	5.1	78 ⁽²⁾
	96 ⁽²⁾	99 ⁽²⁾	96 ⁽²⁾	5	77 ⁽²⁾
	95 ⁽²⁾	98 ⁽²⁾	95 ⁽²⁾	4	76 ⁽²⁾
	94 ⁽²⁾	97 ⁽²⁾	94 ⁽²⁾	3.2	75 ⁽¹⁾
	93 ⁽²⁾	96 ⁽²⁾	93 ⁽²⁾	3.1	74 ⁽¹⁾
	92 ⁽²⁾	95 ⁽²⁾	92 ⁽²⁾		73 ⁽¹⁾
	91 ⁽²⁾	94 ⁽²⁾	91 ⁽²⁾		72 ⁽¹⁾
	90 ⁽²⁾	93 ⁽²⁾	90 ⁽²⁾		71 ⁽¹⁾
	89 ⁽²⁾	92 ⁽²⁾	89 ⁽²⁾		70 ⁽¹⁾
	88 ⁽¹⁾	91 ⁽²⁾	88 ⁽¹⁾		69 ⁽¹⁾
	87 ⁽¹⁾	90 ⁽²⁾	87 ⁽¹⁾		68 ⁽¹⁾
	86 ⁽¹⁾	89 ⁽²⁾	86 ⁽¹⁾		67 ⁽¹⁾
	85 ⁽¹⁾	88 ⁽²⁾	85 ⁽¹⁾		66 ⁽¹⁾
	84 ⁽¹⁾	87 ⁽²⁾	84 ⁽¹⁾		65 ⁽¹⁾
	83 ⁽¹⁾	86 ⁽²⁾	83 ⁽¹⁾		64 ⁽¹⁾
	81 ⁽¹⁾	85 ⁽²⁾	81 ⁽¹⁾		63 ⁽¹⁾
	80 ⁽¹⁾	84 ⁽²⁾	80 ⁽¹⁾		62 ⁽¹⁾
	79 ⁽¹⁾	83 ⁽²⁾	79 ⁽¹⁾		60 ⁽¹⁾
	18	82 ⁽²⁾	78 ⁽¹⁾		58 ⁽¹⁾
	17	81 ⁽²⁾	77 ⁽¹⁾		57 ⁽¹⁾
	16	80 ⁽²⁾	76 ⁽¹⁾		56 ⁽¹⁾
	15	79 ⁽²⁾	75 ⁽¹⁾		55 ⁽¹⁾
	14	78 ⁽²⁾	74 ⁽¹⁾		54 ⁽¹⁾
	13	77 ⁽²⁾	73 ⁽¹⁾		53 ⁽¹⁾
	12	76 ⁽²⁾	72 ⁽¹⁾		52 ⁽¹⁾
		75 ⁽²⁾	71 ⁽¹⁾		51
		74 ⁽²⁾	70 ⁽¹⁾		50
		73 ⁽²⁾	69 ⁽¹⁾		49
		72 ⁽²⁾	68 ⁽¹⁾		48
		71 ⁽²⁾	67 ⁽¹⁾		47
		70 ⁽²⁾	66 ⁽¹⁾		46
		69 ⁽²⁾	65 ⁽¹⁾		45
		68 ⁽²⁾	64 ⁽¹⁾		44
		67 ⁽²⁾	63 ⁽¹⁾		43
		66 ⁽²⁾	62 ⁽¹⁾		42
		65 ⁽²⁾	61 ⁽¹⁾		41
		64 ⁽²⁾	60 ⁽¹⁾		40
		63 ⁽²⁾	59 ⁽¹⁾		39
		62 ⁽²⁾	58 ⁽¹⁾		38
		61 ⁽¹⁾	57		37
		60 ⁽¹⁾	56		36
		59 ⁽¹⁾	55		35
		58 ⁽¹⁾	54		34
		57 ⁽¹⁾	53		33
		56 ⁽¹⁾	52		32
		55 ⁽¹⁾	51		31
		54 ⁽¹⁾	50		30
		53 ⁽¹⁾	49		29
		52 ⁽¹⁾	48		28
		51 ⁽¹⁾	47		27
		50 ⁽¹⁾	46		26
		49 ⁽¹⁾	45		25
		48 ⁽¹⁾	44		24
		47 ⁽¹⁾	43		23
		46 ⁽¹⁾	42		22
		45 ⁽¹⁾	41		21
		44 ⁽¹⁾	40		20
		43 ⁽¹⁾	39		19
		42 ⁽¹⁾	38		18
		41 ⁽¹⁾	37		17
		40 ⁽¹⁾	36		16
		39 ⁽¹⁾	35		15
		38 ⁽¹⁾	34		12.1
		37 ⁽¹⁾	33		12
		36	32		11.6
		35	31		11.5
		34	30		11.1
		33	29		11
		32	28		10.6
		31	27		10.5
		30	26		10.0-10.1
		29	25		9.5-9.6
		28	24		9
		27	23
		26	22
		25	21
		24	20
		23	19
		22	18
		21	17
		20	16
		19	15
		18	14
		17	13
		16	12
		15	11
		14	10
		13	9
		12	8
		11	7
		10	6
		9	5
		8	4
		7
		6
		5
		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
26.1
26.0	all	141 ⁽²⁾	10	80 ⁽²⁾	141 ⁽²⁾	143 ⁽²⁾	11	15.5 ⁽¹⁾	28 ⁽²⁾	14.9 ⁽¹⁾	13.52 ⁽²⁾	3.0-3.1 ⁽²⁾
18.5-18.6		4.4.3-4.4.4	7	12.1			10		27 ⁽²⁾			2.5 ⁽¹⁾
18.4		4.4		12					26 ⁽²⁾
18.3		4.2-4.3		11.5					25 ⁽²⁾
Show all
18.2		4.1		11.1					24 ⁽²⁾
18.1		4		11					23 ⁽²⁾
18.0		3		10					22 ⁽²⁾
17.6-17.7		2.3							21 ⁽²⁾
17.5		2.2							20 ⁽²⁾
17.4		2.1							19.0 ⁽²⁾
17.3									18.0 ⁽²⁾
17.2									17.0 ⁽²⁾
17.1									16.0 ⁽²⁾
17.0									15.0 ⁽²⁾
16.6-16.7 ⁽³⁾									14.0 ⁽¹⁾
16.5 ⁽³⁾									13.0 ⁽¹⁾
16.4 ⁽³⁾									12.0 ⁽¹⁾
16.3 ⁽³⁾									11.1-11.2 ⁽¹⁾
16.2 ⁽³⁾									10.1 ⁽¹⁾
16.1 ⁽³⁾									9.2 ⁽¹⁾
16.0 ^(2,3)									8.2
15.6-15.8 ⁽²⁾									7.2-7.4
15.5 ⁽²⁾									6.2-6.4
15.4 ⁽²⁾									5.0-5.4
15.2-15.3 ⁽²⁾									4
15.0-15.1 ⁽²⁾
14.5-14.8 ⁽²⁾
14.0-14.4 ⁽²⁾
13.4-13.7 ⁽²⁾
13.3 ⁽¹⁾
13.2 ⁽¹⁾
13.0-13.1 ⁽¹⁾
12.2-12.5 ⁽¹⁾
12.0-12.1 ⁽¹⁾
11.3-11.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

Partial support refers to severe implementation bugs that renders content inaccessible for many element types.
Buttons are not accessible with display: contents applied. See issues for Chromium, Firefox, and WebKit
HTML tables and nodes with ARIA roles directory, grid, treegrid, table, row, gridcell, cell, columnheader, tree, and treeitem are not accessible with display: contents applied. See WebKit bugs 239478, 239479, 239478, and 257458

Bugs

Safari on iOS 10 and 11, and Safari 11 renders display:contents as display:inline. @supports will also report as true.
Safari on Mac and iOS had bugs related to toggling between display: none and ::before/::after elements not filling their grid cell. These were fixed in version 13.4

Resources

Vanishing boxes with display contents

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