marcj/css-element-queries
Css Element Queries
Este proyecto es una biblioteca CSS responsiva y un monitor de dimensiones de elementos. Proporciona un polyfill para consultas de contenedores CSS, permitiendo que los estilos se apliquen en función de las dimensiones específicas de un elemento en entornos donde el soporte nativo del navegador no está disponible.
La biblioteca monitorea el ancho y el alto de los elementos DOM objetivo en tiempo real, activando devoluciones de llamada personalizadas cada vez que cambian las dimensiones. Adapta los componentes de la UI ejecutando ajustes de diseño y cambios de estilo basados en umbrales de tamaño predefinidos en lugar del tamaño general de la ventana del navegador.
La herramienta gestiona estas adaptaciones a través de varios mecanismos, incluyendo la inyección de variables CSS dinámicas, el cambio de clases basado en umbrales y el uso de la API ResizeObserver para sincronizar las dimensiones de los elementos con las hojas de estilo.
Features
- Container Queries - Implements size-based styling logic for elements, providing a polyfill for CSS container queries.
- Dynamic Component Layouts - Automatically adjusts the appearance of UI components as their containing space expands or shrinks.
- Element Resize Callbacks - Executes custom callback functions immediately whenever the dimensions of a target element change.
- ResizeObserver Integrations - Uses the ResizeObserver API to watch for changes in element dimensions and trigger style updates.
- Container Query Polyfills - Provides a polyfill for applying styles based on element dimensions in browsers lacking native container query support.
- Container-Relative Styling - Applies different CSS rules based on the size of a specific element rather than the browser window.
- CSS Custom Property Injections - Calculates element sizes and injects them as CSS custom properties for use in style sheets.
- Element Dimension Tracking - Monitors the width and height of specific HTML elements and triggers updates when they change.
- Geometric State Mappings - Binds specific CSS rules to the real-time geometric state of target DOM elements.
- Threshold-Based Styling - Allows CSS rules to change automatically when an element reaches defined width or height thresholds.
- State-Driven Callbacks - Executes user-defined JavaScript functions when element dimensions cross specific size thresholds.
- Responsive Layout Adapters - Ships a set of styles and logic for fluid layouts that adapt to parent container sizes.
- CSS Class-Based Styling - Toggles specific CSS classes when an element crosses predefined width or height boundaries.
