marcj/css-element-queries
Css Element Queries
Ce projet est une bibliothèque CSS responsive et un moniteur de dimensions d'éléments. Il fournit un polyfill pour les requêtes de conteneur CSS, permettant aux styles d'être appliqués en fonction des dimensions spécifiques d'un élément dans des environnements où le support natif du navigateur est indisponible.
La bibliothèque surveille la largeur et la hauteur des éléments DOM cibles en temps réel, déclenchant des rappels personnalisés chaque fois que les dimensions changent. Elle adapte les composants d'UI en exécutant des ajustements de mise en page et des changements de style basés sur des seuils de taille prédéfinis plutôt que sur la taille globale de la fenêtre du navigateur.
L'outil gère ces adaptations via plusieurs mécanismes, incluant l'injection de variables CSS dynamiques, le basculement de classes basé sur des seuils et l'utilisation de l'API ResizeObserver pour synchroniser les dimensions des éléments avec les feuilles de style.
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.
