Reglas CSS `@`

Articles

Reglas CSS `@`

Este artículo explica las reglas @ de CSS.

Puedes aprender sobre el uso y cómo escribir reglas @ como @import y @media.

YouTube Video

HTML para vista previa

css-at-rule.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS At Rules</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-at-rule.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS At(@) Rules</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS At(@) Rules</h2></header>
 19        <article>
 20            <h3>@import</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24@import url('styles.css');
 25</pre>
 26            </section>
 27        </article>
 28        <article>
 29            <h3>@media</h3>
 30            <section>
 31                <header><h4>CSS</h4></header>
 32<pre class="sample">
 33@media screen and (max-width: 600px) {
 34    body {
 35        background-color: lightblue;
 36    }
 37}
 38</pre>
 39            </section>
 40        </article>
 41        <article>
 42            <h3>@media Example(Screen Width)</h3>
 43            <section>
 44                <header><h4>CSS</h4></header>
 45<pre class="sample">
 46@media (min-width: 600px) {
 47    body {
 48        background-color: lightblue;
 49    }
 50}
 51@media (max-width: 599px) {
 52    body {
 53        background-color: lightpink;
 54    }
 55}
 56</pre>
 57            </section>
 58        </article>
 59        <article>
 60            <h3>@media Example(Orientation)</h3>
 61            <section>
 62                <header><h4>CSS</h4></header>
 63<pre class="sample">
 64@media (orientation: portrait) {
 65    body {
 66        font-size: 18px;
 67    }
 68}
 69@media (orientation: landscape) {
 70    body {
 71        font-size: 16px;
 72    }
 73}
 74</pre>
 75            </section>
 76        </article>
 77        <article>
 78            <h3>@media Example(Resolution)</h3>
 79            <section>
 80                <header><h4>CSS</h4></header>
 81<pre class="sample">
 82@media (min-resolution: 2dppx) {
 83    body {
 84        background-image: url('high-res-image.png');
 85    }
 86}
 87</pre>
 88            </section>
 89        </article>
 90        <article>
 91            <h3>@media Example(AND Condition)</h3>
 92            <section>
 93                <header><h4>CSS</h4></header>
 94<pre class="sample">
 95@media (min-width: 600px) and (orientation: portrait) {
 96    body {
 97        background-color: lightgreen;
 98    }
 99}
