CSS variables & Stacking context

https://bit.ly/2MwJxF3​

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?

Puedes usar un preprocesador como Myth o si tienes experiencia en el uso de PostCSS,  puedes usar este módulo para variables CSS.

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

  1. Elemento raíz (<html>).

  2. Elementos sin posicionar en el orden que fueron colocados en el documento HTML.

  3. 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:

  1. Position (menos static).

  2. Opacity menor a 1.

  3. Transforms.

  4. Filters.

  5. Elementos que son hijos de flexbox.

  6. Clip-path.

  7. Will-change.

  8. Entre otras.

DEMO

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!

Made with Slides.com