JavaScript++かも日記: CSS アーカイブ

【仕様】W3C 草案 CSS Color Module Level 3

【CSS 】 , 仕様】

ブックマーク-- Buzzurl

/ Hatena

/ Livedoor

CSS Color Module Level 3 W3C Working Draft 21 July 2008 http://www.w3.org/TR/2008/WD-css3-color-20080721/

ただの色見本って綺麗だなぁと思いつつ、 4.2.4.1. HSL Examples　テーブルタグに、こんなコードを追記して、一発でHex rgbの色見本にしてみました。

//$(function(){
  $(".hslexample td").each(function(){
     $(this).html($(this).css("backgroundColor"))
  })
//})

	0¡ Red
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	30¡ Red-Yellow (=Orange)
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	60¡ Yellow
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	90¡ Yellow-Green
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	120¡ Green
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	150¡ Green-Cyan
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	180¡ Cyan
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	210¡ Cyan-Blue
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	240¡ Blue
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	270¡ Blue-Magenta
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	300¡ Magenta
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

	330¡ Magenta-Red
	Saturation
	100%	75%	50%	25%	0%
100
88
75
63
50
38
25
13
0

#実は、上記テーブルの各TDの背景色は、<td style="background:#FFFFFF">...のように「#FFFFFF」といった書き方をしているのですが、Firefoxでは「 rgb(255, 255, 255)」のように勝手に置き換えられてしまいますf^^;

【コメント】

投稿者 tato : 01:43

【ブラウザ】Firefox 3が対応するwidthプロパティの新しい値

【CSS 】 , DOM 】 , JavaScript 】 , ブラウザ】

ブックマーク-- Buzzurl

/ Hatena

/ Livedoor

Firefox 3が対応するwidthプロパティの新しい値
http://builder.japan.zdnet.com/sp/css-firefox-safari/story/0,3800083423,20371722,00.htm

- widthプロパティの値横幅の大きさ
【A】 -moz-max-content コンテンツが取り得る最大幅（Intrinsic preferred width）
【B】 -moz-min-content コンテンツが取り得る最小幅（Intrinsic minimum width）
【C】 -moz-available 表示に利用可能な幅
【D】 -moz-fit-content 内容にフィットさせた幅

【コメント】

投稿者 tato : 01:26

【CSS】CSSリセット

【CSS 】

ブックマーク-- Buzzurl

/ Hatena

/ Livedoor

CSSの良いところのひとつは、純粋なHTMLデータと切り離されることで、さまざまなデザインや将来のデバイスなどの環境変化に対応したレイアウト指定を、その都度、フレキシブルに別途行えることです。

でも、JavaScriptからみると、CSSがある日、想定外の変化をした時に、受ける影響は小さくありません。

CSSの設定は、JavaScript作者が想定しない(あるいは妥協した)無数の要素に無差別爆撃が可能なほど強力だからです。

CSSは優先順位にしたがって、どんな場末のDOM Elementにもその影響を与えることができます。

たとえば、スクリプトで生成し、自分がしっかりコントロールしていたつもりの深い階層にあるたった一つのli要素でも、そのページ全体で「liのマージンは100pxね」と宣言されていれば、産みの親の想定しない怪物となって、そのアプリケーションを破壊することが可能です。

しかも、スタイル属性の種類の数だけ、進入経路は開いています。

産みの親は本気でブロックしたければ、そのアプリが使用するすべての要素に直接すべてのCSS属性を指定しなければいけません。

耳無し法一のように指定漏らしが一箇所でもあれば、そこから進入される可能性があります(^^;

でも、それを完全にふさぐことは、あまりにも無駄なので、妥協点を模索するわけです。

YUIなどでも、「CSSリセット」という概念で、reset CSSを提供していたりしますが、それを自分のサイトでそのまま使ってうまくいくかというと、そう簡単に問屋はおろしてくれません。

という苦労を今日もしたので、メモ。＆今日使ったリセットCSS for jQuery プラグインLavaLamp in All About CSS、記事はまもなく。

 	#demomenu,#demomenu ul,#demomenu li,
	#demomenu li a,#demomenu li.back {
	    padding : 0px;
	    margin  : 0px;
	    border  : 0px;
	}

【コメント】

投稿者 tato : 13:12

【CSS】direction: rtl

【CSS 】 , 雑談】

ブックマーク-- Buzzurl

/ Hatena

/ Livedoor

カテゴリをCSSにするかHTMLにするか雑談にするかちょっと迷いましたが、右から左へ表示するGoogleです。
http://www.google.co.il/search?hl=iw&q=jsgt.org&btnG=%D7%97%D7%99%D7%A4%D7%95%D7%A9&meta=

入力すると一瞬めまいがしますf^^;。

たとえば、表示されている jsgt.orgのあとへ /mt/01/ とか入れると一瞬クラっと、、、。

で、実は、このGoogleページはCSSで、direction: rtlしているのではなく、BODYタグにdir="rtl"を書いています。

<body marginheight="3" bgcolor="#ffffff" topmargin="3" dir="rtl">

そんなところもなんとなく気になりつつ、世界を思うイブ前夜でした。

ふと、もし、明治のじいちゃんがブログを書くなら、この設定が必要かも、とか。。。
でも、こういう単語ブロックベース?で左右逆というのではだめかも。

【コメント】

投稿者 tato : 18:47

【ブラウザ】Windows Mobile 2003 用IEのCSS

【CSS 】 , JavaScript 】 , X01HT 】 , ブラウザ】 , 携帯】

ブックマーク-- Buzzurl

/ Hatena

/ Livedoor

Windows Mobile Team Blog　2004.8.12
Did You Know Pocket IE on Windows Mobile 2003 Supports CSS?
あなたは、Windowsのモバイル2003のポケットIEがCSSをサポートしているのを知っていましたか?
http://blogs.msdn.com/windowsmobile/articles/213771.aspx

#知っていたというか、その後、WM5.0になってもいまだにpositionをサポートしていないとは、まさかの予想外でした。こんなんで、どないせーちゅうねんっ。うう。ま、visibilityやdisplayが無いよりはまし、みたいな(^^;。できなくはないけれど、、、。WM5.0のサポート状況はどこかに書いてあるのかなぁ、、、。NetFrontかOperaに引越しかなぁ、、、。XMLHTTPはサポートしているのに、バランスおかしいなぁ。

#うーーー。そーだっ。スマートフォンでleft,top動かすと、小さな画面からすぐ出ちゃうし、ま、いっか。と、ポジティブに考えることにしました。

Pocket IE on WM2003がサポートするCSS

Rules

Selectors

Properties