2026年10月1日(木)
長年の悩みがこれで解決！ CSSで機能を組み合わせたときにブラウザがサポートしているか検出できる新機能「@supports named-feature()」
CSSの@supportsはブラウザがその機能をサポートしているか検出するのに便利ですが、単独の機能しか検出ができません。
たとえば、gapは現在はflexboxでサポートされていますが、当初はCSS Gridのみでした。そのため、@supports (display: flex) and (gap: 1em) のように記述しても、flexboxでgapを使えるかではなく、それぞれflexboxが使えるとgapが使えることが検出できるだけです。
こういった機能の組み合わせで検出できる@supports named-feature()がまもなく全ブラウザでサポートされます。
“Undetectable” CSS ...
0
0
13
0author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
作業効率を改善するオープンソースのWindowsワークスペースマネージャー・「biomes」
NEXT ›
デザインチームにAIエージェントが加わってキャンバス上で共同作業を行うオープンソースのPaper.design代替・「Doop」
関連記事
長年の悩みがこれで解決！ CSSで機能を組み合わせたときにブラウザがサポートしているか検出できる新機能「@supports named-feature()」- 長年の悩みがこれで解決！ CSSで機能を組み合わせたときにブラウザがサポートしているか検出できる新機能「@supports named-feature()」
- 長年の悩みがこれで解決！ CSSで機能を組み合わせたときにブラウザがサポートしているか検出できる新機能「@supports named-feature()」
長年の悩みがこれで解決！ CSSのposition: stickyの仕様が変わり、上部固定と左端固定が同時に実装できるようなります
そのCSSの書き方は古すぎる！ モダンCSSとTailwinds CSSでどのように記述するのかが分かる -modern.css
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『長年の悩みがこれで解決！ CSSで機能を組み合わせたときにブラウザがサポートしているか検出できる新機能「@supports named-feature()」』についてまとめています。
この記事は特にjavascript・SEO・Chrome・Firefox・safariについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