100</pre>
101            </section>
102        </article>
103        <article>
104            <h3>@media Example(OR Condition)</h3>
105            <section>
106                <header><h4>CSS</h4></header>
107<pre class="sample">
108@media (max-width: 400px), (orientation: landscape) {
109    body {
110        color: gray;
111    }
112}
113</pre>
114            </section>
115        </article>
116        <article>
117            <h3>@media Example(NOT Condition)</h3>
118            <section>
119                <header><h4>CSS</h4></header>
120<pre class="sample">
121@media not all and (min-width: 600px) {
122    body {
123        font-size: 14px;
124    }
125}
126</pre>
127            </section>
128        </article>
129        <article>
130            <h3>@font-face</h3>
131            <section>
132                <header><h4>CSS</h4></header>
133<pre class="sample">
134@font-face {
135  font-family: 'CustomFont';
136  src: url('customfont.woff2') format('woff2'),
137       url('customfont.woff') format('woff');
138}
139</pre>
140            </section>
141        </article>
142        <article>
143            <h3>@keyframes</h3>
144            <section>
145                <header><h4>CSS</h4></header>
146<pre class="sample">
147@keyframes slidein {
148    from {
149        transform: translateX(100%);
150    }
151    to {
152        transform: translateX(0%);
153    }
154}
155
156div {
157    animation: slidein 2s ease-in-out;
158}
159</pre>
160            </section>
161        </article>
162        <article>
163            <h3>@supports</h3>
164            <section>
165                <header><h4>CSS</h4></header>
166<pre class="sample">
167@supports (display: grid) {
168    .container {
169        display: grid;
170    }
171}
172</pre>
173            </section>
174        </article>
175        <article>
176            <h3>@page</h3>
177            <section>
178                <header><h4>CSS</h4></header>
179<pre class="sample">
180@page {
181    size: A4;
182    margin: 2cm;
183}
184</pre>
185            </section>
186        </article>
187        <article>
188            <h3>@charset</h3>
189            <section>
190                <header><h4>CSS</h4></header>
191<pre class="sample">
192@charset "UTF-8";
193</pre>
194            </section>
195        </article>
196        <article>
197            <h3>@layer</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201@layer reset {
202    h1 {
203        margin: 0;
204    }
205}
206@layer base {
207    h1 {
208        font-size: 24px;
209        color: blue;
210    }
211}
212@layer theme {
213    h1 {
214        color: red;
215    }
216}
217</pre>
218                <header><h4>HTML</h4></header>
219<pre>
220&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
221&lt;p&gt;
222    This page demonstrates how to apply styles to
223    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
224&lt;/p&gt;
225</pre>
226                <header><h4>HTML+CSS</h4></header>
227                <section class="sample-view">
228                    <h1>CSS Layer Test</h1>
229                    <p>
230                        This page demonstrates how to apply styles to
231                        the <code>&lt;h1&gt;</code> element using CSS layers.
232                    </p>
233                </section>
234            </section>
235        </article>
236        <article>
237            <h3>@layer with order</h3>
238            <section>
239                <header><h4>CSS</h4></header>
240<pre class="sample">
241@layer theme, base, reset;
242
243@layer reset {
244    h1 {
245        margin: 0;
246    }
247}
248@layer base {
249    h1 {
250        font-size: 24px;
251        color: blue;
252    }
253}
254@layer theme {
255    h1 {
256        color: red;
257    }
258}
259</pre>
260                <header><h4>HTML</h4></header>
261<pre>
262&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
263&lt;p&gt;
264    This page demonstrates how to apply styles to
265    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
266&lt;/p&gt;
267</pre>
268                <header><h4>HTML+CSS</h4></header>
269                <section class="sample-view">
270                    <h1>CSS Layer Test</h1>
271                    <p>
272                        This page demonstrates how to apply styles to
273                        the <code>&lt;h1&gt;</code> element using CSS layers.
274                    </p>
275                </section>
276            </section>
277        </article>
278        <article>
279            <h3>@import &amp; @layer</h3>
280            <section>
281                <header><h4>CSS</h4></header>
282<pre class="sample">
283@import url('css/reset.css') layer(reset);
284@import url('css/base.css') layer(base);
285@import url('css/theme.css') layer(theme);
286</pre>
287                <header><h4>HTML</h4></header>
288<pre>
289&lt;h1&gt;CSS Layer Test&lt;/h1&gt;
290&lt;p&gt;
291    This page demonstrates how to apply styles to
292    the &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; element using CSS layers.
293&lt;/p&gt;
294</pre>
295                <header><h4>HTML+CSS</h4></header>
296                <section class="sample-view">
297                    <h1>CSS Layer Test</h1>
298                    <p>
299                        This page demonstrates how to apply styles to
300                        the <code>&lt;h1&gt;</code> element using CSS layers.
301                    </p>
302                </section>
303            </section>
304        </article>
305    </main>
306</body>
307</html>

Reglas CSS `@`

Las reglas @ de CSS (at-rules) son instrucciones especiales usadas para controlar el comportamiento y las condiciones de aplicación de las hojas de estilo. A diferencia de las propiedades normales de CSS, las reglas @ aplican estilos o importan recursos externos de manera condicional. Las reglas @ representativas incluyen @media, @import y @keyframes, entre otras.

Tipos de Reglas `@` Ejemplares

`@import`

1@import url('styles.css');

@import se usa para importar otros archivos CSS en la hoja de estilo actual. Esto permite la reutilización sencilla de archivos CSS externos.

Puntos:

@import debe escribirse al principio de la hoja de estilo.
Debe evitarse en proyectos grandes debido a su impacto en el rendimiento.

`@media`

1@media screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}

@media utiliza consultas de medios para aplicar estilos basados en condiciones específicas (como el ancho de pantalla, resolución, etc.). Se usa frecuentemente en la implementación de diseño adaptable.

Condiciones Comúnmente Utilizadas

Las siguientes son condiciones comunes que se usan frecuentemente en consultas de medios.

Condiciones basadas en el ancho

 1@media (min-width: 600px) {
 2    body {
 3        background-color: lightblue;
 4    }
 5}
 6@media (max-width: 599px) {
 7    body {
 8        background-color: lightpink;
 9    }
10}

Ancho mínimo (min-width) aplica estilos cuando el ancho es igual o mayor al valor especificado.
Ancho máximo (max-width) aplica estilos cuando el ancho es igual o menor al valor especificado.

Orientación del dispositivo (`orientation`)

 1@media (orientation: portrait) {
 2    body {
 3        font-size: 18px;
 4    }
 5}
 6@media (orientation: landscape) {
 7    body {
 8        font-size: 16px;
 9    }
10}

La orientación del dispositivo (orientation) puede configurarse como vertical (portrait) o horizontal (landscape).

Resolución (`resolution`)

1@media (min-resolution: 2dppx) {
2    body {
3        background-image: url('high-res-image.png');
4    }
5}

Se pueden aplicar estilos basados en la resolución (resolution).
En este ejemplo, se especifica una imagen de fondo de alta resolución para pantallas de alta resolución.

Combinando condiciones

Las consultas de medios también pueden combinar múltiples condiciones.

