K. @container

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

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 /* El elemento html responden a cambos en la
24 * posición de las barras de desplazamiento.
25 */
26 container-type: scroll-state;
27 /* El nombre para @container es scroller.*/
28 container-name: scroller;
29 }
30
31 main {
32 /* Los elementos main responden a cambos de
33 * tamaño. */
34 container-type: inline-size;
35 /* El nombre para @container es main.*/
36 container-name: main;
37 }
38
39 /* Reglas cuando al ancho mínimo de main es 500px.
40 */
41 @container main (min-width: 300px) {
42
43 p::first-letter {
44 font-size: 3em;
45 float: inline-start;
46 }
47
48 p {
49 clear: both;
50 }
51
52 }
53
54 /* Reglas cuando la barra de desplazamiento
55 * vertical de scroller puede moverse hacia arriba.
56 */
57 @container scroller scroll-state(scrollable: top) {
58 h1 {
59 border: solid;
60 }
61 }
62 </style>
63
64</head>
65
66<body>
67
68 <h1>@container</h1>
69
70 <main>
71
72 <p>
73 Este ejemplo usa @container.
74 </p>
75 <p>
76 Lorem ipsum dolor sit amet
77 consectetur adipisicing elit.
78 Iure, assumenda reiciendis.
79 Reprehenderit non sunt enim
80 sequi vel consequatur nostrum
81 suscipit, numquam, ipsam commodi
82 placeat quibusdam porro
83 excepturi aliquid officia
84 labore!
85 </p>
86 <p>
87 Lorem ipsum dolor sit amet
88 consectetur adipisicing elit.
89 Iure, assumenda reiciendis.
90 Reprehenderit non sunt enim
91 sequi vel consequatur nostrum
92 suscipit, numquam, ipsam commodi
93 placeat quibusdam porro
94 excepturi aliquid officia
95 labore!
96 </p>
97
98 </main>
99
100</body>
101
102</html>

Solo para los más rudos

skip_previous skip_next