¡Qué es! Importante n.º 4: transiciones de visualización y vídeo, consultas de medios con nombre, cómo funcionan los navegadores y más

Chrome, Safari y Firefox no han implementado nuevas funciones en las últimas semanas, pero no se preocupe, porque a la cabeza de esta edición de What’s!important se encuentran algunos de los mejores educadores de la industria del desarrollo web y, francamente, tienen algunas asesino contenido.

Utilice transiciones de vista para mantener el estado del video en diferentes páginas

Demostración de Chris Coryell Cómo utilizar transiciones de vista CSS para mantener el estado de un vídeo en diferentes páginas. Señala que para transiciones de vistas de la misma página esto es bastante fácil de hacer, pero para transiciones de vistas de varias páginas es necesario aprovechar JavaScript. pageswap Evento utilizado para guardar información sobre el estado del vídeo. sessionStorage como una cadena JSON (también funciona para audio e iframes) y luego usar esa información para restaurar el estado pagereveal. si hay uno tumei El audio está un poco entrecortado ya que técnicamente lo estamos fingiendo, pero aún así es bastante bueno.

Además, estoy seguro de que ya sabes que CodePen, fundada por Chris, anunció Beta privada de CodePen 2.0puedes solicitar unirte. Uno de los beneficios de CodePen 2.0 es que puede crear proyectos reales con varios archivos, lo que significa que puede crear transiciones de vista en CodePen. ¡Fresco!

Cómo “nombrar” una consulta de medios

Kevin Powell nos muestra Cómo “nombrar” consultas de medios usando cascadas CSS. Esta tecnología no es tan buena como @custom-media (O incluso consultas de estilo contenedor, como sugirió un comentarista), pero hasta que todos los navegadores web los admitan, el truco de Kevin es bastante creativo.

Adam Argyle nos lo recordó la semana pasada @custom-media Probándolo en Firefox Nightly (sin ningún texto Consulta de estilo de contenedor todavía), pero si sigues el ritmo Capas en cascada CSSpuedes aprovechar las habilidades de Kevin al mismo tiempo.

Vale restablecer CSS

Me gusta un buen restablecimiento de CSS. No importa cuánto leo, siempre encuentro algo genial y lo agrego a mi propio reinicio. de Vale restablecer CSS robé svg:not((fill)) { fill: currentColor; }¡pero lo que puedes obtener de él es mucho más que eso!

Cómo funciona el navegador

Si alguna vez se ha preguntado cómo funcionan realmente los navegadores web: cómo obtienen direcciones IP, realizan solicitudes HTTP, analizan HTML, crean árboles DOM, representan diseños y dibujan, publicado recientemente Cómo funciona el navegador Una lectura interactiva muy interesante de Dmytro Krasun. Te hace preguntarte acerca de los cuellos de botella de los lenguajes de desarrollo web y por qué ciertas características de HTML, CSS y JavaScript son como son.

Cómo funciona el diseño CSS

Además, Polypane explica Conceptos básicos del diseño CSSincluidos modelos de caja, líneas y líneas base, esquemas de posicionamiento, contextos de apilamiento, diseño de cuadrícula y Flexbox. Si eres nuevo en CSS, creo que estas explicaciones realmente te ayudarán a familiarizarte con él. Si eres un veterano (como yo), sigo pensando que es importante comprender cómo se aplican estos conceptos básicos a las funciones CSS más nuevas, especialmente porque CSS está evolucionando exponencialmente en estos días.

La mampostería CSS está (probablemente) llegando

Hablando de diseños, Jen Simmons aclara cuando podemos usar display: grid-lanestambién conocida como mampostería CSS. Aunque todavía no son compatibles con ningún navegador web, Firefox, Safari y Chrome/Edge son todo Pruébelo y las cosas cambiarán rápidamente. De todos modos, ¡Jen proporcionó algunos polyfills!

Si quieres estar un paso por delante, puedes Deja que Sunkanmi Fafowora te lleve a comprender display: grid-lanes.

Animación del tema usando sintaxis de color relativa.

Si estás obsesionado con los sistemas de diseño y la organización, y tiendes a pensar que la ilustración y la animación son formas de arte impresionantes pero desordenadas, artículo de Andy Clarke Animación de tema usando sintaxis de color relativa CSS Realmente te ayudará a cerrar la brecha entre el arte y la lógica. Si lo tuyo son las variables CSS, este artículo es definitivamente para ti.

Patrones versus páginas (y todo lo demás)

¿Modal? ¿Número de páginas? ¿Caja de luz? ¿diálogo? ¿Información sobre herramientas? Comprender los diferentes tipos de superposiciones y saber cuándo usar cada una puede seguir siendo bastante confuso, especialmente porque las nuevas características de CSS como ventanas emergentes y llamadas de interés, si bien son muy útiles, han hecho las cosas aún más confusas. En pocas palabras, Ryan Neufeld deja las cosas claras Modos y páginas Incluso se proporciona un marco para decidir qué tipo de superposición utilizar.

Chrome Canary está probando la compatibilidad con zoom de texto

¿Sabe cuándo manejar el texto que se incrementa o disminuye en el nivel del sistema operativo? Brillantemente…Si eres desarrollador web, tal vez no sea así. Después de todo, ¡esta función no funciona en Internet! Sin embargo, Josh Tumas nos dice Chrome Canary está experimentando con metaetiquetas para que los navegadores web respeten esta configuración del sistema operativo. Si tienes curiosidad, eso es <meta name="text-scale" content="scale">pero Josh es más detallado y vale la pena leerlo.

¡Hasta la próxima!