Envíelo a la categoría «Primera señorita». De repente aparece en Notas de lanzamiento de Firefox 139 Era Oh, ordenado. Entonces vi Ha sido cromado desde al menos 2022. Cuando escribí este libro Inicie sesión en la vista previa de la tecnología Safari 125. Entonces lo tienes.
Resulta que hay algunas buenas publicaciones y tutoriales. hidden=until-found Flotando allí, así que creo que mantendré algunos puntos clave bajos para referencia futura.
Hace que el contenido oculto sea «encontrar»
Historia corta: filmación hidden=until-found En elementos en HTML, cualquier contenido oculto en el elemento se puede encontrar en el navegador a través de una búsqueda de página.
<div hidden="until-found">
<!-- hidden content -->
</div>Verás o más exactamente No Mira, el contenido está oculto en la ubicación apropiada:
Es content-visibility: hidden Debajo del capó
El navegador lo usa como una pista para ocultar contenido y lo hace con configuraciones implícitas content-visibility: hidden En elementos en el estilo de agente de usuario.
Si hacemos uno Ctrl+ +F Active la búsqueda de página en el teclado e ingrese la consulta, luego coincida con el contenido que se muestra, resaltando la consulta coincidente.
Por qué necesitamos esto
Esta es la pregunta que me hice cuando comencé a profundizar en esta pregunta. El ejemplo más destacado de usar es Documentación del desarrollador para Chrome Como artificial. Ya sabes, una serie de clics de panel abierto y cerrado.
Pero ahora tenemos una solución <details> elemento ¿Listo? Los widgets de divulgación semántica también se pueden usar para Contenido de divulgación. De hecho, el navegador también está establecido content-visibility: hidden existir ::details-content Parte del elemento que contiene el contenido.
Estoy muy seguro <details> No tan ampliamente compatible en 2022 como lo es hoy. Esto es en realidad INERTOP 2025 Y tenga en cuenta que una de las características mencionadas es la función de buscar dentro de la página. Chrome ya lo apoya. Firefox lo envió recientemente (opinalmente hidden=until-found liberar). El Safari probablemente llegará usando Interopp 2025. El ejemplo de Chrome del desarrollador muestra un método en torno a los métodos no compatibles. <details> Elemento, ahora lo tenemos.
Entonces, ¿por qué hidden=until-closed?
No tengo ni idea. Estoy seguro de que hay un buen caso de uso para ocultar contenido de alguna manera mientras se puede buscar. No puedo pensar en la parte superior de mi cabeza. Quiero decir, tenemos popover De nuevo, pero esto adopta un enfoque diferente display: none Esto elimina completamente el contenido de la búsqueda de la página.
Soporte de navegador y polyfill
Hemos confirmado que Chrome y Firefox se unen. Safari es un palo más grande, pero sabe hacer contenido oculto <details> Descubrible es parte de INETROP 2025 (y el apoyo correspondiente para Firefox como parte de este esfuerzo) me hace pensar que está a la vuelta de la esquina. (La intuición demuestra ser correcta, porque Inicie sesión en la vista previa de la tecnología Safari 125 Después de escribir este artículo. )
Pero, al mismo tiempo, vale la pena usar hidden=until-found? Porque si nuestro objetivo es mantener una experiencia constante de navegador cruzado, necesitamos content-visibility: hidden Ocultar contenido y content-visible: auto Revelarlo.
Nathan Knowler Explicación profesional Esto creará un problema. No podemos establecer content-visibility: hidden No se elimina de la búsqueda de la página ni se elimina. este hidden=until-found Los atributos son exactamente como content-visibility: hidden Pero insista en que las búsquedas dentro de la página siguen siendo válidas. En otras palabras, no podemos combinar la función con content-visibility.
Gracias Nathan por caminar por la madriguera gigante de conejos y encontrar una solución que utilice Shadow DOM para encontrar atributos HTML, verifica el soporte y restaura sus atributos cuando es necesario para ocultar visualmente el contenido sin descubrirlo completamente.
modelado
No parece haber mucho visible sobre el estilo, pero tenga en cuenta que la función de búsqueda de la página destaca qué coincide con la consulta de búsqueda.
Parece que podríamos obtener uno nuevo ::search-text Pseudo podemos seleccionar consultas coincidentes y colores destacados de estilo aquí Especificaciones del módulo de pseudo-elemento CSSActualmente estaba en el borrador del estado editado cuando estaba escribiendo este artículo.
¿Qué pasa con esas competiciones? La selección actual tiene diferentes aspectos destacados de los partidos posteriores.
Dependiendo de las especificaciones, podemos combinar ::search-text y :current El pseudo nivel es para el partido actual: ::search-text:current.
Si crees que podríamos mezclar partidos ::search-text y correspondiente :past y :future Es pseudo-nivel, me temo que las especificaciones no lo son. Pero esto no cierre por completo la puerta:
este
:pasty:futureLas reservas a nivel de pseudo se utilizan para usos futuros similares. Cualquier combinación no compatible de estos pseudo-niveles::search-textdebe Considerado inválido.
¿algo más?
No es cierto, pero me gustan las notas al final de Christian Shaefer «Repensar la accesibilidad de la página» La publicación dice que las consideraciones deben ingresar lo que sucede atrás La consulta de búsqueda coincide con el contenido en la página. Actualmente, el contenido aún es visible incluso después de que la búsqueda en la página haya finalizado o cancelado. Tal vez necesitemos otras indicaciones HTML.
Enlace
Mientras investigaba esto, descubrí y usé una serie de cosas:
