Algunas partes del navegador parecen inalcanzables, como si estuvieran integradas en el propio navegador. ¿Puede CSS ayudarnos a resolver este problema?
La mayoría de los desarrolladores piensan en CSS como una herramienta para diseñar diseño, espaciado y color, pero el CSS moderno es mucho más que eso.
CSS puede incluso diseñar algunos elementos nativos en el navegador que quizás nunca hayas considerado diseñar.
Algunas partes del navegador parecen inalcanzables, como si estuvieran integradas en el propio navegador. ¿Has intentado cambiar el color del resaltado de selección de usuario? ¿Qué pasa con las barras de desplazamiento? ¿Puede CSS ayudarnos a resolver este problema?
Sí, claro.
Si quieres saber cómo, sigue leyendo.
elegir
CSS proporciona una excelente manera de mostrar que su sitio fue creado por profesionales y que su sitio no tiene nada sin diseñar, lo que se denomina pseudoselector.
Esto se puede aplicar a todo el sitio web, a la página completa o a una parte usando CSS, como se muestra a continuación.
/* This will style the selection of the entire page */
body::selection {
background-color: pink;
}
/* This will style the selection of the "blue" class elements */
.blue::selection {
background-color: skyblue;
}
Puede diseñar el color y el color de fondo (también puede agregar sombras de texto y decoraciones de texto), pero considere la legibilidad aquí, ya que algunas personas seleccionan texto mientras leen.
Además, probablemente debería tener en cuenta cualquier consideración de accesibilidad, como el daltonismo y los requisitos de alto contraste.
Para obtener más información y demostraciones en vivo, consulte el CodePen a continuación:
https://medium.com/media/90d1799dd058639145aba7a58bd70bf6/href
Lectura adicional:
signo de intercalación
El cursor es un pequeño “cursor” que parpadea dentro de la entrada de texto y las áreas de texto. Se puede configurar con un color o forma diferente y, de forma predeterminada, se ve así: |Está parpadeando.
Podemos cambiar la forma del cursor usando forma de intercalación Vaya a “barra” (Ejemplo|), “bloque” (Ejemplo▮) o “resultado final” (Ejemplo_).
Tradicionalmente, vemos “columnas” en la mayoría de los formularios web, “bloques” son algo que podemos ver en una terminal o en interfaces DOS más antiguas, y los “guiones bajos” generalmente están reservados para el software de procesamiento de textos.
Pero eso no es todo, también podemos cambiar el color de los tres signos de intercalación parpadeantes directamente desde los estilos CSS.
input(type="text") {
caret-color: red;
caret-shape: block;
}
Para obtener más información y demostraciones en vivo, consulte el CodePen a continuación:
https://medium.com/media/97f8207f6eb021102a2448c971194d59/href
Lectura adicional:
Color MDN-caret
MDN – forma de intercalación
carrete
La barra de desplazamiento también se puede ajustar mediante CSS, pero lo probaré en muchos dispositivos y plataformas porque existen inconsistencias entre ellos.
Propiedades CSS Ancho del carrete Se puede configurar en valor automático, fino o ninguno y ninguno No se muestran pergaminos Pero mantiene el elemento desplazable. No me gusta esta combinación, pero veo muchos sitios que usan el desplazamiento, pero no puedo ver la barra de desplazamiento, así que supongo que tiene su lugar.
Es importante tener en cuenta Color de la barra de desplazamiento No funciona a menos que le dé dos valores de color, el primero es el color del control deslizante de desplazamiento y el segundo es el color de la pista que se muestra al desplazarse al pasar el mouse (al menos en Mac), a menos que se cambie en la configuración.
Si no te gusta el efecto o rompe tu diseño, siempre puedes usar algo como el código siguiente para ocultar el segundo color (para que el usuario no pueda ver la pista).
.scroll-element {
scrollbar-color: red transparent;
}
Para obtener más información y demostraciones en vivo, consulte el CodePen a continuación:
https://medium.com/media/257dc1364353e4a4f5968804986c8485/href
Lectura adicional:
Estilo de desplazamiento MDN
Ancho de la barra de desplazamiento MDN
MDN-Color de desplazamiento
color de acento
Esto es muy simple, color de acento Puede cambiar los colores de diferentes elementos en un documento HTML.
Cambiará los colores predeterminados de elementos como: casillas de verificación, botones de opción, entradas de rango y barras de progreso, respetando todas las pautas de accesibilidad para los usuarios que lo requieran.
Por ejemplo, observe cómo el código siguiente hace que todas las casillas de verificación sean negras en lugar del blanco predeterminado porque es más legible para los usuarios.
.container.green {
accent-color: yellowgreen;
}
Para obtener más información y demostraciones en vivo, consulte el CodePen a continuación:
https://medium.com/media/620f21382aa75ef2afc2aedbf37b0582/href
Lectura adicional:
Modos oscuro y claro
Esta sección es en realidad dos consejos, el primero es usar algo como esto en todo el HTML, el elemento del cuerpo o cualquier elemento cuyo tema desee cambiar con el modo preferido del usuario:
html {
color-scheme: light dark;
}
Prefiero usarlo en todo el elemento HTML, como en el ejemplo anterior, al menos hasta que sepas exactamente qué ha cambiado y qué no.
Este código debería cambiar automáticamente todo el contenido al tema correcto para el modo preferido del usuario (modo oscuro o modo claro).
El segundo consejo que compensa las deficiencias del primer ejemplo es utilizar el siguiente código en cualquier elemento cuyo color desee cambiar cuando el usuario cambia entre el modo claro y el modo oscuro, y el navegador seleccionará automáticamente la opción correcta cada vez.
.container {
background-color: light-dark(white, black);
}
```
El código anterior significa que todos sus contenedores obtendrán un color de fondo blanco en modo claro y un color de fondo negro en modo oscuro, y cuando el usuario se mueva entre ellos, se aplicará dinámicamente para que el usuario no necesite actualizar la página.
Para obtener más información y demostraciones en vivo, consulte el CodePen a continuación:
https://medium.com/media/2c19b19cf9f573a95ad5e78ef3cca3f0/href
Lectura adicional:
Esquema de colores MDN
MDN-Claro-Oscuro()
Tamaño del lugar
esto es solo para área de texto y ingresar Elementos, lo que les permite crecer y reducirse en función del contenido que contienen.
textarea {
field-sizing: content;
width: 100%;
max-height: 50vh;
}
Código de muestra para área de texto Para cambiar el tamaño de algo a medida que el usuario escribe, recomiendo agregar ancho o ancho máximo Limitando su tamaño potencialmente infinito, y por supuesto la altura.
Para obtener más información y demostraciones en vivo, consulte el CodePen a continuación:
https://medium.com/media/b4c8e3c8f5bdd270fd9f77048d1f6691/href
Lectura adicional:
en conclusión
Estoy escribiendo esta publicación porque veo muchos sitios web que no funcionan con estos estilos, muchos con colores de selección preestablecidos, barras de desplazamiento preestablecidas, sin colores de acento y sin modo oscuro del que hablar.
Me di cuenta de que parte del problema era que nuestras herramientas de diseño no habían establecido puntos en común con nuestro producto, lo que hacía más difícil presentar y transferir cambios como este a los desarrolladores de aplicaciones para el usuario.
Pero si queremos que estos estilos CSS personalizados aparezcan en más sitios web, primero debemos entenderlos, y es por eso que escribí este artículo.
Compártelo con cualquier diseñador o desarrollador que creas que podría necesitar una reseña y, si te gustó, quizás quieras leerlo. Cómo las herramientas que utilizamos cambian los productos que diseñamos.
Nos vemos a todos en los comentarios a continuación.
Lectura adicional:
Más consejos rápidos de CSS, Kevin Powell, YouTube
7 trucos de CSS que te sorprenderán, Coding2GO, YouTube
Guía del modo oscuro en CSS, Adhuham, consejos CSS
Funciones de color CSS, Sunkanmi Fafowora, Consejos CSS
El estado actual del estilo de la barra de desplazamiento en CSS, Chris Coyier, Consejos CSS
Enlace incrustado del artículo:
MDN-::seleccionar
Color MDN-caret
MDN – forma de intercalación
Estilo de desplazamiento MDN
Ancho de la barra de desplazamiento MDN
MDN-Color de desplazamiento
MDN – Color de acento
Esquema de colores MDN
MDN-Claro-Oscuro()
Tamaño del campo MDN
No sabías que podías diseñar CSS Publicado originalmente en colectivo de experiencia de usuario En Medium, la gente continúa la conversación destacando y respondiendo a esta historia.
