Las reglas condicionales de CSS no son más que una característica de CSS en la que el estilo CSS se aplica en función de una condición específica. Entonces, la condición aquí puede ser verdadera o falsa y, según las declaraciones/estilo, se ejecutará.
Estas reglas finalmente se incluyen en la regla arroba de CSS, ya que comienzan con una @ .
Las reglas condicionales son:
- @apoya
- @medios de comunicación
- @documento
@supports: la regla condicional @supports es verificar el soporte de una propiedad CSS específica en el navegador y aplicar el estilo basado en eso.
Sintaxis:
@supports ("condition") {
/* Style to apply */
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Supports Rule</title>
<style>
@supports (display: grid) {
section h1 {
background-color: green;
color: white;
padding: 15px;
}
}
</style>
</head>
<body>
<section>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
</section>
</body>
</html>
Producción:
En el ejemplo anterior, el navegador es compatible con la propiedad de visualización como una cuadrícula.
@media: la regla condicional @media es una regla que se utiliza para aplicar el estilo en función de las consultas de medios. Se puede usar para verificar el ancho y/o la altura del dispositivo y aplicar el estilo especificado en base a eso.
Sintaxis:
@media screen and ("condition") {
/* Style to apply */
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Media Rule</title>
<style>
@media screen and (max-width: 700px) {
section {
background-color: green;
color: white;
padding: 15px;
}
}
</style>
</head>
<body>
<section>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
</section>
</body>
</html>
Salida:
ancho de pantalla de más de 700 px:
Ancho de pantalla menor o igual a 700px:
En el ejemplo anterior, cuando el ancho del navegador supera los 700 px, el estilo no se aplica, pero cuando la ventana del navegador se reduce a 700 px, entonces se aplica el estilo.
@document: la regla condicional @document se utiliza para aplicar estilo a una URL específica, es decir, el estilo solo se aplicará a la URL especificada.
Sintaxis:
@document url(“YOUR-URL”) {
/* Style to apply */
}
Es experimental y solo funciona en Firefox con el prefijo -moz- , es decir, @-moz-document .
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Document Rule</title>
<style>
@-moz-document url("http://localhost/GfG/document-rule.html") {
section h1 {
background-color: green;
color: #fff;
padding: 15px;
}
}
</style>
</head>
<body>
<section>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
</section>
</body>
</html>
Producción:
En el ejemplo anterior, el estilo se aplica cuando la URL especificada es la que se visita.
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por aakashpawar1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA