5174 sujets

Le Bar du forum

Firefox v.121+ supporte enfin le sélecteur CSS :has()

Bon, vu que presque plus personne n'utilise Firefox, tout le monde s'en fou, mais quand même :

Firefox supporte enfin le sélecteur CSS has() !!!

C'est-y-pas une bonne nouvelle ça ? Smiley party Smiley party Smiley party

J'ai vu ça sur Can I use et du coup je n'ai pas pu m'empêcher d'installer une version à jour pour tester. Et vous savez quoi ? Ça marche !

Alors évidement, la plupart des firfoxiens sont encore sur la version 119... mais ça arrive, ça arrive...

Enfin.
Modifié par Olivier C (21 Nov 2023 - 00:15)
Hello,

J’ai pas de commentaire à faire à propos du sélecteur CSS désolé.

En revanche, t’as un gâteau avec des bougies à côté de ton pseudo. Et ça, c’est la première fois que je le vois sur le forum Smiley smile

Olivier:has(birthday) ?
Administrateur
J'avais activé sur Firefox le flag layout.css.has-selector.enabled en début d'année pour constater... que c'était à peine implémenté (aucun sélecteur complexe) et surtout bogué de façon spectaculaire (une histoire de cache interne à Gecko).
Le bug est corrigé depuis fin août je crois, et l'implémentation est complète (identique à Blink) depuis 2 mois de mémoire => Smiley biere

Pour de l'inté CSS, le support est Safari 15.4+ et donc Firefox ultra-récent, un peu tôt mais pour des styles utilisateurs Stylus (ex-Stylish), des bookmarklets ou des extensions navigateur c'est parfait (pour auditer manuellement l'accessibilité de pages web avec des outils un peu corrects).
Enfin c'est toujours plus complet de détecter ce qu'on veut avec du JS mais jusqu'à un certain point, une règle CSS peut faire 80% du boulot, c'est pas mal Smiley lol
Un seul exemple
fieldset:not(:has(> legend:first-child))::before {
  content: "MEH!";
}

pour signaler qu'un regroupement de champ n'a pas de légende correctement construite.
On peut pas le faire au niveau de la légende quand elle est... absente, là oui.
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)
Prévenir un modérateur
Répondre au sujet
Aller à