Saisissez une propriété et une valeur, combinez deux tests avec and/or, annulez la requête et copiez le bloc @supports. Le verdict provient du navigateur qui affiche la page.
Fonctionne localement dans votre navigateurLe générateur transforme une propriété et une valeur en un test de fonctionnalité CSS, puis l’enveloppe dans un bloc @supports. Un second test peut le rejoindre avec and ou or, la requête entière peut être annulée par not, et le verdict est rendu par CSS.supports() dans le navigateur qui affiche la page — ce navigateur uniquement, pas celui de vos visiteurs.
Cinq préréglages couvrent les tests les plus courants : display: grid, container-type: inline-size, color: oklch(60% 0.2 140), backdrop-filter: blur(8px) et le test de sélecteur selector(:has(*)). En choisir un remplit les deux champs et remet le combinateur sur Single condition ; toute modification ramène ensuite la liste sur Custom.
selector(), font-tech() et font-format() sont des tests complets à eux seuls : saisissez selector(:has(*)) ou font-tech(color-COLRv1) dans le champ de propriété, et le champ de valeur ne participe pas. Un couple propriété/valeur n’est enveloppé en (property: value) que lorsque les deux champs sont remplis.
Une propriété vide ou une valeur vide laisse la requête vide : le verdict affiche « Pas encore de condition » et l’export reste vide au lieu de produire un bloc (: ) invalide, ce que la page faisait avant cette passe. La négation est traitée de la même façon — @supports not (property: value) correspond lorsque la déclaration n’est pas prise en charge, propriétés inconnues comprises : un test négatif sur une propriété inconnue est donc annoncé comme pris en charge.
CSS.supports() s’exécute dans la page : le verdict décrit votre navigateur et rien d’autre. Lors de la mesure, Chrome 153 a répondu true pour (display: grid), (container-type: inline-size), (color: oklch(60% 0.2 140)), (backdrop-filter: blur(8px)) et selector(:has(*)) ; un navigateur plus ancien afficherait d’autres verdicts sur la même page.
Un verdict positif signifie que la condition est analysable et prise en charge ici ; ce n’est pas un tableau de compatibilité pour votre audience. Gardez une déclaration simple avant le bloc @supports : les navigateurs qui échouent au test l’utilisent en repli.
Le bloc exporté s’écrit @supports <condition> { <règles> } : la condition est imprimée telle qu’elle est testée et chaque ligne du champ de règles est indentée de deux espaces. Le texte des règles est copié tel que saisi, commentaires et déclarations de repli compris, et Copier CSS place le panneau de code dans le presse-papiers caractère par caractère.
Tout s’exécute dans la page. La saisie, les préréglages, le combinateur, la négation, Copier CSS et Réinitialiser n’ont envoyé aucune requête réseau pendant la mesure (en, fr et ja) et l’outil continue de fonctionner hors ligne ; la seule requête tierce de la page vient de la balise de mesure d’audience partagée.