このページの先頭です。

Loco-net.org

長年のキャバ嬢人生を脱出し現在Webデザイナーとして頑張る美也@Web



HOME > WebTips > CSS

進化するブラウザたち(CSS)

author:美也2008/10/15 Wednesday

 
コーディングをしていて、少しだけ複雑なCSSのしくみのリストを作っていた。
角丸で尚且つタブのようになっているものをテキストで表示できるようにするものである。

普通に表示する分には、

Windows:IE6、IE7、Firefox3、Opera9.6、Safari
MacOS X:Safari、Firefox2、Opera9.6

以上のブラウザできっちり表示することが出来、文字拡大やズーム等の機能にも対応出来ていた、が...
MacSafariの文字拡大の場合のみ1pxずれてしまう!!!
通常時はちゃんと表示されているのに、拡大時のみずれる!!!

出来ればハックは使いたくなかったが、もうこれは止むを得ない、Safariのみに適用されるハックを使うしか...
ところが、Safariのみに効くと言われていた*html[xmlns*=""] body:last-childbody:first-of-typehtml:66irst-childなどのハックがOpera(9.6)にも効いてしまうという事実ぎょ

しかも
▼続きを表示する
今までOperaのみと言われていたハックhtml:first-child*+html>/**/bodyなどが、全然Operaに効かなくなってしまっていたので、Operaだけのハックで逃げるという道が閉ざされた!!!

つーかオイラの確認ミスなら本当にごめんなさいなのですが、解決策を探し当てるまでに4~5時間もかかってしまったという...
でも見つけた時の興奮ったら、なかったわw
本当に、この仕事好きだと感じる瞬間だし、この感覚は久々だ。

まずは全ブラウザ用のスタイルを記述し、Safariに適応させたいスタイルをhtml*を使って設定するのだが、これがIE6と7にも効いてしまうため、その後ろにIE6と7用のスタイルを追加することで逃げることが出来た。

Opera(9.6)が、こんなにもSafariよりに作られているとはビックリだ。

※情報が間違っていましたら教えてください。
▲続きを隠す

WebTips::CSS|04:56 PM|comments (0)trackback (0)Ranking

▲PageTop

ダブルとシングル。

author:美也2008/07/24 Thursday

 
CSSの記述の際、イメージを呼び出したり、ファイルをインポートしたりする時に、そのファイル名はダブルクォーテーションで囲む。
当たり前のようにダブルクォーテーションを利用していたのだが、この度、気付いたことがあった。

「今更?!」という突っ込みもありそうですがw

この囲み、シングルクォーテーションを使っている人もいるようなので(WordpressのデフォルトテーマのCSSがそうだった)試しに使ってみた。
まぁ、特に不具合もないだろう。。。そう思っていた。
だって!Wordpressのデフォルトテーマで利用されているCSSの記述ですもの!

ところが。。。
▼続きを表示する
。。。不具合発見。
MacIEでは、画像等が呼び出されない。

そうなのだ。MacIEはダブルクォーテーションじゃないと認識してくれないのだ。

ってゆーか今更すぎて、お恥ずかしい話なんですがw
今日、しっかりと認識したのでした。。。
▲続きを隠す

WebTips::CSS|11:53 AM|comments (0)trackback (0)Ranking

▲PageTop

透過png画像をIE6以前で表示する。

author:美也2008/02/29 Friday

 
ここまで長い道のりだった。
いや、いろんなサイトの説明を見る限り、そんなに難しいことではなかったはずなんだけど、実装すると、これがまた微妙だったのだ。

IE6以前は、透過pngに対応していなかった。
透過pngを表示しようとすると、その透過部分がグレー色で表示されてしまうのだ。
マジで使えねー難題だ。

オイラのサイトには、実は今のデザインのシンボルとも思っている「スカル」が右上に存在しているのだ。
IE6以前以外のブラウザには、この「スカル」は存在していたのだが、IE6以前のブラウザには、見えない存在だった。

最初は拾ってきたjavascriptで表示させようと思っていたのだが、これも一度グレー色のついた画像が表示された後に、透過されるという挙動の一部始終が見えてしまっていたため、スマートじゃないと考え、断念。
次に、Microsoftのサイトに記載されていたCSSの記述を使ってみた。
でもこの方法、invalid。

...しかし、思ったように表示されない!
ってか、オイラの記述が悪いのか?
で、気付いたのが、一度ページがその画像を読み込めば、表示されるのだ。
だから別のページへ移動したり、リロードしたりすると出る...というこれまた難儀な...

(*゚Д゚)つミ匚___ あ゙・・・
じゃぁプリロードさせればいいじゃなーい!と思い、しかもHTMLファイルをいじるのではなく、CSSで。
などと考えていたら、display:noneだったりwidthとheightを0指定だったりと、あんまり使いたくない方法ばかりだ。

なので、見えないところに置いてみた。
結構間抜けだがまぁいいか。えへへ。

WebTips::CSS|11:04 PM|comments (0)trackback (0)Ranking

▲PageTop

letter-spacingの落とし穴。

author:美也2008/02/27 Wednesday

 
今日初めて知ったんだけどね。

...Operaって「letter-spacing:-1000em;」って記述しても、テキストが隠れてくれないの。
text-indentで隠せばいいじゃんってところなんだけど、以前エントリしたCSSで背景画像を印刷させる方法を利用するために使いたかったのよね。
ちきしょ。

んで、どうするか考えた。
考えた挙句...面倒だが、スタイルを画面用と印刷用に分ける。これしかない。
と言うか、最初から【印刷用のスタイル】と考えておくべきだったのかもしれない。

画面用には背景(background)で、印刷用にはリストイメージ(list-style-image)を利用する。
...とゆーことだ。

WebTips::CSS|06:00 PM|comments (0)trackback (0)Ranking

▲PageTop

CSSによる「画像置換」について悩んでみる

author:美也2008/01/30 Wednesday

 
ま、今更ですけどね。
いや考え始めたのはもっとずっと前から。

CSSで「text-indent: -9999px」を使ったり、オイラは使わないけど「display: none」を使っての画像置換は、『SEOスパムになるのではないか?』という記事を、いろんなサイトとかブログとかで見かけるからである。

。。。といっても、そのエントリ時期は最近ではない。
去年とか去年とか去年とか。。。主に去年w

でも、いろんなところで書いてある通り、一概に検索ロボットにスパム扱いされると決まっている訳ではないらしい。
とゆーか、「スパム扱いに決まり!!」と明言されている訳ではないようだぜ。
だが、どのようにGoogleが解釈してくれるかはGoogle次第かもね。


以下は「Googleウェブマスター向けヘルプセンター」より抜粋してみました。


WebTips::CSS|11:20 PM|comments (4)trackback (0)Ranking

▲PageTop

カテゴリ

Calendar

      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30   

<<前月 2010年09月 次月>>

月別アーカイブ

プロフィール

お問い合せ

etc.

  • Blog Ranking
  • My Profile by iddy
  • RSS2.0
  • Atom0.3
  • Atom1.0
  • 処理時間 0.304778秒

最新のコメント

最新のトラックバック

リンク

Powered By


HOMEBACK>>

タグクラウド

Copyright © Loco-net.org All Right Reserved.