Testeur de sélecteurs CSS
Voyez ce que votre sélecteur atteint

Ce que fait un testeur de sélecteurs CSS

Un sélecteur est une question posée à votre balisage. Ce testeur de sélecteurs css y répond devant vous, donc les suppositions disparaissent. Collez le balisage, tapez le sélecteur et lisez les éléments atteints.

Quatre questions couvrent l’essentiel du travail. D’abord, quels éléments ce sélecteur atteint-il ? Ensuite, que dit vraiment le sélecteur en mots simples ? Après cela, quelle est sa force face à une règle rivale ? Enfin, quel est le sélecteur le plus court pour un élément que vous pouvez désigner ?

Ce n’est pas un outil de feuille de styles. Parce que réduire et ranger du CSS relève d’un autre travail, le minificateur CSS s’occupe de ce côté. Ici le sujet est la correspondance, et rien d’autre.

Rien à installer. Par conséquent, vous collez un fragment, lisez la réponse et fermez l’onglet quand cela vous convient.

Comment fonctionne un testeur de sélecteurs CSS

Le travail se répartit en trois passes. D’abord, la page lit votre balisage dans un arbre de balises et d’attributs. Ensuite cet arbre est reconstruit en véritables éléments qui ne rejoignent jamais la page. Enfin, votre sélecteur s’exécute sur la copie reconstruite, et les correspondances reviennent dans l’ordre du document.

Le moteur de correspondance est celui du navigateur. Parce que les règles Selectors Level 4 sont longues et pleines de cas limites, un moteur écrit à la main finirait par diverger des vraies pages. Ainsi cette page interroge le moteur déjà livré dans votre navigateur, car c’est ce même moteur qui jugera votre site.

La copie reconstruite reste détachée. Par conséquent elle n’a ni styles, ni scripts, ni mise en page. C’est voulu, car la question ici est de savoir quels éléments un sélecteur atteint, et non à quoi ils ressembleraient.

Testez un sélecteur sur votre propre balisage

Un sélecteur qui marche dans un tutoriel peut quand même manquer votre balisage. Par conséquent, le test honnête est votre propre fragment, collé tel quel. Copiez un bloc du code source de la page et déposez-le ici.

Chaque correspondance arrive avec son contexte. Ainsi vous obtenez d’abord le compte, puis chaque élément atteint avec sa balise ouvrante, et le chemin qui y mène depuis le haut du fragment.

Le chemin est la partie utile. Parce que deux correspondances se ressemblent souvent, le chemin montre laquelle est laquelle. Après cela, un sélecteur qui attrape un élément de trop est facile à resserrer.

Un résultat vide reste une réponse. Pourtant c’est la réponse qu’on rate, donc la page dit clairement que rien n’a correspondu au lieu d’afficher une zone vide.

Ce qui est retiré avant la correspondance

Cet outil traite votre collage comme du texte, jamais comme une page. Ainsi la reconstruction laisse entièrement de côté les balises script et style, les iframes et les embeds.

Les attributs d’événement suivent le même chemin. Parce que seule une page vivante se sert d’un onclick ou d’un onerror, la reconstruction les retire avec les balises qui les portaient. De plus, une adresse javascript: dans un href perd aussi sa balise.

Le reste survit intact. Par conséquent, vos classes, vos id, vos attributs data et votre imbrication sont tous encore là pour que le sélecteur s’y accroche.

Testeur de sélecteurs jQuery sans jQuery

La moitié des sélecteurs que les gens collent ne sont pas du CSS du tout. En revanche ils viennent de jQuery, qui a ajouté ses propres formes comme :first, :eq() et :contains(). Un simple testeur de sélecteurs css les refuserait tout bonnement.

Celui-ci y répond quand même. Parce que ces formes se ramènent à une position ou à un test de texte sur une liste de correspondances, la page les applique elle-même après l’exécution de la partie CSS. Ainsi un testeur de sélecteurs jquery vit ici sans une ligne de jQuery sur la page.

