CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress
Post on:2016年7月4日
sponsors
ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。
normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。
- ressの特徴
- ress: html, グローバルセレクタの定義
- ress: 一般的な要素の定義
- ress: フォーム要素の定義
- ress: メディア要素の定義
- ress: アクセシビリティ用の定義
- ress: ::selectionの定義
ressの特徴
ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースなるよう設計されたものです。
- すべての要素に、「box-sizing: border-box;」を適用。
- すべての要素に、「padding」と「margin」をリセット。
- すべての要素に、「background-repeat: no-repeat;」を指定。
- 「::before」と「::after」に、「text-decoration」と「vertical-align」を継承。
- すべてのブラウザにおいて、ホバー時の「outline」を削除。
- コード要素に、「font-family: monospace;」を適用。
- input要素に、「border-radius」をリセット。
- フォーム要素に、フォントの継承を指定。
- すべてのブラウザにおいて、デフォルトのボタンのスタイルを削除。
- textarea要素に、垂直方向のリサイズを指定。
対応ブラウザ
対応ブラウザは下記の通り、対応バージョンは最新版と一つ前版です。
- Chrome (last two)
- Edge (last two)
- Firefox (last two)
- Firefox ESR
- Internet Explorer 8+
- Opera (last two)
- Safari 6+
ライセンス
ress: html, グローバルセレクタの定義
カスタマイズといっても中身はほんの少しでなく、けっこう異なります。
各スタイルの説明を翻訳しました。
※原文も残しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/*! * ress.css • v1.0.1 * MIT License * github.com/filipelinhares/ress */ /* # ================================================================= # Global selectors # ================================================================= */ /** * 1. All browsers without overlaying scrollbars * 2. iOS 8+ * 1. すべてのブラウザで、スクロールバーのオーバーレイを無し。 * 2. iOS 8+ */ html { box-sizing: border-box; overflow-y: scroll; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } *, ::before, ::after { box-sizing: inherit; } /** * 1. Inherit text-decoration and vertical align to ::before and ::after pseudo elements * 1. 「::before」と「::after」に、「text-decoration」と「vertical-align」を継承。 */ ::before, ::after { text-decoration: inherit; /* 1 */ vertical-align: inherit; } /** * 1. Set `background-repeat: no-repeat` to all elements * 2. Reset `padding` and `margin` of all elements * 1. すべての要素に、「background-repeat: no-repeat;」を指定。 * 2. すべての要素に、「padding」と「margin」をリセット。 */ * { background-repeat: no-repeat; /* 1 */ padding: 0; /* 2 */ margin: 0; } |
ress: 一般的な要素の定義
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
/* # ================================================================= # General elements # ================================================================= */ /** * Add the correct display in iOS 4-7. * iOS 4-7に、正しいdisplayを設定。 */ audio:not([controls]) { display: none; height: 0; } /** * 1. Show the overflow in Edge and IE * 1. EdgeとIEに、「overflow: visible;」を定義。 */ hr { overflow: visible; /* 1 */ } /** * Correct `block` display not defined for any HTML5 element in IE 8/9 * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox * Correct `block` display not defined for `main` in IE 11 * IE8/9に、displayプロパティを定義。 * IE10/11とFirefoxのdetail要素とsummary要素に、displayプロパティを定義。 * IE11のmain要素に、displayプロパティを定義。 */ article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } /** * 1. Set font-size to 80% in `small` elements * 1. small要素に、フォントサイズ「80%」を定義。 */ small { font-size: 80%; /* 1 */ } /** * 1. Add the correct display in IE * 1. IEに、displayプロパティを定義。 */ [hidden], template { display: none; /* 1 */ } /** * 1. Add a bordered underline effect in all browsers * 2. Remove text decoration in Firefox 40+ * 1. すべてのブラウザに、点線を定義。 * 2. Firefox40+に、テキストの装飾を削除。 */ abbr[title] { border-bottom: 1px dotted; /* 1 */ text-decoration: none; /* 2 */ } /** * 1. Remove the gray background on active links in IE 10 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+ * 1. IE10に、アクティブリンクのグレーの背景を削除。 * 2. iOS8+とSafari8+に、リンクの下線のギャップを削除。 */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the outline when hovering in all browsers * 1. すべてのブラウザに、ホバー時のアウトラインを削除。 */ a:active, a:hover { outline-width: 0; /* 1 */ } /** * 1. Specify the font family of code elements * 1. コード要素に、フォントファミリーを指定。 */ code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ } /** * 1. Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ * 1. Edge12+, Safari6.2+, Chrome18+に、「bold」を適用。 */ b, strong { font-weight: bolder; /* 1 */ } /** * 1. Address styling not present in Safari and Chrome * 1. SafariとChromeに、定義。 */ dfn { font-style: italic; /* 1 */ } /** * Address styling not present in IE 8/9 * 1. IE8/9に、定義。 */ mark { background-color: #ff0; color: #000; } /** * https://gist.github.com/unruthless/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } |
ress: フォーム要素の定義
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 |
/* # ================================================================= # Forms # ================================================================= */ input { border-radius: 0; } /** * 1. Firefox 36+ * 1. Firefox 36+ */ [type="number"] { width: auto; /* 1 */ } /** * 1. Safari 8+ * 1. Safari 8+ */ [type="search"] { -webkit-appearance: textfield; /* 1 */ } /** * 1. Safari 8 * 1. Safari 8 */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; /* 1 */ } /** * 1. Internet Explorer 11+ * 2. Specify textarea resizability * 1. Internet Explorer 11+ * 2. textarea要素に、垂直方向のリサイズを指定。 */ textarea { overflow: auto; /* 1 */ resize: vertical; /* 2 */ } /** * 1. Specify font inheritance of form elements * 1. フォーム要素に、フォントの継承を指定。 */ button, input, optgroup, select, textarea { font: inherit; /* 1 */ } /** * 1. Restore the font weight unset by the previous rule. * 1. 前の指定により、フォントのウェイトを再定義。 */ optgroup { font-weight: bold; /* 1 */ } /** * 1. Address `overflow` set to `hidden` in IE 8/9/10/11 * 1. IE8/9/10/11に、overflow時にhiddenを設定。 */ button { overflow: visible; /* 1 */ } /** * Remove inner padding and border in Firefox 4+ * Firefox4+に、内側のpaddingとborderを削除。 */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: 0; padding: 0; } /** * Replace focus style removed in the border reset above * 1. フォーカス時のスタイルを定義。 */ button:-moz-focusring, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { outline: 1px dotted ButtonText; } /** * 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 * 1. Android4に、ネイティブのaudio要素とvideo要素のコントロールのバグを防ぐ。 * 2. iOSに、クリッカブルなbutton要素のtypeのスタイルを修正。 */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * 1. Firefox 40+, Internet Explorer 11- * 1. Firefox 40+, Internet Explorer 11- */ button, select { text-transform: none; /* 1 */ } /** * Remove the default button styling in all browsers * すべてのブラウザにおいて、デフォルトのボタンのスタイルを削除。 */ button, input, select, textarea { background-color: transparent; border-style: none; color: inherit; } /** * Style select like a standard input * 1. Firefox 36+ * 2. Chrome 41+ * 標準的なinput要素のスタイルを選択。 * 1. Firefox 36+ * 2. Chrome 41+ */ select { -moz-appearance: none; /* 1*/ -webkit-appearance: none; /* 2 */ } /** * 1. Internet Explorer 11+ * 1. Internet Explorer 11+ */ select::-ms-expand { display: none; /* 1 */ } /** * 1. Internet Explorer 11+ * 1. Internet Explorer 11+ */ select::-ms-value { color: currentColor; /* 1 */ } /** * 1. Correct `color` not being inherited in IE 8/9/10/11 * 2. Correct the color inheritance from `fieldset` elements in IE * 3. Correct the text wrapping in Edge and IE * 4. Correct the text wrapping in Edge and IE * 5. Correct the text wrapping in Edge and IE * 1. IE 8/9/10/11に、カラーの継承を定義。 * 2. IEに、fieldset要素からカラーを継承するように定義。 * 3. EdgeとIEに、テキストのラッピングを修正。 * 4. EdgeとIEに、テキストのラッピングを修正。 * 5. EdgeとIEに、テキストのラッピングを修正。 */ legend { border: 0; /* 1*/ color: inherit; /* 2 */ display: table; /* 3 */ max-width: 100%; /* 4 */ white-space: normal; /* 5 */ } /** * 1. Correct the inability to style clickable types in iOS and Safari * 2. Change font properties to `inherit` in Chrome and Safari * 1. iOSとSafariに、クリッカブルなtypeのスタイルを修正。 * 2. ChromeとSafariに、フォントプロパティの継承を変更。 */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * Correct the text style of placeholders in Chrome, Edge, and Safari * Chrome, Edge, Safariに、テキストのスタイルを修正。 */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * 1. Correct the odd appearance in Chrome and Safari * 2. Correct the outline style in Safari * 1. ChromeとSafariに、アピアランスを修正。 * 2. Safariに、アウトラインを修正。 */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } |
ress: メディア要素の定義
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/* # ================================================================= # Specify media element style # ================================================================= */ /** * 1. Remove border when inside `a` element in IE 8/9/10 * 1. IE8/9/10に、a要素の中にある時にボーダーを削除。 */ img { border-style: none; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera * 1. Chrome, Firefox, Operaに、正しいvertical-alignを与える。 */ progress { vertical-align: baseline; } /** * 1. Internet Explorer 11- * 1. Internet Explorer 11- */ svg:not(:root) { overflow: hidden; /* 1 */ } /** * 1. Internet Explorer 11+, Windows Phone 8.1+ * 1. Internet Explorer 11+, Windows Phone 8.1+ */ audio, canvas, progress, video { display: inline-block; /* 1 */ } |
ress: アクセシビリティ用の定義
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/* # ================================================================= # Acessibility # ================================================================= */ /** * Hide content from screens but not screenreaders * コンテンツを隠す時は、スクリーンリーダーからでなく、スクリーンから。 */ @media screen { [hidden~="screen"] { display: inherit; } [hidden~="screen"]:not(:active):not(:focus):not(:target) { position: absolute !important; clip: rect(0 0 0 0) !important; } } /** * Specify the progress cursor of updating elements * アップデート中の要素のプログレスのカーソルを指定。 */ /* */ [aria-busy="true"] { cursor: progress; } /** * Specify the pointer cursor of trigger elements * トリガー要素のポインターのカーソルを指定。 */ [aria-controls] { cursor: pointer; } /** * Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements * 使用不可、編集不可の要素のスタイルが無いカーソルを指定。 */ [aria-disabled] { cursor: default; } |
ress: ::selectionの定義
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
/* # ================================================================= # Selection # ================================================================= */ /** * Specify text selection background color and omit drop shadow * テキスト選択時の背景色を指定し、ドロップシャドウを削除。 */ /** * 1. Required when declaring ::selection * 1. 「::selection」を使用する時に必要。 */ ::-moz-selection { background-color: #b3d4fc; /* 1 */ color: #fff; text-shadow: none; } /** * 1. Required when declaring ::selection * 1. 「::selection」を使用する時に必要。 */ ::selection { background-color: #b3d4fc; /* 1 */ color: #fff; text-shadow: none; } |
sponsors
