知られている CSS テクニック
Nov 23, 2024 pm 08:46 PMやあ!
私の CSS テクニックを共有したいと思います。私は多くの同僚がそれを知らないことに直面しています。もしかしたらあなたもそうかもしれません。興味を持っていただければ幸いです。
子の数に応じたCSSの書き方
最初の解決策
.uia-control { display: inline-flex; gap: 1rem; /* remaining CSS */ }
私の解決策
.uia-control { display: inline-flex; /* remaining CSS */ } .uia-control:has(> :nth-child(2)) { gap: 1rem; }
常にギャップを定義する必要がありました。要素に子要素が 1 つしかない場合でも。 :has() を使用するとそれを回避できます。 uia-control に少なくとも 2 つの子がある場合、ギャップが適用されますか?
カスタム プロパティを使用して 1 か所で変更を加える
最初の解決策
.banner { height: 2rem; position: fixed; } .content { padding-top: 2rem; }
私の解決策
:root { --page-banner-height: 2rem; } .banner { height: var(--page-banner-height); position: fixed; } .content { padding-top: var(--page-banner-height); }
別の要素の CSS に依存する要素を作成する必要がありますか?カスタム プロパティを使用する必要があります。終わりのない検索からあなたを救います。 1 か所で変更を加えますか?
順序依存関係のない CSS
最初の解決策
.heading_size-l { font-size: 2rem; } .heading { font-size: 1rem; }
私の解決策
.heading_size-l { --heading-font-size: 2rem; } .heading { font-size: var(--heading-font-size, 1rem); }
同じ特異性を持つルールの順序に関する問題は、1 つのコンポーネントにいくつかの変更が加えられている場合に顕著です。皆さん、それは避けることができます。 CSS カスタム プロパティが役に立ちますか?
メディアクエリをダイエットする
最初の解決策
.intro__heading { font-size: 2rem; } .intro__description { font-size: 1rem; } @media (width >= 641px) { .intro__heading { font-size: 3rem; } .intro__description { font-size: 2rem; } }
私の解決策
.intro__heading { font-size: var(--intro-heading-font-size, 2rem); } .intro__description { font-size: var(--intro-description-font-size, 1rem); } @media (width >= 641px) { .intro { --intro-heading-font-size: 3rem; --intro-description-font-size: 2rem; } }
メディアクエリを使用して多くのルールを作成する必要があります。それがコードが膨張する理由です。そうですね、カスタム プロパティはコード サイズを維持しますか?
追伸気に入っていただけましたら、ニュースレターを購読していただくとさらに多くの情報が得られます。
以上が知られている CSS テクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する

node.jsとexpressのMulterを使用してファイルアップロードします
