Ajouter une régle css a l'inspecteur

Karim Boubouh

je cherche comment ajouter une régle css a mon inspecteur, comme dans les autre navigateur je sait pas si cette fonctionnalité n'existe pas ou je l'est pas vue,
par exemple je veux ajouter une personnalisation a mon balise <h2></h2> j'ai pas un solition souf de l'ajouter a inline. par contre avec chrome ou ... je peut ecrire ce que je veux et apres le copier !
merci d'avance.

9 réponses

Vallyan
Réponse acceptée

Dans FF, dans l'inspecteur, il y a un onglet "Style Editor", entre "Debugger" et "Profiler" (désolé le miens est en anglais).

Clique sur cet onglet, puis clique sur "Nouveau" dans la partie gauche. La tu peux ajouter tous les styles que tu veux, mais il faut que tu enregistres (lien "save") le nouveau stylesheet quelque part sur ton ordi pour que ce soit pris en compte.

Par exemple je viens de styliser les titres de cette page en rouge:

coloo

J'ai rien compris... De quoi ça s'agit ?

Karim Boubouh
Auteur

ehhh .... Quand je fait << Examiner !l'élement >> btn droit dans firefox je me retrouve dans l'inspecteur des HTML et CSS, Mon sujet et ça!

Vallyan

Si j'ai bien compris ce que tu demandes, tu voudrais savoir comment styliser tous les h1 (par exemple) d'une page depuis l'inspecteur, et pas seulement un élément en particulier.

Si tu as deja un style sur tes h1 dans ton css: dans le panneau de droite tu dois rechercher les sections qui concernent les h1, comme cela:

Si tu y ajoute une règle, elle s'appliquera sur tous les h1.

Par contre si a coté de h1 il y a d'autres tags (h2, h3, ...) le style que tu mettras dans ce block s'appliquera a tout le monde.

Si tu as besoin d'ajouter des trucs plus folklo, il faut passer par un petit script JS qui ajoute des regles CSS, tel que celui-ci:

/* Usage: sheet.addRule("h1", "color: red;"); */
var sheet = (function() {
    var style = document.createElement("style");
    style.appendChild(document.createTextNode(""));
    document.head.appendChild(style);
    return style.sheet;
})();
Karim Boubouh
Auteur

merci pour ton aide, c'est ça le sujet mais je sait comment modifier a l’intérieur des styles qui existe déjà si un h1 existe je vais juste modifier le style mais si il n'existe pas ! c'est ici mon problème. avec chrome s'est simple il existe la bouton (+ ajouter un règle css) mais dans Firefox je l'est pas trouver. donc je cherche ça l'ajoute d'une nouvelle règle css pour un balise qui na pas encoure de style

coloo

Ah et ça sert à quoi ?

C'est genre un style qui va s'appliquer sur tous les sites que tu visites ?

Vallyan

j'en ai jamais vu vraiment l'utilité pour développer, mais après je sais pas ce que Karim veut en faire.

En tous cas tu ne peux pas l'appliquer sur tous les sites que tu visites de manière automatique. Pour cela il faudrait que, a chaque fois que tu charges une page, tu importes le style en question via le bouton "import" ...

Moi, si je devais appliquer un style perso sur des sites particuliers, je passerais pas greasemonkey (FF) / Tampermonkey (Chrome), avec un JS qui injecterait automatiquement un nouveau bloque <style> aux pages concernées.

Pewel-OutOfNutella

A part pour des daltoniens qui pourraient changer les couleurs du texte/background etc en fonction de leur daltonisme, je vois pas trop l'intérêt.

Karim Boubouh
Auteur

merci pour votre aide, je vais essayer cette méthode. Pour l’intérêt de ça, cette manière va me permettre de modifier les style des site web que je développe sans retourner chaque fois a mon fichier css , et quand je termine ma personnalisation je copie le code css, et je l'inclue dans mon fichier css.