これはクイックキャンパスコースのまとめです.
「The RED:堅牢なUI設計のための表記ガイドby鄭燦明」

CSS初期化ファイル

reset.css(1kB)

開発者Eric A.Meyer

前回更新:2011年1月

https://meyerweb.com/eric/tools/css/reset/

現在の状況では、宣言を必要としないスタイルの多くは

である.

未使用または上書きのみのスタイルが多い

normalize.css (1.3kB)

開発者Neclos

前回更新:2018年11月

https://github.com/necolas/normalize.css/blob/master/normalize.css

上書き

デフォルトタグスタイル

常用hr、pre等のラベルについても予め設定する様式

を採用する.

初期化ファイルの使用に関する質問

ほとんどのリセットスタイルは上書きされ、

は使用されていない.

未使用または上書きCSSの使用に慣れると、不要なCSS

が増加する.

CSS初期化説明

Universal selector * reset

すべてのHTML要素を選択する選択者

すべて選択、スタイルはまったく同じ

スタイルを上書きするか、必要でないスタイルをすべての要素に適用するかの問題

.

が必要な場合は、このメソッド

は使用しないでください.

<style>
*,
::before,
::after {
	margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    list-style: none;
    -webkit-appearace: none;
    appearance: none;
}
</style>

Find unused CSS

Google開発者ツールでCoverage

を検証

Show Coverage

CSSコードの未使用コードの割合(赤の棒グラフで表示)

Coverage領域をリフレッシュして

を表示できます.

カテゴリDefault値はAllで、CSSに変更すると

が表示されます.

@font-faceエラー
→使用中のフォントですが、エラーとして検出(赤で表示)
→Chrome開発者はこのエラーをまだ解決していない可能性があります

開発者ツールにCoverageタブを露出する方法
1.クロム開発者ツールを開く
2.Mac:Cmd+Shift+P/Win:CTRL+Shift+Pで検索ウィンドウを表示する
3.Coverageを検索して「Show Coverage」を選択
Naver Webサイト表示オーバーライド率チェック例

CSS reset reinvent

CSSリセットスタイル

を再確認

リセットスタイルに適合するCSS属性

overflow-wrap:break-word;

内容が

を超える場合、単語の中間から

を切り出す.

ブラウザは文字列を1つの単語(文字列にスペースがない場合は単語)と見なしているため、スペースがない超長10バイト文字列がレイアウトを破壊する問題を解決するには

を使用します.

韓国語も単語の間で強制的に改行する問題です
→ :lang(ko) { word-break: keep-all; } 属性を適用すると

を解決できます.

:lang(ko){word-break:keep-all;}

「CJK」(韓国語、中国語、日本語)文字列の単語の間で強制的に改行することを防止する

Reset img

画像は、ウェブページ

よりも大きいことができる.

画像を挿入領域の最大幅

以下に設定.

<style>
/* Reset body */ 
body { 
    margin: 0; 
    overflow-wrap: break-word;
 } 
 
/* Do not break Korean words */
:lang(ko) { word-break: keep-all; } 

/* Reset img */ 
img { 
   max-width: 100%;
   height: auto;
}
</style>

クラス別リセット

スタイルをリセットするには、

classという名前の要素のみを検索します:

WeigeWeek編集で作成したスタイルまたはタグを使用可能にする方法
ヴィジヴィック編集とは?

プログラムでは、ハングルやWordなどのタスクを簡単に実行できます.

クラスのすべての要素を含むスタイルを初期化しますが、すべての要素がこの属性を持っているわけではありません.そのため、スタイルが多すぎるという問題があります.
例)list-styleプロパティはol、ul要素のみ
→仮想クラスセレクタwhereを使用して特定のブラウザで問題を解決する

<style>
/* CSS Reset by [class] */ 
[class] {
    margin: 0;
    padding: 0;
    box-sizeing: border-box;
    list-style: none; //ol, ul
    border: 0; //button, table, input, fieldset, textarea, select, iframe 
    background-color: transparent; //button, dialog, input, mark, meter, progress 
    border-collapse: collapse; //table 
    border-spacing: 0; //table 
    -webkit-appearance: none;
    appearance: none // button, input, textarea, select, meter, progress
} 
[class]::before,
[class]::after { box-sizing: border-box; }
</style>

仮想クラスセレクタwhere

かっこに選択子を挿入し、

を使用します.

選択者整数、選択者特異性を増加しない
同様の仮想クラス選択プログラム「is」は選択プログラムの特異性を増加させ、whereは選択プログラムの特異性を増加させない

を作成する方法:[class]:where(선택자)

例)[class]:where(ol, ul)→olまたはulタグ、class属性付き

サムスンインターネットブラウザは、そのプロパティ

をサポートしていません.

<style>
/* CSS Reset by [class] */ 
[class] { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
[class]::before, 
[class]::after { box-sizing: border-box } 
[class]:where(ol, ul) { list-style: none } 
[class]:where(button, fieldset, iframe, input, select, textarea) {  border: 0 } 
[class]:where(button, dialog, input, mark, meter, progress) { background-color: transparent; } 
[class]:where(table) { 
    border:0; 
    border-collapse: collapse; 
    border-spacing: 0;
} 
[class]:where(button, input, meter, progress, select, textarea) { 
    -webkit-appearance: none; 
    appearance: none; 
}
</style>