Стандартний CSS для веб-переглядачів для елементів HTML

Де я можу знайти CSS браузера за замовчуванням для елементів HTML?

Багато елементів HTML мають деякі властивості CSS за замовчуванням, які іноді можуть призвести до невідомої / небажаної поведінки. Наприклад, поля введення відображаються по-різному в різних браузерах. Я шукаю місце, яке охоплює нові властивості CSS3 та нові елементи HTML5.

Я бачив і в інших (набагато старших) питаннях (таких як таблиці за стилем CSS для браузерів за замовчуванням ) відповіді, які пропонують рішення щодо скидання CSS. Це рішення іноді не потрібне, часто я хотів би зберегти деякі основні властивості (наприклад, підсвічування вікон вводу в Chrome). Іншими словами: я не хочу позбуватися речей лише тому, що не знаю, що вони роблять .

Отже, чи є сайт, який може дати мені всю цю інформацію (чи, можливо, більшість)?

Репозиторій GitHub всіх таблиць стилів WSC HTML та таблиць стилів CSS за замовчуванням постачальника можна знайти тут

1. Стилі за замовчуванням для Firefox

2. Стилі за замовчуванням для Internet Explorer

3. Стилі за замовчуванням для Chrome / Webkit

4. Стилі за замовчуванням для Opera

5. Стилі за замовчуванням для HTML4 (специфікація W3C)

6. Стилі за замовчуванням для HTML5 (специфікація W3C)

Зразок за типовою специфікацією HTML4 W3C:

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

Для кожного веб-переглядача він різний, тому:

• Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css . Або перегляньте resource://gre-resources/та подивіться html.css.
• Chrome / Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  • Chrome (блимати): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Internet Explorer (Тризуб) , старіші версії: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Ви також можете переглянути таблицю стилів HTML5 Boilerplate , яка "нормалізує показ багатьох матеріалів, не скидаючи їх у традиційному розумінні". Він також виправляє досить багато помилок / невідповідностей.

Також варто переглянути: https://github.com/necolas/normalize.css/blob/master/normalize.css

Ніхто не згадав жодного джерела для CSS за замовчуванням у Edge. Я подивився, і не знайшов нічого авторитетного, але знайшов цей аркуш стилів, який виглядає правдоподібно: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

Хоча це стара проблема перехресного браузера, оскільки кожен браузер має власну візуалізацію та поведінку з деякими html-елементами, такими як медіа-елементи та вхідні елементи, ми тепер у 2017 році можемо досить безпечно використовувати css- фільтри у власність над ними.

Це дозволяє надати кольорову палітру з відтінком, що повертає фільтр, який буде добре відображати браузери.

Наведені нижче фрагменти показують спосіб використання кольору введення для відображення цього ефекту в режимі реального часу на відеоелементі з JavaScript.

Щоб використовувати лише css, обов'язково використовувати кожен із цих фільтрів: sepia не на 0, високу насиченість, шкалу відтінків сірого в 0, високий контраст, а потім надати колір із властивістю повернути відтінок після моїх тестів. Інвертний фільтр не є обов'язковим, але дає глибокі ефекти.

Крім того, фільтр тіней працює досить непогано за допомогою веб-переглядача. Використовувати так: фільтр: тінь (2px 20px 50px червоний) [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>

Чи можу я використовувати фільтри css:

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

Панель інструментів я зробила навколо css-фільтрів, звідки надходять ці примітки:

https://github.com/webdev23/ponyFilters

Більш повний приклад кодексу:

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