5

私の仕事では、ウェブサイトにボタンを配置するための最良の方法について継続的に話し合っています。一部のアートディレクターは純粋なCSSでボタンを要求しますが、私はPhotoshopでスプライトシートを作成することを好みます。私の主張-ドロップシャドウやエイリアシングのようなカーニング、テキスト効果はすべて、Photoshopから出てくる方が見栄えがします。彼らの議論-あなたはSEOポイントを失い、翻訳エンジンはボタンを変更することができません。

私は両方の側に議論があると確信しています-私はこれらの議論のどちらかのために明白な何かを逃していますか？

4

8 に答える 8

4

まず、純粋な CSS ボタンは、わずか数行のコードしかないため、確実に高速に読み込まれます。多くのことは CSS/JS では実行できません。それらは画像でなければならず、多くの帯域幅を消費します。ただし、帯域幅を節約できる場合は、節約する必要があります。速度がプロジェクトの優先事項である場合、これだけでも決定的な議論になります。

.

Photoshop の方が見栄えの良いエフェクトについては、必ずしも同意する必要はありません。ブラウザの実装が決して悪いとは思わないので、まずそれらを打ち負かす必要があります。

.

また、ボタン イメージの描画には、数行のコードを記述するよりも多くの時間がかかる可能性があります。ボタンの変更も同様です。保守性は CSS 側にあります ;)

.

翻訳の議論は当てはまらないと思います。「ローカリゼーション エンジン」が異なる言語の異なる CSS スタイル/スタイル クラス/テキストを処理できる場合、異なる言語の異なる画像/スプライトも同様に処理できるはずです。

.

SEO について: ボタンまたは画像のフォールバック テキスト (読み込めない場合、IMO 標準の動作) がある場合、それは他の文字列と同様に検索エンジンにも適用されます。ここでは100％確信が持てませんが。

于 2012-06-05T15:28:38.300 に答える
2

画像ではなく純粋な CSS を使用するもう 1 つの考えられる引数は、速度です。ボタンの数によっては、CSS/プレーンテキストよりも画像の読み込みにかなりの時間がかかる場合があります。

高速化は、ソフトウェア開発において常に重要な問題です。

于 2012-06-05T15:26:51.453 に答える
1

別のポイント; Photoshop では、ビューアのディスプレイの仕様に依存するため、cleartype (サブピクセルを使用) を実行できません。そのため、ブラウザのテキストはよりきれいでシャープに見えます。

私は完全に CSS ベースで、ライト効果のあるシンプルなボタンを好みます。より多くの効果を備えたより重厚な外観が本当に必要な場合は、ビットマップの背景と HTML テキストを使用してボタンを作成し、できれば CSS でサイズを変更してさまざまなテキスト サイズに対応できるようにする方法があります。

完全にビットマップ化されたボタンは、特に小さいテキスト サイズでは見栄えが悪く、維持、複製、大量の変更 (特に元の PSD がない場合) が頭痛の種であり、帯域幅と読み込み時間がはるかに長くなり、コードを使用して入力することはできません。など

于 2012-12-23T17:54:43.647 に答える
1

1-速度、CSS の読み込みは画像よりもはるかに高速

2-帯域幅、ウェブサイト全体に20個のボタンがあり、毎日50000人のユニークユーザーがいる場合、それは本当に影響を与えます.

3- SEO ブースト、検索者は画像よりも css を好み、もちろん何よりもテキストを好みます。

現在、画像を使用すると、css ができないことを実行できます (少なくとも今のところはそうではありません)。

それはすべて、達成したいこと、作成したいWebサイトの種類によって異なります. あなたが注目する聴衆。

Stackoverflow を見てください。画像がほとんどありません。残りはすべて純粋な css です。

于 2012-06-05T15:35:53.010 に答える
0

パフォーマンスの問題もあるかもしれません。率直に言えば、より多くの/より大きな画像=より多くのダウンロード。グラフィック要素が多い場合、最終的にサイトの速度が低下します。ブロードバンド/ファイバー接続では、これはそれほど大きな問題ではないかもしれませんが、低速の接続では問題になります。特に、何らかの理由でキャッシュが無効になっている場合は.

また、フロントエンド開発者がスプライトマップ ソリューションを実装するには、純粋な CSS ソリューションよりも時間がかかります。

しかし、誤解しないでください。スプライトマップは複数の画像よりもパフォーマンスが優れているため素晴らしいですが、CSS は単にダウンロードが速く、開発が速く、柔軟性が高く、構造が優れています。

結局はプロジェクト次第。パフォーマンス、開発スピード、費用対効果が重要な場合は、すべて CSS です。ただし、クライアントが石器時代のブラウザでサイトをピクセル パーフェクトに表示することを要求する場合は、スプライトマップを使用することをお勧めします。

于 2012-06-05T15:25:19.723 に答える
0

グラフィックを使用してボタンにテキストを表示する場合text-indent: -100000;、通常のテキストに CSS を使用できます。検索エンジンには表示されますが、ユーザーには表示されません。

<div class="button">Button text</div>
<style>
    .button {
        text-indent: -100000;
        background: url('path/to/image/with/button/text.jpg') no-repeat center center transparent;
    }
</style>

スプライトは優れたファンシーですが、(たとえば) 50kB の画像と 3kB のコードでは実際に違いがあり、同じことを行います。あなたのサイトが 1 日に何百回もアクセスされている場合、この違いはわかりませんが、数十億回になる可能性がある場合は....

于 2012-06-05T15:27:15.850 に答える
0

読み込みが速くなる (要求が少なくなる) ことに加えて、CSS ボタンは保守が容易です。ボタンを長くしたり、テキストの色を変更したり、スタイルを無効にしたり、別の色のセットが必要です。これは時間の経過とともに大きな違いです。

css ボタンの欠点の 1 つは、たとえば、text-shadow が IE の一部のバージョンでサポートされていないことです。ボタンはすべてのブラウザーでまったく同じように見えるわけではありませんが、正しくコーディングすれば適切にロックされます。

于 2012-06-05T15:32:13.843 に答える
0

彼らの主張は正しいのですが、Photoshop、MS Word、およびさまざまな DTP プラットフォームのカーニングとタイポグラフィーは、ブラウザーベースのソリューションより常に優れているのではないでしょうか? ブラウザが完全に正当化された型を使用する方法を考えてみてください - それはがらくたです。Web 以外のツールの方が優れているため、この同じ議論によって、すべての CSS ベースのソリューションを放棄するでしょうか? 答えは NO です。さもないと、Flash の方がユーザーに「より良いエクスペリエンス」を提供するので、Flash を使い続けることになります。

ユーザー エクスペリエンスの重要性と開発の容易さ、およびオープン スタンダードを考慮する必要があります。コンテンツ レイヤーをデザイン レイヤーからできるだけ分離することは、努力する価値があると考えています。つまり、CSS3 を使用してレンダリングできるようになった、カーブしたコーナー、ボタン、およびその他多くのものの画像を残すことを意味します。そのためには、利用可能なテクノロジーを前進させるために、少しのコントロールと完璧さをトレードオフする必要がある場合があります。

于 2012-06-05T15:34:15.060 に答える