Lenguaje CSS
El lenguaje de estilo de hojas en cascada (CSS, en inglés) permite agregar y modificar propiedades de escala, color y animación en elementos visibles del DOM en una o más páginas web.
El sustantivo de 'cascada' refiere a que los estilos dados 'caen' o se insertan en uno o más elementos HTML, desde afuera hacia dentro (o desde arriba hacia abajo) según cómo estén agrupados, ordenados, o por medio de otros criterios de asignación de estilos.
Ahondaré aquí solo en las propiedades CSS (anteriores y nuevas) y elementos HTML para interacción desde puntero o táctil. Sí deseas un estudio más amplio de CSS, recomiendo la cuarta edición de Responsive Web Design with HTML5 and CSS, de Ben Frain.
CSS y HTML para interacciones sencillas desde puntero y táctiles
CSS no discrimina interacción desde puntero de mouse o desde toque táctil. Según eso, de aquí en adelante me referiré como 'toque' a cualquier interacción desde mouse o dedo sobre pantalla.
Los estilos agregados en el código del botón solo contienen propiedades ejecutadas según clics. Aparte de los tonos de color, no ejerce ninguna otra influencia en el elemento. Otros elementos desde HTML combinados con CSS permiten interacciones sencillas.
Elemento <details>
Abajo. Muestra información adjunta a un elemento previo mediante el toque sobre ese elemento. Luego, es posible agregar estilos CSS al elemento contenedor. La activación es dada sin discriminar tipo de toque.
Porque tienen las princesas...
...Que fascinan al mirar..
Y que embriagan al besar
...con sus labios de cereza..
Pseudo clase CSS :checked
Abajo. Es un tipo de activador que permite establecer dos estados (activado-desactivado) solo para elementos HTML exclusivos para ingreso de datos, como los <input type="checkbox">.
Por otro lado, type="checkbox" es un atributo del elemento HTML <input>. Le permite al usuario activar en un elemento dos estados (activado-desactivado). Útil para opciones binarias sencillas sin necesidad JS. En cada estado pueden agregarse estilos CSS.
En el ejemplo de abajo se debió agrupar la caja del check dentro de un contenedor div, puesto que colocar algún otro elemento debajo de la etiqueta input bloqueaba mostrar los dos contenidos.
Es decir, ubicar el <input type="checkbox"> dentro del div solucionó ese bloqueo.
Holi boliiiii!
Holi boli!
Interacción con :checked oculto
Al ocultar pseudo clase se puede mantener las interacciones.
Como importante complemento, debemos tener presente las diferencias entre las propiedades de visibilidad en CSS:
visibility: hidden;:: Solo lo visible se oculta, pero no su área.display: none;:: Oculta lo visible y lo no visible. Es decir, también elimina el área ocupada
Finalmente es muy importante que exista concordancia con las propiedades de visibilidad o de ocultamiento. Si se las combina, el resultado no es el correcto:
En CSS
/* Contenido expandible pero oculto */
.mostrarContenido {
/* Propiedad similar, valor diferente */
display: none;
}
/* Intercambio mediante :checked */
#cambiaEstados:checked ~ * .mostrarContenido {
/* Propiedad similar, valor diferente */
display: block;
}
Tu eres perla que surgiste del mas grande e ignoto mar...
CSS touch-action
Según mdn_ web docs, la propiedad CSS touch-action define cómo un área es manipulada por una intervención táctil del usuario. A agosto 4 del 2023 algunos valores aún no están disponibles para ciertos navegadores y otras propiedades simplemente bloquean la acción de deslizamiento táctil.
En otras palabras, la propiedad touch-action le indica al navegador si se permiten o por el contrario, son canceladas las intervenciones táctiles sobre elementos definidos.
Valores para propiedad touch-action
- Valores con disponibilidad amplia en navegadores
- touch-action:
auto; - touch-action:
none; - touch-action:
pan-x; - touch-action:
pinch-zoom; - touch-action:
manipulation; - touch-action:
pan-y; - Abajo. Valores con disponibilidad parcial en navegadores
- touch-action:
pan-down; - touch-action:
pan-up; - touch-action:
pan-right; - touch-action:
pan-left;
Los siguientes ejemplos explican el comportamiento de sus valores. Se aclara que la interacción de deslizar un conjunto de imágenes lineales enmarcardas en un área deslizable funciona bien mediante acción táctil. Pero, si se desea agregar una activación desde puntero mouse, se recomienda agregar un eventListener para que funcione al toque del puntero mouse. En el ejemplo de abajo se agregó un script aportado por el usuario Noex98.
La propiedad que estamos revisando, touch-action: ... está agregada en el contenedor de elementos.
En CSS
.contenedorDiv{
/* resto de código */
touch-action: [ aquíValor ];
}
Se resumen algunos valores de la propiedad CSS touch-action en las siguientes línas. Se aclara que esta propiedad influye únicamente en la interacción táctil y que aún no está soportada por todos los navegadores.
-
touch-action:auto;
(permite intervención de interacciones de deslizar y acercamiento) -
touch-action:none;
(cancela toda intervención de deslizamiento y acercamiento) -
touch-action:pan-y;
(por alguna razón bloqueó el paneo de los elementos) -
touch-action:pinch-zoom;
(por alguna razón bloqueó el paneo de los elementos)
Grupo de propiedades scroll-...
Este interesante grupo de propiedades permite manipular el deslizamiento de contenidos desde una página web.
Se añadirán las propiedades (sin los valores) a medida que se vayan estudiando.
-
scroll-behavior: ... ; -
scroll-xx: ... ;
Propiedad scroll-behavior
Es la primera de todo el grupo de propiedades CSS para deslizamiento (scrolling). La propiedad scroll-behavior permite diferentes comportamientos desde un mismo deslizar.
Sin embargo, mediante ese método existirá un desfase en caso de tener un elemento justo debajo del límite superior de la ventana del navegador (puesto que cada vínculo de anclaje siempre se ubicará justo debajo del borde superior de la ventana). Ese podría resolverse con un código que ubique el elemento contenedor un poco más abajo del tope superior del navegador. Daré esa solución cuando de con ella.
Daré esa solución cuando de con ella.
Se seguirá revisando las propiedades scroll-... . Tomar en cuenta que más de una propiedad estará reflejada en un solo ejemplo.
Propiedad scroll-snap-type:..valor
Define cómo será la pausa animada del deslizamiento (o snap, en inglés) en un contenedor deslizable en pantalla. Se revisará uno de sus valores.
:: :: Valor x mandatory;
Define que el deslizamiento del desliz se pausará en un punto si se deja de deslizar. Y ajustará esa pausa si se agregan o se eliminan elementos. Aplica para mouse y táctil.
Propiedad scroll-margin:..valor
Agrega una distancia (en uno de left-bottom-right-up) los lados cuando el deslizamiento deja de accionarse por el usuario.
:: :: Subpropiedad scroll-margin-left con valor en pixeles
Una vez soltado el desliz agrega distancia en pixeles según el lado explícito del elemento (en este caso, agrega distancia de pixeles a la izquierda, y en el límite izquierdo del contenedor.
En los siguientes ejemplos se ha estructurado las reglas CSS ya explicadas según el contenedor y según sus subelementos:
En CSS
.contenedor {
/* ... */
scroll-snap-type: x mandatory;
}
.contenedor > subEelementos {
/* ... */
scroll-snap-align: center;
scroll-margin-left: 3rem;
}
Propiedad scroll-snap-stop: valor
Es parte de las propiedades de CSS scroll snap. Esta propiedad define si habrá una pausa extendida (o corta) en cada subelemento del contenedor, luego de la acción de desliz. Es más evidente en interacción en pantalla táctil y exige scroll-snap-type: x mandatory; en el contenedor.
:: :: valores normal; | always;
El valor 'normal' se deslizará sin pausa. El valor 'always' hará una pausa en casa subelemento (ejemplo abajo).
Interacciones de scroll-... en proceso
El lenguaje CSS tiene en carpeta otras varias propiedades para interacciones de deslizamiento en desarrollo. En este vínculo se muestran la más interesantes. A agosto 5 del 2023 su disponibilidad en navegadores aún es limitada.
Animación CSS mediante sprites
Los sprites es una sola plantilla de imágenes en sucesión que simula un movimiento lineal, de inicio a fin. Por ejemplo, una secuencia de un humano dando 5 pasos será mostrado en una plantilla de sprites con la imagen de cada paso, una al lado de otra, hasta lograr una tira de 5 imágenes.
Cualquier imagen que represente una acción de inicio a fin podría representar un sprite.
El lenguaje CSS permite insertar una secuencia de sprites. Sin embargo, JS da mayor control de dinámicas como el tiempo, animación, cantidad de pixeles, entre otros.
En el siguiente ejemplo (creado sin JS) se muestra lo que en realidad es una imagen de 500px de ancho por 200px de alto (20kb). El marco solo contiene la dimensión de un solo fotograma, mostrando 5 fotogramas cada segundo; e iterando todo 2 veces (toca la imagen para reiniciar la animación).
¿Cuando usar animaciones desde CSS o desde JS?
Hugo Di Francesco en su artículo Animations: CSS vs JavaScript aconseja evitar combinaciones animadas CSS incrustadas en animaciones JS, o viceversa; incluso propone aprovechar más CSS que Javascript cuando el tipo de animación y su complejidad no precisa de recursos como extenso código o librerías complejas.
Una razón para preferir CSS en animaciones sencillas es que sus reglas se procesan 'bajo el capó' de la página web de la siguiente manera: hay una carga constante y limpia entre los lenguajes HTML y CSS previamente a JS. Solo después de eso JS requiere cargarse, compilarse (que el motor interno del navegador lea el código ) y ejecutarse para activar animación, funciones, entre otros.
Animación JS mediante sprites
Para Justin Hunter en How to Create a Sprite Animation Without Canvas crear animaciones con sprites desde JS da control más allá de las transiciones y keyframes de CSS. Así mismo, si el elemento <canvas> refuerza el control dinámico de muchas otras variantes web animadas 2D y 3D, "eso añade mucho más código del necesario para manipular el DOM" especialmente en una animación con sprites no muy completa.
En el siguiente ejemplo haré un breve repaso del uso de sprites desde JS según Hunter. Pero en otra sección estudiaré más a fondo el elemento <canvas> y sus posibilidades de animación centrado en 2D (3D lo dejo para algún otro momento).
Sin embargo, un desafío a resolver desde JS es que toda la composición debe verse responsive. Este es un anglicismo que refiere a que todo contenido digital debe verse ordenado y accesible ya sea en pantalla pequeña o grande. Por ejemplo, el lenguaje CSS cuenta con los valores flexbox para generar contenido adaptable en web, entre muchos otros.
Cuidado con los cierres de expresiones.
{ let propiedad = valor: } es un error. Las expresiones terminan en punto y coma; y no en dos puntos.
Recordar función appendChild()enEsteElemento . appendChild (agregamosEsteAlfinal);
Ojo plantilla literal para vincular dimensión en pixeles desde JS
let altura = 25;
const areaAnimacion = document.createElement("div");
areaAnimacion.style.height = `${altura}px`;