Askthewind’s diary

個人的なメモ

ノーマライズCSS、自分用備忘録

はてなブログ用に自分で作成したデザインテーマのCSSの記述でブラウザが対応したVendor Prefixを削除したので、ついでにノーマライズCSSもモダンブラウザ用にいらない記述を削除したので、自分用備忘録として削除後のソースコードを残しておく。

text-size-adjust以外のVendor PrefixとIE用の記述は全て削除したよ。

コメント部分の日本語訳は、自分が解かれば良い程度です。

Normalize.css

necolas.github.io

 


/* ==========================================================================
/* ! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
/* Vendor Prefix and IE other than text-size-adjust CSS that removed
/* Document 
   ========================================================================== */
/**
 * 1. line-heightを1.15で設定。
 * 2. iOSで向きが変わってもフォントサイズが調整されないようにする。
 */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100% /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * bodyのマージンを取り除く。
 */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0
}

/**
/* Chrome、Firefox、Safariで、sectionとarticleコンテキスト内のh1要素の
/* フォントサイズとマージンを修正する。
 */
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0
}

/* Grouping content
   ========================================================================== */
/**
 * 1. preのmonospaceのフォントサイズが縮小されるのを正しい表示に修正する。
 * 2. preのフォントサイズを1emで調整する。
 */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Chrome、Edge、Opera、Safariでtext-decorationを正しい表示に修正する。
 */
/**
 * Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline; 
  text-decoration: underline dotted 
}

/**
 * Chrome、Edge、Safariでフォントの太さを調整する。
 */
/**
 * Add the correct font weight in Chrome, Edge,and Safari.
 */
b,
strong {
  font-weight: bolder
}

/**
 * 1. code,kbd,sampのmonospaceのフォントサイズが縮小されるのを正しい表示に修正する。
 * 2. code,kbd,sampのフォントサイズを1emで調整する。
 */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em /* 2 */
}

/**
 * smallのフォントサイズを80%で調整する。
 */
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%
}

/**
 * sub,supがline-heightに影響を与えないようにする。
 * 
 */
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sub {
  bottom: -0.25em
}
sup {
  top: -0.5em
}

/* Forms
   ========================================================================== */
/**
 * button,input,optgroup,select,textareaのフォントスタイルを設定。
 */
/**
 * Change the font styles in all browsers.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; 
  font-size: 100%; 
  line-height: 1.15;
}

/**
 * 開発者がfieldsetをゼロにしたときの挙動をpadding: 0で制御する。
 */
/**
 * Remove the padding so developers are not caught out when they zero out
 * `fieldset` elements in all browsers.
 */
legend {
  padding: 0
}

/**
 * Chrome、Firefox、Opera用にprogressをvertical-align: baselineで設定。
 */
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline
}

/* Interactive
   ========================================================================== */
/**
 * summaryをdisplay: list-itemで設定。
 */
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item
}

/* End normalize.css v8.0.1
   ========================================================================== */
   

使用した画像素材は /出典:Freepik 著作者:freepi様からお借りしました。
Special Thanks

jp.freepik.com