Condición AND (`and`)

1@media (min-width: 600px) and (orientation: portrait) {
2    body {
3        background-color: lightgreen;
4    }
5}

La condición AND aplica estilos cuando se cumplen todas las condiciones.
En este ejemplo, cuando el ancho de la pantalla es 600px o mayor y está en orientación vertical, el color de fondo del body se establece en verde claro.

Condición OR (`,`)

1@media (max-width: 400px), (orientation: landscape) {
2    body {
3        color: gray;
4    }
5}

La condición OR aplica estilos cuando se cumple cualquier condición.
En este ejemplo, cuando el ancho de la pantalla es de 400px o menos, o está en orientación horizontal, el color del texto del body se establece en gris.

Condición NOT (`not`)

1@media not all and (min-width: 600px) {
2    body {
3        font-size: 14px;
4    }
5}

La condición NOT aplica estilos cuando no se cumple la condición.
En este ejemplo, para todos los dispositivos, cuando el ancho de la pantalla no es 600px o mayor, el tamaño de fuente del body se establece en 14px.

`@font-face`

1@font-face {
2  font-family: 'CustomFont';
3  src: url('customfont.woff2') format('woff2'),
4       url('customfont.woff') format('woff');
5}

@font-face se usa para definir fuentes web. Con esta regla, se pueden descargar y aplicar fuentes externas en una página web.

Se pueden usar fuentes personalizadas en lugar de depender de fuentes estándar.
Es necesario prestar atención al tamaño del archivo de la fuente.

`@keyframes`

 1@keyframes slidein {
 2  from {
 3    transform: translateX(100%);
 4  }
 5  to {
 6    transform: translateX(0%);
 7  }
 8}
 9
10div {
11  animation: slidein 2s ease-in-out;
12}

@keyframes se usa para crear animaciones en CSS. Los estilos pueden especificarse en cada paso de una animación.

Permite un control detallado de las animaciones.
Se utiliza junto con la propiedad animation.

`@supports`

1@supports (display: grid) {
2  .container {
3    display: grid;
4  }
5}

@supports verifica si ciertas características de CSS son compatibles con el navegador y aplica estilos según el resultado.

Ayuda a mantener la compatibilidad entre navegadores antiguos y nuevos.
Se pueden aplicar alternativas mediante la detección de características.

`@page`

1@page {
2  size: A4;
3  margin: 2cm;
4}

@page se usa para controlar los estilos de impresión. Es útil para configurar el tamaño de la página y los márgenes.

Puntos:

Se utiliza para establecer estilos para medios impresos.
También puedes personalizar los estilos de elementos específicos de la página como encabezados y pies de página.

`@charset`

1@charset "UTF-8";

@charset especifica la codificación de caracteres de un archivo CSS. Principalmente se especifica UTF-8.

Debe especificarse al principio de la hoja de estilos.
Se utiliza particularmente para sitios web multilingües.

`@layer`

@layer es una nueva regla @ utilizada para organizar la precedencia de hojas de estilo en CSS, permitiendo que múltiples reglas CSS sean agrupadas y gestionadas por capas. Esta regla es particularmente útil en hojas de estilo extensas o proyectos que involucran múltiples hojas de estilo externas para facilitar la prevención de conflictos CSS.

En las hojas de estilo CSS, la precedencia generalmente se determina por la 'cascada', pero al usar @layer, puedes controlar la precedencia de los estilos de manera más flexible y explícita.

Sintaxis Básica

1@layer <layer-name> {
2  /* Styles within this layer */
3}

Al definir estilos usando @layer, la sintaxis sería como esta.

 1@layer reset {
 2    h1 {
 3        margin: 0;
 4    }
 5}
 6@layer base {
 7    h1 {
 8        font-size: 24px;
 9        color: blue;
10    }
11}
12@layer theme {
13    h1 {
14        color: red;
15    }
16}

Por ejemplo, puedes definir estilos en diferentes capas de la siguiente manera:
En este caso, se definen las capas reset, base y theme, respectivamente, y el estilo final de h1 está determinado por el contenido de la capa theme, lo que da como resultado que se aplique color: red;.

Prioridad de múltiples capas

La poderosa característica de @layer es que permite gestionar la prioridad de los estilos entre capas. En el ejemplo anterior, debido a que la capa theme se define al final, sobrescribe los estilos definidos en otras capas.

Además, @layer se puede usar para gestionar la cascada de prioridad en hojas de estilo externas o archivos CSS cargados desde otras bibliotecas.

Prioridad global

 1@layer theme, base, reset;
 2
 3@layer reset {
 4    h1 {
 5        margin: 0;
 6    }
 7}
 8@layer base {
 9    h1 {
10        font-size: 24px;
11        color: blue;
12    }
13}
14@layer theme {
15    h1 {
16        color: red;
17    }
18}

