Apa itu stylesheet agen pengguna?

499

Saya sedang mengerjakan halaman web di Google Chrome. Ini ditampilkan dengan benar dengan gaya berikut.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Penting untuk dicatat bahwa saya tidak mendefinisikan gaya ini. Dalam alat pengembang Chrome, dikatakan stylesheet agen pengguna menggantikan nama file CSS.

Sekarang jika saya mengirimkan formulir dan beberapa kesalahan validasi terjadi, saya mendapatkan stylesheet berikut:

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Dari font-sizegaya-gaya baru ini mengganggu desain saya. Apakah ada cara untuk memaksa stylesheet saya dan jika mungkin, sepenuhnya menimpa stylesheet default Chrome?

css google-chrome

— Kapil Sharma
sumber

2

chrome: cara mematikan pengaturan stylesheet agen pengguna?

— givanse

7

Perhatikan juga bahwa di Chrome (51) Anda hanya mendapatkan dua entri tabel tersebut ketika Anda tidak memiliki deklarasi doctype. Jika tidak, Anda hanya akan mendapatkan yang kedua.

— John

Bersihkan cache chrome di lebih banyak alat -> Hapus data penjelajahan

— doford

2

Posting terkait di sini . Memahami perbedaan style sheet agen-pengguna (atau browser) dari style sheet pengguna dan penulis akan membantu membuat konsep dengan mudah.

— RBT

251

Apa saja browser target? Browser yang berbeda menetapkan aturan CSS default yang berbeda. Coba sertakan reset CSS, seperti meyerweb CSS reset atau normalize.css , untuk menghapus default-default itu. Google "CSS reset vs normalize" untuk melihat perbedaannya.

— Oliver Millington
sumber

19

Saya selalu mengatur ulang / menormalkan CSS saya sebelum setiap proyek, dengan cara itu Anda memiliki bidang level "hampir" di seluruh browser. Saya belum pernah mendengar "efek samping" negatif seperti itu, saya yakin jika Anda melihat Google dengan cepat, Anda akan menemukan bahwa itu direkomendasikan.

— Oliver Millington

2

Menyetel ulang gaya dapat menyebabkan hasil aneh dengan bidang formulir, khususnya di sekitar batas bidang atau elemen multi-bagian seperti type = "file".

— perlakukan mod Anda dengan baik

7

Meskipun reset / normalisasi mungkin membantu, itu tidak benar-benar menjawab pertanyaan, mengapa stylesheet agen pengguna berubah? Saya memiliki masalah yang sama di mana pada mereka gaya UA menjadi berbeda untuk halaman pra-render yang saya gunakan untuk SEO. Ada ide mengapa itu berubah?

— Yaron

5

Lihat apa yang ditetapkan Chrome secara default ke halaman web: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

— Santosh Kumar

10

Ini bukan jawaban ... Menambahkan jawaban <!DOCTYPE>benar oleh @Sebas

— Amit Shah

141

Jika <!DOCTYPE>tidak ada dalam konten HTML Anda, Anda mungkin mengalami bahwa browser memberikan preferensi ke "lembar gaya agen pengguna" di atas lembar gaya kustom Anda. Menambahkan perbaikan doctype ini.

— Jesper Mygind
sumber

6

Itu petunjuk yang bagus. Anda menyelamatkan saya beberapa waktu penelitian. Worth mencatat bahwa dalam kasus saya, saya memiliki deklarasi doctype tetapi saya memiliki skrip sebelumnya. Sepertinya DOCTYPE harus terjadi hal pertama di halaman untuk dipertimbangkan.

— Sebas

3

Menambahkan <! DOCTYPE> memecahkan masalah penjajaran vertikal tr / td yang sangat aneh yang saya miliki. Terima kasih atas jawaban ini.

— Ralph Tee

3

Ini nitpicking, tetapi <! DOCTYPE html> memperbaiki masalah untuk saya.

— Steve Zelaznik

8

Saya telah mengaktifkan <! DOCTYPE html> tetapi masih harus dinormalisasi.

