CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress

サイト構築 -CSS

Post on:2016年7月4日

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+

ライセンス

MITライセンス

ress: html, グローバルセレクタの定義

カスタマイズといっても中身はほんの少しでなく、けっこう異なります。

各スタイルの説明を翻訳しました。
※原文も残しています。

/*!
 * 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.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: 一般的な要素の定義

/* # =================================================================
   # 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;
}

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」を適用。

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: フォーム要素の定義

/* # =================================================================
   # 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 */
}

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+

[type="number"] {

width: auto; /* 1 */

}

/**

* 1. Safari 8+

[type="search"] {

-webkit-appearance: textfield; /* 1 */

}

/**

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

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+

select::-ms-expand {

display: none; /* 1 */

}

/**

* 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: メディア要素の定義

/* # =================================================================
   # 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 */
}

/* # =================================================================

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

svg:not(:root) {

overflow: hidden; /* 1 */

}

/**

* 1. Internet Explorer 11+, Windows Phone 8.1+

audio,

canvas,

progress,

video {

display: inline-block; /* 1 */

}

ress: アクセシビリティ用の定義

/* # =================================================================
   # 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;
}

/* # =================================================================

# 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の定義

/* # =================================================================
   # 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;
}

/* # =================================================================

# 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;

}

CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress

ressの特徴

対応ブラウザ

ライセンス

ress: html, グローバルセレクタの定義

ress: 一般的な要素の定義

ress: フォーム要素の定義

ress: メディア要素の定義

ress: アクセシビリティ用の定義

ress: ::selectionの定義

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress

ressの特徴

対応ブラウザ

ライセンス

ress: html, グローバルセレクタの定義

ress: 一般的な要素の定義

ress: フォーム要素の定義

ress: メディア要素の定義

ress: アクセシビリティ用の定義

ress: ::selectionの定義

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info