CSSリセットにも新しい動きが!最近の実装に合わせて、見直すきかっけになる新しいCSSのリセット -CSS Remedy
Post on:2019年2月13日
最近、CSSのリセットを見直す動きが少しずつあるようです。
2018年おすすめのCSSリセット!「Reboot.css」の特徴と使い方を解説、CSSリセットの2019年用私流カスタマイズ方法など、当ブログでもCSSリセットの記事を公開しました。
今回紹介するのはMozilla Developerによる新しいプロジェクトで、後方互換性を備えつつ、現在のデスクトップやスマホの環境に合わせたCSSリセットです。
CSS Remedyの特徴
CSS RemedyはMozilla Developerによる、CSSリセットの新しいプロジェクトです。
CSSリセットの今までの流れ
何年もの間、リセット用やベース用のスタイルシートは、Web制作者がより早く作業を始めるのに役立ちました。
初期のリセットではすべての視覚的なスタイルが削除され、Web制作者がすべての要素にスタイルを定義するという負担がかかりました。要素やプロパティの数はそれほど多くなく、当時は各ブラウザが他のブラウザとはまったく異なる動作をしていたため、これは理にかなっています。このアプローチを採用したリセット用スタイルシートはたくさんあり、最も人気が高かったのはEric Meyer's Reset CSSです。
最近になると、Normalize.cssやそれに類似したプロジェクトでは異なるアプローチを採用しています。すべてのスタイルを削除するのではなく、実用的なデフォルトを作成してブラウザのバグを削除することを目指しました。これらのどれか一つを使用すると、すべてのブラウザで一貫したベースのスタイルを手に入れることができます。
CSS Remedyのアプローチ
CSS Remedyのアプローチは、少し異なります。
最近のブラウザは、CSSのレンダリングにおいてはるかに一貫性があります。しかし、ブラウザがUAスタイルシートをどれだけ改善できるかには限界があります。Webのためのデフォルトは、過去のものと矛盾していない必要があります。UAスタイルシートに大きな変更を加えてしまうと、何百万もの既存のWebサイトに影響を与えてしまうからです。
CSSがデフォルトでどのように動作するべきか、現代的な考えでUAスタイルを上書きすることができます。
CSS Remedyの特徴
- プロパティや値を、後方互換性について心配する必要がない場合のみ、定義します。
- フォームの要素とコントロールはカスタマイズしやすいように、基本的なスタイルを適用します。基本的なスタイルを提供することと、フォーム入力がどのように機能するかをOSレベルで制御できるようにすること(iOSでの数字パッド機能など)のバランスを取りたいと思います。
- 非常に軽量なファイルをとして提供します。スタイルの定義は少ないので、上書きする必要がありません(例えば、font-familyは定義されていません)。
CSS Remedyの注意点
このプロジェクトはまだ始まったばかりです。他のフレームワークの一部として配布するのは時期尚早です。
気軽にファイルを読み、インスピレーションを得てください。
CSS Remedyのコード
CSS Remedyは、remedy.cssにコードがまとめられています。
参考までにコメントをすべて、意訳しました。
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 |
/* このプロジェクトは工事中です。まだリリースの準備はできていません。 2019年2月11日現在。 */ * { box-sizing: border-box; } /* box-sizingをborder-boxに切り替える。 */ /* ユーザーがスマホを「視差効果を減らす」に設定(prefers-reduced-motion)している場合は、アニメーションの終わりまですぐにジャンプさせます。 */ /* これは意図しない結果につながる可能性があります。必要に応じて削除し、prefers-reduced-motionのために適切なスタイルを定義してください。 */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } } body { margin: 0; /* ページの端の周りの小さなスペースを削除。 */ } /* タイポグラフィにrem単位を使用するよう切り替えます。見出しのline-heightを修正。 */ h1 { font-size: 2rem; /* すべてのH1は大きくし、入れ子でサイズが縮小されるのを削除。 */ margin: 0.67em 0; } h2 { font-size: 1.5rem; } h3 { font-size: 1.17rem; } h4 { font-size: 1.00rem; } h5 { font-size: 0.83rem; } h6 { font-size: 0.67rem; } h2, h3, h4, h5, h6{ line-height: 1; } /* line-heightを広げ、リーダビリティを向上させる。 */ p { line-height: 1.5; } pre { white-space: pre-wrap; /* デフォルトのoverflowは好ましくありません。 */ } /* 各ブラウザは、現在のリストのmargin, paddingと一致していますか? See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation */ nav ul { list-style: none; } img { border-style: none; /* IE10以前のリンク画像の枠線を削除。 */ vertical-align: bottom; /* ディセンダにより生じる画像の隙間を修正。 */ display: block; /* ブロックに切り替えます。通常の画像に必要な操作です。 */ max-width: 100%; /* デフォルトで画像をフレキシブルに。 */ height: auto; /* max-widthが有効になっても、画像のアスペクト比を維持。 */ } /* 英語では、q要素のスタイルを定義するときに、直線引用符ではなく、波引用符を使用してください。 */ /* このコードは、quotes.cssファイルに記述されています。 */ /* まだ広くサポートされていない最新のプロパティもサポートします。 初期値が最良ではないため、適した値を定義します。 */ /* 一貫した行間隔を定義。 */ :root { line-sizing: normal; } /* CJK言語(中国語、日本語、韓国語)での句読点の間隔を変更。 */ :root { text-spacing: trim-start allow-end trim-adjacent ideograph-alpha ideograph-numeric; } |
sponsors