La regla CSS @supports especifica una condición de soporte para la compatibilidad de funciones en un navegador, es decir, una propiedad de estilo CSS específica se puede especificar como condición para verificar su soporte en el navegador y, si la condición es verdadera, el bloque de código se ejecuta de lo contrario. no. Es una regla condicional de CSS y viene bajo la regla at de CSS .
Sintaxis:
@supports (condition) {
// Style you want to apply
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Supports</title>
<style>
@supports (display: flex) {
div h1 {
display: flex;
justify-content: flex-start;
color: green;
border: 3px solid green;
padding: 20px;
font-size: 40px;
}
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
En el ejemplo anterior, la pantalla flexible es compatible con los navegadores, por lo que se aplica el estilo.
Hay 3 palabras clave que se pueden usar con @supports. Estos son:
Palabra clave no: la palabra clave ‘ no ‘ se puede utilizar para comprobar lo contrario de lo que especifica la condición.
Para explicar esa palabra clave, a continuación hay un ejemplo para aplicar el estilo si no hay soporte para que la pantalla sea flexible.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Supports</title>
<style>
@supports not (display: flex) {
div h1 {
display: flex;
justify-content: flex-start;
color: green;
border: 3px solid green;
padding: 20px;
font-size: 40px;
}
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
En el ejemplo anterior, el estilo no se aplica porque el navegador admite la visualización como flex.
y palabra clave: La palabra clave ‘ y ‘ se utiliza para comprobar dos condiciones y, si ambas son verdaderas, se ejecuta el bloque de estilo.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Supports</title>
<style>
@supports (display: flex) and (display: -webkit-flex) {
div h1 {
display: flex;
justify-content: flex-start;
color: green;
border: 8px solid green;
padding: 20px;
font-size: 35px;
}
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
Palabra clave or: La palabra clave ‘ o ‘ se utiliza cuando queremos ejecutar el bloque de estilo cuando incluso una de las múltiples condiciones especificadas es verdadera.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Supports</title>
<style>
@supports (display: flex) or (display: -webkit-flex) {
div h1 {
display: flex;
justify-content: flex-start;
color: green;
border: 8px solid green;
padding: 20px;
font-size: 35px;
}
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de regla CSS @supports se enumeran a continuación:
- Google Chrome
- Borde de Microsoft
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por aakashpawar1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA