IEのサポートが終了した現在、古いCSSリセットからもう卒業！ 最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css
Post on:2022年7月4日
sponsors
IEのサポートが終了し、Web制作でサポート対象がモダンブラウザとなりました。これにより、CSSにおけるブラウザの互換性の問題は以前に比べてはるかに少なくなります。無理なCSSリセットやすべてをリセットする必要もなくなります。
現在のWeb制作に合わせて制作された新しいCSSリセットを紹介します。
CSSのテクニックや知見も満載です！
EllyLoel/reset.cssは、A Modern CSS Reset（紹介記事）やMy Custom CSS Reset（紹介記事）にインスパイアされたCSSリセットです。
最近のデバイス・モダンブラウザの仕様に対応しており、古いCSSリセットを使用している人は見直すきっかけにもよいと思います。
:where()（すべてのブラウザでサポートされています）で詳細度を低くしてスタイルを上書きできるようにし、:not([width])でwidthのない要素、:not([class])でクラスのない要素の定義をしてあったり、CSSのテクニックや知見も満載です。
他のCSSリセットが気になる人は、こちらも注目です。
まずは、コメントなどを削除したminify版。
|
1 2 3 4 |
/* Made by Elly Loel - https://ellyloel.com/ */ *{margin:0;padding:0;line-height:calc(0.25rem + 1em + 0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}html{block-size:100%;-webkit-text-size-adjust:none}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}body{-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed;min-block-size:100%}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:5rem}:where(input,button,textarea,select),:where(input[type="file"])::-webkit-file-upload-button{color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}:where(textarea){resize:vertical}@supports (resize:block){:where(textarea){resize:block}}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}h1{font-size:2em}:where(ul,ol)[role="list"]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]:not([tabindex*="-"])){cursor:pointer;touch-action:manipulation}:where(input[type="file"]){cursor:auto}:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{cursor:pointer}@media (prefers-reduced-motion:no-preference){:focus-visible{transition:outline-offset 145ms cubic-bezier(.25,0,.4,1)}:where(:not(:active)):focus-visible{transition-duration:0.25s}}:where(:not(:active)):focus-visible{outline-offset:5px}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"]),:where(input[type="file"])::-webkit-file-upload-button,:where(input[type="file"])::file-selector-button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;text-align:center}:where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled]{cursor:not-allowed} |
続いて、完全版。
コメントは当方で意訳しました。
|
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 90 91 92 93 94 95 96 97 98 99 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 |
/* Made by Elly Loel - https://ellyloel.com/ 参考記事: - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/ - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/ - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE メモ: - :where()は簡単に上書きできるように詳細度を低くするために使用しています。 */ * { /* すべてのデフォルトのマージンを削除 */ margin: 0; /* すべてのデフォルトのパディングを削除 */ padding: 0; /* line-heightをemベースでcalc()で計算。font-sizeを小さくするとline-heightは大きくなり、font-sizeを大きくするとline-heightは小さくなります。参考: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */ line-height: calc(0.25rem + 1em + 0.25rem); } /* より直感的なボックスサイズのモデルを使用 */ *, ::before, ::after { box-sizing: border-box; } /* fieldset, progress, meter以外のすべての要素でボーダーを削除し、背景に適切なデフォルトを設定 */ *:where(:not(fieldset, progress, meter)) { border-width: 0; border-style: solid; background-origin: border-box; background-repeat: no-repeat; } html { /* アプリケーションでパーセントによる高さを許可する */ block-size: 100%; /* テキストのサイズはfont-sizeのみで制御されるようにする */ -webkit-text-size-adjust: none; } /* 減速を好まないユーザーのためにスムーズなスクロールを実現 */ @media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } } body { /* テキストのレンダリングを改善 */ -webkit-font-smoothing: antialiased; /* https://marco.org/2012/11/15/text-rendering-optimize-legibility */ text-rendering: optimizeSpeed; /* アプリケーションでパーセントによる高さを許可する */ min-block-size: 100%; /* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter#example_2 */ /* scrollbar-gutter: stable both-edges; バグが修正されるまで削除: https://bugs.chromium.org/p/chromium/issues/detail?id=1318404#c2 */ } /* 各メディア要素のデフォルトを改善 */ :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; } :where(img, svg, video) { block-size: auto; max-inline-size: 100%; } /* ストロークを削除し、fillの塗りつぶしカラーはフォントカラーを継承 */ :where(svg) { stroke: none; fill: currentColor; } /* fill属性のないSVG */ :where(svg):where(:not([fill])) { /* fillを取り除き、ストロークのカラーはフォントカラーを継承 */ stroke: currentColor; fill: none; /* 丸みを帯びたストローク */ stroke-linecap: round; stroke-linejoin: round; } /* width属性のないSVGのサイズを設定 */ :where(svg):where(:not([width])) { inline-size: 5rem; } /* フォーム内のタイポグラフィのスタイルを削除 */ :where(input, button, textarea, select), :where(input[type="file"])::-webkit-file-upload-button { color: inherit; font: inherit; font-size: inherit; letter-spacing: inherit; } /* textareaのサイズ変更は垂直のみにし、ブラウザがサポートしている場合にのみblockにします */ :where(textarea) { resize: vertical; } @supports (resize: block) { :where(textarea) { resize: block; } } /* テキストのオーバーフローを回避 */ :where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; } /* article、aside、nav、section内のh1フォントサイズを修正 */ h1 { font-size: 2em; } /* リストの役割をするul、ol要素のリストスタイルを削除。デフォルトのスタイルが削除されることを示唆しています */ :where(ul, ol)[role="list"] { list-style: none; } /* クラスを持たないアンカータグに、より読みやすい下線スタイルを設定。アンカータグに設定することもできますが、コンフリクトを引き起こす可能性があります */ a:not([class]) { text-decoration-skip-ink: auto; } /* インタラクティブな要素は適切なカーソルを設定して操作できることを明確にする */ :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) { cursor: pointer; touch-action: manipulation; } :where(input[type="file"]) { cursor: auto; } :where(input[type="file"])::-webkit-file-upload-button, :where(input[type="file"])::file-selector-button { cursor: pointer; } /* フォーカスのアウトラインをアニメーション化 */ @media (prefers-reduced-motion: no-preference) { :focus-visible { transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1); } :where(:not(:active)):focus-visible { transition-duration: 0.25s; } } :where(:not(:active)):focus-visible { outline-offset: 5px; } /* ユーザーがボタンのテキストを選択できないようにする */ :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"]), :where(input[type="file"])::-webkit-file-upload-button, :where(input[type="file"])::file-selector-button { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; text-align: center; } /* 無効化されたボタンには無効化されたカーソルを表示 */ :where(button, button[type], input[type="button"], input[type="submit"], input[type="reset"])[disabled] { cursor: not-allowed; } |
sponsors
