186(css)

2005-09-17

[] お勧めはしないが、どうしようもなく便利な

* {
 box-sizing: content-box;
}

はてなダイアリーやグループだと、Operaがquirkモードで動きやがるので、box-sizingだけでも直して、後はIE向けにアンダースコアハックを使うという手段。

いや、まぁこれ指定した場合は、

div.hatena-body {
 padding: 2%;
 width: 100%; /* for IE */
}

body > div.hatena-body {
 width: 96%; /* for Mozilla, Opera, Safari */
}

とかした方が楽じゃない? という話もありますが。

あ、あとこれを使わないと、Operaでnegative marginが使えませんでした、そういえば(過去の経験)。

[] display: marker;のテスト

そういえばこんな属性値あったなと思って確かめてみる。

『詳解HTML&XHTML&CSS辞典』 p. 433

marker
この値は、ブロックレベル要素の疑似要素(要素before・要素after)にのみ適用され、その生成内容がリストのマーカーであることを宣言します。

同書 p.468

適用要素

before疑似要素・after疑似要素・displayプロパティの値が「marker」の要素

p.marker

ってことは、

p.marker:before {
 content: "A";
 display: marker;
}

とかして使うの?

けどそれって、

p.marker {
 display: list-item;
}

で良い気がする。これによりリストのマーカーとして文字を使うという目的なのだろうか。仕様書を調べてみよう。

ぎゃぁ(;´Д`)

marker

あるボックスの前もしくは後に生成内容としてマーカーを宣言します。この値は,ブロックレベル要素にとり付けた:before,:after疑似要素にのみ用いるべきであるとされています。その他の要素に適用された場合,この値は 'inline' として扱われます。

【注】:この値は,CSS2.1(CSS2 の改定版)において削除される予定です。この display: marker; の役割は,CSS3 module: Lists で新しく考案されている The ::marker pseudo-elementによって置き換えられることになっているため,事実上 obsolete です。

視覚整形モデル - CSS2 リファレンス

[] insの実験

如何に格好良くinsを実現するか。

昔これでテーマ書いた覚えがあるので検索してみよう。

pタグの挿入を止めてinsを書く方法。

長文を挿入する際はこちらを利用。

まとめて削除。

長文を削除する際はこちらを利用。

挿入前←ここから追記・ここまで追記→とp中に挿入。

削除前←ここから削除・ここまで削除→とp中で削除。

from 06 Pict

.section ins {
	display: block;
	border: 2px solid #cccccc;
	margin: 1em;
	padding: 5px;
	text-decoration: none;
}

.section ins:before {
 	display: block;
	margin: 0px -5px 0px -5px;
	padding: 0px 5px 0px 5px;
	content: "ins at " attr(datetime);
	text-align: right;
	border-bottom: 1px dashed #cccccc;
}

.section * ins {
	display: inline;
	border: 0px;
	text-decoration: underline;
}

.section * ins:before {
	display: none;
}

.section * ins:after {
	display: inline;
	content: "(ins at " attr(datetime) ")";
}

.section del:after {
	display: inline;
	content: "(del at " attr(datetime) ")";
}

あー、あるやん。

トラックバック - http://css.g.hatena.ne.jp/smoking186/20050917