Changer le CSS par défaut de Google Chrome

44

J'aimerais pouvoir modifier le CSS par défaut utilisé par Chrome, tel que la suppression du soulignement pour les liens, etc. Cependant, je ne trouve pas le fichier CSS par défaut utilisé par Chrome. Quelqu'un sait-il où cela se trouve?

google-chrome css George IV
la source
3
Si vous êtes un développeur, je vous recommande de ne pas le faire car cela change la valeur par défaut de css.
nXqd
Pour un moyen simple de modifier css en utilisant votre propre extension très simple, voir: stackoverflow.com/questions/21948850/…
Utilisateur

Réponses:

34

(Mise à jour 2014) La prise en charge des feuilles de style utilisateur ayant été récemment supprimée de Google Chrome, la seule option pour ce moment est d'utiliser des extensions (comme Stylus * 1), mais celles-ci se comporteront différemment (voir ci-dessous).

La demande la plus pertinente pour réintroduire de vraies feuilles de style utilisateur dans Google Chrome est le problème 347016: Support des feuilles de style utilisateur .

Par spécification, la règle "true user stylesheet" a une spécificité d' origine plus faible en cascade que la règle d'auteur, mais !importantles règles de la feuille de style utilisateur ont une spécificité d'origine supérieure à celle de l' !importantauteur, quelle que soit sa spécificité de sélecteur .

Les extensions imitant les feuilles de style utilisateur dans Chrome injectent simplement (espérons-le) le dernier élément de style dans la page, ce qui entraîne certaines conséquences:

  • ce style est au niveau "auteur" dans la cascade, vous devez donc vous assurer que votre !importantrègle a une spécificité supérieure à celle que vous souhaitez remplacer.
  • "votre" style injecté est exposé aux scripts de page afin qu'ils puissent facilement le supprimer à volonté.

* 1 L'extension originale, Stylish , est actuellement (2017) en état de développement irrégulier par un nouveau mainetainer. Je vous conseillerais donc de l'éviter et d'utiliser une alternative similaire à Stylus.

(Suite à la réponse originale est maintenant obsolète.)

Après tout, il n’est pas possible de modifier le fichier UA css lui-même, mais vous pouvez créer un style d’utilisateur global: démarrez Chrome une fois avec --enable-user-stylesheet. Cela créera <user-data-dir>/<profile>/User StyleSheet/Custom.cssce que vous pouvez utiliser (les modifications sont propagées immédiatement). http://code.google.com/p/chromium/issues/detail?id=2393

