El cursor, qué se puede pulsar o seleccionar y cómo se comporta el scroll.
cursor: El aspecto del puntero del ratón sobre el elemento.
scroll-behavior: Con smooth, los saltos a un ancla (#seccion) se hacen con desplazamiento suave.
El cursor, qué se puede pulsar o seleccionar y cómo se comporta el scroll: suave, con imanes o sin arrastrar la página de detrás.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El aspecto del puntero del ratón sobre el elemento.
Valores: pointer, default, text, not-allowed, grab, wait, help, zoom-in
Con none, el elemento no recibe clics: pasan a lo que hay debajo.
Valores: auto, none
Si el texto se puede seleccionar.
Valores: auto, none, all, text
Qué gestos táctiles gestiona el navegador (desplazar, hacer zoom) en el elemento.
Valores: auto, none, pan-y, manipulation
Si la persona puede cambiar el tamaño de la caja arrastrando la esquina (lo tienen los <textarea>). Necesita un overflow distinto de visible.
Valores: none, both, vertical, horizontal
Esencial. Con smooth, los saltos a un ancla (#seccion) se hacen con desplazamiento suave. Va en html o en el contenedor que se desplaza.
Valores: auto, smooth
Margen al llegar a un ancla: evita que una cabecera fija tape el título (también scroll-margin-top…).
Valores: 0, 5rem
Relleno del contenedor de scroll para las anclas y los imanes de desplazamiento.
Valores: 0, 4rem 0 0
Convierte el contenedor en un carrusel con imanes: el scroll se detiene en posiciones exactas.
Valores: x mandatory, y proximity, none
Dónde se para el imán en cada hijo de un contenedor con scroll-snap-type.
Valores: start, center, end, none
Con contain, al llegar al final de una caja con scroll no se desplaza la página de detrás (útil en menús y ventanas).
Valores: auto, contain, none
Los colores de la barra de desplazamiento: el pulgar y el carril.
Valores: auto, #1d3557 #e3eaf4
El grosor de la barra de desplazamiento.
Valores: auto, thin, none
Reserva el hueco de la barra aunque no aparezca, para que el contenido no salte cuando aparece.
Valores: auto, stable, stable both-edges
Avisa al navegador de qué propiedad va a animarse para que se prepare. Solo si hay un problema de fluidez: abusar de ella empeora el rendimiento.
Valores: auto, transform, opacity
El cursor, qué se puede pulsar o seleccionar y cómo se comporta el scroll.
Código del tema: .a { cursor: pointer; }
El cursor, qué se puede pulsar o seleccionar y cómo se comporta el scroll: suave, con imanes o sin arrastrar la página de detrás.
Cada elemento lleva una definición corta y un ejemplo. En Practica, al final, tienes los mismos ejemplos para editarlos y ver el resultado al momento.
Esencial. El aspecto del puntero del ratón sobre el elemento.
Valores: pointer, default, text, not-allowed, grab, wait, help, zoom-in
Con none, el elemento no recibe clics: pasan a lo que hay debajo.
Valores: auto, none
Si el texto se puede seleccionar.
Valores: auto, none, all, text
Qué gestos táctiles gestiona el navegador (desplazar, hacer zoom) en el elemento.
Valores: auto, none, pan-y, manipulation
Si la persona puede cambiar el tamaño de la caja arrastrando la esquina (lo tienen los <textarea>). Necesita un overflow distinto de visible.
Valores: none, both, vertical, horizontal
Esencial. Con smooth, los saltos a un ancla (#seccion) se hacen con desplazamiento suave. Va en html o en el contenedor que se desplaza.
Valores: auto, smooth
Margen al llegar a un ancla: evita que una cabecera fija tape el título (también scroll-margin-top…).
Valores: 0, 5rem
Relleno del contenedor de scroll para las anclas y los imanes de desplazamiento.
Valores: 0, 4rem 0 0
Convierte el contenedor en un carrusel con imanes: el scroll se detiene en posiciones exactas.
Valores: x mandatory, y proximity, none
Dónde se para el imán en cada hijo de un contenedor con scroll-snap-type.
Valores: start, center, end, none
Con contain, al llegar al final de una caja con scroll no se desplaza la página de detrás (útil en menús y ventanas).
Valores: auto, contain, none
Los colores de la barra de desplazamiento: el pulgar y el carril.
Valores: auto, #1d3557 #e3eaf4
El grosor de la barra de desplazamiento.
Valores: auto, thin, none
Reserva el hueco de la barra aunque no aparezca, para que el contenido no salte cuando aparece.
Valores: auto, stable, stable both-edges
Avisa al navegador de qué propiedad va a animarse para que se prepare. Solo si hay un problema de fluidez: abusar de ella empeora el rendimiento.
Valores: auto, transform, opacity