W3cubDocs

CSS Container Style Queries

Style queries in Container Queries provide a way to query the current styling of a container, and conditionally apply additional CSS to the contents of that container.

Spec	https://www.w3.org/TR/css-contain-3/
Status	W3C Working Draft

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 ^(2,3)	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	108 ⁽²⁾
	126 ⁽²⁾	129	126 ⁽²⁾	16.5	107 ⁽²⁾
	125 ⁽²⁾	128	125 ⁽²⁾	16.4	106 ⁽²⁾
	124 ⁽²⁾	127	124 ⁽²⁾	16.3	105 ⁽²⁾
	123 ⁽²⁾	126	123 ⁽²⁾	16.2	104 ⁽²⁾
	122 ⁽²⁾	125	122 ⁽²⁾	16.1	103 ⁽²⁾
	121 ⁽²⁾	124	121 ⁽²⁾	16.0	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 ^(2,3)		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									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

Enabled through the "Experimental Web Platform features" flag in chrome://flags
Partial support refers to only working with CSS custom property values in the style() query
The root element cannot be a container

Bugs

In Safari 18, the root element cannot be a container. See bug 271040.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/css-container-queries-style