— antikbd

1

@ChrisMorgan mengutip dari spesifikasi yang telah Anda tautkan: "DOCTYPEs diperlukan karena alasan sebelumnya. Ketika dihilangkan, browser cenderung menggunakan mode render yang berbeda yang tidak sesuai dengan beberapa spesifikasi. Termasuk DOCTYPE dalam dokumen memastikan bahwa browser membuat suatu upaya terbaik dalam mengikuti spesifikasi yang relevan ". Di dunia yang ideal DOCTYPE tidak akan diperlukan. Tetapi untuk mengklaim jawabannya adalah "tidak benar" adalah IMHO cukup berani, terutama mengingat jumlah upvotes.

— Jesper Mygind

104

Mengenai konsep "lembar gaya agen pengguna", lihat bagian Cascade di spesifikasi CSS 2.1.

Lembar gaya agen pengguna ditimpa oleh apa pun yang Anda atur di lembar gaya Anda sendiri. Mereka hanyalah dasar: dengan tidak adanya lembar gaya yang disediakan oleh halaman atau oleh pengguna, browser masih harus membuat konten entah bagaimana , dan lembar gaya agen pengguna hanya menjelaskan ini.

Jadi, jika Anda merasa memiliki masalah dengan style sheet agen pengguna, maka Anda benar-benar memiliki masalah dengan markup Anda, atau style sheet Anda, atau keduanya (yang tidak Anda tuliskan).

— Jukka K. Korpela
sumber

@ givanse, tidak, Anda melihat efek style sheet agen pengguna saat Anda tidak menimpanya, dan markup sampel Anda tidak terkecuali. Ini akan diurai sebagai satu lielemen yang mengandung dua ulelemen dengan konten teks yang adil; mereka ditata oleh lembar gaya agen pengguna, tetapi gaya ini dapat diganti. (Apakah markup tidak valid tergantung pada konteks dan pada versi HTML; tetapi ini tidak mempengaruhi gaya.)

— Jukka K. Korpela

@ givanse, masalah itu tidak relevan dengan pertanyaan "apa itu style sheet pengguna". Jika menurut Anda masalah itu penting, kirimkan sebagai pertanyaan baru, dengan detail yang cukup. Tapi peluru di jsfiddle Anda adalah peluru sederhana untuk lielemen, dan style sheet Anda tidak menimpanya.

— Jukka K. Korpela

47

Menandai dokumen sebagai HTML5 dengan DOCTYPE yang tepat pada baris pertama, menyelesaikan masalah saya.

<!DOCTYPE html>
<html>...

— Daniel
sumber

8

Bisakah Anda jelaskan bagaimana seharusnya itu bekerja? Bagaimana HTML 5 dikaitkan dengan gaya yang tidak terdefinisi? Saya akan mengkonfirmasi tetapi apakah Anda memiliki biola yang siap untuk mengkonfirmasinya?

— Kapil Sharma

28

Lembar gaya agen pengguna adalah "lembar gaya default" yang disediakan oleh browser (misalnya, Chrome, Firefox, Edge, dll.) Untuk menyajikan halaman dengan cara yang memuaskan "harapan presentasi umum." Misalnya, lembar gaya default akan menyediakan gaya dasar untuk hal-hal seperti ukuran font, batas, dan jarak antar elemen. Adalah umum untuk menggunakan lembar gaya reset untuk menangani ketidakkonsistenan di antara browser.

Dari spesifikasinya ...

Lembar gaya default agen pengguna harus menyajikan elemen-elemen bahasa dokumen dengan cara yang memenuhi harapan presentasi umum untuk bahasa dokumen. ~ The Cascade .

Untuk informasi lebih lanjut tentang agen pengguna secara umum, lihat agen pengguna .

— Kenneth Stoddard
sumber

15

Menjawab pertanyaan dalam judul, apa itu stylesheet agen pengguna, kumpulan gaya default di browser: Berikut adalah beberapa di antaranya (dan yang paling relevan juga di web saat ini):

