#11 sanitize.css v6.0.0 反映 〜 細分化して検証

• Added: font-family: inherit on form elements

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

• リセットCSS用のAutoprefixerは解除
• デモ用は> 3% in JP, ie 11, Android 4.4, last 1 versions

Nuxtなどで引っ張れないデータがあるため、IE Busterなど直近のライブラリと同じ形式へJSONを修正する。

CDNサービスとして配信をお願いしてきたjsDelivrが、npmとGitHubにアップしたものを自動的に取得する仕様に変わった。旧配信URLは残る。新しいアップデートは配信URLが変わっているので、ドキュメント・デモページに記載する。

• jsDelivr 公式サイト
• jsDelivr 使い方詳細

Shitaji.CSS / jsDelivr - GitHub

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/qrac/[email protected]/docs/css/shitaji.min.css">

Shitaji.CSS / jsDelivr - npm

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/docs/css/shitaji.min.css">

開発環境の老朽化を改善。

• dist をリポジトリに含めない（npm配信には含む）
• gulpを削除しテストは test として配置（npmでは配信に含めない）
• ドキュメントコードを内包

Update details (v6)

• リセット内容を最新ブラウザで目視した最小限のものに縮小 #31
• IEなどレガシーブラウザのサポートを終了 #30
• SCSSファイルの配布を終了 #32

トレンド変化に伴い、IEや旧Androidブラウザの検証を終了。

今後の検証は基本的にMacのChrome・Firefox・Safariで行う予定。

#11 sanitize.css v6.0.0 反映 〜 細分化して検証

• Added: normalize.css updates

// before
abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
}

// after
abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

sanitize.css v8.0.0のフォントファミリー指定にemojiがある。ここまで書く必要はある？Issueが上がっていなかったので追加された文脈が不明。

• sanitize.css/sanitize.css at master · csstools/sanitize.css

html {
  cursor: default; /* 1 */
  font-family:
    system-ui,
    /* macOS 10.11-10.12 */ -apple-system,
    /* Windows 6+ */ Segoe UI,
    /* Android 4+ */ Roboto,
    /* Ubuntu 10.10+ */ Ubuntu,
    /* Gnome 3+ */ Cantarell,
    /* KDE Plasma 5+ */ Noto Sans,
    /* fallback */ sans-serif,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji"; /* 2 */
  line-height: 1.15; /* 3 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}

• text-size-adjust - CSS | MDN
• [MS-CSS21E]: -ms-text-size-adjust

Mozillaの表によるとIE非対応で、Edgeは -webkit- で反映されるような書かれ方をされている。

normarize.cssやsanitize.cssには入っているが、ressには無い。

• cursor - CSS: カスケーディングスタイルシート | MDN
• 【CSS】cursorの使い方：カーソル形状の変え方と値一覧

ボタンなどが非活性の場合は not-allowed で禁止を表す方が伝わりやすいのでは。

Before

[aria-disabled] {
  cursor: default;
}

After

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

body の文字色が #000 以外の場合（※ここでは確認のためわかりやすい red を指定）

Before

button input select textarea は文字色に body の色が引き継がれず、CSSデザインで毎回修正する必要がある。フォーム要素だけ文字色が真っ黒となる場合がほとんど。

After

inherit を設定することで回避できる。

button,
input,
select,
textarea {
    color: inherit;
}

saintize.cssが5日前にv6をリリースしていたので、内容を確認し反映が必要な部分を探す。ぱっと見た感じ、style-lint導入でインデントが変更になっている箇所が多いのと、dialog追加、不要な表記の削除が行われているが、大きく変更されてはいないよう。また、所有が個人からcsstoolsというグループに変わった。

• csstools/sanitize.css: A best-practices CSS foundation

※リリースはまだ発行されていないので、まだ修正があるのかもしれない。発行され次第対応。

IE Busterでライブラリとデモのリポジトリを分割したところ、本体の修正とデモサイトへの反映を別で動かせて便利だった。また、依存モジュールが明確になりリポジトリのソースコードも見通しがよくなる。

デモサイトはデプロイ状況のわからないGitHub Pagesをやめ、Netlifyへ移行させる。URLは shitajicss.qranoko.jp に変更し、gh-pages ブランチにリダイレクト用HTMLを置く。

サイトの構造はIE Busterと同じNuxt.jsで作っておく。

iPadOSで -webkit-text-size-adjust: 100%; が効かなくなり、レイアウト崩れが起きるようになった。-webkit-text-size-adjust: none; にすれば解決するため修正する。

• iPadOSでフォントサイズが変わる - Qiita
• text-size-adjust - CSS: カスケーディングスタイルシート | MDN

ボタンと結合しているサーチフォームを作った際に、border-radius の指定が甘いとiOSだけ結合部分に角が付いてしまう。

他に角を残す理由も無いため、inputは角をリセットしておく。ressも同様の書き方をされている。

ress/ress.css at master · filipelinhares/ress

node.js v13 で動かない物があったのでnpm-scripts・Next.jsに変更。そのままサイトとしてもデプロイできるようにする。

#11 sanitize.css v6.0.0 反映 〜 細分化して検証

• Added: word-break: break-word to html

html {
	box-sizing: border-box; /* 1 */
	cursor: default; /* 2 */
	-ms-text-size-adjust: 100%; /* 3 */
	-webkit-text-size-adjust: 100%; /* 3 */
}

