CSS mặc định của trình duyệt cho các phần tử HTML

Tôi có thể tìm CSS mặc định của trình duyệt cho các phần tử HTML ở đâu?

Nhiều phần tử HTML đi kèm với một số thuộc tính CSS mặc định đôi khi có thể dẫn đến hành vi không xác định / không mong muốn. Ví dụ: Hộp đầu vào được hiển thị khác nhau trong các trình duyệt khác nhau. Tôi đang tìm một nơi bao gồm các thuộc tính CSS3 mới và các thành phần HTML5 mới.

Tôi đã thấy trong các câu hỏi khác (cũ hơn nhiều) (như bảng định kiểu CSS mặc định của Trình duyệt ) đề xuất giải pháp đặt lại CSS. Giải pháp này đôi khi không muốn, thường thì tôi thực sự muốn giữ một số thuộc tính cơ bản (chẳng hạn như tô sáng các hộp đầu vào trong Chrome). Nói cách khác: Tôi không muốn loại bỏ mọi thứ chỉ vì tôi không biết họ làm gì .

Vì vậy, có một trang web có thể cung cấp cho tôi tất cả thông tin này (hoặc có lẽ nhất)?

Có thể tìm thấy kho GitHub của tất cả thông số W3C HTML và biểu định kiểu CSS mặc định của nhà cung cấp tại đây

1. Kiểu mặc định cho Firefox

2. Kiểu mặc định cho Internet Explorer

3. Kiểu mặc định cho Chrome / Webkit

4. Kiểu mặc định cho Opera

5. Kiểu mặc định cho HTML4 (thông số W3C)

6. Kiểu mặc định cho HTML5 (thông số W3C)

Mẫu, theo thông số W3C HTML4 mặc định:

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

Nó khác nhau đối với mỗi trình duyệt, vì vậy:

• Firefox (Tắc kè): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css . Hoặc, duyệt đến resource://gre-resources/và nhìn vào html.css.
• Chrome / Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  • Chrome (Nháy mắt): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Internet Explorer (Cây đinh ba) , các phiên bản cũ hơn: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Bạn cũng có thể xem biểu định kiểu HTML5 Boiler khắc , "bình thường hóa việc hiển thị rất nhiều thứ mà không phải là thiết lập lại theo nghĩa truyền thống". Nó cũng sửa một vài lỗi / sự không nhất quán.

Cũng đáng để xem: https://github.com/necolas/n normalize.css / blog / master / n normalize.css

Không ai đã đề cập đến bất kỳ nguồn nào cho các mặc định CSS trong Edge. Tôi đã xem, và tôi không thể tìm thấy bất cứ điều gì có thẩm quyền, nhưng tôi đã tìm thấy biểu định kiểu này có vẻ hợp lý: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

Mặc dù đây là một vấn đề của trình duyệt chéo cũ, vì mỗi trình duyệt có kết xuất và hành vi của riêng mình với một số thành phần html như trung gian và các yếu tố đầu vào, nhưng bây giờ chúng ta có thể sử dụng bộ lọc css một cách khá an toàn trên đầu chúng.

Điều này cho phép đưa ra một bảng màu với bộ lọc xoay màu sẽ hiển thị các trình duyệt chéo khá tốt.

Các đoạn mã sau đây cho thấy cách sử dụng màu loại đầu vào để hiển thị hiệu ứng này trong thời gian thực trên thành phần video bằng javascript.

Để chỉ sử dụng css, điều này là bắt buộc để sử dụng mỗi một trong các bộ lọc này: sepia không ở 0, độ bão hòa cao, thang độ xám ở 0, độ tương phản cao và sau đó đưa ra màu với thuộc tính xoay màu, theo các thử nghiệm của tôi. Bộ lọc đảo ngược không bắt buộc, nhưng mang lại một số hiệu ứng sâu sắc.

Đồng thời, bộ lọc bóng đổ đang hoạt động khá độc đáo trên trình duyệt chéo. Để được sử dụng như thế này: filter: drop-Shadow (2px 20px 50px red) [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>

Tôi có thể sử dụng bộ lọc css không:

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

Một thanh công cụ tôi đã tạo xung quanh các bộ lọc css, từ đâu đến ghi chú này:

https://github.com/webdev23/ponyFilters

Một ví dụ codepen đầy đủ hơn:

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