SVG アイコンを CSS 変数とか併せて良さげに使う | Basicinc Enjoy Hacking!
こんにちは。@rigani_c です。 みなさん、SVG 吸ってますか？ SVG 吐いてますか？ Web ページ上で自前の SVG アイコンを使用するときの良さげな手法を持ってきました。 結論からいうと SVG スプライトを use タグ使って id 指定で呼んで CSS 変数でスタイルを変更する。更に currentColor 使うと WebFont っぽくなって最高 です。 環境は macOS Mojave の Chrome 70 です。 それではご査収ください。 本記事で SVG アイコンに求めたいこと 以下の通りです。 Web サイト内共通の CSS でパーツごとに色を変えられる ページの表示を阻害しない 修正や管理が楽にできる（@rigani_c 的に） これだけ満たしていれば御の字ですね！ そもそも SVG ってそんなにええのん？ めっちゃいいです。 PNG で 50KB とか
Multi-Colored SVG Symbol Icons with CSS Variables | frontstuff
Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects. Fonts are vectors, so you don’t have to worry about resolution. They benefit from the same CSS properties as text. As a result, you have full control over size, color, and style. You can add tran
Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利に
CSS の calc() 関数は、サイズや形状を決定する値の指定を計算式で書くことができる仕様で、現時点では IE （IE11）や Edge を始め、Firefox、Chrome、Safari など、ほぼすべてのモダンブラウザがサポートしています。 8.1. Mathematical Expressions: calc() ： CSS Values and Units Module Level 3 ちょっとした計算を簡単に書けるので私もよく使用する記述なのですが、現在、Beta リリースの Firefox 48 は、この calc() 関数の入れ子記述に対応しました。後述しますが、CSS Variables （CSS カスタムプロパティ） と組み合わせるときにかなり便利になりました。 968761 - Support nested CSS calc() calc() 関数の基本的な記述 例
僕がネイティブなCSS変数にわくわくする理由
数週間前、CSS変数（より正確にはCSSカスタム・プロパティ）が、Chrome Canaryの「試験運用版のウェブ プラットフォームの機能」フラグ1を有効にすることで利用できるようになりました。 Chromeのエンジニアであるアディ・オスマーニがそのリリースについてはじめてツイートしたとき、多くの否定的で、敵対的で、懐疑的な声が寄せられました。その量は驚くべきものでした。少なくともCSS変数にわくわくしいてる僕にとっては。 これらの反応をざっと見渡したところ、苦情の99%は次の2つの点についてのものだとわかりました。 構文が汚くて冗長。 Sassの変数がすでにあるじゃん。興味なし。 もちろん僕もあの構文は好きじゃありません。それは認めます。でも、あれがいい加減に決定されたものではないってことは理解しておくべきです。CSSワーキング・グループのメンバーは、CSSの文法と互換性があり、かつ将来
CSS Variables in WebKit
CSS variables, properly known as CSS Custom Properties, were added to WebKit in the fall of 2015. WebKit has always been intrigued by the idea of putting variables in CSS, ever since 2008 when Dave Hyatt added our first experimental implementation. Since then there were two more re-writes of CSS Custom Properties, which helped shape the standard that browser vendors are settling on today. CSS vari
How to work with SVG icons
There are many ways to use SVG icons in HTML and CSS, and I haven’t tried them all. This is how we do it in our small front-end team at Kaliop. It works well for our needs, which include: Content and communication websites, often based on big CMSes, rather than full-JS web apps. Icons which are often simple, single-color icons (each potentially used in several different colors depending on context
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsdo.it