CSSの:has()がブラウザで使用できるかを@supportsで検出するには、:has(*)ではなく、:has(+ *)にする必要がある

2023/01/17 7 users Has sup CSS Firefox ブラウザ

CSSの:has()がブラウザで使用できるかどうかを@supports selector()で検出するには、:has(*)ではなく、:has(+ *)が必要です。 これは2023年現在、:has()はFirefoxを除くすべての主要ブラウザでサポートされていますが、Firefoxで実験的な機能としてサポートされているためです。 CSS :has() feature detection with @sup... 続きを読む

いよいよ？まだまだ？IE11のサポート終了までのカウントダウンが始まる | コリス

2019/10/21 105 users コリス padding margin 足かせ カウントダウン

Web制作において悩みの種の一つが、IE11のサポートです。 main要素に垂直方向のmargin, paddingが効かない、CSS Grid、変数、@supportsなど、IE11が足かせになって使用に躊躇している人も少なくないと思います。 IE11のサポート終了までのカウントダウンが始まりました。 IE11のサポート終了までのカウントダウン IE11は... 続きを読む

CSS @supportsの知っていると便利な使い方のまとめ | コリス

2019/03/01 41 users コリス プロパティ CSS 特定 条件分岐

CSSの@supportsは機能クエリと呼ばれ、CSSの特定のプロパティやプロパティと値の組み合わせがブラウザにサポートされているかチェックするための機能です。言い換えると、条件分岐でスタイルを適用することができます。 そんな便利な@supportsの基礎知識と実践的な使い方、そして古い使い方や実は役に立っていない使い方... 続きを読む

これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle | コリス

2019/01/22 61 users サポートブラウザ Flexbox sticky コリス ネック

CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示され... 続きを読む

@supportsを使ってCSSのみでスタイルの条件分岐をする方法 | Webクリエイターボックス

2015/10/27 332 users プロパティー filter CSS 条件分岐 Webブラウザー

Webブラウザーによって表示可能なCSSが異なるのは、よく知られていることです。例えばChromeやSafariでは問題なく表示される filter は、Internet Explorerではうまく表示されず、別のスタイルを用意しなければいけません。今回は @supports を使って対応しているプロパティー別にスタイルを変更してみましょう。 @supports とは？ 指定した (プロパティー:... 続きを読む

shipit --trial - Tatsuhiko Miyagawa's blog

2013/02/08 10 users gadgets Trial tech New shipit

A weblog about Programming, Tech, gadgets, Japan and San Francisco. shipit —trial ShipIt 0.60 is released, and it now supports --trial option to make a TRIAL release on CPAN. TRIAL release is a (new) ... 続きを読む