Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する
文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |
xml宣言について - lucky bag
標準準拠から後方互換にすると変化するもの text-alignに関して 後方互換ではtext-alignの指定がインライン要素だけでなく、divなどのブロック要素にも反映される 文字サイズに関して 後方互換ではブラウザデフォルトの文字サイズがひと回り小さい、つまりsmallがmidium相当 ボックスサイズに関して 後方互換ではwidthとheightの値にpadding、borderのサイズも含めてしまう その他margin: auto;でブロック要素のセンタリングが出来ない、CSSの記述に対して厳しくなり、pxなどの単位をきちんと指定しないとプロパティごと無視される等色々あります。xml文書と言うことでは、やはり宣言しなければいけないのですが、Mac IE4.5ではHTMLとしての解釈ができず、そのままソースを表示してしまうバグがあったりと、古いブラウザを考えるとちょっと厳しいものがあ
lucky bag: CSSアーカイブ
「XHTML+CSSプロが教える"本当の使い方"」という本が出ました 概要 MdNから9月25日に発刊された「XHTML+CSSプロが教える"本当の使い方"」へ寄稿しました。書籍で解説しているサンプルはIE6も対象にしていますが、IE6を対象外としたサンプルを当サイトで公開しておきます。 公開日 2009-09-28T11:37:14+09:00 URI https://www.lucky-bag.com/archives/2009/09/xhtml-css-pro.html カテゴリ CSS Misc News タグ Book CSS XHTML IE6で閲覧するとモノクロ 概要 IE6 で閲覧すると全部モノクロで表示されるCSS 公開日 2008-12-16T12:40:31+09:00 URI https://www.lucky-bag.com/archives/2008/12/ie
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
