CSS リセットスタイルリセットの実装例

CSS リセットスタイルリセットの実装例

はじめに: すべてのブラウザには、「ユーザー エージェント スタイル シート」と呼ばれる、すべてのページに適用されるデフォルトのスタイルが付属しています。 (以下の場合ははしごが必要です)

Chromium UA スタイルシート - Google Chrome と Opera

Mozilla UA スタイルシート - firefox

WebKit UA スタイルシート - Safari

ほとんどは同じですが、検索入力ボックスなど一貫性のないスタイルも多数あります。

そのため、CSS 処理をリセットし、異なるブラウザ間の違いを統一し、チームが開発した初期標準を確認し、ブラウザの「欠点」を補う必要があります。

html{
   /* 標準フォント サイズは問題ありませんが、モバイル デバイスで rem を使用すると動的に変更されます。 */
  フォントサイズ:14px;
  /* IE ボックス モデルを使用します (個人的な選択ですが、通常はパディングと境界線を含めたボックスの実際のサイズに幅を設定します) */
  ボックスのサイズ: 境界線ボックス;
  
}

html,本文{
   /* 一部のモバイルブラウザでは、リンクまたはクリック可能な要素をクリックすると、半透明の灰色の背景が表示されます。 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* モバイルデバイスでのスクロールエクスペリエンスを向上*/
  -webkit-オーバーフロースクロール: タッチ;
  オーバーフロースクロール: タッチ;
   /* ブラウザウィンドウと同じ高さ*/
  高さ: 100%;
}

体{
   /* 一部の背景はデフォルトで薄い灰色なので、すべて純白に設定されています*/
  背景: #fff;
   /* antd によると、社内では Microsoft YaHei を使用しないでください。rem フォントの使用は推奨されません。 */
  フォント:14px、-apple-system、BlinkMacSystemFont、'Segoe UI'、'PingFang SC'、'Hiragino Sans GB'、'Microsoft YaHei'、
  「Helvetica Neue」、Helvetica、Arial、サンセリフ、「Apple Color Emoji」、「Segoe UI Emoji」、「Segoe UI Symbol」
   /* フォントを滑らかにする */
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
}

ブラウザのデフォルトのマージンとパディングを削除し、不要なタグを自分で削除します

体、
p、
h1,
h2,
h3,
h4,
h5,
h6,
dl、
dd、
ウル、
オール、
番目、
td、
ボタン、
形、
入力、
テキストエリア、
形状、
前、
引用ブロック、
形{
マージン: 0;
パディング: 0;
}

{
   /* 小さな手 */
  カーソル: ポインタ;
   /* ハイパーリンクのデフォルトの下線を解除します */
  テキスト装飾:なし;
   /* これは antd でも行われますが、チームがこのスタイルを必要とするかどうかによって異なります */
  遷移: カラー 0.3 秒の緩和;
}

オール、
ul{
   /* 醜いスタイルを削除します。 */
  リストスタイル:なし     
}

これらのノードの一部のプロパティは親ノードのスタイルを継承しないため、すべてがそれを継承し、アウトライン効果をキャンセルします。

、
h1,
h2,
h3,
h4,
h5,
h6,
入力、
選択、
ボタン、
テキストエリア {
フォントファミリー: 継承;
フォントサイズ: 継承;
フォントの太さ: 継承;
フォントスタイル: 継承;
行の高さ: 継承;
色: 継承;
アウトライン: なし;
}

ボタン、
入力[type='送信'],
入力[type='ボタン'] {
 /*クリック可能な手*/
カーソル: ポインタ;
}
 /* 一部のブラウザの数値入力コントロールの表示をキャンセルすると、コントロールの外観が変わる場合があります。 */
入力[タイプ='数値'] {
-moz-appearance:テキストフィールド;
}
入力[タイプ=数値]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
マージン: 0;
-webkit-appearance: なし;
}
/**
 * Firefox で内側の境界線とパディングを削除します。
 */
ボタン::-moz-focus-inner、
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  境界線スタイル: なし;
  パディング: 0;
}
/**
 * HTML5 の非表示を IE10 で正しく表示するようにする*/

[隠れた]
  表示: なし;
}
テンプレート {
 /* 一部のブラウザではテンプレートが表示されますが、テンプレートタグはほとんど使用されないので、自分で選択できます。 */
表示: なし;
}


CSS リセットアドレス

今後もさらに追加していきますので、ぜひご参加ください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  HTML テーブル境界コントロールの詳細な説明

>>:  Apache ポートに基づいて仮想ホストを作成する例

推薦する

HTML チュートリアル: 画像のサイズ、配置、間隔、境界線の属性を変更する方法

画像タグ: <img> ページに画像を挿入するには、「src」属性を持つ「img」タグを...

Linux で Multitail コマンドを使用するチュートリアル

MultiTail は、tail コマンド機能と同様に、複数のドキュメントを同時に監視するために使用...

MySQL ログイン警告問題の解決策

1. はじめにMySQL にログインすると、次のような警告が表示されることがよくあります。警告: コ...

Vueでクラススタイルを使用する方法の詳細

目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...

Vueのコンポーネントの詳細な説明

目次1. コンポーネントの登録2. コンポーネントの使用3. 父から息子へ4. 息子から父へ5. ス...

HTML の div と span の違い (共通点と相違点)

共通点: DIV タグと SPAN タグは、コンテンツ全体を非表示にしたり、コンテンツ全体を移動した...

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...

Javascript での JSBridge に関する予備的研究

目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...

MySQLクエリ構文の概要

序文:この記事では主に、MySQL の where、group by、order by、limit、...

CSSで検索ボックスを非表示にする機能を実装します(アニメーション順方向と逆方向のシーケンス)

上部のメニュー バーに検索ボックスを配置するのは一般的なシナリオですが、検索機能がそれほど頻繁に使用...

埋め込みJavaScriptと外部リンクの基本的な応用方法

目次埋め込みJavaScriptと外部リンクの基本的な応用JavaScript の記述方法には、イン...

MySQL8インストーラーバージョングラフィックチュートリアル

インストール必要な書類は下部に記載されていますステップ1 mysql-installer-web-c...

MySQL スロークエリログの詳細な理解

目次スロークエリログとは何ですか?スロークエリを有効にする方法ログ分析ツール mysqldumpsh...

webpackを使用してTypeScriptコードをパッケージ化およびコンパイルする方法を教えます

TypeScript バンドルwebpack 統合通常、実際の開発では、ビルド ツールを使用してコー...