Co to jest arkusz stylów klienta użytkownika?

499

Pracuję na stronie internetowej w Google Chrome. Wyświetla się poprawnie w następujących stylach.

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

Należy zauważyć, że nie zdefiniowałem tych stylów. W narzędziach programistycznych Chrome napisano arkusz stylów agenta użytkownika zamiast nazwy pliku CSS.

Teraz, jeśli prześlę formularz i wystąpi błąd sprawdzania poprawności, otrzymam następujący arkusz stylów:

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;
}

font-sizeZ tych nowych stylów przeszkadza mój projekt. Czy istnieje sposób, aby wymusić moje arkusze stylów i, jeśli to możliwe, całkowicie zastąpić domyślny arkusz stylów Chrome?

css google-chrome

— Kapil Sharma
źródło

2

chrome: jak wyłączyć ustawienia arkusza stylów agenta użytkownika?

— ofiarować

7

Pamiętaj też, że w Chrome (51) otrzymujesz tylko te dwa wpisy tabeli, jeśli nie masz deklaracji typu doctype. W przeciwnym razie dostaniesz tylko drugi.

— John

Wyczyść pamięć podręczną chrome w innych narzędziach -> Wyczyść dane przeglądania

— doford

2

Powiązany post tutaj . Zrozumienie, w jaki sposób arkusz stylów użytkownika-użytkownika (lub przeglądarki) różni się od arkuszy stylów użytkownika i autora, pomoże w łatwej koncepcji.

— RBT

251

Jakie są docelowe przeglądarki? Różne przeglądarki ustawiają różne domyślne reguły CSS. Spróbuj dołączyć reset CSS, taki jak reset CSS meyerweb lub normalize.css , aby usunąć te ustawienia domyślne. Google „CSS reset vs normalize”, aby zobaczyć różnice.

— Oliver Millington
źródło

19

Zawsze resetuję / normalizuję mój CSS przed każdym projektem, w ten sposób masz „prawie” pole poziomu w różnych przeglądarkach. Nigdy nie słyszałem o negatywnym „wpływie ubocznym” jako takim, jestem pewien, że jeśli spojrzysz szybko na Google, okaże się, że jest to zalecane.

— Oliver Millington,

2

Resetowanie stylów może powodować dziwne wyniki z polami formularza, szczególnie wokół granic pól lub elementów wieloczęściowych, takich jak type = "file".

— traktuj swoje mody dobrze

7

Mimo że reset / normalizacja może pomóc, tak naprawdę nie odpowiada na pytanie, dlaczego zmienia się arkusz stylów agenta użytkownika? Mam ten sam problem, gdy style UA różnią się w przypadku wstępnie renderowanych stron, których używam do SEO. Wszelkie pomysły na to, dlaczego się zmienia?

— Yaron,

5

Zobacz, co Chrome domyślnie ustawia na stronie: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

— Santosh Kumar

10

To nie jest odpowiedź ... Dodanie <!DOCTYPE>jest poprawne przez @Sebas

— Amit Shah

140

Jeśli <!DOCTYPE>brakuje w treści HTML, może się zdarzyć, że przeglądarka preferuje „arkusz stylów agenta użytkownika” niż własny arkusz stylów. Dodanie doctype rozwiązuje ten problem.

— Jesper Mygind
źródło

6

To świetna wskazówka. Zaoszczędziłeś mi trochę czasu na badania. Warto zauważyć, że w moim przypadku miałem tę deklarację typu doctype, ale wcześniej miałem skrypt. Wygląda na to, że DOCTYPE musi stać się pierwszą rzeczą na stronie, aby wziąć pod uwagę.

— Sebas

3

Dodanie <! DOCTYPE> rozwiązało bardzo dziwny problem wyrównywania pionowego tr / td, jaki miałem. Dziękuję za tę odpowiedź.

— Ralph Tee

3

To jest nitpicking, ale <! DOCTYPE html> naprawił problem dla mnie.

— Steve Zelaznik

8

