Hatena::ブログ(Diary)

neotagの雑文 このページをアンテナに追加 RSSフィード

2009-11-28

-moz-linear-gradient で遊んでみた。

追記

該当の記事は間違っているわけではなく旧仕様のようです。beta2以降の仕様は当エントリーに書いたとおり。(現状のCSS3仕様に準拠したという事かと思われます。)

参考: https://bugzilla.mozilla.org/show_bug.cgi?id=513395

ここから本文

↓の記事がなぜかもやもやしてたの(neotagの勘違いです)で、遊んでみた。

http://ascii.jp/elem/000/000/474/474810/index-3.html

※Fx3.6専用


これ動かないんじゃない?と思って試したらやっぱり動かない。何と混同しちゃったのかな。(間違ってません。古いだけでした。)

/*mozilla 3.6+ グラデーション マスク*/
background-image: -moz-linear-gradient(
                      top, bottom, /*上から下にグラデーション*/
                      from(rgba(255, 255, 255, .2)), /*透明度 80%*/
                      color-stop(10%, rgba(255, 255, 255, .3)),
                          /*上から10%に透明度 70%*/
                      to(rgba(255, 255, 255, .4)));/*透明度 60%*/

で、たぶん正しくはこう。これで意図通りだと思う。

background-image: -moz-linear-gradient(
                      top, 
                      rgba(255, 255, 255, 0.2),
                      rgba(255, 255, 255, 0.3) 10%,
                      rgba(255, 255, 255, 0.4));

demo

http://neotag.net/lab/sample/-moz-linear-gradient-sample1.html

参考

ちなみにcolor-stopの描画はSVGLinear Gradientの規則と同じらしい。

さて、トラックバックないしどうしようかな。調べればすぐ分かる事だろうしこのままでいいかな。

2009-10-28

メモ @media print{} 使わないのってなんでだっけ?

CSSのファイル数減らしたいなーと考えててふと思った事。なんで @media print って使われないんだっけ・・・?
使ってもいいよね?

  • ネスケ対応とかもうガン無視してるから@import挟む必要ってないよね。
  • 最近の流行はコネクション数減らすために1枚のCSSで書くのが主流になってない?
  • @media print{} ってIE6も対応してるよね。
    • (メジャーブラウザで非対応あったか後で調べる。)

ってことでPrint CSS作らずにCSSの一番下に書こうかなーと思ってる今日この頃。っていうか今日。

追記メモ

  • yahoo.comとかCSS覗いてみたけどそもそもprint向けの記述無いかも。。

2008-08-27

印刷対応

だいぶ前にIEでの印刷対応の手抜き方法を書いたけど、Firefoxの印刷対応を丁寧にまとめてるBlogを発見。

「Firefoxの印刷と闘う その2」

http://gyauza.egoism.jp/clip/archives/2008/08/080823-firefox-print/

jsでブラウザ判定してCSSを読み込んでるけどこの辺はsafariと競合しなければなんとかなりそう。

MacはOSネイティブの印刷ツールに任せちゃうしOperaさえ問題なければほぼ全てのブラウザーでクレームはつかずに済むレベルになるんじゃないかなー。


今度特訓しよう。

2008-07-18

IE6でposition:fixed (without javascript and expression)

IE6でみつけたバグのおかげでposition:fixedもどきが出来ちゃった。

↓サンプル

http://proto.tank.jp/fixed/

解説は余裕のあるときに書きます。

「テキストテキスト」のpが横幅100%とかになるとIEのスクロールバーが外に押し出されてやばいことになるのでそれを解決できれば普通に使えるものになりそう。

やばいね!やればできるもんだね!

で、このバグ回避するために相当時間浪費したっていう。IEなんて死ねばいいのに。

2008-07-06

IEで印刷対応手抜き

IEの印刷って横幅が制御できなくて横幅固定してたのをはずしていろいろ調整するけどそれってめんどくさいよね。

昔みたいにA4で印刷できるように。っていう前提条件であればprint.cssに↓を書けばいいじゃないかと思った。

body{ zoom:0.75 }

見てのとおりbodyを75%くらいに縮めるだけ。まぁバグやらでこれだけで対応しきれるわけじゃないけどそんなに印刷に気を使わなくていいサイトとか、横幅かっちり900pxなデザインなのに「印刷対応汁!」とか言われちゃったときに便利。