Noticias semanales de la plataforma: pseudoclase :not(), consultas de medios de vídeo, clip-path: path() soporte

Oye, volvemos con actualizaciones semanales sobre el panorama de los navegadores de Šime Vidas.

En la actualización de esta semana, la :notpseudoclase CSS puede aceptar selectores complejos, cómo deshabilitar el desplazamiento suave al usar “Buscar en la página…” en Chrome, el soporte de Safari para sus mediaatributos en videolos elementos y el tan esperado debut de la path()función para CSS. clip-pathpropiedad.

Saltemos a las noticias…

La pseudoclasa :not() mejorada permite nuevos tipos de selectores potentes

Después de una espera de años, la :not()pseudoclase mejorada finalmente se lanzó en Chrome y Firefox, y ahora es compatible con los principales motores de navegador. Esta nueva versión :not()acepta selectores complejos e incluso listas de selectores completas.

Por ejemplo, ahora puede seleccionar todos plos elementos que no están contenidos dentro de un articleelemento.

/* select all ps that are descendants of article */article p {}/* NEW! *//* select all ps that are not descendants of article */p:not(article *) {}

En otro ejemplo, es posible que desee seleccionar el primer elemento de la lista que no tiene el hiddenatributo (o cualquier otro atributo, de hecho). El mejor selector para esta tarea sería :nth-child(1 of :not([hidden])), pero la ofnotación todavía sólo es compatible con Safari. Afortunadamente, este selector no es compatible ahora se puede reescribir utilizando únicamente la :not()pseudoclasa mejorada.

/* select all non-hidden elements that are not preceded by a non-hidden sibling (i.e., select the first non-hidden child */:not([hidden]):not(:not([hidden]) ~ :not([hidden])) {}

El encabezado HTTP Refreshpuede ser un problema de accesibilidad

El encabezado HTTP Refresh(y la etiqueta HTML equivalente meta) es una característica no estándar muy antigua y ampliamente admitida que indica al navegador que recarga la página de forma automática y periódica después de un período de tiempo determinado.

!-- refresh page after 60 seconds --meta http-equiv="refresh" content="60"

Según los datos de Google, la meta http-equiv="refresh"etiqueta es utilizada por un enorme 2,8% de las cargas de páginas en Chrome (en comparación con el 4% hace un año). Todos estos sitios web corren el riesgo de no cumplir varios criterios de éxito de las Pautas de accesibilidad al contenido web (WCAG):

Si el intervalo de tiempo es demasiado corto y no hay forma de desactivar la actualización automática, las personas ciegas no tendrán tiempo suficiente para hacer que sus lectores de pantalla lean la página antes.la página se actualiza inesperadamentey hace que el lector de pantalla comience a leer en la parte superior.

Sin embargo, WCAG permite usar la meta http-equiv="refresh"etiqueta específicamente con el valor 0para realizar una redirección del lado del cliente en el caso de que el autor no controle el servidor y, por lo tanto, no pueda realizar una redirección HTTP adecuada.

(a través de Stefan Judis)

Cómo deshabilitar el desplazamiento suave para la función “Buscar en la página…” en Chrome

CSS scroll-behavior: smoothes compatible con Chrome y Firefox. Cuando esta declaración se establece en el htmlelemento, el navegador se desplaza por la página “sin problemas”. Esto se aplica a las navegaciones, las API de desplazamiento estándar (p. ej., window.scrollTo({ top: 0 })) y las operaciones de ajuste de desplazamiento (CSS Scroll Snap).

Desafortunadamente, Chrome mantiene activado por error el desplazamiento suave incluso cuando el usuario realiza una búsqueda de texto en la página (función “Buscar en la página…”). Algunas personas se encuentran esto molesto. Hasta que esto se solucione, puede utilizar la solución inteligente CSS de Christian Schaefer que deshabilita efectivamente el desplazamiento suave solo para la función “Buscar en la página…”.

@keyframes smoothscroll1 {  from,  to {    scroll-behavior: smooth;  }}@keyframes smoothscroll2 {  from,  to {    scroll-behavior: smooth;  }}html {  animation: smoothscroll1 1s;}html:focus-within {  animation-name: smoothscroll2;  scroll-behavior: smooth;}

En la siguiente demostración, observe cómo al hacer clic en los enlaces se desplaza la página suavemente mientras busca las palabras “arriba” y “abajo” la página se desplaza instantáneamente.

Safari todavía admite el mediaatributo en fuentes de vídeo

Con el videoelemento HTML, es posible declarar múltiples fuentes de vídeo de diferentes tipos y codificaciones MIME. Esto permite que los sitios web utilicen formatos de vídeo más modernos y eficientes para admitir navegadores, al tiempo que proporciona una alternativa para otros navegadores.

video  source src="/flower.webm" type="video/webm"  source src="/flower.mp4" type="video/mp4"/video

En el pasado, los navegadores también admitían el mediaatributo en fuentes de vídeo. Por ejemplo, una página web podría cargar un vídeo de mayor resolución si la ventana gráfica del usuario superase un tamaño determinado.

video  source media="(min-width: 1200px)" src="/large.mp4" type="video/mp4"  source src="/small.mp4" type="video/mp4"/video

De hecho, la sintaxis anterior todavía es compatible con Safari hoy en día, pero se eliminó de otros navegadores alrededor de 2014 porque no se consideró una buena característica:

No es apropiado elegir entre baja resolución y alta resolución porque el entorno puede cambiar (por ejemplo, el usuario puede mostrar el vídeo en pantalla completa después de que haya comenzado a cargarse y desee alta resolución). Además, el ancho de banda no está disponible en las consultas de medios, pero incluso si lo estuviera,el agente de usuario está en una mejor posición para determinar qué es apropiadoque el autor.

Scott Jehl (Filament Group) sostiene que la eliminación de esta función fue un error y que los sitios web deben poder ofrecer fuentes de vídeo responsivas utilizando videosolos.

Para cada vídeo que incrustamos en HTML, nos enfrentamos a la opción de entregar archivos de origen que son potencialmente demasiado grandes o pequeños para los dispositivos de muchos usuarios… o recurrir a soluciones más complicadas del lado del servidor, de scripts o de terceros para ofrecer un tamaño correcto.

Scott ha escrito una propuesta para la reintroducción de elementos mediade vídeo sourcey agradece los comentarios.

La función CSS clip-path: path()se envía en Chrome

No se mencionó en el último artículo “Novedades en Chrome 88”, pero Chrome acaba de incluir la path()función para la propiedad CSS clip-path, lo que significa que esta característica ahora es compatible con los tres principales motores de navegador (Safari, Firefox y Chrome).

La path()función se define en el módulo CSS Shapes y acepta una cadena de ruta SVG. Chris llama a esto la sintaxis definitiva para la clip-pathpropiedad porque puede recortar un elemento con “literalmente cualquier forma”. Por ejemplo, aquí hay una foto recortada con forma de corazón: