::Buscar texto | Consejos CSS

CSS ::search-text El pseudoelemento selecciona el texto coincidente de la función “buscar en la página” del navegador. Por ejemplo, si utiliza una búsqueda en el navegador para encontrar “texto de búsqueda” en esta página, se resaltarán todas las instancias del mismo. Este pseudoelemento nos permite diseñar la apariencia de este destacado.

¡Y hay una ventaja! Si hay varias coincidencias en la página, entonces ::search-text Se puede utilizar con :current Pseudoclase para establecer el estilo que coincide con el enfoque actual.

Puedes usar “Buscar en la página” CTRL+F (para Windows) o "⌘F" (para Mac) Atajos de teclado.

::search-text {
  background: oklch(87% 0.17 90) /* yellow */;
  color: black;
}

::search-text:current {
  background: oklch(62% 0.22 38) /* red */;
  color: white;
}

CSS ::search-text Los pseudoelementos se definen en Especificación de nivel 4 del módulo de pseudoelemento CSS.

sintaxis

¡Muy sencillo! Declare pseudoelementos y agregue reglas de estilo:

<element-selector>::search-text{
  /* ... */
}

uso

Generalmente se declara por sí solo (::search-text), pero también se puede adjuntar a elementos específicos:

/* All text */
::search-text {}
html::search-text {} /* kind of redundant */
/* Specific element */
section::search-text {}
strong::search-text {}

Las propiedades CSS que podemos declarar son algo limitadas ::search-text. Esto es lo que admite:

si podemos usarlo Propiedades personalizadascomo:

:root {
  --color-blueberry: oklch(0.5458 0.1568 241.39);
}
::search-text {
  background-color: var(--color-blueberry);
}

Uso básico

junto con ::search-text Para los pseudoelementos, podemos establecer el estilo de “buscar en la página” que coincida con los resultados del texto. Además, si queremos establecer el estilo del texto coincidente actualmente enfocado, agregamos :current pseudoclases después ::search-text.

/* matches all searched text */
::search-text {
  color: green;
  background-color: white;
}
/* matches any header level 1 searched text */
h1::search-text {
  text-shadow: 12px 1px lightgrey;
  background-color: black;
  color: white;
}
/* the current searched header level 1 text */
h1::search-text:current {
  color: red;
  background: white;
}

cadena de herencia

Todos los descendientes siempre heredan el estilo aplicado mediante el pseudoelemento resaltado. De esta manera, cada atributo establecido en el resaltado se aplicará en cascada a todos los elementos debajo de los tres elementos. Tome el siguiente HTML como ejemplo:

<article>
  <h2>Highlight inheritance demo</h2>
  <p>Lorem ipsum dolor sit amet. <strong>Lorem</strong> appears again here. Another lorem appears here.
  </p>
</article>

tenemos un <article> Contenedor con dos niños: <h2> y <p>este último tiene un <strong> propios descendientes. podemos diseñar ::search-text existir <article> Utilice el siguiente CSS, esto se aplicará a todos los elementos en <article>:

article::search-text {
  background: gold;
  color: black;
  text-decoration: underline;
}

Luego, sobrescribe color solo propiedad <p> y sus descendientes:

p::search-text {
  color: orange;
}

y para text-decoration En <strong> elemento:

strong::search-text {
  text-decoration: line-through;
}

Cuando buscas “lorem”, el fondo de la primera instancia (interno <p> pero afuera <strong>) heredará background y text-decoration El valor proviene de <article>mientras cubre su color tener su propio valor orange.

Sobre <strong>Texto ‘lorem’ que heredará las propiedades que configuramos en su padre <p> y abuelos <article. entonces color y background Los valores se heredan directamente de sus padres y, como no se anulan, se conservan. cuando cubrimos text-decoration valor line-through.

La conclusión clave de este ejemplo es que las propiedades del elemento resaltado también se pueden heredar y anular individualmente.

texto de anclaje

En la demostración a continuación configuramos text-decoration llegar underline Agrega un subrayado azul a cualquier texto buscado. De esta manera podemos personalizar el texto coincidente manteniendo el color de fondo predeterminado, lo que evita que las personas se confundan sobre lo que está sucediendo.

::search-text {
  text-decoration: underline;
  text-decoration-color: oklch(65% 0.18 240);
  text-decoration-thickness: 0.22em;
  text-underline-offset: 0.15em;
}

usar :current

usar ::search-text y :currentpodemos diseñar la combinación de interés actual. Por ejemplo, a continuación aplicamos un tono naranja claro al color de decoración del texto. 0.3em El grosor del texto de búsqueda actualmente coincidente:

::search-text:current {
  text-decoration-color: oklch(85% 0.22 38);
  text-decoration-thickness: 0.3em;
}

Algunas instrucciones auxiliares de uso.

Para los estándares de comparación WCAG, Necesita una relación de contraste de al menos 4,5:1 entre texto y fondo. Otro consejo es no cambiar demasiado los colores de búsqueda. De hecho, esta característica debe usarse con precaución, ya que puede causar problemas a los usuarios con problemas cognitivos y, como parte central del navegador, a menudo puede resultar confusa. Mi consejo personal es seguir text-decoration y sus propiedades relacionadas porque son más sutiles que las demás.

además :past y :future

este :past y :future Las pseudocategorías deben coincidir exactamente con los elementos antes y después. :current elementos, respectivamente.

Sin embargo, la especificación dice:

este :past y :future Las pseudoclases están reservadas para usos futuros similares. Cualquier combinación no compatible de estas pseudoclases ::search-text debe considerarse inválido

Es decir, no puedes usar :past, :future o cualquier otra pseudoclase ::search-text Pseudoelementos. Si su navegador funciona con ellos de alguna manera, informe sobre comportamientos inesperados haciéndoles una pregunta.

Especificación

CSS ::search-text Los pseudoelementos se definen en Especificación de nivel 4 del módulo de pseudoelemento CSS. Esto todavía se está probando y mejorando.

Soporte del navegador

Soporte muy extenso:

¡Consejos relacionados!

Importante