CSS

Nuevos trabajos de solicitud de contenedores Polyfill trucos CSS

Hay polífilo Una aplicación de contenedor que se comporte perfectamente como un polyfill debe:

  1. Cuando descubre que el navegador no admite solicitudes de contenedores, lo carga condicionalmente.
  2. Puede escribir CSS como de costumbre, incluido el código de sintaxis de solicitud de contenedor que coincida con la especificación actual.
  3. Simplemente funciona.

Es genial tener un polifilo de solicitud de contenedor fácil de usar y provenir del propio Chrome, un precursor de las primeras pruebas. ellos mueren Poniéndolo todo junto – ¡gracias Surma!

Jonathan Neal tiene un polófilo para pedir un contenedor llamado cqllenar antes que eso. No estoy seguro de si se rechaza oficialmente, pero requiere CSS no canónico adicional para la operación y el procesamiento de PostCSS, por lo que creo que se rechaza a favor de este polyfill más nuevo.

La carga de polyfill se ve así:

// Support Test
const supportsContainerQueries = "container" in document.documentElement.style;

// Conditional Import
if (!supportsContainerQueries) {
  import("https://cdn.skypack.dev/container-query-polyfill");
}

Puede extraerlo de npm o usarlo como <script>, pero creo que esta forma parece la mejor para mantener las cosas ligeras y simples.

A continuación, puede utilizar la sintaxis de consulta de contenedor en CSS. Supongamos que tiene un widget meteorológico en HTML. Su solicitud requiere un elemento de shell adicional. Esta es solo la regla: no puedes preguntar tu estilo.

<div class="weather-wrap">
  <dl class="weather">
    <div>
      <dt>Sunday</dt>
      <dd>
        <b>26°</b> 7°
      </dd>
    </div>
    <div>
      <dt>Monday</dt>
      <dd>
        <b>34°</b> 11°
      </dd>
    </div>
    <!-- etc -->
  </dl>
</div>

El shell se instancia como un contenedor:

.weather-wrap {
  container: inline-size / weather-wrapper;
  /* Shorthand for: */
  /* container-type: inline-size; */
  /* container-name: weather-wrapper; */

  /* For quick testing, do this to get a resize handle on desktop: */
  /* resize: both; */
  /* overflow: hidden; */
}

Luego escriba todos los estilos globales para este componente, así como los estilos con el alcance de la solicitud del contenedor:

.weather {
  display: flex;
}
@container weather-wrapper size(max-width: 700px) {
  .weather {
    flex-direction: column;
  }
}

Ejemplo de llenado de una solicitud de contenedor

Aquí hay una demostración más detallada del polifilo de solicitud de contenedor utilizando el widget de clima real:

Vi esto por primera vez En el blog de Bramus, tiene una demostración de mapa clásica para usar con esta aplicación de contenedor de relleno de polietileno. Desplácese hacia arriba y hacia abajo. Verá una fila de tarjetas de osos en la parte superior (si la ventana de su navegador es lo suficientemente ancha), luego tarjetas de osos similares en diferentes posiciones de diseño a continuación, que cambian a un mejor formato según la solicitud del contenedor.

compatibilidad con el navegador de solicitud de contenedores de relleno polivalente

rellenar Documentación Yo digo:

polifill depende de ResizeObserver, MutationObserver y :is()Por lo tanto, debería funcionar en todos los navegadores modernos, especialmente Chrome/Edge 88+, Firefox 78+ y Safari 14+.

Hay varias otras pequeñas advertencias en estos documentos, incluyendo lo que hace y lo que no apoya. Me parece principalmente cosas de nicho: se cubren casos de uso básicos / típicos.

¿Cambia el juego?

Mientras escribo esto, hemos visto soporte para solicitudes de contenedores en Chrome, y ahora es un borrador oficial de la especificación:

Esto es muy emocionante y apunta en gran medida a los navegadores que realmente tienen solicitudes de contenedores, incluso si la sintaxis cambia un poco en el camino (este ha sido el caso muchas veces). Pero, por supuesto, no sabemos si / cuándo se emitirán solicitudes de contenedores, y cuando se supera ese umbral mágico, no sabemos dónde usarlos sin preocupaciones, tal como podemos ahora con flexbox y grid.

Esta fecha de «simplemente úsela» puede ser una buena idea, pero si está pensando en agrupar y prestar atención a la mejora progresiva, diría que usar una consulta de contenedor para fechas probablemente ya sea algo así. En mi opinión, el script polyfill tiene un tamaño de 2,8 kb, por lo que es bastante insignificante para algo tan importante.

Sospecho que este polyfill disparará el uso de solicitudes de contenedores el próximo año.

¿Falk?

El hecho de que sus estilos se apliquen correctamente solo después de descargar y ejecutar el archivo JavaScript coloca al sitio en el ámbito de Flash of Unstyled Content (FOUC). este es un video Puedo verlo en mi propia demostración. No estoy seguro de si hay otra forma de evitar esto que no sea el renderizado retrasado deliberadamente, lo que generalmente se considera un no-no. Al igual que cargar fuentes web, FOUC puede ser algo bueno porque significa que su contenido nunca se oculta ni se retrasa, incluso si la transición no es perfecta. Una vez que se complete el soporte del navegador y el polyfill deje de cargarse por completo, el FOUC debería desaparecer.

¡Diviértete rellenando pedidos de contenedores! Me gustaría ver más demostraciones de él.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba