K. `@container`

Salida


1	<!DOCTYPE html>
2	<html lang="es">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>@container</title>
8	<meta name="viewport"
9	content="width=device-width">
10
11	<style>
12	body {
13	margin-top: 0;
14	}
15
16	h1 {
17	position: sticky;
18	top: 0;
19	margin: 0;
20	}
21
22	html {
23	container-type: scroll-state;
24	container-name: scroller;
25	}
26
27	main {
28	container-type: inline-size;
29	container-name: main;
30	}
31
32	@container main (min-width: 500px) {
33
34	p::first-letter {
35	font-size: 3em;
36	float: inline-start;
37	}
38
39	p {
40	clear: both;
41	}
42
43	}
44
45	@container scroller scroll-state(scrollable: top) {
46	h1 {
47	border: solid;
48	}
49	}
50	</style>
51
52	</head>
53
54	<body>
55
56	<h1>@container</h1>
57
58	<main>
59
60	<p>
61	Este ejemplo usa @container.
62	</p>
63	<p>
64	Lorem ipsum dolor sit amet
65	consectetur adipisicing elit.
66	Iure, assumenda reiciendis.
67	Reprehenderit non sunt enim
68	sequi vel consequatur nostrum
69	suscipit, numquam, ipsam commodi
70	placeat quibusdam porro
71	excepturi aliquid officia
72	labore!
73	</p>
74	<p>
75	Lorem ipsum dolor sit amet
76	consectetur adipisicing elit.
77	Iure, assumenda reiciendis.
78	Reprehenderit non sunt enim
79	sequi vel consequatur nostrum
80	suscipit, numquam, ipsam commodi
81	placeat quibusdam porro
82	excepturi aliquid officia
83	labore!
84	</p>
85
86	</main>
87
88	</body>
89
90	</html>