En este artículo, aprenderemos sobre las propiedades personalizadas de CSS y su implementación. Las propiedades personalizadas de CSS también se conocen como variables CSS o variables en cascada. Estas entidades contienen valores específicos que se reutilizarán en todo el documento y se puede acceder a ellos mediante la función var() (p. ej., color:(–primary-color);). El nombre de la propiedad que tiene un prefijo como –, representa las propiedades personalizadas y su valor se usará en otras declaraciones usando la función var().
En general, cuando diseñamos un sitio web grande que puede contener una gran cantidad de propiedades CSS y lo más probable es que hayamos usado valores similares varias veces. Es realmente difícil manejar las propiedades de estilo de gran tamaño. Para manejar esto, las propiedades personalizadas nos permiten declarar una variable en un lugar, puede referirse a muchos otros lugares. Esto reducirá el esfuerzo de administrar el código porque podemos actualizar valores fácilmente al hacer cambios en un solo lugar.
Sintaxis:
- Para variables:
var( --custom-name, value )
Parámetros: La función var( ) acepta dos parámetros que se enumeran a continuación:
- –custom-name: Es un parámetro requerido que acepta el nombre de la propiedad personalizada.
- valor: Es un parámetro opcional. Acepta un valor alternativo que se utiliza cuando la propiedad personalizada no es válida.
Sintaxis:
- Para propiedades personalizadas:
--custom-name: values;
El valor asignado a la propiedad personalizada coincidirá con cualquier secuencia de uno o más tokens hasta que la secuencia se rompa y no contenga más tokens válidos.
Crearemos algunas variables CSS y definiremos el valor de estas variables CSS, las usaremos para diseñar los componentes HTML.
Ejemplo 1: en este ejemplo, crearemos variables CSS para el color de fondo, el color de fuente principal y la propiedad del título.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
/* Declare CSS custom properties
or CSS variables */
:root {
--background-color: #dee1e3;
--primary-font-color: #302AE6;
--heading-color: #14ac60;
--link-color: #093aeb;
}
body {
background-color: var(--background-color);
}
h2 {
color: var(--heading-color);
}
p {
color: var(--primary-font-color);
}
a {
color: var(--link-color);
}
</style>
</head>
<body>
<h2>GeeksForGeeks</h2>
<p>A Computer Science portal for geeks.</p>
<a href="http://geeksforgeeks.org">click here</a>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, usaremos la propiedad box-shadow-color para crear el efecto de sombra mientras se desplaza sobre él.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #abb0b3;
color: #0f5e1b;
}
#click {
border-radius: 50px;
display: inline-block;
font-size: 35px;
padding: 10px;
transition: box-shadow 1.2s;
}
#click {
box-shadow: 0 0 40px var(--box-shadow-color);
--box-shadow-color: palegoldenrod;
}
#click:hover {
--box-shadow-color: #57ab57;
}
</style>
</head>
<body>
<h4>Hover me to see the effect</h4>
<h2 id="click">GeeksforGeeks</h2>
</body>
</html>
Producción:
Ejemplo 3: Para comprender la importancia de las propiedades personalizadas de CSS, crearemos una página web en la que cambiaremos el tema del contenedor simplemente usando las propiedades personalizadas de CSS junto con JavaScript normal.
Primero, definiremos algunas propiedades de estilo para el tema oscuro y el tema claro. Por defecto, configuramos el tema del contenedor como oscuro. También usaremos las propiedades personalizadas de CSS del tema para establecer el estilo de los elementos de nuestra página web HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--background-color: #000;
--primary-font-color: #302AE6;
--heading-color: #14ac60;
--link-color: #ae2ab3;
}
/* Light theme */
[theme="light"] {
--background-color: #eee;
--primary-font-color: #000;
--heading-color: #303030;
--link-color: #302AE6;
}
.container {
background-color: var(--background-color);
height: 400px;
width: 300px;
border: 2px solid green;
}
h1 {
color: var(--heading-color);
}
p {
color: var(--primary-font-color);
}
a {
color: var(--link-color);
}
</style>
</head>
<body>
<center>
<div class="container">
<h1>GeeksForGeeks</h1>
<p>A Computer Science portal for geeks.</p>
<a href="http://geeksforgeeks.org">click here</a>
</div><br>
<label class="checkbox-theme" for="checkbox">
Check the checkbox to change theme
<input type="checkbox" id="checkbox" />
</label>
</center>
<script>
const Switch = document.querySelector(
'.checkbox-theme input[type="checkbox"]');
/* Function to change theme*/
function changeTheme(e) {
if (e.target.checked) {
document.documentElement
.setAttribute('theme', 'light');
}
else {
document.documentElement
.setAttribute('theme', 'dark');
}
}
Switch.addEventListener(
'change', changeTheme, false);
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 49.0
- Microsoft Edge 15.0
- Firefox 31.0
- Safari 9.1
- ópera 36.0
Publicación traducida automáticamente
Artículo escrito por vikashgautam11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA