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

推薦する

純粋なCSS3で実装されたネオンライト効果

達成される効果は次のとおりです。 マウスがボタン内に移動すると、ネオンライトのような効果が生成され、...

mysql-8.0.19-winx64 をインストールしてログインするための初心者向けチュートリアル (初心者必読)

目次1. インストールパッケージ(64ビット)をダウンロードする2. MySQLデータベースをインス...

Vue3 における ref と reactive の詳細な説明と拡張

目次1. 参照と反応1. 反応的2.参照2. shallowRef と shallowReactiv...

CentOS7 に MySQL をオフラインでインストールする詳細なチュートリアル

1. 元のmariadbを削除します。削除しないとmysqlをインストールできません。 mariad...

MySQL の undo、redo、binlog の違いを簡単に分析します

目次序文【ログ取り消し】 【REDOログ】 【バイナリログ】要約する序文MySQL には、REDO ...

CSS は Alibaba ベクター ライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプル コード)

Alibaba ベクターアイコンライブラリにアクセスAlibaba ベクターアイコンライブラリ好き...

Vue SPA ファースト スクリーン最適化ソリューション

目次序文最適化ソ連オンデマンドインポート1. ルーティングファイルでコンポーネントをオンデマンドでイ...

Ubuntu 18.04 Server に静的 IP を設定する方法

1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...

Linux sftp コマンドの使用法

SFTPの概念sftp は、安全なファイル転送プロトコルである Secure File Transf...

Docker-compose を使用して ELK をデプロイするためのサンプル コード

環境ホストIP 192.168.0.9 Docker バージョン 19.03.2 docker-co...

HTML ページジャンプのパラメータ渡しの問題

効果は以下のとおりです。ページジャンプボタンをクリックした後 対応する値はページ b で取得できます...

JavaScriptのURLオブジェクトとは何かについて話しましょう

目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...

JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ

目次序文配列.isArrayコンストラクタインスタンスプロトタイプオブジェクト.プロトタイプ.toS...

Vueインスタンスで$refsを使用する際の注意点

開発の過程では、インスタンスの vm.$refs(this.$refs) を使用して、ref で登録...

Xftp のダウンロードとインストールのチュートリアル (グラフィック チュートリアル)

Windows と Linux 間でファイルを転送する場合は、Xftp ツールを使用できます。この...