Pas mal, je me rappelle quand j'ai commencé ici sur le forum, ces règles de styles que l'on appelait plus ou moins "règle de maintenance css"...
Un partage de mon côté :
Étant donné que cette nouvelle règle débarque aux côté de beaucoup d'autres (Container Queries, opérateurs logiques...) : vu que @container a comme exigence d'avoir un formatage sur l'élément parent je procède ainsi :
.parent-grid, /* @note Fallback pour le sélecteur :has(), ajout de la classe via JS. */
:has(> [class^=grid]) {
container: grid / inline-size;
width: 100%; /* @note Important si le conteneur n'a pas de largeur définie par défaut. */
}
[class^=grid] {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
/* the code... */
}
@container grid (35em < width) {
.grid2,
.grid3,
.grid4 {
--n: 2;
/* the code... */
}
}
Et maintenant, le plus intéressant, un p'tit fallback maison en JavaScript :
// @note Fallback pour CSS Container Queries et grid layout @affected Firefox en particulier, et les navigateurs moins récents.
// @see https://css-tricks.com/a-new-container-query-polyfill-that-just-works/
// @note Conditional JS : plus performant que de passer par la détection d'une classe dans le HTML comme pour les autres scripts.
const supportContainerQueries = 'container' in document.documentElement.style // Test support des Container Queries (ok pour Chrome, problème avec Firefox)
const supportMediaQueriesRangeContext = window.matchMedia('(width > 0px)').matches // Test support des requêtes média de niveau 4 (Media Query Range Contexts).
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1 // @todo Solution temporaire pour Firefox car, à ce jour, il n'existe pas de solution propre pour ce dernier. @todo À réévaluer dans le temps.
if (!supportContainerQueries || !supportMediaQueriesRangeContext || isFirefox) {
getStyle('/styles/gridFallback.css', 'screen') // @note Une petite fonction maison qui m'injecte par défaut les styles indiqués dans le head.
document.querySelectorAll('[class^=grid]').forEach(grid => grid.parentElement.classList.add('parent-grid')) // @affected Firefox =< v108 @note Compense le non support de :has() sur les grilles.
}
Modifié par Olivier C (24 Nov 2023 - 22:21)