Gecko (Firefox): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Pendapat pribadi: Jangan bertengkar dengan mereka. Mereka memiliki nilai default yang baik, misalnya, dalam kasus rtl / bidi dan konsisten saat ini. Atur ulang apa yang Anda lihat tidak relevan bagi Anda, tidak semuanya sekaligus.

— Ebrahim Byagowi
sumber

12

Tetapkan nilai-nilai yang Anda tidak ingin digunakan dari gaya agen pengguna Chrome di konten CSS Anda sendiri.

— BenM
sumber

4

Beberapa browser menggunakan cara mereka sendiri untuk membaca file .css. Jadi cara yang tepat untuk mengalahkan ini: Jika Anda mengetikkan baris perintah langsung dalam kode sumber .html, ini mengalahkan file .css, dengan cara itu, Anda memberi tahu peramban secara langsung apa yang harus dilakukan dan peramban berada pada posisi untuk tidak membaca perintah dari file .css. Ingat bahwa perintah yang ditulis dalam file .html lebih kuat daripada perintah dalam .css.

— rollin_jeksun
sumber

1

Saya memiliki masalah yang sama dengan salah satu <div> saya memiliki margin yang ditentukan oleh browser. Itu cukup menjengkelkan tapi kemudian saya menemukan karena sebagian besar orang mengatakan, itu adalah kesalahan markup.

Saya kembali dan memeriksa bagian <head> saya dan tautan CSS saya seperti di bawah ini:

<link rel="stylesheet" href="ex.css">

Saya termasuk typedi dalamnya dan membuatnya seperti di bawah ini:

<link rel="stylesheet" type="text/css" href="ex.css">

Masalah saya terpecahkan.

— Appy Sharma
sumber

0

Setiap browser menyediakan stylesheet default, disebut stylesheet agen pengguna, jika file HTML tidak menentukan satu. Gaya yang Anda tentukan menimpa default.

Karena Anda belum menentukan nilai untuk kotak elemen tabel, gaya default telah diterapkan.

— firstpostcommenter
sumber

0

Saya hanya ingin memperluas tanggapan dari @BenM berdasarkan apa yang saya baca di sini dari Ire Aderinokun. Karena stylesheet agen-pengguna memberikan gaya bawaan yang bermanfaat, pikirkan dua kali sebelum menimpanya.

Saya mengalami kesalahan bodoh di mana elemen tombol tidak terlihat tepat di Chrome. Saya telah menatanya sebagian karena saya tidak ingin itu terlihat seperti tombol tradisional. Namun, saya meninggalkan elemen gaya seperti border, border-color, dll. Jadi Chrome melangkah untuk memasok bagian-bagian yang menurut saya hilang.

Masalahnya hilang begitu saya menambahkan gaya seperti border: none, dll.

Jadi, jika ada orang lain yang mengalami masalah ini, pastikan Anda secara eksplisit menimpa semua gaya agen-pengguna default yang berlaku untuk elemen jika Anda melihat itu tampak miring, terutama jika Anda tidak ingin mengatur ulang gaya agen pengguna sepenuhnya. Ini berhasil untuk saya.

— Brent Miller
sumber

Tidakkah ini seharusnya menjadi komentar alih-alih jawaban?

— Peter Mortensen

@PeterMortensen ya, tapi saya tidak bisa meninggalkan komentar - reputasi tidak cukup.

— Brent Miller

-1

Saya punya solusi. Periksa ini:

Kesalahan

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

Benar

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

— Vinkal Chandel
sumber

2

Harap edit untuk menjelaskan cara kerjanya dan mengapa ini membantu.

— Yunnosch

-6

Masukkan kode berikut dalam file CSS Anda:

table {
    font-size: inherit;
}

— Srikanth
sumber

2

Ini tidak benar-benar menambahkan sesuatu yang baru ke posting ini. Sudah ada jawaban yang diterima, serta 5 jawaban lainnya, jadi tolong jangan posting jawaban yang terlambat.

— Kaspar Lee