2019年01月22日(火)

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

• 0
• 172
• 60
• 145

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

CSS Feature Toggle -GitHub

CSS Feature Toggleの特徴

CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブラウザでどのようにレンダリングされるか確認できます。

author:

コリス

http://coliss.com

2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ

オリジナルサイトで続きを読む

今日のwebデザイン記事ランキングを見る

         

‹ PREV

               

オシャレな画像ギャラリー実装デモ「Animated Grid Previews」

         

NEXT ›

               

[ユーザー投稿] 「来る訪日外国人観光ブーム！オリンピック開催を控える今こそ始めるべき、インバウンド・越境EC対策の手法！」

関連記事

• Web制作者は要チェック！ 今回は盛りだくさん、Chrome 135で新しく追加された14個のCSSの機能
• Amazonで、Kindle本 コンピューター＆IT関連本セールが開催！ Web制作やアプリ開発の解説書、デザイン書がお買い得です
• Amazonで、春のコンピュータ・IT書フェアが開催！ セール初登場もあり、Web制作関連のKindle本がかなりお買い得です
• 知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
• 最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ

Ads

2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle』についてまとめています。

この記事は特にレスポンシブ・Chrome・Firefoxについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。