CSS CSS по умолчанию для HTML-элементов

Где я могу найти CSS-браузер по умолчанию для HTML-элементов?

Многие элементы HTML имеют некоторые свойства CSS по умолчанию, которые иногда могут приводить к неизвестному/нежелательному поведению. Например, поля ввода отображаются по-разному в разных браузерах. Я ищу место, которое покрывает новые свойства CSS3 и новые элементы HTML5.

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

Итак, Есть ли сайт, который может предоставить мне всю эту информацию (или, возможно, большую часть)?

Ответ 1

Репозиторий GitHub для всех спецификаций HTML и спецификаций HTML по умолчанию W3C можно найти здесь

1. Стандартные стили для Firefox

2. Стандартные стили для Internet Explorer

3. Стандартные стили для Chrome/Webkit

4. Стандартные стили для Opera

5. Стандартные стили для HTML4 (спецификация W3C)

6. Стандартные стили для HTML5 (спецификация W3C)

Пример, по спецификации 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 }
}

Ответ 2

Это отличается для каждого браузера, поэтому:

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 (Trident), более старые версии: http://web.archive.org/web/20170122223926/http://www.iecss.com/

Вы также можете взглянуть на таблицу стилей HTML5 Boilerplate, которая "нормализует отображение большого количества материала без сброса в традиционном смысле". Это также исправляет довольно много ошибок/несоответствий.

Это также стоит посмотреть на: https://github.com/necolas/normalize.css/blob/master/normalize.css

Ответ 3

Хотя это старая проблема с перекрестным браузером, так как у каждого браузера есть свой собственный рендеринг и поведение с некоторыми элементами html, такими как элементы medias и input, мы можем теперь в 2017 году довольно безопасно использовать css-фильтры proprety поверх них.

Это позволяет создать цветовую палитру с фильтром оттенка, который будет отображать довольно неплохие кросс-браузеры.

В следующих фрагментах показан способ использования цвета входного типа для рендеринга этого эффекта в реальном времени на элементе видео с javascript.

Чтобы использовать только css, это необходимо, чтобы использовать каждый из этих фильтров: sepia не в 0, высокая насыщенность, оттенки серого в 0, высокая контрастность, а затем дают цвет с свойством hue-rotate после моих тестов. Инвертный фильтр не является обязательным, но дает некоторые глубокие эффекты.

Кроме того, фильтр drop-shadow работает довольно красиво в перекрестном браузере. Используется следующим образом: 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>

Ответ 4

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