mon f
la source
2
Cela ne semble pas légitime avec le chrome actuel. Ils ont peut-être retiré cette fonctionnalité depuis l'affichage de cette réponse.
Pistos
1
Vous avez raison, j'ai mis à jour la réponse.
Myf
yeah ne semble plus être supporté (essayé sur chrome 73 et 76 (canari)) ( Custom.csset le User Stylesheetsn'existe plus)
localhostdotdev
4

La seule solution à laquelle je puisse penser consiste à utiliser un script Greasemonkey qui ajoute une entrée de style à chaque page html, ce qui désactive le soulignement des liens. Quelque chose comme: 

<style> a {text-decoration:none} </style>

Cet article peut apparemment vous aider à démarrer:
COMMENT FAIRE: Installer les scripts Greasemonkey de Google Chrome (Windows uniquement)

harrymc
la source
4
Je trouve ça drôle de ne pas pouvoir modifier directement le CSS. Firefox a userChrome.css et userContent.css, ce qui permet de modifier l'apparence et se sentir incroyablement simple.
George IV
@harrymc - J'ai changé votre <style>code de blockquote pour le code afin que vous n'ayez pas à vous soucier des "espaces supplémentaires"
Jared Harley
0

Vous pouvez changer le style chromes css ui. Rappelez-vous que si vous le modifiez, certains effets tels que Exemple: #footer {color:#5F5F5F !important;}changeront sur chaque site utilisant #footer. Vous avez été prévenu. Custom.css change presque tout dans les navigateurs chromes

Windows XP Google Chrome:

C: \ Documents and Settings \% NOMUTILISATEUR% \ Paramètres locaux \ Données d'application \ Google \ Chrome \ Données utilisateur \ Par défaut

Chrome:

C: \ Documents and Settings \% USERNAME% \ Paramètres locaux \ Données d'application \ Chromium \ Données utilisateur \ Par défaut \ Feuilles de styles utilisateur

Windows 7 ou Vista (aide dans la section d'aide) Google Chrome:

C: \ Utilisateurs \% NOMUTILISATEUR% \ AppData \ Local \ Google \ Chrome \ Données utilisateur \ Par défaut \ Feuilles de style utilisateur

Chrome:

C: \ Utilisateurs \% USERNAME% \ AppData \ Local \ Chromium \ Données utilisateur \ Par défaut \ Feuilles de style utilisateur

Mac OS X Google Chrome:

~ / Bibliothèque / Support d'application / Google / Chrome / Par défaut / StyleSheets de l'utilisateur

Chrome:

~ / Bibliothèque / Application Support / Chromium / Default / StyleSheets de l'utilisateur

Linux Google Chrome:

~ / .config / google-chrome / Default / User StyleSheets

Chrome:

~ / .config / chrome / Défaut

Chrome OS

/ home / chronos /

Vous voulez une preuve, consultez mon thème pour l'éditeur de programme http://userstyles.org/styles/95226/chrome-userstyles-editor-hacker-version-cyberat

N'hésitez pas à me consulter, je crée des feuilles de style d'interface utilisateur ou des sites aléatoires tels que facebook google.etc, et les rend noir et rouge.

cyberationmicro.com
la source
4
Cela ne fonctionnera pas car Chrome 33 a cessé de prendre en charge les styles utilisateur.
Synetech
0

Il y a un problème lorsque vous utilisez Stylish en tant qu'injecteur de style
utilisateur!important : le niveau de priorité de l'utilisateur sans est supérieur au niveau de priorité de l'auteur sans!important

J'écris donc un script utilisateur en tant qu'injecteur:
https://github.com/zcyzcy88/SelfColle/blob/master/StyleInject.user.js

Principe:
Injecter le style à document.head.prependChild(), avant le style de l'auteur de la page Web, a une priorité inférieure pour éviter les superpositions de style utilisateur.

Sista Fiolen
la source
Bonjour et bienvenue sur SuperUser.com. Seriez-vous capable d'aller plus en profondeur sur ce que votre script fait exactement?
Service Manager
Injectez le style à document.head.prependChild(), pour éviter la superposition par les utilisateurs.
Sista Fiolen
Si vous pouvez modifier votre réponse, il serait utile de donner plus de détails sur ce que chaque partie de votre script fait.
Service Manager
0

En 2018, Chrome> = 68.0.3440.106 (et probablement beaucoup plus tôt)

J'avais déjà l'extension Resource Override pour diverses utilisations de développement, je l'utilise donc maintenant pour ajouter ma propre feuille de style afin de corriger certains mauvais choix de styles dans JIRA (et de masquer davantage d'annonces - heh heh). L'option que j'utilise est "Inject File" et cela fonctionne très bien. Je n'ai pas essayé de définir le paramètre "url" pour qu'il ne fonctionne que sur des sites particuliers, mais mes sélecteurs CSS sont suffisamment spécifiques pour que je puisse simplement laisser l'URL sous la forme "*".

eon
la source
0

Je suis tombé sur cette question en cherchant une solution sur la manière de fournir une feuille de style pour des pages non stylées. Aucune des solutions ci-dessus ne m’a beaucoup aidé à partir de 09/2018, chrome ne prend pas en charge la fonction de feuille de style personnalisée précédemment supprimée.

La solution que j'ai proposée et qui fonctionne comme un charme pour mon cas d'utilisation est obtenue en utilisant cet addon chrome avec un script js personnalisé qui insère mon CSS personnalisé dans l'en-tête de la page s'il ne contient aucune feuille de style. Cela ne fonctionnera pas sur une page ayant une feuille de style liée, mais dans mon cas d'utilisation, cela suffit.

Voici le script JS que j'utilise:

window.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
    console.log(document.styleSheets); 
    if (document.styleSheets.length > 0) {
        return;
    }

    var css = `
    /*Your CSS goes here*/
    `;
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);
  });
Maroš Beťko
la source