web-dev-qa-db-ja.com

HTML要素のブラウザのデフォルトCSS

HTML要素のブラウザのデフォルトCSSはどこにありますか？

多くのHTML要素にはデフォルトのCSSプロパティがいくつかありますが、これは時々未知の/望ましくない動作を引き起こす可能性があります。たとえば、入力ボックスはブラウザごとに異なって表示されます。新しいCSS3プロパティと新しいHTML5要素をカバーする場所を探しています。

私は、CSSリセットの解決策を提案する他の（はるかに古い）質問（ ブラウザのデフォルトCSSスタイルシート など）の回答を見てきました。この解決策は望ましくない場合がありますが、多くの場合、基本的なプロパティの一部（Chromeの入力ボックスの強調表示など）を実際に保持したいと思います。言い換えれば、何をするのかわからないという理由だけで物事を取り除きたくない。

だから、この情報をすべて（またはおそらくほとんど）私に提供できるサイトはありますか？

htmlcsscross-browser
135
Nayish

すべてのW3C HTML仕様およびベンダーのデフォルトCSSスタイルシートのGitHubリポジトリが見つかります here

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

ブラウザごとに異なるため、次のようにします。

HTML5 Boilerplate stylesheet も見ることができます。これは「従来の意味でリセットされることなく、多くのものの表示を正規化します」。また、かなりの数のバグ/不整合を修正します。

また、一見の価値があります： https://github.com/necolas/normalize.css/blob/master/normalize.css

111
thirtydot

これは古いクロスブラウザーの問題ですが、各ブラウザーにはメディアや入力要素などのHTML要素を使用した独自のレンダリングと動作があるため、2017年にはcssfiltersそれらの上に財産。

これにより、hue-rotateフィルターを備えたカラーパレットを提供できます。

次のスニペットは、入力タイプcolorを使用して、JavaScriptを使用してビデオ要素にこの効果をリアルタイムでレンダリングする方法を示しています。

Cssのみを使用するには、このフィルターの各フィルターを使用する必要があります。セピアが0ではなく、高彩度、グレースケールが0、高コントラストで、テスト後に色相回転プロパティで色を指定します。反転フィルターは必須ではありませんが、いくつかの深い効果があります。

同様に、ドロップシャドウフィルターはクロスブラウザー間で非常にうまく機能しています。このように使用するには：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>

CSSフィルターを使用できますか：

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

Cssフィルターを中心に作成したツールバー。このノートの出所は次のとおりです。

https://github.com/webdev23/ponyFilters

より完全なコードペンの例：

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

0
NVRM