Miałem <! DOCTYPE html> włączony, ale nadal musiałem się normalizować.

— antikbd

1

Cytowanie @ChrisMorgan ze specyfikacji, do której link został utworzony: „DOCTYPE są wymagane ze względu na starsze wersje. Po pominięciu przeglądarki zwykle używają innego trybu renderowania, który jest niezgodny z niektórymi specyfikacjami. Dołączenie DOCTYPE do dokumentu gwarantuje, że przeglądarka utworzy najlepsza próba wykonania odpowiednich specyfikacji ”. W idealnym świecie DOCTYPE nie byłby potrzebny. Ale twierdzenie, że odpowiedź brzmi „po prostu nieprawda”, jest dość odważnym IMHO, szczególnie biorąc pod uwagę liczbę głosów pozytywnych.

— Jesper Mygind

104

Jeśli chodzi o pojęcie „arkusz stylów agenta użytkownika”, zobacz sekcję Kaskada w specyfikacji CSS 2.1.

Arkusze stylów agenta użytkownika są zastępowane przez wszystko, co ustawisz we własnym arkuszu stylów. Są one po prostu bardzo dno: w przypadku braku arkuszy stylów dostarczonych przez stronę lub użytkownika przeglądarka nadal musi w jakiś sposób renderować treść , a arkusz stylów agenta użytkownika tylko to opisuje.

Jeśli więc uważasz, że masz problem z arkuszem stylów agenta użytkownika, to naprawdę masz problem ze znacznikami lub arkuszem stylów, lub z obydwoma (o których nic nie napisałeś).

— Jukka K. Korpela
źródło

@givanse, nie, widzisz efekty arkusza stylów agenta użytkownika, gdy ich nie przesłonisz, a twój przykładowy znacznik nie jest wyjątkiem. Zostanie on przeanalizowany jako jeden lielement zawierający dwa ulelementy zawierające tylko tekst; są one stylizowane za pomocą arkusza stylów agenta użytkownika, ale ten styl można zastąpić. (To, czy znacznik jest nieprawidłowy, zależy od kontekstu i wersji HTML, ale nie wpływa to na styl.)

— Jukka K. Korpela,

@ givanse, ten problem nie dotyczy pytania „co to jest arkusz stylów użytkownika”. Jeśli uważasz, że problem jest ważny, opublikuj go jako nowe pytanie z wystarczającymi szczegółami. Ale punktor w twoim jsfiddle jest zwykłym punktem dla lielementu, a twój arkusz stylów go nie zastępuje.

— Jukka K. Korpela,

47

Oznaczenie dokumentu jako HTML5 przez odpowiedni typ dokumentu w pierwszym wierszu rozwiązało mój problem.

<!DOCTYPE html>
<html>...

— Daniel
źródło

8

Czy możesz wyjaśnić, jak dokładnie to powinno działać? W jaki sposób HTML 5 jest powiązany z niezdefiniowanymi stylami? Potwierdzę, ale czy masz jakieś gotowe skrzypce, aby to potwierdzić?

— Kapil Sharma,

28

Arkusz stylów agenta użytkownika to „domyślny arkusz stylów” dostarczany przez przeglądarkę (np. Chrome, Firefox, Edge itp.) W celu prezentacji strony w sposób, który spełnia „ogólne oczekiwania dotyczące prezentacji”. Na przykład domyślny arkusz stylów zapewni podstawowe style dla takich rzeczy, jak rozmiar czcionki, ramki i odstępy między elementami. Często stosuje się zresetowany arkusz stylów, aby radzić sobie z niespójnościami między przeglądarkami.

Ze specyfikacji ...

Domyślny arkusz stylów klienta użytkownika powinien prezentować elementy języka dokumentu w sposób, który spełnia ogólne oczekiwania dotyczące prezentacji dla języka dokumentu. ~ Kaskada .

Aby uzyskać więcej informacji na temat agentów użytkownika, zobacz agent użytkownika .

— Kenneth Stoddard
źródło

