内部参照SVGスプライトをCSSでカスタマイズ(IE11対応)
SVG画像をHTMLへ<svg>タグとして設置すると塗りのfillや、線のstrokeなどをCSSから変更することができオンマウスでの色変更にtransitionでアニメーションをつけるなど表現の幅が広がりま …
ウェブの技術とか開発環境構築の覚書。
SVG画像をHTMLへ<svg>タグとして設置すると塗りのfillや、線のstrokeなどをCSSから変更することができオンマウスでの色変更にtransitionでアニメーションをつけるなど表現の幅が広がりま …
特定の機能が有効な環境にだけ適用させる@supportsでobject-fitなどInternetExplorerだけ非対応の機能を指定すると、クリーンなCSSハックができます。 サンプルソース 参考:@supports …
dataURLは通常は外部ファイルを読み込む画像などを、画像ファイルを設置せずコードとして埋め込める仕組みです。 このようなコードになります。HTMLコードだけで1pxの透過GIFから引用しました。 以前、画像ファイルな …
2018年の8月半ばに、GoogleFontsのInternetExplorerサポートが終了しました。 IEの最新版である11でGoogleFontsへアクセスすると、サポート外である旨ガイドが表示されます。 Your …
IE11では、レスポンシブ対応のためwidth,heightを指定していないSVG画像をbackgroundに指定した際 画像がbackground-sizeで指定したサイズよりも小さく表示されてしまうバグがあります。 …
InternetExplorer 11から、F12開発者ツールが新しくなりました。 増えた機能もそこそこありますが、ブラウザウィンドウのサイズを指定する機能は このアップデートでなくなってしまいました。 意外とプレゼンや …
極論から。 InternetExplorerではHTML5の<main>タグは使えません。 検索するとたくさん該当するのが IEはデフォルトで<main>タグをinline要素として認識するから、 …
SVGのpathに沿って線が徐々にのびていき描画しているようにみせるアニメーション。 これは、波線を制御するstroke-dashoffsetの値を大きめに設定し0に近づけていくことで実現でき CSSのアニメーションでも …
InternetExplorer10以上で、1行テキストボックスのinput type=”text”へ文字を入力する表示されるようになった×ボタン。 これを押すと、入力されている内容をクリアできる …
Internet Explorer 8では、ひらたくいうとCSS3から使えるようになったもの全般が効かないのですが プログレッシブ・エンハンスメント対応の場合切り捨てられる装飾 そして 対応してなかったのをうっかり忘れが …