Krypton Solid

Gestión atrevida del índice Z para diseños complejos – Revista Smashing

Gestión atrevida del índice Z para diseños complejos – Revista Smashing

El índice Z es algo intrínsecamente complicado, y mantener el orden del índice Z en un diseño complejo es notoriamente difícil. Con diferentes órdenes y contextos de apilamiento, hacer un seguimiento de ellos a medida que aumentan sus números puede ser difícil, y una vez que comiencen a extenderse por los archivos CSS, ¡olvídese! Debido a que el índice z puede hacer o deshacer la visibilidad y usabilidad de un elemento de la interfaz de usuario, mantener la interfaz de usuario de su sitio web en funcionamiento puede ser un equilibrio delicado.

Debido a que el índice z es contextual, una vez que comience a usarlo, puede ser fácil que otros elementos comiencen a requerirlo también. Hallazgo z-index: 99999 reglas esparcidas por un sitio web no es infrecuente, pero el infame 99999 simplemente nació de la frustración. A menudo se usa incorrectamente como una manera fácil de forzar un elemento por encima de todo lo demás, pero z-indexno siempre son tan sencillos. Tampoco es completamente escalable: ¿Qué sucede si necesita agregar algo además de eso?

Otras lecturas en SmashingMag:

Otra estrategia común es incrementar los valores del índice z por dígitos dobles, de modo que tenga espacio para insertar otros elementos más tarde, pero eso no resuelve el problema de realizar un seguimiento de todos ellos, y no se escala bien cuando desea agregar algunos en el medio.

Cada instancia de índice Z plantea una serie de preguntas:

  1. ¿Por qué este elemento tiene este valor de índice z? ¿Qué significa en el contexto de todos los demás elementos?
  2. ¿Dónde encaja en el orden y contexto de otros valores de índice z? Si aumento este, ¿qué otros se ven afectados?
  3. Si agrego un elemento al orden de apilamiento, ¿qué valores de índice z tengo que aumentar en consecuencia?

Usando Sass para mantener el orden

Con Sass, controlar todos los factores anteriores es fácil usando listas. Usemos Behancela página de inicio como ejemplo:

índice z sass
Controlar todos los factores anteriores es fácil usando listas. (Ver versión grande)
Necesitamos mantener el orden de apilamiento de las portadas del proyecto, la barra de filtro, el modo de búsqueda de ubicación, el menú desplegable personalizado sobre el modal y la navegación del sitio web, en ese orden, de abajo hacia arriba. Podemos configurar una lista Sass, así:


$elements: project-covers, sorting-bar, modals, navigation;

Esta lista representa el orden en el que queremos que aparezcan nuestros elementos, de menor a mayor, con cada índice o posición en la matriz que representa el índice z de ese elemento. Podemos usar el Sass index función para asignar un valor de índice z a cada elemento. Por ejemplo:


.project-cover {
   z-index: index($elements, project-covers);
}

Esto se imprimiría:


.project-cover {
   z-index: 1;
}  

Esto es porque project-cover es el primer elemento de la lista, en el índice 1y el elemento más bajo en nuestro orden de apilamiento de índice z. Escribamos el Sass para el resto de los elementos de nuestra lista:


.sorting-bar {
   z-index: index($elements, sorting-bar);
}
.modal {
   z-index: index($elements, modals);
}
.navigation {
   z-index: index($elements, navigation);
}  

Ahora, nuestro CSS compilado se vería así:


.project-cover {
   z-index: 1;
}
.sorting-bar {
   z-index: 2;
}
.modal {
   z-index: 3;
}
.navigation {
   z-index: 4;
}   

Ahora puede aplicar la clase a sus elementos en consecuencia. Pero, ¿qué pasa si queremos agregar un elemento al orden de apilamiento existente? Supongamos que quisiéramos agregar una información sobre herramientas que aparece cuando el visitante se desplaza sobre un nombre de usuario, sobre las cubiertas del proyecto pero debajo de todo lo demás.

Con Sass, solo tenemos que actualizar nuestra lista con el nuevo elemento.
Con Sass, solo tenemos que actualizar nuestra lista con el nuevo elemento. (Ver versión grande)
Con CSS vanilla, este cambio significaría tener que actualizar los valores del índice Z de la barra de clasificación, modal y navegación. Con Sass, solo tenemos que actualizar la lista con nuestro nuevo elemento:


$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;   

Debido a que los valores del índice Z de la barra de ordenación, los modales y la navegación han cambiado en la lista (tenían valores de 2, 3 y 4 pero ahora son 3, 4 y 5), nuestro CSS compilado ajustará automáticamente sus valores de índice z utilizando sus nuevas posiciones. Agreguemos esta nueva línea de Sass:


.user-tooltip {
   z-index: index($elements, user-tooltip);
}  

Esto hará que el CSS compilado se vea así:


.user-tooltip {
   z-index: 2;
}
.sorting-bar {
   z-index: 3;
}
.modal {
   z-index: 4;
}
.navigation {
   z-index: 5;
}

Escalar la solución en contextos de apilamiento

