Ubah CSS default Google Chrome

43

Saya ingin dapat mengubah CSS default yang digunakan oleh chrome, seperti menghapus garis bawah untuk tautan, dll. Namun, saya tidak dapat menemukan file CSS default yang digunakan oleh Chrome. Adakah yang tahu di mana itu?

George IV
sumber
3
Jika Anda seorang pengembang, saya sarankan untuk tidak melakukan ini karena itu mengubah nilai default css.
nXqd
Untuk cara mudah memodifikasi css menggunakan ekstensi Anda sendiri yang sangat sederhana, lihat: stackoverflow.com/questions/21948850/…
Pengguna

Jawaban:

33

(Pembaruan 2014) Karena dukungan stylesheet pengguna baru-baru ini dihapus dari Google Chrome, satu-satunya opsi untuk saat ini adalah menggunakan ekstensi (seperti Stylus * 1), tetapi ini akan berperilaku berbeda (lihat di bawah).

Permintaan paling relevan untuk memperkenalkan kembali stylesheet pengguna yang sebenarnya di Google Chrome adalah Edisi 347016: Dukung stylesheet pengguna .

Sesuai spesifikasi, aturan "true user stylesheet" memiliki kekhususan asal yang lebih rendah dalam kaskade daripada aturan penulis, tetapi !importantaturan stylesheet pengguna memiliki kekhususan asal yang lebih tinggi daripada !importantaturan penulis, terlepas dari kekhususan pemilihnya .

Ekstensi yang meniru lembar gaya pengguna di Chrome hanya menyuntikkan (mudah-mudahan) elemen gaya terakhir ke dalam laman, yang memiliki beberapa konsekuensi:

  • gaya seperti itu ada di "tingkat penulis" dalam kaskade, jadi Anda harus memastikan bahwa !importantaturan Anda memiliki kekhususan yang lebih tinggi daripada yang ingin Anda timpa
  • "Anda" gaya yang disuntikkan terkena skrip halaman, sehingga mereka dapat dengan mudah menghapusnya sesuka hati.

* 1 Ekstensi asli, Stylish , saat ini (2017) dalam keadaan pengembangan tidak menentu oleh mainetainer baru, jadi saya sarankan untuk menghindarinya dan menggunakan alternatif seperti Stylus yang disebutkan di atas.


(Mengikuti jawaban asli sekarang sudah usang.)

Afaik tidak mungkin untuk men-tweak UA css itu sendiri, tetapi Anda dapat membuat pengguna global: memulai Chrome sekali dengan --enable-user-stylesheet. Ini akan membuat <user-data-dir>/<profile>/User StyleSheet/Custom.cssyang dapat Anda gunakan (perubahan segera disebarkan). http://code.google.com/p/chromium/issues/detail?id=2393

myf
sumber
2
Tampaknya ini tidak sah dengan Chromium saat ini. Mereka mungkin telah mengeluarkan fitur ini sejak jawaban ini diposting.
Pistos
1
Anda benar, saya sudah memperbarui jawabannya.
myf
ya sepertinya tidak didukung lagi (dicoba pada chrome 73 dan 76 (kenari)) ( Custom.cssdan yang User Stylesheetstidak ada lagi)
localhostdotdev
8

Anda dapat melihat diskusi ini: Edisi 2393: Mendukung stylesheet pengguna

Di bagian paling akhir mereka menyebutkan bahwa --enable-user-stylesheetparameter saat memulai Chrome akan mengaktifkan stylesheet khusus ..

Gabriele Petrioli
sumber
4

Satu-satunya solusi yang dapat saya pikirkan adalah menggunakan skrip Greasemonkey yang menambahkan entri gaya ke setiap halaman html yang mematikan garis bawah untuk tautan. Sesuatu seperti:

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

Artikel ini tampaknya dapat membantu Anda memulai:
BAGAIMANA CARA: Instal Skrip Greasemonkey Google Chrome (Hanya Windows)

harrymc
sumber
4
Saya merasa lucu karena saya tidak dapat langsung memodifikasi CSS. Firefox memiliki userChrome.css dan userContent.css, yang membuat memodifikasi tampilan dan merasa sangat sederhana.
George IV
@harrymc - Saya beralih Anda <style>kode dari blockquote untuk kode sehingga Anda tidak perlu khawatir tentang "ruang ekstra"
Jared Harley
0

