CSS tiene algunas características menos conocidas pero útiles. Examinaremos algunos de ellos.

1. Propiedad CSS scroll-snap-type y propiedad scroll-snap-stop

parada-desplazamiento-snap

Cuando esta propiedad se establece para cada elemento secundario debajo del elemento principal, cuando se desplaza rápidamente por la pantalla, se evita que el siguiente elemento pase mientras se desplaza rápidamente con un trackpad o pantalla táctil.

Gif:

Ejemplo :

Valor :

• Normal: es el valor predeterminado. Desplazarse es el comportamiento predeterminado

• Siempre: después de deslizar rápidamente con el panel táctil o la pantalla táctil, el desplazamiento se detiene y el siguiente elemento se enfoca.

propiedad de tipo desplazamiento-snap

Arrastra el control deslizante horizontalmente, suéltalo y verás el efecto.
El efecto se produce cuando haces clic en un cuadro y luego navegas usando las teclas de flecha izquierda y derecha

Gif:

Ejemplo :

Valor :

• Ninguno: este es el valor predeterminado

• X : El efecto se establece en el eje x

• Y : El efecto se establece en el eje y

• Ambos: el efecto se establece en el eje x y en el eje y

• Obligatorio: una vez finalizado el desplazamiento, el desplazamiento se mueve automáticamente al punto de captura

2. Propiedad CSS place-items

El valor establecido para la propiedad place-items se aplicará a las propiedades align-items y justify-items.

Ejemplo :

Valor :

• Inicio: Alinear elementos al inicio de la celda de la cuadrícula

• Fin: Alinear elementos al final de la celda de la cuadrícula

• Centro: Alinear elementos al centro de la celda de la cuadrícula

3. CSS todas las propiedades

Cambia todas las propiedades aplicadas al elemento o su padre a sus valores iniciales

Ejemplo :

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Valor :

• Desarmar: Cambia todas las propiedades aplicadas al elemento o al padre del elemento a su valor padre si son heredables o a su valor inicial si no

4. Propiedad de selección de usuario CSS

Evita que los usuarios seleccionen textos

Ejemplo:

The text of this div element cannot be selected.

5. Propiedad CSS color caret

Cambia el color del cursor (carácter) en los campos de entrada de texto.

6. Propiedad CSS text-decoration-skip-ink

La propiedad CSS text-decoration-skip-ink especifica cómo se dibujan el subrayado y el sobrerayado al pasar sobre glifos sobre líneas y subrayados.

Valor :

• Ninguno:

Ejemplo :

text-decoration-skip-ink: none;

• Automático:

Ejemplo :

text-decoration-skip-ink: auto;

7. Propiedad de eventos de puntero CSS

La propiedad pointer-events define si un elemento reacciona o no a eventos de puntero.

Ejemplo :

Google


 Google

Valor:

• Ninguno : Predeterminado

• Auto: El elemento no reacciona a los eventos del puntero

Conclusión

Examinamos las características poco conocidas de CSS. Aprendimos las características que serán útiles en sus aplicaciones.