自分ように記録を残しておく。力尽きた部分もあるので随時修正予定。
※あくまで自分ようですが、間違ってら教えていただけると凄く嬉しいです。
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
IE 9-にdisplayプロパティを追加
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
iOS 4-7のaudio:not([controls])に対して指定を追加
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
IE 10-のリンク内の画像の枠線を削除
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
IE対策でoverflow: hiddenを追加
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/* 1 /ですべてのブラウザのフォントスタイルを変更
/ 2 */でFirefoxとSafariで余白を削除します。
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
IE対策でoverflow: visible;を指定
/* 1 */でEdgeの指定を上書き
// chrome 指定なし // Edge input { overflow: hidden; overflow-x: hidden; overflow-y: hidden; } // FF 指定なし //Safari 指定なし
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
Edge、Firefox、およびIEのtext-transformの継承を削除
/* 1 */でFirefoxのtext-transformの継承を削除
// chrome select, button { text-transform: none; } // Edge 指定なし // FF 指定なし //Safari select, button { text-transform: none; }
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/* 1 /でWebKitのバグを防ぐには、（2）Androidのネイティブ audioとvideoコントロールを破壊します。
/ 2 */でiOSとSafariでクリック可能な型をスタイルできない問題を修正しました。
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
Firefoxで内側のボーダーとパディングを削除する。
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
前のルールで設定した4つのスタイルを元に戻す
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
境界線、余白、パディングをすべてのブラウザで変更
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/* 1 /でEdgeとIEのテキストの折返しを修正
/ 2 /でIEの fieldsetの部分からの色継を修正
/ 3 */でパディングを削除して、開発者がゼロになったときにキャッチアウトしないようにする
fieldset要素はすべてのブラウザで使用可能
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/* 1 /でIE 9-対応でdisplayプロパティを指定
/ 2 */でChrome、Firefox、Operaで正立な配置を追加
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
IEのデフォルトの垂直スクロールバーを削除
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/* 1 /でIE 10-で正しいボックスサイジングを追加
/ 2 */でIE 10-のpaddingを0に
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
Chromeのインクリメントボタンとデクリメントボタンのカーソルスタイルを修正します。
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/* 1 /でChromeとSafariで奇妙な外観を修正します。
/ 2 */でSafariでアウトラインスタイルを修正します。
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
macOSでChromeとSafariの内側のパディングとキャンセルボタンを削除
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* 1 /でiOSとSafariでクリック可能な型をスタイルできない問題に対応
/ 2 */でSafariでfontプロパティを inheritに変更
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
IE 9-対応でdisplayプロパティを指定
/* 1 */でEdge、IE、Firefox対応でdisplayプロパティを指定
// chrome details { display: block } menu { display: block; } // Edge menu { display: block; } // FF details { display: block } menu { display: block; } //Safari details { display: block; }
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
ブラウザで指定を統一
// chrome summary { display: block } summary::-webkit-details-marker { display: inline-block; width: 0.66em; height: 0.66em; -webkit-margin-end: 0.4em; } // Edge 指定なし // FF summary { display: block; } details > summary:first-of-type, details > summary:-moz-native-anonymous { display: list-item; list-style: disclosure-closed inside; } //Safari summary { display: block; } summary::-webkit-details-marker { display: inline-block; width: 0.66em; height: 0.66em; margin-right: 0.4em; }
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
IE 9-対応でdisplayプロパティを指定
/**
* Add the correct display in IE.
*/
template {
display: none;
}
IE 対応でdisplayプロパティを指定
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
IE 10-対応でdisplayプロパティを指定
Part1はこちら
http://qiita.com/y_sekitoba/items/8d70845d8b0a31d22de1