[Résolu] Comment copier d'un coup toutes les règles CSS d'un élément ?

Salut,

Je réponds pas vraiment à la question, je m’en excuse, mais pour quelle raison as-tu besoin de faire ça ?
Modifié par Anymah (22 Nov 2021 - 16:18)

(Pour faire court)(j'espère être clair) J'ai des boutons au-dessus de mon entête qui apparaissent sur mobile et sur ordinateur, mais qui n'apparaissent pas (car leur dimension est de 0 x 0) sur tablette.
Je voudrais remonter toute la hiérarchie de cet ensemble et comparer les règles CSS de ces éléments sur tablette où mes boutons n'apparaissent pas et sur ordinateur où ils apparaissent.
Comme ces boutons sont imbriqués dans des divs, elles-mêmes imbriquées dans des divs... avec (au minimum) 4-5 règles CSS à chaque fois, ça fait beaucoup de manips à faire pour "espérer" (car ce n'est pas non plus garanti) trouver d'où vient le problème.

C'est pour ça que je voulais une méthode qui me permette de copier, d'un coup, toutes les règles CSS d'un élément.

De cette façon, je remonte la hiérarchie et à chaque niveau, je copie/colle/compare toutes les règles de l'élément.
C'est plus clair ou pas du tout ?
Modifié par spip93 (22 Nov 2021 - 16:46)

Bonsoir,

spip93 a écrit :
.... Je sais que quand on fait un clic droit sur un élément > Inspecter, on a la liste de toutes les règles qui s'appliquent pour l'élément en question. Ensuite, je peux faire un copier/coller de chaque règles, mais c'est long et fastidieux. Ça l'est d'autant plus si on a plusieurs feuilles de styles, plusieurs éléments, et même, plusieurs media queries.

spip93 a écrit :
... J'ai des boutons au-dessus de mon entête qui apparaissent sur mobile et sur ordinateur, mais qui n'apparaissent pas (car leur dimension est de 0 x 0) sur tablette.
Je voudrais remonter toute la hiérarchie de cet ensemble et comparer les règles CSS de ces éléments sur tablette où mes boutons n'apparaissent pas et sur ordinateur où ils apparaissent.
Comme ces boutons sont imbriqués dans des divs, elles-mêmes imbriquées dans des divs... avec (au minimum) 4-5 règles CSS à chaque fois, ça fait beaucoup de manips à faire pour "espérer" (car ce n'est pas non plus garanti) trouver d'où vient le problème.

En fait ton inspecteur te permet aussi de décocher/re-cocher les règles CSS appliquées sans avoir à éditer quoique ce soit, en décochant les règles qui te semblent douteuses , tu peut trouver facilement la responsable. Tu peut aussi retirer class ou id sur un élément et voir l'impact des styles appliqués et modifier ta largeur d'affichage pour passer d'un mode à l'autre et voir aussi l'impact des modifs selon la mediaquerie appliquée.

Qu'est ce qui pourrait bien mettre tes boites en 0x0 ?
tu peut voir à rechercher dans les feuilles de styles uniquement appliquée au media tablette :
un max-height/width à 0 ?
un display:none?
un position (absolute/fixed) ?
une image manquante (srcset/src) ,
un content:''; vide ou manquant dans un pseudo-element ?
une règle manquante ?

s'agit-il d'une icône ?
etc...

Je ne connais pas d'outils qui permettent de regroupée tout les styles appliqué et hérité d'un élément au travers de plusieurs feuilles de style. au mieux, te servir de JavaScript avec getComputedStyle https://developer.mozilla.org/fr/docs/Web/API/Window/getComputedStyle et afficher en console ou télécharger en texte dans un blob . https://developer.mozilla.org/fr/docs/Web/API/Blob

Cdt