Cómo diseñar el nuevo ::search-text y otros pseudoelementos resaltados

Cromo 144 enviado recientemente ::search-textes ahora uno de varios pseudoelementos relacionados con el resaltado. Esta selección busca texto en la página, que es el texto que se resalta cuando lo hace. teclas de control/Orden + F– Escriba su búsqueda en la página y encuentre coincidencias.

Por defecto, ::search-text Las coincidencias son amarillas y el objetivo actual (::search-text:current) es naranja, pero ::search-text Para que podamos cambiar esto.

Lo admito, realmente no presté atención a estos pseudoelementos resaltados. Hasta ahora ni siquiera sabía que tenían un nombre, pero me alegro que lo tenga porque hace que sea más fácil agruparlos todos y compararlos, que es exactamente lo que voy a hacer hoy, ya que no es muy obvio qué hacen según los nombres de los pseudoelementos. También explicaré por qué podemos personalizarlos y haré sugerencias sobre cómo hacerlo.

Diferentes tipos de pseudoelementos destacados

no nos olvidemos <mark> Elemento HTML, que es lo que estoy usando en la demostración siguiente.

¿Cómo debería verse un pseudoelemento resaltado?

La pregunta es, si todos (excepto ::highlight()) tienen estilos predeterminados, ¿por qué necesitamos seleccionarlos con pseudoelementos? Las razones son la accesibilidad (especialmente el contraste de color) y la usabilidad (énfasis). Por ejemplo, si el fondo amarillo predeterminado es ::search-text El contraste con el color del texto no es lo suficientemente bueno, o si no destaca sobre el fondo del contenedor, entonces necesitas cambiarlo.

Estoy seguro de que hay muchas formas de resolver este problema (me gustaría saber “Desafío aceptado” en los comentarios), pero la mejor solución que se me ocurrió fue usar sintaxis de color relativa. Fui en la dirección equivocada en ambos sentidos. background-clip: text y backdrop-filter: invert(1) Antes de que te des cuenta de que muchas propiedades CSS están prohibidas al resaltar pseudoelementos:

body {
  --background: #38003c;
  background: var(--background);

  mark,
  ::selection,
  ::target-text,
  ::search-text {
    /* Match color to background */
    color: var(--background);

    /* Convert to RGB then subtract channel value from channel maximum (255) */
    background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b));
  }
}

Es posible que su navegador aún no lo admita, por lo que aquí hay un video que muestra cómo el texto resaltado se adapta a los cambios en el color de fondo.

Lo que sucede aquí es que convierto el color de fondo del contenedor al formato RGB y luego resto el valor de cada canal (r, gy b) del valor máximo del canal 255invierte cada canal y el color general. Luego establece ese color como color de fondo del resaltado, asegurándote de que se destaque pase lo que pase, gracias al nuevo Variables de diapositiva de CodePenpuedes probar la demostración para verlo en acción. Es posible que puedas hacer esto usando un formato de color distinto al RGB, pero RGB es el más fácil.

Eso cubre la usabilidad, pero ¿qué pasa con la accesibilidad?

Bueno, el color del texto resaltado es el mismo que el color de fondo del contenedor porque sabemos que es resaltado Color de fondo. Si bien esto no significa que estos dos colores tendrán un contraste accesible, sí parece que en la mayoría de los casos tendrán un contraste accesible (siempre debes usar Herramienta de contraste de colora pesar de).

Es comprensible si no te gusta la aleatoriedad de invertir colores. Definitivamente puedes elegir colores y escribir CSS condicional manualmente para ellos, pero encontrar colores accesibles para todos los diferentes tipos de pseudoelementos resaltados que se destacan en los diferentes contextos del diseño, teniendo en cuenta modos de visualización alternativos como el modo oscuro, puede ser un dolor de cabeza. Además, creo que ciertos elementos de la interfaz de usuario (por ejemplo, resaltados, errores, indicadores de enfoque) debería ponerse feo. a ellos debería Destaca de una manera brutalista que se siente desconectada de la paleta de colores del diseño. Deben obtener la máxima atención al no mezclarse deliberadamente.

Tenga en cuenta que los diferentes tipos de pseudoelementos resaltados también deben ser visualmente distintos por razones obvias, pero también para evitar que dos tipos diferentes se superpongan (por ejemplo, el usuario selecciona el texto que actualmente coincide con Buscar en la página). Entonces, en el fragmento de código modificado a continuación, mark, ::selection, ::target-texty ::search-text Todos ellos provienen de entornos ligeramente diferentes.

me he ido mark sin cambios, entonces r valor ::selection De hecho, g valor ::target-text tal cual, y b valor ::search-text De hecho, sólo dos de los últimos tres canales están invertidos, en lugar de estar invertidos los tres canales. Ahora son de diferentes colores (pero todavía se ven al revés) y tienen un valor alfa agregado. 70% (100% para ::search-text:current), también se mezclan entre sí para que podamos ver dónde comienza y termina cada resaltado:

body {
  --background: #38003c;
  background: var(--background);

  mark,
  ::selection,
  ::target-text,
  ::search-text {
    color: var(--background);
  }

  mark {
    /* Invert all channels */
    background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b) / 70%);
  }

  ::selection {
    /* Invert all channels but R */
    background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
  }

  ::target-text {
    /* Invert all channels but G */
    background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
  }

  ::search-text {
    /* Invert all channels but B */
    background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 70%);
    
    &:current {
      /* Invert all channels but B, but without transparency */
      background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 100%);
    }
  }
}

::spelling-error y ::grammar-error están excluidos de todo esto, ya que tienen sus propias posibilidades visuales (subrayado rojo y subrayado verde respectivamente), generalmente contrastados con el fondo neutro del elemento editable, p. <textarea>).

pero mark, ::selection, ::target-textY nuevo en Chrome ::search-text? Bueno, pueden aparecer en cualquier lugar (incluso uno encima del otro), por lo que creo que es importante que sean visualmente distintos entre sí y al mismo tiempo sean accesibles en todo momento. Sin embargo, es posible que incluso los colores completamente invertidos no sean accesibles. De hecho, viceversa #808080 Sí #808080¡Así que prueba, prueba, prueba! Aunque, tal vez contrast-color() una vez Módulo de color CSS nivel 5 Su versión ha sido lanzada.

al mismo tiempo, por favor¡no más elementos resaltados!