これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード | コリス

2021/05/26 171 users コリス src WebP画像 HTML レスポンシブ対応

画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバック... 続きを読む

これで完璧！CSS GridとFlexboxの違いと使い分け方、よく見かけるUIコンポーネントを実装するテクニックのまとめ | コリス

2020/06/25 351 users Flexbox コリス UIコンポーネント CSS Grid

CSS GridとFlexboxのどちらを使った方がよいか悩んだことはありませんか？ CSS GridとFlexboxの違い、使い分け方、CSS Gridの実装例、Flexboxの実装例、CSS GridとFlexboxを組み合わせた実装例、フォールバックと古いブラウザのサポート方法を解説します。 Grid for layout, Flexbox for components by Ahmad Shadeed 下... 続きを読む

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

2019/01/22 61 users supports サポートブラウザ Flexbox コリス

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

Chrome 45のセキュリティ改善により、開けないサイトが現れる | スラド セキュリティ

2015/09/06 115 users スラド クライアントサイド HTTPS経由 HTTP経由 仕様

あるAnonymous Coward 曰く、Chrome 45ではセキュリティ改善のため、クライアントサイドでのTLS 1.0へのフォールバックが廃止されたため、HTTPS経由で繋がらないサイトが現れている(ただしHTTP経由で開けるものは多い)。 これは、バギーなサーバーが、仕様に反してTLS 1.0よりも新しいClientHelloを無視するために起こるもので、Chromeは「SSL サーバー... 続きを読む

SVG のフォールバックは結局 Modernizr に落ち着いた件 | WWW WATCH

2015/02/26 51 users Modernizr jQuery SVG WWW WATCH

タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替える... 続きを読む

スクリプトが無効の場合のスタイル – terkel.jp

2012/07/01 64 users terkel スクリプト CSS 前提 ビジュアル要素

たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavsScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうする... 続きを読む