CSS variables & Stacking context
Henry Zarza
Ingeniero informático - Desarrollador web en - Estudiante de idiomas
henryzarza
henry_zarza
CSS Variables
Las variables en CSS o Custom properties son propiedades definidas que contienen valores específicos que se pueden volver a utilizar en el DOM.
Un poco de historia
Scope
¿Por qué son importantes?
-
Código más legible.
-
Fácil de modificar.
-
CSS más limpio y escalable.
-
Ayuda a mantener el principio DRY (Don't Repeat Yourself).
A tener en cuenta
CSS vs Preprocesadores
Accediendo desde JS
¿Puedo usarlas en producción?
Consultado 06/06/2019
¿Y sí es Internet Explorer?
DEMO
Stacking Context
Es una conceptualización tridimensional de cómo los elementos se ubican en el eje z del plano x, y, z de un documento HTML.
¿Qué hace el navegador mientras renderiza y juega con los elementos?
Realiza un proceso llamado Critical Rendering Path.
Default stacking order
-
Elemento raíz (<html>).
-
Elementos sin posicionar en el orden que fueron colocados en el documento HTML.
-
Elementos con un posicionamiento definido en el orden que fueron definidos.
A tener en cuenta
Nuevos stacking context son formados cuando aplicamos estás propiedades CSS:
-
Position (menos static).
-
Opacity menor a 1.
-
Transforms.
-
Filters.
-
Elementos que son hijos de flexbox.
-
Clip-path.
-
Will-change.
En resumen...
-
Cuidado con los posicionamientos.
-
Los elementos están sujetos al contexto de su padre.
-
Usar el color de fondo con un valor rgba () en lugar de opacidad.
-
El z-index requiere de un posicionamiento.
-
Cada stacking context es completamente independiente de sus hermanos.
Referencias
¡GRACIAS!
CSS variables and stacking context
By Henry Zarza
CSS variables and stacking context
Presentation to explain CSS variables and the stacking context
