カテゴリー: html-css

最近まで自分もstyle要素やscript要素にコメントをつけていました。
でももうコメントはいらないんじゃね？と勝手に思い今はコメントを記述していません。

以下コメントをやめた理由。
—
HTML 4ではスタイルシートをサポートしていないブラウザのためにコメントを推奨していた。なぜならサポートしてないとテキストがそのまま表示されちゃうから。
しかーしXHTMLではコメントは使うなと書いてる。なぜならstyle要素内もPCDATAとして扱われるようになったため。HTML 4だとstyle要素内はCDATA
現状XHTMLで記述されているページでstyle要素にコメントを使ってもIEやFirefoxなどはちゃんと解釈してくれる。互換性のためですかね
でも今後出てくるブラウザでもコメントを解釈してくれるとは限らない。
スタイルシートをサポートしていないブラウザはHTML3.2以前のブラウザのはず。きっと。HTML3.2でstyle要素は予約されていたため
HTML3.2以前に出たブラウザはIEやNNのバージョン3なのでユーザーはほんの僅かなはず。つかバージョン4もCSS切ってるんだから問題ないよね
CDATA セクションを使うって手もあるけど、IE6やその他のブラウザで正しく解釈してくれないのでNG。
ってことはコメントを使わない方がいいよね。
—
まぁこの様な理由がありコメントアウトはやめました。それが正しいのか間違っているのかは分かりませんけど、、、

たぶんこんな事を言いたい人もいるはずなので、一応。
そもそもHTMLにstyle要素を記述するのが悪いんだ！外部にスタイルをもてばいいじゃん！なんて言う人も結構いると思います。
しかーし、個人で制作している分には問題ないけど、仕事となると話は別。サイトの仕様上、外部スタイルシートには触れられないとか、外部スタイルシートを埋め込めないとか、あるはず。
そうなるとHTML側に書くしかなくなるんです。

»PCDATA
»CDATA
»CDATA セクション

角丸をCSSで実現する方法を紹介しているサイトはいくつかあります。
その代表的なのがNifty Corners。
だけど空タグがあったりするから却下。
ここも空タグ入ってるから却下。
しかもこれらのサイトはボーダーがつけられない。

自分がやりたいのは、というかやらなくてはいけないのは、ボーダーがあってグラデをしていて、なおかつ縦横可変できる見出し。
この縦横可変ってのがクセモノで、4つのコーナーをちゃんと割り当てないと可変にはなってくれないんです。。。
しかもボーダーつけなきゃいけないし。。。

考え抜いたあげく、できたのが下のリンクになっています。
空タグは無くなったけど、ちょっと微妙です。
四隅にイメージをもってこなきゃいけないので、divが入れ子すぎる。
主要ブラウザはほぼOKで、IE5.0だけちょっと崩れます。でも可読性が失われることはないのでOKということで。
あとdivの入れ子はどこでも使うのでこれも見逃してもらうとして、、、
でももうちょっと考えなくては、、、

»角丸で見出し（縦横可変、ボーダー、グラデあり）

まだ知らない人もいるかと思うので、とりあえずエントリー。
今までWinIEだけに適用できていたアンダースコアハックですが、IE7になるとこれが使えなくなります。
今まで使っていたサイトには大きな打撃になるやもしれません。
まぁ元々アンダースコアハックを使わないと表示崩れを起こすIEに問題があったのでIE7は正常に戻っただけなんですけどね。
デジタルARENAの記事にわかりやすく書いてあるので見てみるといいかも。

»Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた / デジタルARENA

以前にIE7 Beta2でikesaiを見たところナビゲーションリンクの挙動がおかしいと報告ありましたが、IE7 Beta2 日本語版にアップデートしたら通常通り元に戻っていました。
なんでもCSSの@importのバグだったそうです。なんともIEらしいというかなんというか。。。
まぁそのバグは解決したのでいいのですが、もう一つ衝撃的な事が起こりました。
何故か右側部分がウィンドウからはみ出ているではないですか！
これはイカンと修正を試みますがまったく直らず。普通にwidthを100%にしているだけではみ出すなんてありえない。
いや、IEだからありえるのか？でもこんなバグがあるわけがないとしばらく悩んでいたら。
なんとなんとIE7に付いているズーム機能がデフォルトで125%になっていました。。。
なぜ125%になってやがんだ〜〜って叫びたかったです。
しかもこれってCtrl + スクロールボタンでないとズームってできないのかな？
ステータスバーにそんな機能なかったんだけど。

ついでにIE7をスタンドアローンで使うための技を掲載しているサイトをご紹介。
ちょっとメンドクサイ作業は毎回発生しますが、IE6をまだ使いたいという人にはおススメ。
IE7 beta2 previewと書いてありますが、僕が試したところIE7 Beta2 日本語版でもちゃんと動作しました。ですが一応自己責任でお願いします。

»IE7 beta2 preview をインストールしないで使う

Internet ExplorerのCSS脆弱性をついて攻撃される手法らしいです。

これはCSSをインポートする事で、端末の情報などを抜き取られてしまうので、Javascriptを切っててもやられてしまうのでたちが悪い。

ちょっと前まではmixiのpost_keyもこの手法で抜き取られたりしてたんだってさ。（いまは対応してるみたいだけど）

IT用語辞典の「注目用語ランキング」で昨日からいきなりランクアップしていたので気になって見たらこんなんでした。。。

何かあったのかな？

CSSXSSとは

　Internet Explorerのスタイルシート(CSS)の呼び出し機能に潜む脆弱性をつく攻撃手法。攻撃者は不正なCSSインポートを含んだWebページを閲覧させることにより、被害者のコンピュータから不正に情報を入手することができる。

CSSでは別ドメインに置かれた外部スタイルシートファイルを「@import」宣言などを使って読み込む(インポートする)ことができるが、Internet Explorerでは外部ファイルの種類を自動判別するため、ファイル名のわかる“{”が入ったテキストファイルを自由に抜き出せてしまう。インポート方法は@import、addimport、link要素、xml-stylesheetなどが知られ、インポートされるファイルがShift-JISで記述されている場合は、文字コード的に“{”と類似するカタカナの「ボ」や「マ」などが入っていても抜き出されてしまう。

引用元：CSSXSSとは 【CSS Cross Site Scripting】　─　意味・解説 ： IT用語辞典 e-Words