Wonder Code

プログラミングとか、PCについてが多いかな

Firefox31でCSS変数が実装されたらしい

スタイルシート内で

:root { --main-color: #FFFFCC;}

とし、

background-color: var(--main-color);

という風にするとできるようです。

しかし

:root { --size: 20;}

と代入した場合

div#rect { width: var(--size) px; }

では無効な値とされてしまうため、これを実現するためには、

calc という物を使って、

div#rect { width: calc(var(--size) * 1px); }

とする必要があるそうです。

もっといろいろな使い方があるとは思いますが、caniuse.com を見た限りでは、今のところ Firefox31 以降でのみサポートしているようなので、本格的に使うのはまだ先になりそうですが、かなり面白そうです。

興味のある方は是非!!

Using CSS variables - CSS | MDN

CSS Custom Properties for Cascading Variables Module Level 1

ロゴ自体をレスポンシブにする

これが

画面サイズを小さくすると、

サイトをレスポンシブにすることはありましたが ついにロゴ本体まで・・・

新しい発想ですね

これを取り入れれば真のレスポンシブデザインになっていきそうです。

Responsive Logos

Macのイースターエッグを見つけた

最近、いろいろなイースターエッグにはまっています。

Shiftを押しながら最小化(左上の黄色いボタン)を押すと・・・

写真では、分かりにくいですが、非常にゆっくり格納されていきます。

ちなみに、出すときも同様にすると、ゆっくり出ます。