Domyślny CSS przeglądarek dla elementów HTML

146

Gdzie mogę znaleźć domyślny CSS przeglądarki dla elementów HTML?

Wiele elementów HTML ma pewne domyślne właściwości CSS, które czasami mogą powodować nieznane / niepożądane zachowanie. Na przykład pola wprowadzania są wyświetlane inaczej w różnych przeglądarkach. Szukam miejsca, które obejmuje nowe właściwości CSS3 i nowe elementy HTML5.

Widziałem w innych (znacznie starszych) pytaniach (takich jak domyślne arkusze stylów CSS przeglądarek ) odpowiedzi, które sugerują rozwiązanie resetowania CSS. Czasami to rozwiązanie jest niepożądane, często chciałbym zachować niektóre podstawowe właściwości (takie jak podświetlanie pól wprowadzania w Chrome). Innymi słowy: nie chcę się pozbywać rzeczy tylko dlatego, że nie wiem, co one robią .

Więc, Czy istnieje strona, która może dać mi wszystkie te informacje (albo większość)?

Nachshon Schwartz
źródło
3
Nie jest to witryna, ale w narzędziach Chrome Devleoper pokazuje odziedziczone reguły CSS, a te oznaczone jako „arkusz stylów klienta użytkownika” pokażą te chrome. Przepraszam, nie mogłem być bardziej pomocny. także: dowebsitesneedtolookexactlythesameineverybrowser.com
James Khoury
2
Świetne pytanie! Zgadzam się, musi być miejsce, gdzie wszystkie te informacje są dostępne.
Uwaga, plik reset.css nie zatrzymuje podstawowych rzeczy. Twoje pola wprowadzania będą nadal podświetlone w Chrome. Po prostu stracisz przypadkowe różnice w wypełnieniu w przeglądarkach. Możesz więc zacząć od tego samego zachowania we wszystkich przeglądarkach (dopełnienie / marginesy / ... mądry).
Jules
1
@James Khoury - dotyczy to również Firebuga.
Rob
@Rob oczywiście! Zapomniałem o Firebug
Jamesie Khoury.

Odpowiedzi:

93

Repozytorium GitHub zawierające wszystkie specyfikacje HTML W3C i domyślne arkusze stylów CSS dostawcy można znaleźć tutaj

1. Domyślne style dla przeglądarki Firefox

2. Domyślne style przeglądarki Internet Explorer

3. Domyślne style dla Chrome / Webkit

4. Domyślne style dla Opery

5. Domyślne style dla HTML4 (specyfikacja W3C)

6. Domyślne style dla HTML5 (specyfikacja W3C)

Przykład, zgodnie z domyślną specyfikacją W3C HTML4:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}
SW4
źródło
Na marginesie, ciekawie jest zobaczyć takie rzeczy jak niesławny nobrtag w arkuszu stylów HTML5 W3C.
tomasz86
nadal aktualne?
Webwoman
Łącze do przeglądarki Firefox nie zawiera wszystkich ustawień domyślnych. Na przykład nie zawiera domyślnego css dla textarea. Możesz to znaleźć w resource: //gre-resources/forms.css. Ogólnie rzecz biorąc, przeglądaj pliki w resource: // gre-resources, aby znaleźć wszystkie domyślne informacje. Lub dla wszystkich przeglądarek, zobacz html.spec.whatwg.org/multipage/rendering.html .
David Spector
117

Jest inny dla każdej przeglądarki, więc:

Możesz również spojrzeć na arkusz stylów HTML5 Boilerplate , który „normalizuje wyświetlanie wielu elementów bez resetowania w tradycyjnym sensie”. Naprawia również sporo błędów / niespójności.

Warto też zajrzeć na: https://github.com/necolas/normalize.css/blob/master/normalize.css

trzydzieści kropek
źródło
2
Co, co jest dość zabawne, jest w większości tym samym tematem, do którego dołączyłem w mojej odpowiedzi na pytanie powiązane z powyższym, które najwyraźniej jest „zdecydowanie nieaktualne”. Chociaż dodałem link do IE dopiero 2 dni temu.
robertc
1
@nayish Jak myślisz, co jeszcze jest poza ustawieniami domyślnymi przeglądarki?
robertc
1
@nayish Nie ma oddzielnej definicji domyślnego CSS dla elementów HTML poza tym, co przeglądarki zaimplementowały w swoich domyślnych
arkuszach
1
@nayish Jest to określone dla każdej indywidualnej właściwości w specyfikacji , ale pamiętaj, że krycie nie jest dziedziczone w sensie CSS
robertc
2
Uwaga, szablon HTML5 to znacznie więcej niż normalizacja CSS. Aby po prostu znormalizować CSS, używają narzędzia Normalize: necolas.github.com/normalize.css
Waiting for Dev ...
0

Chociaż jest to stary problem z różnymi przeglądarkami, ponieważ każda przeglądarka ma własne renderowanie i zachowanie z niektórymi elementami html, takimi jak elementy mediów i danych wejściowych, możemy teraz w 2017 roku całkiem bezpiecznie korzystać z właściwości filtrów css .

Pozwala to na nadanie palety kolorów z filtrem hue-rotate, który będzie renderował się całkiem dobrze w różnych przeglądarkach.

Poniższe fragmenty pokazują, jak używać koloru typu danych wejściowych do renderowania tego efektu w czasie rzeczywistym na elemencie wideo za pomocą javascript.

Aby używać tylko css, jest to obowiązkowe, aby użyć każdego z tych filtrów: sepia nie na 0, wysokie nasycenie, skala szarości na 0, wysoki kontrast, a następnie nadanie koloru z właściwością hue-rotate, zgodnie z moimi testami. Filtr odwracający nie jest obowiązkowy, ale daje głębokie efekty.

Jak dobrze, filtr cienia działa całkiem dobrze w różnych przeglądarkach. Aby użyć w ten sposób: filter: drop-shadow (2px 20px 50px czerwony) [X, Y, RADIUS, COLOR]

function styloElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  
  media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"

}
styloElem()
body {
  text-align:center;
  background:#001;
  color: white
}
video {
  width:500px;max-width:500px
}
Colors: 
<input 
       type="color"
       id="stylo"
       oninput="styloElem()"
       class="media"
       data-hue="0" />

<br><br> 

<video 
       controls
       id="media"        
       onplay="this.removeAttribute('controls');this.style.all='unset'"     
       onpause="this.controls='controls';styloElem()"
       src="https://ia600206.us.archive.org/7/items/MysteresDarchives-Saison04/1944%2c%20Dans%20le%20maquis%20du%20Vercors.ogv"></video>

Czy mogę używać filtrów css:

http://caniuse.com/#feat=css-filters

Pasek narzędzi, który zrobiłem wokół filtrów css, skąd pochodzą te notatki:

https://github.com/webdev23/ponyFilters

Bardziej kompletny przykład kodu:

http://codepen.io/Nico_KraZhtest/pen/bWExEB/

NVRM
źródło
Wygląda na to, że jest trochę na uboczu, masz rację! To była moja ciężka praca na ten dzień. Ponieważ jest to tylko css, nie zmieni to zachowania elementu przeglądarki, ale może dać sposób na renderowanie tego rodzaju elementów z identycznym kolorem / jasnością w dowolnej przeglądarce, bez pisania specjalnego kodu dla każdego z nich. Nie było to możliwe w chwili zadawania pytania. Dzięki.
NVRM