// after
html {
  line-height: 1.15; /* 1 */
  cursor: default; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
  word-break: break-word; /* 4 */
}

package.json

{
  "name": "shitajicss",
  "description": "Resetting CSS for web production",
  "version": "4.1.0",
  "style": "docs/css/shitaji.css",
  "keywords": ["css", "reset", "shitaji", "japanese"],
  "homepage": "https://github.com/qrac/shitajicss",
  "bugs": {
    "url" : "https://github.com/qrac/shitajicss"
  },
  "author": {
    "name": "Qrac",
    "web": "https://twitter.com/Qrac_JP"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/qrac/shitajicss.git"
  },
  "license": "(CC0-1.0)"
}

Dart Sassはnode-sassと違いCSSファイルをインポートできるため、あえてSCSSファイルを生成する必要がなくなった。

sanitize.cssなどの参照を終了。自分が最新ブラウザで目視したものだけを記載。影響がみられないCSSは削除。

必要なものを取り込む。

• SVGアイコンの塗りつぶしを制御 #20
• カーソルの非活性プロパティを修正 #21
• 微調整（重複除去・並び替え・その他反映）

addressタグを使うとブラウザCSSでitalicになったりするので、リセットしたほうがいいかも。

address {
  font-style: normal;
}

または

*,
:after,
:before {
    font-style: inherit;
}

などを検討。

docs なのはGitHub Pagesで公開していた頃の影響なので、分かりやすいよう dist に変更する。

#11 sanitize.css v6.0.0 反映 〜 細分化して検証

normarize.cssなどには無く、sanitize.cssのみ追加されているが必要？

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

Feather – Simply beautiful open source icons

fill 属性がインラインで付与されているアイコンのSVGに fill: currentColor; が当たると意図通りのデザインを保てないため、fill 属性が無いものだけにスタイルを当てる。

Before

svg {
  fill: currentColor;
}

After

svg:not([fill]) {
  fill: currentColor;
}

#11 sanitize.css v6.0.0 反映 〜 細分化して検証

• Added: box-sizing: border-box to *, ::before, ::after
• Removed: box-sizing: border-box from html and box-sizing: inherit from
  html

// before
*,
::before,
::after {
	background-repeat: no-repeat; /* 1 */
	box-sizing: inherit; /* 2 */
}

html {
	box-sizing: border-box; /* 1 */
	cursor: default; /* 2 */
	-ms-text-size-adjust: 100%; /* 3 */
	-webkit-text-size-adjust: 100%; /* 3 */
}

// after
*,
::before,
::after {
  background-repeat: no-repeat; /* 1 */
  box-sizing: border-box; /* 2 */
}

html {
  line-height: 1.15; /* 1 */
  cursor: default; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
  word-break: break-word; /* 4 */
}

古いブラウザのスクロールバー関係か何かで入れたCSS。現在のnormarize.css・sanitize.css・ress.cssには無い。

html {
  overflow-y: scroll;
}

これがあるとモーダルを body-scroll-lock などで作るときにモーダル以外を固定できなくなるので、削除する。