Anda dapat mengubah gaya chrom css ui. Ingat saja jika Anda mengubahnya, beberapa efek seperti Contoh: #footer {color:#5F5F5F !important;}akan berubah di setiap situs yang menggunakan #footer. Anda telah diperingatkan. Custom.css mengubah hampir semua yang ada di browser chrome

Windows XP Google Chrome:

C: \ Dokumen dan Pengaturan \% USERNAME% \ Pengaturan Lokal \ Data Aplikasi \ Google \ Chrome \ Data Pengguna \ Default

Chromium:

C: \ Documents and Settings \% USERNAME% \ Local Settings \ Data Aplikasi \ Chromium \ Data Pengguna \ Default \ User StyleSheets

Windows 7 atau Vista (bantuan di bagian bantuan) Google Chrome:

C: \ Users \% USERNAME% \ AppData \ Local \ Google \ Chrome \ Data Pengguna \ Default \ User StyleSheets

Chromium:

C: \ Users \% USERNAME% \ AppData \ Local \ Chromium \ Data Pengguna \ Default \ User StyleSheets

Mac OS X Google Chrome:

~ / Perpustakaan / Dukungan Aplikasi / Google / Chrome / Default / User StyleSheets

Chromium:

~ / Perpustakaan / Dukungan Aplikasi / Chromium / Default / User StyleSheets

Linux Google Chrome:

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

Chromium:

~ / .config / chromium / Default

Chrome OS

/ home / chronos /

Ingin bukti, periksa tema saya untuk editor program http://userstyles.org/styles/95226/chrome-userstyles-editor-hacker-version-cyberat

Jangan ragu untuk memeriksa saya, saya membuat style sheet UI atau situs acak seperti facebook google.etc, dan membuatnya hitam & merah.

cyberationmicro.com
sumber
4
Itu tidak akan berhasil karena Chrome 33 menjatuhkan dukungan untuk gaya pengguna.
Synetech
0

Ada masalah ketika menggunakan Gaya sebagai injektor gaya
pengguna!important : tingkat prioritas pengguna tanpa lebih tinggi daripada tingkat prioritas penulis tanpa!important

Jadi saya menulis skrip pengguna sebagai injektor:
https://github.com/zcyzcy88/SelfColle/blob/master/StyleInject.user.js

prinsip:
Suntikkan gaya di document.head.prependChild(), sebelum gaya penulis laman web, memiliki prioritas lebih rendah, untuk menghindari hamparan gaya pengguna.

Sista Fiolen
sumber
Hai, dan selamat datang di SuperUser.com. Apakah Anda bisa lebih mendalam tentang apa yang dilakukan skrip Anda dengan tepat?
Manajer Layanan
Suntikkan gaya di document.head.prependChild(), untuk menghindari tampilan pengguna.
Sista Fiolen
Jika Anda dapat mengedit jawaban Anda, untuk lebih mendetail tentang apa yang dilakukan setiap bagian dari skrip Anda, akan sangat membantu.
Manajer Layanan
0

Pada 2018, Chrome> = 68.0.3440.106 (dan mungkin jauh lebih awal)

Saya sudah memiliki ekstensi Resource Override untuk berbagai penggunaan pengembangan, jadi saya sekarang menggunakannya untuk menambahkan stylesheet saya sendiri untuk memperbaiki beberapa pilihan gaya buruk di JIRA (dan untuk menyembunyikan lebih banyak iklan - heh heh). Opsi yang saya gunakan adalah "Suntikkan File" dan ini bekerja dengan sangat baik. Saya belum mencoba mengubah pengaturan 'url' untuk membuatnya hanya berfungsi di situs tertentu, tetapi penyeleksi css saya cukup spesifik sehingga saya dapat membiarkan url sebagai '*'

keabadian
sumber
0

Saya menemukan pertanyaan ini ketika mencari solusi tentang cara menyediakan lembar gaya untuk halaman tanpa gaya. Tak satu pun dari solusi di atas yang banyak membantu saya pada 09/2018 chrome tidak mendukung fungsi stylesheet kustom yang sebelumnya dihapus.

Solusi yang saya buat dan yang berfungsi seperti pesona untuk kasus penggunaan saya dicapai dengan menggunakan addon krom ini dengan skrip js khusus yang menyisipkan css kustom saya ke header halaman jika tidak memiliki stylesheet. Ini tidak akan berfungsi pada halaman yang memiliki stylesheet yang tertaut tetapi untuk kasus penggunaan saya cukup.

Berikut ini skrip JS yang saya gunakan:

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
sumber