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 ポートに基づいて仮想ホストを作成する例

推薦する

JS を使用してファイルを操作する (FileReader は --node の fs を読み取ります)

目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...

better-scrollプラグインのスライドできないバグについて(2021年プラグインで解決)

より良いスクロールの原則親コンテナーであるため、ラッパーの高さはコンテンツのサイズに応じて増加します...

ホバー生成の境界線によって生じる要素の移動を解決する方法

序文hover疑似クラスが要素に境界線を追加すると、要素内のコンテンツがずれることがあります。box...

webpackが静的リソースキャッシュを実装する方法

目次導入複数の異なるハッシュを区別するハッシュチャンクハッシュコンテンツハッシュjs キャッシュの実...

Tomcat が IDEA のコンソールで文字化けを起こし、IDEA エンコーディングを UTF-8 に設定する方法

1. まず、TomcatログのエンコーディングとIdeaログ表示コンソールのエンコーディングを区別す...

jsネイティブウォーターフォールフロープラグイン制作

この記事では、jsネイティブウォーターフォールフロープラグインの具体的なコードを参考までに共有します...

WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)

WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...

Docker Nginxコンテナの制作と展開の実装方法

クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...

VueとElementUIを組み合わせたスキン変更ソリューション

目次前面に書かれた解決策 1: グローバル スタイル オーバーライドを使用する (フロントエンドに共...

Tomcatが親の委任メカニズムを破壊する方法についての簡単な説明

目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...

CentOS8.0ネットワーク設定の実装

1. CentOS 7 と CentOS 8 のネットワーク構成の違い: VMware Workst...

Nginx ロードバランシング/SSL 構成の実装

負荷分散とは何ですか?ドメイン名が複数の Web サーバーを指している場合は、nginx ロード バ...

SpringBoot プロジェクトの Docker クイック デプロイメントの紹介

1. Dockerをインストールするまず Linux 環境を開き、次のコマンドを入力してインストール...

Centos7 で Java8 と MySQL をインストールしてデプロイする

通常、Java の学習とプロジェクトのデプロイはローカルで行われますが、実稼働環境は Linux 環...

Redux Toolkit で Redux を簡素化する方法

目次Redux Toolkitが解決する問題何が含まれていますか? Redux Toolkit AP...