知っておくべき最新の CSS テクニック

やあ!

私の 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;
  }  
}

メディアクエリを使用して多くのルールを作成する必要があります。それがコードが膨張する理由です。そうですね、カスタム プロパティはコード サイズを維持しますか?

カスタム チェックボックスは :has() で強化されています

最初の解決策

.cb__input:checked + .cb__label::before {
  /* CSS of the custom checkbox is here */
}

私の解決策

.cb:has(:checked) .cb__label::before {
  /* CSS of the custom checkbox is here */
}

次の兄弟コンビネータには欠点が 1 つあります。要素の順序が変更されると壊れます。 :この問題は解決されましたか?

追伸気に入っていただけましたら、ニュースレターを購読していただくとさらに多くの情報が得られます。

以上が知っておくべき最新の CSS テクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。