reset_mixin / reset css の検証
last update:
2018/01/11
実機検証を行い、一部調整。
$html5 : true;
$view-pc : true;
$view-sp : true;
$view-ie6 : false; // old
$view-ie7 : false; // old
$view-ie8 : false; // old
$view-mozilla : true;
$view-webkit : true;
$view-opera : true;
$prefix-webkit : true;
$prefix-moz : true;
$prefix-ms : true;
$prefix-o : true;
// ---
//
// mixin reset
//
// 1. reset-html5doctor : html5doctorの一部調整版
// 2. reset-normalize : normalize.cssの一部調整版
// 3. reset-other : 上記調整に伴う補助追加分
// 4. include area : 1,2,3をinclude
//
//
// 一般的なresetの適用、及びブラウザ間の差異をなるべく無くすことを目的とする
//
// 確認・検証 (2012/12/3)
// win 7 : ie9(モード変更でie7,8)
// win XP : ie6
// mac 10.7 : ch21, ff14, sa5, op12
// iOS 5.1 : safari
// Android 2.2, 2.3, 4.0 : 標準ブラウザ
// Windows Phone 7.5 : ie9
// BlackBerry 7 : 標準ブラウザ
//
//
// Last Update : 2018/01/11
//
@mixin reset-html5doctor {
// html5doctorのreset.cssを基に、一部調整したもの
// 参考：http://html5doctor.com/html-5-reset-stylesheet/
//
// Metricsのreset
//
@if $html5 {
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em,
// img, // imgはここから省く。reset-other内でborderを指定する
ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
a, // aを追加。別の箇所でしていた指定をここで補う
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
// border: 0; // 影響があるのはimg,fieldset,iframe(reset-otherでborderを指定しここでは省く)
outline: 0;
// font-size: 100%; // 継承が過剰なので省略。別途でnormalizeのbodyとother内で必要な要素に指定する
font-weight: normal; // 追加
vertical-align: baseline;
// background: transparent; // 省いても問題は無さそう
box-sizing: border-box; // 追加
}
} @else {
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em,
ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
a,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
font-weight: normal; // 追加
vertical-align: baseline;
box-sizing: border-box; // 追加
}
}
// 文字の高さと行の高さを合わせる
//
body {
line-height: 1;
}
// HTML5新要素のブロック化 for ie6,7,8,9 & ff3
//
@if $html5 {
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
}
// マーカー削除指定。対象となるセレクタを変更する
//
ul, ol {
list-style: none;
}
//
// ▼before
//
// nav ul {
// list-style: none;
// }
// 引用符の非表示
//
// この一つ下の、qの前後コンテンツ非表示指定によって、モダンブラウザ、ie5.5〜9、
// iOS5、Android 2.2, 2.3, 4.0の引用符が消えることを確認済のため、ここの指定は省略
//
// ▼before
//
// blockquote, q {
// quotes: none;
// }
// 引用部分の前後コンテンツの非表示。必要なものだけ残して省略
//
q::before, q::after {
content: '';
}
//
// ▼before
//
// blockquote::before, blockquote::after,
// q::before, q::after {
// content: '';
// content: none;
// }
// 一番上の、Metricsのreset指定にa要素を含め、ここでは省略
//
// ▼before
//
// a {
// margin: 0;
// padding: 0;
// font-size: 100%;
// vertical-align: baseline;
// background: transparent;
// }
// 下線表示指定の変更 (リンクとの区別。元はinsのみだったが、uを追加)
//
ins, u {
text-decoration: none;
}
//
// ▼before
//
// ins {
// background-color: #ff9;
// color: #000;
// text-decoration: none;
// }
// mark要素のデフォルト設定を変更
//
// デフォルトだとie8で背景色が出ない
// 他のプロパティはブラウザ間でブレが無いため省略
//
@if $view-ie8 {
mark {
background: #ff9;
}
}
//
// ▼before
//
// mark {
// background-color: #ff9;
// color: #000;
// font-style: italic;
// font-weight: bold;
// }
// del要素のデフォルト設定
//
// 大抵のブラウザは打ち消し線がデフォルトで表示されるため、この指定は省略
//
// ▼before
//
// del {
// text-decoration: line-through;
// }
// 定義要素のデザイン揃え（ff, opは、デフォルトで下破線が表示されるため他のブラウザも揃える）
// 但し、ie5.5と6はabbrの下線と斜体、dfnの下線が効かない
//
abbr[title], dfn[title] {
cursor: help;
border-bottom: 1px dotted;
font-style: italic; // saとiOSでデフォルトで斜体にならないため追加
}
// 隣接するセルのボーダーを重ねて間隔を0にする
//
table {
border-collapse: collapse;
border-spacing: 0;
}
// 罫線のデザイン揃え
//
// hrを使用する場合は、別のデザインかデフォルトのままと考えられるため省略
//
// ▼before
//
// hr {
// display: block;
// height: 1px;
// border: 0;
// border-top: 1px solid #cccccc;
// margin: 1em 0;
// padding: 0;
// }
// 縦方向中央揃え
//
input, select {
vertical-align: middle;
}
} // end reset-html5doctor
@mixin reset-normalize {
// normalize.css 120707ver を基に、html5doctorとの重複を削除・あるいは変更したもの
// 参考：http://necolas.github.com/normalize.css/
//
// HTML5要素のブロック指定
//
// html5doctorと重複するため省略
//
// ▼before
//
// article,
// aside,
// details,
// figcaption,
// figure,
// footer,
// header,
// hgroup,
// nav,
// section,
// summary {
// display: block;
// }
// 下記要素をinline-blockで揃える。for ie6,7,8,9 & ff3
// 但し、ie6ではaudio[controls]へのスタイルは適用されない
//
audio[controls],
canvas,
video {
display: inline-block;
//
@if $view-ie7 {
*display: inline;
*zoom: 1;
}
}
// "controls"が無い場合、非表示にする(自動再生を防ぐため)
//
audio:not([controls]) {
display: none;
}
// ie7,8,9、ff3、s4で、グローバル属性のhiddenが効かないので、非表示にする
// 但し、ie6未サポート
//
[hidden] {
display: none;
}
// 1. ie6,7で、bodyにem単位でfont-sizeを設定すると誤ったサイズになる問題を修正
// 参考：http://clagnut.com/blog/348/#c790
// 2. コンテンツの高さに関わらず全てのブラウザでページをセンタリング（scroll barを常時表示）
// 3. androidやiOSで、tap highlight colorが親要素を含む問題を修正（tap highlight colorを消す）
// 参考：www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
// 4. iOSにおいて画面の向きが変わった際のテキストサイズ調整を防ぐ
// 参考：www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
//
html {
@if $view-ie7 {
font-size: 100%; // 1.
}
overflow-y: scroll; // 2.
//
@if $view-sp {
// -webkit-tap-highlight-color: rgba(0,0,0,0); // 3. // 色の反応がないと違和感があるので省く
-webkit-text-size-adjust: 100%; // 4.
-ms-text-size-adjust: 100%; // 4.
}
}
// 1. デフォルトで明朝タイプのsa,op,ie,iOSをsans-serif にして他と揃える
// 2. font-familyを継承しないform要素に指定する
// 3. 後述されるbody以外の要素に指定するプロパティをこちらに移動
//
body, // 1.
button, input, select, textarea {
font-family: sans-serif; // 2.
font-size: 100%; // 3.
margin: 0; // 3.
}
// ie6,7におけるmarginの修正
//
// html5doctorに含まれているので省略
//
// ▼before
//
// body {
// margin: 0;
// }
// chとsaでa:focusの青い枠を破線に修正
//@if $view-pc {
// a:focus {
// outline: thin dotted;
// }
//}
// 全ブラウザにおいて、focus時、及び mouse hover時の読みやすさを改善
// 参考：people.opera.com/patrickl/experiments/keyboard/test
//
// 検証したが現象は未確認。outline:0 だと、破線の表示でブラウザ間にブレが出るため省略
//
// ▼before
//
// a:active,
// a:hover {
// outline: 0;
// }
// 見出しのフォント設定
//
// サイトごとに設定する可能性が高いため省略
//
// ▼before
//
// h1 {
// font-size: 2em;
// margin: 0.67em 0;
// }
//
// h2 {
// font-size: 1.5em;
// margin: 0.83em 0;
// }
//
// h3 {
// font-size: 1.17em;
// margin: 1em 0;
// }
//
// h4 {
// font-size: 1em;
// margin: 1.33em 0;
// }
//
// h5 {
// font-size: 0.83em;
// margin: 1.67em 0;
// }
//
// h6 {
// font-size: 0.75em;
// margin: 2.33em 0;
// }
// ie7,8,9,sa,chでabbr要素に下線が出ない問題の修正
//
// html5doctorに含まれるため省略
//
// ▼before
//
// abbr[title] {
// border-bottom: 1px dotted;
// }
// ff3,4, sa4,5, chにおいてb,strong要素がboldにならない問題の修正
//
// 最新ver.は問題が無いため省略
//
// ▼before
//
// b,
// strong {
// font-weight: bold;
// }
// blockquoteのレイアウト設定
//
// html5doctorでmargin:0を設定しているので省略
//
// ▼before
//
// blockquote {
// margin: 1em 40px;
// }
// s5,chでdfn要素が斜体にならない問題を修正（正しくはs5, iOS, androidで斜体にならない）
//
// 2017現在ほぼ対応で、使用頻度も低いため省略
//
// ▼before
//
// dfn {
// font-style: italic;
// }
// ie6,7,8で(9は問題無い)、mark要素がスタイリングされない問題を修正
//
// html5doctorで指定しているので省略
//
// ▼before
//
// mark {
// background: #ff0;
// color: #000;
// }
// ie6,7で余白が変わる問題の修正
//
// html5doctorでmargin:0を指定しているので省略
//
// ▼before
//
// p,
// pre {
// margin: 1em 0;
// }
// ie6, s5, chにおけるfont-familyの問題（font-sizeにブレがある）を修正
// 参考：en.wikipedia.org/wiki/User:Davidgothberg/Test59
//
// iOS,androidも同様の問題有り
//
code,
kbd,
pre,
samp {
font-family: monospace, serif;
@if $view-ie6 {
_font-family: 'courier new', monospace; // for ie5.5, 6
}
// font-size: 1em; // font-familyを指定すればfont-sizeを指定しなくても揃うため省略
}
// 全てのブラウザにおいてpre textの非改行を解除
//
pre {
white-space: pre-wrap;
@if $view-ie6 {
word-wrap: break-word; // for ie6
}
}
//
// ▼before
//
// pre {
// white-space: pre; // 影響が無いため省略
// white-space: pre-wrap;
// word-wrap: break-word;
// }
// ie6,7においてquotesプロパティがサポートされていない問題を修正
//
// html5doctorのqの前後コンテンツ調整で対応済のため省略
//
// ▼before
//
// q {
// quotes: none;
// }
// s4においてquotesプロパティーがサポートされていない問題を修正
//
// html5doctorで指定済のため省略
//
// ▼before
//
// q::before,
// q::after {
// content: '';
// content: none;
// }
// 細目を適度なサイズに修正
//
// ブラウザ間でブレは無い。他のテキストとサイズを合わせるため省略
//
// ▼before
//
// small {
// font-size: 75%;
// }
// 全てのブラウザにおいてsubおよびsup要素がline-heightに影響する問題を防ぐ
// 参考：gist.github.com/413930
//
// ie6のfont-sizeが小さくなるのと、chのline-heightが余分に空くのも修正される
//
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
// リストのレイアウト
//
// レイアウトデザインはresetでは行わずに省略
//
// ▼before
//
// dl,
// menu,
// ol,
// ul {
// margin: 1em 0;
// }
// dd {
// margin: 0 0 0 40px;
// }
// menu,
// ol,
// ul {
// padding: 0 0 0 40px;
// }
// ie7のリストイメージを修正
//
// html5doctorで指定済みのため省略
//
// ▼before
//
// nav ul,
// nav ol {
// list-style: none;
// list-style-image: none;
// }
// 1. ie6,7,8,9において、a要素内側のborderを削除。reset-otherで指定し、ここでは省略
// 2. ie7の拡大画像画質改善機能。ほぼ使わないため省略
// 参考：code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
//
// ▼before
//
// img {
// border: 0; // 1.
// -ms-interpolation-mode: bicubic; // 2.
// }
// ie9でoverflow:hiddenが効かない問題を修正
// 但し、ie8以前とAndroid2.3以前はsvg未対応
svg:not(:root) {
overflow: hidden;
}
// ie6,7,8,9, s5, o11におけるmarginの問題を修正
//
// html5doctorで指定済のため省略
//
// ▼before
//
// figure {
// margin: 0;
// }
// ie6,7におけるmarginの問題を修正
//
// html5doctorで指定済のため省略
//
// ▼before
//
// form {
// margin: 0;
// }
// fieldset要素のデザイン調整
//
// レイアウトデザインはresetでは行わない
//
// ▼before
//
// fieldset {
// border: 1px solid #c0c0c0;
// margin: 0 2px;
// padding: 0.35em 0.625em 0.75em;
// }
// 1. ie6,7,8,9において色が継承されない問題を修正
// 現象が確認できなかったが、html5doctorで指定済のため省略
// 2. ie6,7で左に余白が空く問題を修正
//
@if $view-ie7 {
legend {
*margin-left: -7px; // 2.
}
}
//
// ▼before
//
// legend {
// border: 0; // 1.
// *margin-left: -7px; // 2.
// }
// 1. ff以外のブラウザでfont-sizeが継承されない問題を修正
// 2. ie6,7, sa, ch, iOS, androidにおけるmarginの差異を修正
// 3. 全てのブラウザにおいて外観と一貫性を改善
//
// button,
// input,
// select,
// textarea {
// font-size: 100%; // 1. // 前述する指定に含める
// margin: 0; // 2. // 前述する指定に含める
// vertical-align: baseline; // 3. // 違いが見られないため省略
// *vertical-align: middle; // 3. // 違いが見られないため省略
// }
// ff3,4のUA stylesheetにおいてline-heightが!importantになっている点について修正
//
// 未確認だが最新verでは問題無さそうなので省略
//
// ▼before
//
// button,
// input {
// line-height: normal;
// }
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
// and `video` controls. // 検証したが内容不明
// 2. chとsaでボタンの形状を他ブラウザに合わせる。但し、opではbuttonタグには無効
// 3. chとsaとopとieでマウスカーソルが「指」になるように修正
// 4. ie7のinput及びbutton内部のテキスト左右の余白にブレが出るため削除。但し、ie6には無効
button,
input[type="button"], // 1. // inputの前にhtmlと記述してあったが変化がみられないため削除
input[type="reset"],
input[type="submit"] {
@if $view-webkit {
-webkit-appearance: button; // 2.
}
@if $view-pc {
cursor: pointer; // 3.
//
@if $view-ie7 {
*overflow: visible; // 4.
}
}
}
// disabledの場合の上記3.のoverwrite
//
@if $view-pc {
button[disabled],
input[disabled] {
cursor: default;
}
}
// 1. ie8,9のデフォルトでbox-sizingがcontent-boxのため、width指定で出るブレを修正
// 2. ie8,9で一定以下の幅を指定すると過剰に縮む問題を修正
//
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; // 1.
padding: 0; // 2.
//
@if $view-ie7 {
*height: 13px; // 2.
*width: 13px; // 2.
}
}
// 1. sa,chで、searchboxの角丸を四角にして他と合わせる。但し、opには効かない
// 2. sa,chで、box-sizingの値のブレ(width,paddingを指定した時の解釈のぶれ)を解決する
//
input[type="search"] {
@if $prefix-webkit {
-webkit-appearance: none; // 1. // 元の値はtextfield。noneにすることでiOSにも有効になる
}
@if $prefix-moz {
-moz-box-sizing: content-box;
}
@if $prefix-webkit {
-webkit-box-sizing: content-box; // 2.
}
box-sizing: content-box;
}
// sa,ch(OSX)で、padding-leftの過剰な余白の削除と、webkitブラウザで出る削除ボタンの非表示
//
@if $view-webkit {
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
}
// ffでbuttonとinputのvalueテキストの周りの余白を削除
//
@if $view-mozilla {
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
}
// 1. ie6,7,8,9におけるデフォルト表示のスクロールバーを削除
// 2. 全てのブラウザにおいて読みやすさの改善(？未確認)と、ch,saで下に出る余白を削除
//
textarea {
overflow: auto; // 1.
vertical-align: top; // 2.
}
// テーブルのセル間のほとんどのスペースを削除
//
// html5doctorで指定済のため省略
//
// ▼before
//
// table {
// border-collapse: collapse;
// border-spacing: 0;
// }
} // end reset-normalize
@mixin reset-other {
//
// html5doctor, normalize 以外のreset指定
//
// 文字サイズを一定に揃える
// normalize内でbodyにfont-size:100%;を指定しているが、継承しない要素をここで指定している
//
h1, h2, h3, h4, h5, h6, small {
font-size: 100%;
}
// 1. 不要なborderデザインの削除 (a要素内のimg, fieldset, iframe)
// 2. 下部余白を削除 (img, iframe)
img, fieldset, iframe {
border: 0;
vertical-align: top;
}
} // end reset-other
// include area
@include reset-html5doctor;
@include reset-normalize;
@include reset-other;
code_popup