El orden de las capas se prioriza dentro de la cascada de CSS, donde los estilos definidos más tarde tienen precedencia. Por ejemplo, puedes especificar explícitamente el orden de las capas escribiéndolas de esta manera.
Esto asegura que los estilos se apliquen en el orden de theme, base y reset, incluso si la capa theme fue definida primero.

Uso de `@import` con `@layer`

1@import url('css/reset.css') layer(reset);
2@import url('css/base.css') layer(base);
3@import url('css/theme.css') layer(theme);

Combinando @import y @layer, también es posible gestionar las capas en hojas de estilo externas.
Esto permite que las hojas de estilo externas se ubiquen en diferentes capas, gestionando su prioridad.

Puntos clave de `@layer`

@layer es una herramienta poderosa para la gestión de estilos CSS, proporcionando un método conveniente para evitar conflictos de estilo en proyectos grandes. Es particularmente notable para gestionar la precedencia de estilos de manera concisa cuando se trabaja con múltiples fuentes de estilos. Sería bueno tener en cuenta los siguientes puntos.

Al separar los estilos por capas, puedes controlar la precedencia de la cascada.
Usándolo junto a @import, puedes incluir archivos CSS externos en la gestión de capas.
Definir múltiples capas puede prevenir conflictos de estilo.

Esto minimiza las colisiones de estilo y permite un diseño eficiente incluso en proyectos que requieren una gestión de estilos compleja.

Ejemplos de uso de `@layer`

Cuando uses @layer, puedes considerar aspectos como las convenciones de nomenclatura de capas, el orden de importación y la cantidad de capas adecuada a la escala del proyecto.

Nomenclatura de Capas

Los nombres de las capas se determinan en función de la estructura y el propósito del proyecto. Ejemplos comunes de nomenclatura de capas incluyen los siguientes:.

1@layer base, layout, components, utilities;

base: Una capa que define estilos básicos como reinicios y tipografía.
layout: Una capa que define los estilos para el diseño de páginas y sistemas de cuadrícula.
components: Una capa que define los estilos para componentes de UI reutilizables como botones y tarjetas.
utilities: Una capa que define estilos para clases utilitarias (por ejemplo, margin, padding, text-center).

Orden de Importación Claro

1@import url('base.css') layer(base);
2@import url('layout.css') layer(layout);
3@import url('components.css') layer(components);
4@import url('utilities.css') layer(utilities);

Cuando manejes múltiples archivos CSS, es importante establecer un orden claro usando @import. Este orden asegura que se mantenga la prioridad deseada.

Consolidación y Simplificación de Capas

 1@layer common {
 2  body {
 3    margin: 0;
 4    padding: 0;
 5    box-sizing: border-box;
 6  }
 7
 8  .container {
 9    max-width: 1200px;
10    margin: 0 auto;
11  }
12}

En proyectos de pequeña escala, limitar el número de capas puede reducir la complejidad.

Resumen

Las reglas @ de CSS son herramientas poderosas que apoyan la aplicación flexible de estilos y mejoran el rendimiento en el diseño web. @media, @keyframes y @supports facilitan el diseño teniendo en cuenta las diferencias entre dispositivos y la compatibilidad con navegadores. Además, @import y @font-face permiten la incorporación eficiente de recursos externos para una expresión más enriquecida.

Comprender y utilizar correctamente estas reglas @ permite una programación CSS más efectiva.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Pseudo-clases y Pseudo-elementos de CSS

Reglas CSS `@`

YouTube Video

HTML para vista previa

Reglas CSS @

Tipos de Reglas @ Ejemplares

@import

Puntos:

@media

Condiciones Comúnmente Utilizadas

Condiciones basadas en el ancho

Orientación del dispositivo (orientation)

Resolución (resolution)

Combinando condiciones

Condición AND (and)

Condición OR (,)

Condición NOT (not)

@font-face

@keyframes

@supports

@page

Puntos:

@charset

@layer

Sintaxis Básica

Prioridad de múltiples capas

Prioridad global

Uso de @import con @layer

Puntos clave de @layer

Ejemplos de uso de @layer

Nomenclatura de Capas

Orden de Importación Claro

Consolidación y Simplificación de Capas

Resumen

YouTube Video

Reglas CSS `@`

Tipos de Reglas `@` Ejemplares

`@import`

`@media`

Orientación del dispositivo (`orientation`)

Resolución (`resolution`)

Condición AND (`and`)

Condición OR (`,`)

Condición NOT (`not`)

`@font-face`

`@keyframes`

`@supports`

`@page`

`@charset`

`@layer`

Uso de `@import` con `@layer`

Puntos clave de `@layer`

Ejemplos de uso de `@layer`