条件付き境界半径のトリックを他の見ています

Ahmad Shadedの興味深いFacebook CSS Border-Radiusの「トグル」を思い出してください。私は以前、この巧妙なテクニックを取り上げました。その後の記事は、より深い分析を提供しました。

ミシェル・バーカーの「賢いCSSソリューションの評価」は、過度に賢いコードの知恵に疑問を投げかけています。

紛れもなく魅力的で魅力的ですが、私はロビン・ランドルのCSS-Tricksニュースレターのコメントに同意します：「少し賢く感じます」。

この感情は共鳴します。このようなテクニックには、おそらくFacebookのリソース内に位置しています。ただし、巧妙ではあるが潜在的に維持可能なソリューションよりも読みやすさ（メディアクエリを使用する）を優先することが一般的に望ましいです。

Stefan Judisは、今後のコンテナクエリを使用して、同じ「条件付き国境帯域」効果を達成することを調査しました。

 /*コンテナの幅が等しい場合は 
   ビューポートの幅、境界線を削除 */
@container（width> = 100vw）{
  .Conditional-Border-Radius {
    ボーダーラジウス：0;
  }
}

このアプローチは大幅に明確です。 Stefanはまた、仮説的な@when機能の潜在的な利点を示唆しています。

 @when container（width> = 100vw）{
  .Conditional-Border-Radius {
    ボーダーラジウス：0;
  }
}
@それ以外 {
  .Conditional-Border-Radius {
    ボーダーラジウス：1EM;
  }
}

この@when統合の実現可能性は不確実なままです。ただし、その包含により、CSSの読みやすさと論理的な一貫性が向上します。

前の記事では、中間値の防止における乗算の役割について簡単に言及しました。結果は8pxまたは0pxのいずれかです。これを明確にするために、ビデオデモを以下に示します。 （注：実際の出版物にビデオが挿入されます。）

以上が条件付き境界半径のトリックを他の見ていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。