2011-06-18 9 views
2

私は斜めに整列したイメージを使用するサイトで作業しています。画像はかなりシンプルで、内部にテキストがいくつかあるので、画像やCSS3 transform: rotateborder-radiusのプロパティを使用して、すべての独自の拡張機能を使って効果を得ることができます。イメージを使用してCSS3変換を回転する

しかし、私はそれ以外のものを使用することに大きな利点があるのだろうかと思っています。私はおそらく、CSSだけの代替手段が速く読み込まれると思っていますが、欠点は各画像にもっと多くのコードを使用することです。画像を使用していますが、私はまだ各要素のために多くの配置を行う必要があります。また、最初のケースのCSSはブラウザ固有の拡張機能を使用して検証しませんが、ほとんどのブラウザでサイトが正しく表示されていることを確認することが重要ですか?

いずれかのオプションを使用する一般的な方法はありますか?あなたは何をお勧めします?

+0

ありがとうございました。私はデイビッドを選択しています。なぜなら、私がデザインでやっているオプションだからですが、あなたのコメントは他のいくつかの問題を防ぐのにも役立ちます:) – brunn

答えて

1

CSS3の使用は、Internet Explorer(または他の年齢の古い、またはCSS3認識されていないブラウザ)をサポートする必要がある場合に最も効果的です。ユーザーベースの大部分がIEでブラウズしているイメージを使用する必要があります。

もっと標準に準拠したブラウザ(IE9を含むかもしれませんが、私はこれまでの経験はまだありません)だけに興味があるなら、CSS 3はより良い選択肢です。より大きなCSSファイルを作成できますが、新しいデザインの新しい画像セットを作成したり再作成したりすることなく、レイアウトをより簡単に切り替えることができます。

互換性のあるブラウザにCSS 3を使用しますが、conditional commentsを含むIE固有のスタイルシートを含めることで、おそらくデザインを構築する背景イメージとして画像を提供することができます。しかし、これはもちろん、多くの作業になる可能性があります。

+0

あなたは正しいです。私はIE特有のCSSと-ms-filterの使用を考慮していましたが、おそらくこのブラウザのために画像が簡単になるでしょう。私はCSS3の他の可能性を試してみたいので、それと一緒に行くかもしれません:) – brunn

1

正直言ってこのイメージをお勧めします。 CSS3はすばらしいですが、それをサポートしていないブラウザはレイアウトを壊すかもしれません。また、(おそらくもっと重要なことですが)テキストは、回転や拡大縮小が可能な場合には、適切なアンチエイリアス処理が必要です。イメージを使って細かい制御が可能です。

+0

アンチエイリアスは良い点ですが、私はそれを考慮しませんでした。私は、CSSで生成されたものの上のテキストのイメージだけで行くことができると思います。私は今いくつかのテストを行い、OperaとChromeはうまく見えますが、FFではテキストが少しばらつきます。 – brunn

1

私はあなたがここで検討すべきだと思う2つのこと:

  1. 画像は、モバイルデバイス上でそれらのためのキラーです。だから、あなたはモバイルでそれらをターゲットしている、または大規模なモバイルの視聴者を期待している場合は、多くの画像を使用して再考することができます(そして、ユーザーが帯域幅でトンを支払うこと)。

  2. 画像のテキスト(画像を使用している場合)は検索エンジンで検索できません。アクセシビリティの問題があるユーザーはアクセスできません。altタグを入力してください。 ;-)

+0

ありがとうございました。私はモバイルデバイスをターゲットにしているので、イメージを再考する別の理由もあります。それはaltタグを埋めることになると、私はかなり厳しいですので、問題はありません:) – brunn

関連する問題