La page montre la traduction au lieu de la cacher. Par conséquent vous voyez quelle partie était du CSS standard et quelle partie la page a traitée ensuite. De cette façon, un sélecteur que vous portez vers querySelectorAll ne réserve aucune surprise.

Certaines formes n’ont pas d’équivalent. Cela dit, la page les nomme au lieu de faire semblant, ce qui est la seule chose utile à faire d’un sélecteur que rien ne peut atteindre.

En quoi :first et :eq diffèrent du CSS

Les pièges sont ceux qui semblent inoffensifs. Ainsi :first choisit un élément dans toute la liste des correspondances, cependant :first-child et :first-of-type interrogent la position d’un élément parmi ses frères.

Cette différence mord sur du vrai balisage. Car une liste de dix éléments a dix candidats first-of-type dans dix parents différents, pourtant un seul d’entre eux est la première correspondance de la liste. Donc les deux formes répondent à des questions différentes.

Calculateur de spécificité CSS

La correspondance n’est que la moitié de l’histoire d’une règle. L’autre moitié est la force, que la cascade règle en comptant les parties d’un sélecteur. Ainsi ce calculateur de spécificité css rapporte ce compte sous la forme des trois nombres que les navigateurs utilisent vraiment.

Les trois nombres se lisent facilement. D’abord viennent les sélecteurs d’id, puis les classes, les attributs et les pseudo-classes, enfin les noms d’éléments et les pseudo-éléments. Après cela, la comparaison est une simple lecture de gauche à droite.

Les styles en ligne et important se situent hors du triplet. Cependant, la page dit où ils atterrissent, car une règle qui perd sur le papier peut encore gagner dans le navigateur pour l’une de ces deux raisons.

Les règles de spécificité récompensent les sélecteurs courts. Par conséquent, un sélecteur qui marque moins est souvent le meilleur à livrer, car il reste facile à surcharger plus tard.

Lequel de deux sélecteurs gagne

Collez deux sélecteurs et la réponse est immédiate. Parce que les deux triplets apparaissent côte à côte, le gagnant se voit sans rien compter à la main.

La page appelle une égalité une égalité. Ensuite la règle qui apparaît plus tard dans la feuille de styles gagne, et la page le dit au lieu de vous laisser vous en souvenir.

Lisez un sélecteur en langage clair

Un long sélecteur cache son propre sens. Ainsi la page le relit comme une phrase, partie par partie, dans l’ordre où le navigateur les applique.

La lecture n’a besoin d’aucun balisage. Parce que l’explication vient de la structure même du sélecteur, vous pouvez vérifier un sélecteur sorti d’une revue de code avant d’avoir la page à laquelle il appartient.

Les combinateurs sont là où les gens glissent. Par conséquent une espace, un signe supérieur, un plus et un tilde sont chacun nommés en mots, car descendant, enfant, frère suivant et frère plus loin sont quatre questions différentes.

La même habitude aide avec du balisage que vous n’avez pas écrit. Après une lecture rapide du sélecteur, un coup d’œil à la sortie du minificateur HTML ou au code source de la page explique souvent le reste.

Un sélecteur pour un seul élément

Parfois l’élément vient d’abord et il vous faut le sélecteur qui va avec. Ainsi vous choisissez un nœud dans l’arbre analysé, et la page propose le sélecteur le plus court qui n’atteint que cet élément.

Le but est court, pas malin. Car un id seul suffit souvent, la page tente cela en premier, puis une classe, et seulement ensuite un chemin par les parents.

Ce que cette page ne fera pas

Elle n’exécutera pas votre JavaScript. Parce que la copie reconstruite est inerte à dessein, un sélecteur qui dépend d’un script déjà exécuté ne correspondra pas ici.

Elle ne correspondra pas à un état. Cependant, c’est une propriété de tout balisage détaché : hover, focus, visited et target décrivent une page vivante, donc ils restent vides.

Elle ne stylera rien. Un testeur de sélecteurs répond à la question quels éléments, car l’apparence de ces éléments est une question distincte pour le navigateur que vous visez.