[B! css][yui] maruyanmaのブックマーク

アスタリスクをプロパティ名の頭につけるというCSSハック

CSSの各セレクタのブロック内でInternet ExplorerとFirefoxやOperaなどで分けてプロパティを設定するハックとしてUnderscore Hackという有名なものがあるが、Details on our CSS changes for IE7によるとInternet Explorer 7では修正されている。だが、アンダースコアのかわりにアスタリスク(*)をプロパティ名の頭につけるというAsterisk Hack (勝手に命名)は健在だったりとか。 Asterisk HackはUnderscore Hackとほとんど同じで、 #menu { position: fixed; *position: absolute; } というような記述をするハック(サンプル・ページ)。結果はInternet Explorerでabsolute、FirefoxやOperaなどではfixed

maruyanma 2007/07/20

リンク

Yahoo! UI Library: Fonts CSS を使うのなら、Opera には気を付けて！

Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になっているのか詳細は分かりませんが、とりあえずクロスブラウザで同じフォントサイズを実現してくれる摩訶不思議なライブラリ。デフォルトのフォントサイズ、つまりfont-size: 100%;は13pxになっており、それからfont-sizeをパーセントで指定することによって、pxでフォントサイズを指定するような感覚で、フォントサイズを指定することができます。ただし、Operaにおいては、フォントサイズを100%以下、つまり12pxなどにするときはフォントがほかのブラウザより、小さく表示されるバグがあるようです

maruyanma 2007/06/08

リンク

YUI Fonts CSSのline-height: 1.22em;の謎を解く！ - Trans

先日から、ずっと頭に引っ掛かっていたYUIのFonts CSSのbody * { line-height: 1.22em;}という指定。はてなの人力検索でも質問してみたのですが、結局分からずじまいで、仕方がなく、自分でマークアップしてテストしてみました。どうやら、id:b-windさんがおっしゃるように、この「*」全称セレクタがキーになるようです。まず、おさらい。そもそも、なぜこのline-heightに疑問を感じたのかは、このエントリー。Lucky bag::blog: line-height の値には単位なしが良いとされる理由。はてブの数からしても読んだ人多いんじゃないでしょうか。まず、このコードについて、こちらでもテスト用に作ってみました。Lucky bagさんとほとんど同じコードです。 YUI Fonts CSSのline-hight: 1.22em;は何なのか？その1。 li

maruyanma 2007/06/08

リンク

Yahoo! UI LibraryのFonts CSS

OSのみならずブラウザにも左右されるWebにおけるフォント。多くの場合はHelvetica(WindowsではArialになる)やVerdanaなどの一般的なフォントを指定し、多少サイズをいじる程度のアプローチか、まったく無指定でユーザーに任せるといったアプローチであることと思う。徹底的に調節するとなるとものすごくツライから。Yahoo! UI Libraryで提供されているFonts CSSはそのフォント調節の手助けをしてくれるCSSファイル。具体的な効用は、ほとんどの現行ブラウザで13ピクセルのHelveticaが基本のフォントになるというもの。つまり、OSとブラウザによる文字表示の差異をほとんど吸収してくれるという効用。当該のCSSファイルを開いてみると、微妙に読みづらいCSSコード。よく読んでやると*property: value;というハックのみの模様。このプロパティ名の直前