SVGにwidth,heightを指定していないとIEでbackground-sizeより縮小されるバグ

IE11では、レスポンシブ対応のためwidth,heightを指定していないSVG画像をbackgroundに指定した際
画像がbackground-sizeで指定したサイズよりも小さく表示されてしまうバグがあります。

これを回避するためには、SVGにwidth,heightを指定した上で、CSSのbackground-sizeも指定します。

サンプルソース※IEで表示すると症状が再現します

.pattern {
	width: 100vw;
	height: 10vw;
	background: url('dot.svg');
	background-size: 5vw;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
	<circle cx="0" cy="0" r="12"/>
	<circle cx="30" cy="30" r="12"/>
	<circle cx="60" cy="60" r="12"/>
	<circle cx="0" cy="60" r="12"/>
	<circle cx="60" cy="0" r="12"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="60px" height="60px" viewBox="0 0 60 60">
	<circle cx="0" cy="0" r="12"/>
	<circle cx="30" cy="30" r="12"/>
	<circle cx="60" cy="60" r="12"/>
	<circle cx="0" cy="60" r="12"/>
	<circle cx="60" cy="0" r="12"/>
</svg>

SVGをグラデーションで塗りつぶす

Illustratorでグラデーションで塗りつぶしたベクター画像をSVG書き出しすると、
わざわざグラデーション部分をラスタライズ画像として保存しマスキングする構造のSVGを生成してくれます。
せっかくビットマップ画像と決別したかったのにこれでは煮え切らない (笑)
ということでXMLコードだけでfillをグラデーションにする方法を探しました。

“SVGをグラデーションで塗りつぶす” の続きを読む

特殊文字をCSSのcontentへ表示

CSSのcontentでは文字を挿入することもできますが
「&(&amp;)」「>(&gt;)」などの特殊文字はコードのまま出力されてしまいます。

contentで特殊文字を使うときは、16進数の数値文字参照コードの& # x を、\や0に置き換え、セミコロンをとると指定できます。

  • & → \
  • # → 0
  • x → 0

「>」の記号をCSSの擬似要素で表示

「>」の参照はこうなります

  • 文字参照 → &gt;
  • 10進数の数値参照 → &#62;
  • 16進数の数値参照 → &#x003E;

16進数の数値参照 &#x003E; の記号を置換します。

  • &#x003E; → \00003E

これをCSSのcontentに設定。

// > を挿入
.btn_next::after {
	content: '\00003E';
}

ボタンに>>をスタイルで表示するサンプル

See the Pen Enter entities in CSS’s content property by webdev (@webdev-jp-net) on CodePen.0

CSSのpointer-eventでマウスイベントを制御

pointer-event: none; を使うと、CSSでクリックイベントを無効にできます。
工夫すれば、従来Javascriptを使用していた制御もCSSだけで実現できます。

pointer-eventは、最新ブラウザでは実装されています。
Internet Explorer 10未満でサポート外となっているので、レガシーな環境へ対応が必要なクライアントワークでは使うことができません。

参考:
Can I use… pointer-events

“CSSのpointer-eventでマウスイベントを制御” の続きを読む

記号(:や/)が連続するとword-bleak: break-all;の折り返しが効かない

最近知ってしまった真実…
一部のブラウザで、CSSの強制折り返しが効かないケースがあることがわかりました。

* {
	word-bleak: break-all;
}

こうしときゃ万能だろうという神話を信じていたのに、:(コロン)や/(スラッシュ)が連続している場合は折り返してもらえません。

2016年11月2日現在ではこうなっていました。

  • Safari 10.0.1 … OK
  • Chrome 54.0.2840.71 … NG
  • Internet Explorer 11 … NG

“記号(:や/)が連続するとword-bleak: break-all;の折り返しが効かない” の続きを読む

画像ファイルなしCSSだけでSVGを表示

スタイルシートだけでSVG画像を表示する方法です。
画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。
古いブラウザでは表示できませんので、ご注意を。

  • × InternetExplorer 8 以下
  • × Android 2.3 以下

メリットは、ページ読み込み時のリクエストを減らせること
デメリットは、一見なんの画像を貼り込んでいるのかわからないので、うまく管理しないとカオス化すること…です。

実際のコードはこのようになります。
当ブログの開発環境アイコンに使っているパソコンが表示されています。

<div class="sample">
</div>
.sample:after {
	content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPg0KPHBhdGggZD0iTTMwLDJIMkMwLjg5NiwyLDAsMi44OTYsMCw0djE4YzAsMS4xMDQsMC44OTYsMiwyLDJoMTEuMTk4bC0xLjIxLDRINi45ODRsLTAuNCwyaDE4LjgzbC0wLjM5OC0yaC01LjAwNGwtMS4yMS00SDMwDQoJYzEuMTA0LDAsMi0wLjg5NiwyLTJWNEMzMiwyLjg5NiwzMS4xMDQsMiwzMCwyeiBNMjkuNCwyMEgyLjZWNC42aDI2LjhWMjB6Ii8+DQo8L3N2Zz4=');
}

“画像ファイルなしCSSだけでSVGを表示” の続きを読む

YoutubeやGoogleMapsをリキッド表示にするCSS

absoluteで絶対位置配置した要素のサイズを相対指定の応用で
YoutubeやGoogleMapsAPIなどiframeで埋め込む要素を縦横比固定でリキッド表示するCSSです。
スマートフォンやレスポンシブ対応のときに役立ちます。

“YoutubeやGoogleMapsをリキッド表示にするCSS” の続きを読む