Supongamos que nuestro diseño es aún más complejo, con múltiples contextos de apilamiento y órdenes de apilamiento. (Recuerde que para que el valor del índice z de un elemento tenga efecto, su position no debe ser static. Esto es lo que crea un nuevo contexto de apilamiento, dando a los hijos del elemento un orden de apilamiento específico de su padre.) En este caso, una lista lineal puede no ser suficiente. En cambio, podemos crear tantas listas como necesitemos, cada una de las cuales se consideraría un contexto.

Puede crear tantas listas como necesite, donde cada lista se considera un contexto.
Cree tantas listas como necesite, cada una de las cuales se consideraría un contexto. (Ver versión grande)

$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;
$modal-elements: fields, form-controls, errors, autocomplete-dropdown;

.modal {
   z-index: index($elements, modals);

   .field {
      z-index: index($modal-elements, fields);
   }
   .form-controls {
      z-index: index($modal-elements, form-controls);
   }
   .error {
      z-index: index($modal-elements, errors);
   }
   .autocomplete-dropdown {
      z-index: index($modal-elements, autocomplete-dropdown);
   }

} /* .modal */

Esto se compila para:


.modal {
   z-index: 4;
}
.modal .field {
   z-index: 1;
}
.modal .form-controls {
   z-index: 2;
}
.modal .error {
   z-index: 3;
}
.modal .autocomplete-dropdown {
   z-index: 4;
}   

Escalar la solución en un sitio web

El requisito más importante de esta técnica es cumplirlo. Cualquier valor de índice Z codificado de forma rígida podría comprometer la integridad de los derivados de su lista. Debido a esto, es posible que necesite mantener el orden del índice Z en varias páginas de un sitio web. La solución más simple es crear un parcial que contenga las listas de todo el sitio, que luego puede incluir en cualquier lugar que lo necesite. (Es posible que ya tenga un parcial que incluya en todas partes que almacene variables para los colores, tamaños de fuente, etc. de su sitio web; esta es la misma idea).

_zindex.scss


$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;
$modal-elements: fields, form-controls, errors, autocomplete-dropdown;   

mypage.scss


@import '_zindex.scss'

.modal {
   z-index: index($elements, modals);
}   

También es posible combinar o modificar listas globales por página individual. Puede importar su parcial y luego usar Funciones de lista de Sass (o otros avanzados) para modificar según sea necesario. Por ejemplo:


@import '_zindex.scss'

$modal-elements: append($modal-elements, close-button);
$elements: insert-nth($elements, sidebar-filters, 3);

.modal .close-button {
   z-index: index($modal-elements, close-button);
}
.sidebar-filter {
   z-index: index($elements, sidebar-filter);
}   

Este Sass agregaría un botón «Cerrar» al final del orden de apilamiento modal e insertaría aves en el orden de apilamiento principal de la página en la que se incluye, todo sin afectar a otras páginas que usan el _zindex.scss parcial.

Error al reportar

Siempre verifique si hay errores en su código para evitar errores. Por ejemplo, si intentó obtener el valor del índice Z de un elemento que no está en su lista, es posible que encuentre un resultado inesperado:


.objects {
   z-index: index($elements, thing-not-in-my-list);
}
.objects {
   z-index: false;
}

Porque false no es un valor válido para z-index, no lo queremos en nuestro código compilado. Podemos evitar que esto suceda creando una función personalizada que actúe como un proxy para la llamada a list y eso usa Sass ‘ @warn para decirnos si algo salió mal.


@function z($list, $element) {

   $z-index: index($list, $element);

   @if $z-index {
      @return $z-index;
   }

   @warn 'There is no item "#{$element}" in this list; choose one of: #{$list}';
   @return null;
}   

Esta función toma los mismos argumentos que index, pero antes de devolver el valor, comprueba que estamos solicitando algo que existe en la lista. Si el valor existe, devuelve el resultado de la index llamar, como antes. Si el valor no existe, suceden dos cosas:

  1. Se imprime una advertencia que le indica que el artículo que está solicitando no está en la lista, y los valores de la lista se imprimen para que pueda ver qué elegir.
  2. El valor devuelto es null, que le dice a Sass que no imprima la regla en absoluto.

Entonces, en lugar del siguiente CSS no válido …


.objects {
   z-index: false;
}   

… la z-index no se imprimiría en absoluto. Como beneficio adicional, si fuera la única regla en su conjunto de reglas, entonces Sass ni siquiera imprimiría el selector, minimizando así la salida innecesaria.

Conclusión

Hacer un seguimiento de los contextos de apilamiento y los pedidos en CSS es difícil, pero las variables en los preprocesadores lo hacen mucho más fácil. Existen Muchas maneras para manejarlo, pero el enfoque que hemos analizado aquí pretende ser el más sencillo y requerir la menor cantidad de mantenimiento, mediante el uso de listas simples de elementos en el orden en que deberían aparecer. Y debido a que las listas y funciones de Sass son tan poderosas, ¡tienes infinitas posibilidades para expandir esta técnica para que sea tan completa como necesites!

Recursos

Deja un comentario