1. CSS 検証の問題
まず、コンテストの要件に従って、エントリーは XHTML 標準に準拠し、提出された CSS は W3C 検証に合格する必要があります。 CSS 検証状況は理想的です。CSS2.0 検証に失敗したエントリは 8 つだけです。主な検証エラーは次のとおりです。「行: 0 フォント ファミリ: 最後の選択肢としてタイプ ファミリを指定することをお勧めします。」
W3C では、フォントを定義するときは、単一のフォントではなく、フォントのカテゴリで終わるようにすることを推奨しています。たとえば、「サンセリフ」は、Web フォントをさまざまなオペレーティング システムで表示できるようにするために使用されます。
bodyタグには「sans-serif」を定義する人が多いですが、他のIDやクラスで再度フォントを定義する際にsans-serifを省略すると検証に失敗するとみなされます。この間違いはそれほど深刻なものではなく、少し注意することで回避できます。
2. CSS の書き方の提案
CSS ファイルにコメントを追加します。コメントは将来のメンテナンスに便利です。できるだけ多くのコメントを CSS ファイルに追加することをお勧めします。追加するバイト数が少ないことを心配する必要はありません。
CSS 構文をできるだけ短くするようにしてください。たとえば、カラー値「#FFFFFF」は「#FFF」と省略でき、「padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px」は「」と省略できます。パディング:30px 0 10px" 20px;"。定義テクニックにはさらに多くの節約テクニックがあり、CSS アプリケーションに習熟するにつれて、より良い方法を発見し続けることになります。
3. XHTML 検証の問題
スタイルシートコンテストということで、CSSの検証には皆気を配っていましたが、XHTML準拠という点ではやや軽視されており、低レベルのエラーが多く発生しました。主な問題は以下のとおりです。
target="_blank"、この構文は HTML4.0 では正しいですが、XHTML1.0 では許可されません。 1 つの解決策は、target="new" と記述することです。もう 1 つの解決策は、js を使用してすべてのターゲットを処理することです。
スタイル シートを埋め込まないことをお勧めします。スタイル シート ファイルを独立して管理する方が簡単です。 <style> が埋め込まれている場合は、<style type="text/css"> として記述する必要があり、タイプを無視することはできません。無視しないと、XHTML はスタイルが何に使用されるかを判断できません。
<br> は <br /> として記述する必要があります。XHTML では、ペアになっていないすべてのタグの直後に「/」を付ける必要があります。
同じIDを再利用します。 XHTML 内で ID を使用できるのは 1 回だけです。スタイルを複数回参照する必要がある場合は、クラスを使用する必要があります。
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />明らかに、content 属性値に余分な引用符が含まれています。
Flashの埋め込み方法が間違っています。 <embed> は元々 Netscape のプライベート タグでしたが、後に IE でサポートされましたが、HTML4.0 には <embed> タグがありません。 W3C は、<object> タグの使用を推奨しています。異なるブラウザ間の互換性の問題を解決するには、両方のタグを使用することが回避策です。完全なサンプル コードは次のとおりです (フラッシュの背景は透明です): <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "
width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent">
<param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent"quality="high"
pluginspage=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>
ただし、XHTML に直接記述することはまだ不可能であり、flash.js ファイルに上記のコードを記述して呼び出すことによって検証を行うことしかできません。
<script type="text/javascript" src="flash.js"></script>
Flash が規格を満たしているかどうかは議論の余地があります。詳細な手順: http://www.blueidea.com/tech/site/2004/1920.aspを参照してください。
id=header class=title のようなコードは、id="header" class="title" として記述する必要があります。属性値を引用符で囲むことは、最も基本的な XHTML 構文ルールです。
4. 互換性の問題
IE6.0、Mozilla Firefox1.0、Opera 7.12で閲覧すると変形や位置ずれが発生する作品が12点あります。 (私は怠け者だったので IE5.0 でテストしませんでした:) IE5.0 はすべての CSS レイアウト デザイナーにとっての課題です)。
IE を中心にしていますが、Mozilla にはありません。 IE で本文の {TEXT-ALIGN: center;} を設定すると、すでに中央に配置できますが、Mozilla では、中央に配置する必要があるレイヤーに次のスタイル設定を追加する必要があります。幅。 Mozilla ではページは正常に見えますが、IE では幅を超えて変形し、隣り合ったレイヤーが下に移動してしまいます。この状況は、IE と Mozilla の間のボックス モデルの解釈の違いによって引き起こされます。「! important」メソッドなど、多くの解決策があります。
概して、ほとんどの応募作品は総合的に合格しており、このコンテストの目的は基本的に達成されており、Web 標準と CSS レイアウトはますます多くのデザイナーに理解され、習得されています。一部の作品のアートが貧弱であることに関しては、これはプロセスだと思います。テーブル レイアウトが最初に登場したとき、ほとんどの Web ページは非常に単純だったということを、上級デザイナーは皆覚えているはずです。 CSS レイアウトを消化、理解、適用する期間を経ると、1 位の作品のように、テクノロジーと美しさの両方を考慮した Web ページがさらに増えるでしょう。