Ajuste de desplazamiento CSS permite que los sitios web ajusten la página web o cualquier otro contenedor de desplazamiento a una posición de desplazamiento específica cuando el usuario realiza una operación de desplazamiento. Esta característica ha sido compatible con todos los navegadores modernos durante más de dos años, pero muchos sitios web que podrían beneficiarse aún no lo utilizan.
El ajuste de desplazamiento probablemente esté más asociado con los carruseles horizontales (ver El enfoque de solo CSS de Chris) y páginas web particulares divididas en diapositivas a pantalla completa. Pero ¿por qué detenerse allí? Creo que ajustar puede mejorar la experiencia de desplazamiento en cualquier página web que presente elementos en una cuadrícula o fuente.
Por ejemplo, la mayoría de los sitios web de compras muestran los productos en una cuadrícula. Idealmente, al usuario le gustaría saltar entre las filas de la cuadrícula con el mínimo esfuerzo. El usuario puede presionar Espacio para desplazar la página aproximadamente una pantalla (altura de la ventana gráfica), pero dependiendo de la altura de las filas de la cuadrícula, la posición de desplazamiento eventualmente se "desincronizará" con la cuadrícula y el usuario tendrá que reajustarla manualmente.
Si agregamos ajuste de desplazamiento a esta página, el usuario puede desplazarse constantemente a la siguiente fila con el Espacio tecla (pulsando Shift + Espacio se desplazará a la fila anterior). Es bastante fácil.
Creo que el ajuste de desplazamiento sería una adición bienvenida a este sitio web. Y ni siquiera es tan complicado de implementar. El código CSS que usé para este ejemplo es relativamente simple:
html {
scroll-snap-type: y proximity;
}
.product-item {
scroll-snap-align: start;
scroll-margin-top: 75px; /* height of web page’s sticky header */
}No tiene que esperar si un sitio web que visita regularmente aún no ha agregado ajuste de desplazamiento y cree que mejoraría su experiencia de desplazamiento. Puede agregar ajuste de desplazamiento usted mismo, con estilos de usuario.
Adición de estilos de usuario a sitios web
En el video de arriba, puede ver que seleccioné un archivo user.css en las preferencias avanzadas de Safari. Este archivo es una hoja de estilo de usuario. Contiene estilos CSS que he escrito, almacenados en un local .css y agregado a Safari. Estos "estilos de usuario" se aplican a cada página web que abro en Safari.
Chrome y Firefox no permiten a los usuarios seleccionar una hoja de estilo de usuario. Firefox admitía una característica similar llamada userContent.css en el pasado, pero esa función quedó en desuso y deshabilitado por defecto en 2019. Recomiendo el Extensión del navegador Stylus para estos dos navegadores (y otros navegadores basados en Chromium).
Una ventaja significativa de Stylus es que le permite escribir estilos de usuario para sitios web y URL específicos. La hoja de estilo de usuario de Safari se aplica a todos los sitios web, pero esto se puede solucionar, por ejemplo, usando el nuevo :has() pseudo-clase a crear selectores que solo coincidan con sitios web específicos.
El módulo CSS Cascading define un Origen del usuario para los estilos que agrega el usuario. La hoja de estilo de usuario de Safari pertenece a este origen, pero la extensión Stylus inyecta estilos de usuario en Author Origin, donde residen las hojas de estilo del sitio web. Específicamente, Stylus inserta estilos de usuario directamente en la página a través de un <style> elemento al final de <html> lo que lo convierte en el hoja de estilo final en la página. Técnicamente, esto significa que los estilos agregados a través de Stylus se clasifican como estilos de autor ya que no están en el origen del usuario, pero continuaré llamándolos estilos de usuario porque el usuario los agrega.
Sin embargo, vale la pena tener en cuenta esta distinción porque afecta la cascada. Cuando la especificidad del selector es igual, un estilo de usuario real es más débil que el estilo propio de la página. Esto hace que los estilos de usuario sean una excelente apto para los valores predeterminados del usuario. En las mismas condiciones, un estilo agregado a través de Stylus es más fuerte que el estilo de la página, por lo que Stylus no se puede usar tan fácilmente para definir los valores predeterminados del usuario.
Si añadimos !important a la mezcla, tanto los estilos de usuario reales como los estilos agregados a través de Stylus son más fuertes que los estilos de la página. Entonces, cuando desee imponer sus estilos de usuario en un sitio web, no importa si usa la opción "Hoja de estilo" de Safari o la extensión Stylus. Su !important estilos ganarán de cualquier manera.
En la siguiente sección, usaré un conjunto de !important estilos de usuario para hacer cumplir el ajuste de desplazamiento en la página de la línea de tiempo del sitio web de Twitter. Mi objetivo es acelerar el proceso de lectura de mi línea de tiempo de Twitter evitando posiciones de desplazamiento incómodas en las que el tweet superior solo aparece parcialmente en la pantalla.
Desplácese por la línea de tiempo de Twitter
Después de experimentar un poco, me decidí por el siguiente código CSS. Estos estilos funcionan bien en Firefox, pero he experimentado algunos problemas en Chrome y Safari. Describiré estos problemas con más detalle más adelante en el artículo, pero por ahora, concentrémonos en el comportamiento en Firefox.
html {
scroll-snap-type: y mandatory !important;
}
/* tweets in the timeline are <article> elements */
article {
scroll-snap-align: start !important;
}
/* un-stick the sticky header and make it “snappable” as well */
[aria-label="Home timeline"] > :first-child {
position: static !important;
scroll-snap-align: start !important;
}
/* hide the “new Tweets available” floating toast notification */
[aria-label="New Tweets are available."] {
display: none !important;
}Es necesario agregar !important a cada declaración porque todos los estilos de usuario deben ganarle a los estilos propios de la página web para que nuestra implementación de ajuste de desplazamiento personalizado funcione correctamente. Ojalá en lugar de escribir repetidamente !important, podría poner mis estilos de usuario en una "capa importante", pero tal característica CSS no existe (todavía).
Mire el video a continuación para ver mis estilos de usuario de ajuste de desplazamiento en acción. Observe cómo cada vez que presiona el Espacio desplaza el siguiente conjunto de tweets a la vista, y el primer tweet de cada conjunto se alinea con el borde superior de la ventana gráfica. Esto me permite leer mi línea de tiempo más rápidamente. Cuando necesito volver al conjunto anterior de tweets, puedo presionar Shift + Espacio.
Lo que me gusta de este tipo de ajuste de desplazamiento es que me permite predecir cuánto se desplazará la página cada vez que presione Espacio. Cada distancia de desplazamiento es igual a las alturas combinadas de los tweets visibles que están completamente en la pantalla. En otras palabras, el tweet parcialmente visible en la parte inferior de la pantalla se moverá a la parte superior de la pantalla, que es precisamente lo que quiero.
Space desplazará el tweet de Dave a la parte superior de la pantalla.Para probar mis estilos de usuario de ajuste de desplazamiento en su propia línea de tiempo de Twitter, siga estos pasos:
- Instale la Extensión de lápiz con complementos de Firefox o Chrome Web Store.
- Navega a tu línea de tiempo de Twitter en https://twitter.com/home.
- Haga clic en el icono Stylus en la barra de herramientas del navegador y haga clic en "esta URL" en la ventana emergente.
- Stylus abrirá un editor de código en una nueva pestaña del navegador. Copie y pegue mis estilos de usuario de ajuste de desplazamiento en el editor y presione el botón Guardar en la barra lateral de la izquierda. Los estilos se aplicarán a su línea de tiempo de Twitter inmediatamente (no es necesario volver a cargar la página).
- Puede actualizar los estilos en cualquier momento. Haga clic en el ícono Stylus y en el ícono Lápiz para abrir el editor nuevamente.
Incapacidad para anular el ajuste
Mi implementación del ajuste de desplazamiento para la línea de tiempo de Twitter tiene un defecto importante. Si un tweet es más alto que la ventana gráfica, es imposible desplazarse por la página para revelar la parte inferior de ese tweet (por ejemplo, si desea que le guste o retuitear ese tweet) porque el navegador ajusta la página a la fuerza para mostrar la parte superior de la misma. tweet (o la parte superior del siguiente tweet).
La gravedad de este problema depende de la pantalla del usuario. Al ver la línea de tiempo de Twitter en un monitor de escritorio grande con un factor de zoom de página pequeño, es posible que no encuentre ningún tweet más alto que la ventana de visualización.
Le he preguntado al Grupo de Trabajo de CSS si sería posible agregar un mecanismo que le permita al usuario anular el ajuste de desplazamiento obligatorio del navegador. Probablemente debería mencionar que este problema podría, al menos en teoría, resolverse cambiando de mandatory a proximity chasqueando he probado proximity encajando en Chrome y Firefox, y lo encontré inconsistente y confuso. El navegador a menudo se rompía cuando no lo esperaba, y viceversa. Tal vez el código de Twitter está interfiriendo con el proximity algoritmo, los navegadores todavía tienen un poco de errores, o tal vez solo estoy "desplazándolo mal", si eso es posible. No sé.
Pero la razón principal por la que fui con mandatory ajustar es que quería evitar situaciones en las que el tweet superior solo aparece parcialmente en la pantalla después de un desplazamiento. El tipo de desplazamiento rápido entre conjuntos de tweets que he mostrado en el video de arriba solo es posible con mandatory chasquido.
Si tú, como yo, prefieres mandatory chasqueando, puedo sugerir las siguientes dos soluciones para el problema del "tweet alto":
- Puede abrir el tweet en su propia página y luego regresar a la línea de tiempo.
- Si solo desea hacer clic en los botones Me gusta o Retwittear, puede Shift-haga clic en el tweet para seleccionarlo y luego presione L gustar o T seguido por Participar para retuitearlo.
Problemas en Chrome y Safari
Mis estilos de usuario de ajuste de desplazamiento producen comportamientos de ajuste de desplazamiento notablemente diferentes en Chrome, Safari y Firefox. Esas diferencias se deben en parte a que la implementación exacta del mecanismo de ajuste es dejado hasta el navegador:
El Módulo CSS Scroll Snap intencionalmente no especifica ni exige ninguna animación o física precisa utilizada para imponer posiciones de ajuste; esto se deja en manos del agente de usuario.
La versión actual de Safari tiene un error que impide que el ajuste de desplazamiento funcione correctamente en la línea de tiempo de Twitter. tengo informó este error.
En Chrome, me he encontrado con los siguientes problemas:
- Las operaciones de desplazamiento se animan de manera inconsistente. A veces, la animación es lenta, a veces es instantánea y, a veces, comienza lentamente pero luego se interrumpe. Encontré esto irritante.
- Las operaciones de desplazamiento se animan demasiado lentamente en general. Realicé una prueba en Chrome y Firefox (20 Espacio prensas) y me llevó un 70 % más de tiempo cubrir la misma distancia en mi línea de tiempo de Twitter en Chrome que en Firefox (18.5 segundos en Chrome frente a 11 segundos en Firefox).
- Cuando me desplazo con el panel táctil de mi computadora portátil, la página parpadea mucho. Cuando intento desplazarme rápido manteniendo pulsado el botón Espacio tecla, la página se desplaza muy lentamente y oscila. Sospecho que ambos problemas son causados por el mismo algoritmo. Parece que Chrome se vuelve a ajustar a un ritmo muy alto en estos casos. tengo informó este error.
Estos errores del navegador y las diferencias entre los navegadores pueden ser un problema para los sitios web que estén considerando implementar el ajuste de desplazamiento. Por ejemplo, un desarrollador web puede contenerse porque no le gusta cómo se comporta el ajuste de desplazamiento en un navegador en particular. Los navegadores pueden mitigar este problema volviéndose más interoperables. De hecho, Scroll Snap es una de las áreas de enfoque del cross-browser Esfuerzo de interoperabilidad 2022.
Otra forma de mejorar la situación es mediante la introducción de nuevas propiedades CSS que harían que el ajuste de desplazamiento fuera más configurable. Esto podría incluir la duración de la animación de alineación, la longitud del umbral de proximidad para la alineación y un mecanismo para anular la alineación obligatoria.
¿Cortar o no romper?
He estado usando mis estilos de usuario de ajuste de desplazamiento en la línea de tiempo de Twitter durante un par de semanas y no quiero volver atrás. La capacidad de hojear rápidamente mi feed con solo el Espacio La clave está en otro nivel.
Sin embargo, considero que esta es una característica avanzada que probablemente no sea para todos. Hay una razón por la que lo he habilitado solo en la línea de tiempo (/home ruta) y en ningún otro lugar en el sitio web de Twitter. Ajustar es un cambio significativo en la forma en que se desplaza la página, y lleva algún tiempo acostumbrarse. Puede funcionar muy bien para un caso de uso específico, pero también puede estorbar y frustrar al usuario.
Por lo tanto, los sitios web con feeds deberían considerar ofrecer ajuste de desplazamiento solo como una característica opcional, después de una cuidadosa consideración y muchas pruebas en diferentes navegadores y con diferentes métodos de entrada (ratón, teclado, trackpad, pantalla táctil, etc.).
Antes de que te vayas…
Finalmente, recomiendo instalar y probar el Extensión del navegador Stylus. Los desarrolladores web (o cualquier persona que sepa CSS) tienen el poder de diseñar cualquier sitio web en su navegador. Puede aplicar mejoras y correcciones menores a sus sitios web favoritos. Lo uso principalmente para ocultar elementos de la página que encuentro molestos, como encabezados fijos, ventanas emergentes de video y recuentos de votos.
Pero lo que es más importante, Stylus le permite probar rápidamente nuevas funciones de CSS en cualquier sitio web e informar errores del navegador, si es necesario. Al hacer esto, puede ayudar a que la plataforma web sea un poco mejor.
