条件付き境界半径と3つの将来のCSS機能

アハマドシャドドのポストConditional Border Radius In CSS CSSの詐欺師は、Facebook上でかなり不可解なCSSスニペットを説明する素晴らしい例です.COM .

.conditional-border-radius {
   border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
}

このスニペットはかなりのCSSで、最初にどのように動作するかを知りたい場合は、head over to read Ahmad's post . それは良いハックですが、それも読めないです.あなたがこれを理解してもborder-radius 今日の宣言では、あなたの将来の自己が時間内にあなたと言葉を持って旅行しないように長いコメントを書く必要があります.
JavaScriptでCSSの機能を説明するなら、それはどのように見えるでしょう.

if (cardWidth >= viewportWidth) {
  radius = 0;
} else {
  radius = 8px;
}

それは合理的なロジックです!それは読みやすく、理解しやすいです.CSSのようなものはありますか?将来的には?
以下のCSSのコードは、クロスブラウザのサポートから遠く離れている、仕様はまだ編集され、それは生産の準備ができていません!

メディアクエリ範囲
一般的なメディアの質問から始めましょう.

@media (min-width: 600px) {
  .contitional-border-radius {
    border-radius: 1em;
  }
}

The pretty new media query range context 物事をより冗長で読みやすくする.

@media(width >= 600px) {
  /* ... */ 
}

@media (400px < width < 1000px) {
  /* ... */
}

私はこの構文の大ファンです.残念ながら、執筆時にはonly Firefox supports media query ranges .

明るい面で:今日のメディアクエリ範囲を使用することができますwhen PostCSS is embedded in your toolchain .
我々の手でメディアクエリ範囲で、何が次ですか?

コンテナクエリ
新しい湯たんぽ-コンテナクエリをもたらしましょう.コンテナクエリを使用すると、その幅に応じてコンテナの子スタイルをスタイルできます.私はここで大きな技術的な詳細に行くつもりではありませんが、コンテナのクエリをgooglingで多くのリソースを見つけることができます.たった今多くの人々がそれについて書いています.
以下に構文を示します:

@container (width > 600px) {
  .conditional-border-radius {
    border-radius: 1em;
  }
}

そして、我々は一歩近づいている!width クエリコンテナのコンテントボックス幅を定義しますaccording to the spec それはrelative length units ビューポート単位を含みます.ビューポートの幅を持って周りを反転しよう!

/* If the containers width is equal or greater than 
   the viewport width, remove the border-radius */
@container (width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}

このCSSは優れていますが、現在のブラウザのサポートにより将来の音楽です.Container queries are pretty much a Chromium thing right now , 彼らは積極的に開発している.

残念ながら、Chromeの実験的コンテナクエリ実装はViewport Unitをサポートしていないようです.私は、ものをテストするために、2人の協力者をつくりました.The one using pixel units works fine , にa container query using viewport units always matches .

しかし、我々は将来の実装をとにかく見ているように、読みやすいCSSスニペットに近づきますか?

提案時にCSS @
Chris Coyier recently shared a very new CSS conditionals proposal . @when and @else スペックの仕事と採用の準備ができています.🎉

@when container(width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}
@else {
  .conditional-border-radius {
    border-radius: 1em;
  }
}

言うことはあまりない@when ブラウザがそれを実装していないからです.The spec doesn't mention @container yet , しかし、コンテナ問い合わせも含めるのは私にとって論理的です.

概要
少なくとも理論的には、いくつかの読み込み可能なCSS行に到達し、Viewportや(.コンテナ幅.

@when container(width >= 100vw) {
  .conditional-border-radius {
    border-radius: 0;
  }
}
@else {
  .conditional-border-radius {
    border-radius: 1em;
  }
}

見てみたい場合は、再度仕様を示します.

Media query ranges

CSS Containment

CSS When/Else Rules

CSSがどのように進化するかを見るのは素晴らしいです.そして、ブラウザがこの偉大さを実装するまで待つことができません.未来は明るい、友達!