15

Odpowiadając na tytułowe pytanie, jaki jest arkusz stylów agenta użytkownika, zestaw domyślnych stylów w przeglądarce: Oto niektóre z nich (i najbardziej odpowiednie również w dzisiejszej sieci):

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

Osobista opinia: nie walcz z nimi. Mają dobre wartości domyślne, na przykład w przypadkach rtl / bidi i są obecnie spójne. Zresetuj to, co uważasz za nieistotne dla Ciebie, nie wszystkie jednocześnie.

— Ebrahim Byagowi
źródło

12

Zdefiniuj wartości, których nie chcesz używać ze stylu agenta użytkownika Chrome we własnej zawartości CSS.

— BenM
źródło

4

Niektóre przeglądarki używają własnego sposobu do odczytu plików .css. Tak więc właściwy sposób na pokonanie tego: jeśli wpiszesz wiersz poleceń bezpośrednio w kodzie źródłowym .html, to pobije plik .css, w ten sposób powiesz bezpośrednio przeglądarce, co robić, a przeglądarka będzie w stanie nie czytać polecenia z pliku .css. Pamiętaj, że polecenia zapisane w pliku .html są silniejsze niż polecenia w .css.

— rollin_jeksun
źródło

1

Miałem taki sam problem, jak jeden z moich <div> miał margines ustawiony przez przeglądarkę. To było dość irytujące, ale potem zorientowałem się, jak większość ludzi powiedziała, że to błąd znaczników.

Wróciłem i sprawdziłem sekcję <head>, a mój link CSS był jak poniżej:

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

Zawarłem typew nim i zrobiłem to jak poniżej:

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

Mój problem został rozwiązany.

— Appy Sharma
źródło

0

Każda przeglądarka udostępnia domyślny arkusz stylów, zwany arkuszem stylów agenta użytkownika, w przypadku gdy plik HTML go nie określa. Określone style zastępują wartości domyślne.

Ponieważ nie określono wartości dla pola elementu tabeli, zastosowano domyślne style.

— komentator
źródło

0

Chciałem tylko rozwinąć odpowiedź @BenM na podstawie tego, co przeczytałem tutaj od Ire Aderinokun. Ponieważ arkusz stylów użytkownika-użytkownika zawiera przydatne style domyślne, zastanów się dwa razy, zanim je przesłonisz.

Miałem głupi błąd, gdy element przycisku nie wyglądał poprawnie w Chrome. Częściowo go zaprojektowałem, ponieważ nie chciałem, aby wyglądał jak tradycyjny guzik. Pominąłem jednak elementy stylu, takie jak obramowanie, kolor obramowania itp. Chrome wkroczył, by dostarczyć części, o których myślałem, że mi ich brakuje.

Problem zniknął po dodaniu stylów border: noneitp.

Jeśli więc ktoś ma ten problem, upewnij się, że jawnie przesłoniłeś wszystkie odpowiednie domyślne style klienta użytkownika dla elementu, jeśli zauważysz, że wygląda on niepewnie, szczególnie jeśli nie chcesz całkowicie resetować stylów użytkownika użytkownika. To zadziałało dla mnie.

— Brent Miller
źródło

Czy nie powinien to być komentarz zamiast odpowiedzi?

— Peter Mortensen

@PeterMortensen tak, ale nie mogę zostawiać komentarzy - za mało reputacji.

— Brent Miller

-1

Mam rozwiązanie Sprawdź to:

Błąd

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

Poprawny

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

— Vinkal Chandel
źródło

2

Edytuj, aby wyjaśnić, jak to działa i dlaczego pomaga.

— Yunnosch

-6

Umieść następujący kod w pliku CSS:

table {
    font-size: inherit;
}

— Srikanth
źródło

2

To tak naprawdę nie dodaje nic nowego do tego postu. Istnieje już zaakceptowana odpowiedź, a także 5 innych odpowiedzi, więc nie publikuj spóźnionych odpowiedzi.

— Kaspar Lee