この記事は、CSSドキュメントの主な問題を回避するために、特定の実装や既製のレシピに縛られることはありません-この記事の執筆中に、ブラウザーの更新がいくつかリリースされます。 そして、アドバイスは単に役に立たないでしょう。
ベースラインから始めます。ブラウザによっては、ページが意図したとおりに表示されない場合は、何か間違ったことをしました。 IE6を含むブラウザの作成者は馬鹿ではありません。 彼らは、レンダリングのルールと表示方法を設定する前に、頭で考えました。 スライド要素は、「IE6にバグがある」ためではなく、CSSプロパティの組み合わせの特別な解釈のためにクロールします。 したがって、スライディング要素の問題を解決するには、そこをクロールした理由を理解する必要があります。
ブラウザー間の互換性の概念について簡単に触れてみましょう 。 クロスブラウザーレイアウトレシピとは何ですか？ サポートされているすべてのブラウザーのレイアウトをすぐに。 一度にすべてのみ。 「Firefox用に作成し、残りは修正します」というルールは機能しません。 行って、小さなCCSがたくさん書かれているときに誰が責任を負い、何をすべきかを考えてください。 もちろん、この場合、「ダーティハック」と条件付きコメントが使用されます。 もちろん、レンダリングにはまだ違いがあるため、ハッキングなしでは実行できません。 どのようなハッキングを覚えておく必要がありますか？ なし。 わずかな検索で大量のソリューションが得られます。 まず、ブラウザ（プラットフォーム、バージョン、デバイス）のリストを決定する必要があります。いくつかの基本的な決定により、開発の最後にリストを拡張することはできません。 変更するたびにリスト全体を調べて、何かがなくなったかどうかを確認することをお勧めするとは思わないでください。 異なるブラウザでアプリケーションをテストする頻度は異なります。 お気に入りのFirefoxでお気に入りのFirefoxを組版し始めます。 IE7を定期的に開いて、問題がないことを確認します。 オペラとサファリ、そして9人目の探検家をもう少し頻繁に開きます。 そしてめったに-クロム。
ちなみに、さまざまなブラウザーでこの頻度を確認する順序は簡単に説明できます。 Firefox Geckoは、人気のあるブラウザーの中で本物ですが、WebKitとOpera Prestoに非常に近いです。 SafariとChromeはWebKitを使用し、レンダリングアルゴリズムはほぼ完全に同じです。 ブラウザの最新バージョンはまだ十分に理解されておらず、これらのブラウザは私たちのレースのダークホース、特に最新のIEのままです。 最後から2番目のIEは標準に非常によく準拠しており、あまり問題を引き起こしません。これについては、弟（Internet Explorerの7番目（Trident V）および6番目（Trident IV））については言えません。 現在の状況に加えて、これら2つのバージョンは互いに非常に類似していることに注意できます。IE7で問題がなければ、IE6で修正する必要はほとんどありません。 さらに、6番目と7番目のエクスプローラーをサポートする理由はますます少なくなっています。
CSSテンプレートとフレームワークに関しては 。 プロジェクトからプロジェクトに転送される最大の粒子は、「そのような要素をそのような順序で配置する方法」の決定よりも大きくてはなりません。 「押されたフッターと水平メニューを備えた3列レイアウト」などのソリューションは、ソリューションのために制御不能で変更が困難なコードのヒープを生成する必要があるため機能しません。 既存のサードパーティソリューションに変更を加えると、頭痛の種になり、コードを最初から書き直すことになります。
上記に加えて、そのような既製のソリューションは、その後のCSSの変更を考慮に入れないという事実を考慮する価値があります：
.content
内にある
.content
インデントを変更することは、これがIEの古いバージョンでメニューレベルの崩壊を引き起こさないことを確信できません。
cssファイルと画像の構造については別に言及します 。 写真とtseeseskiを正しく配布する方法は千通りあります。 しかし、間違ったものはほとんどありません。
すべての恐ろしい方法の中で最も恐ろしいことを思い出してください-唯一のuser.css
user.css
とパパの画像、失礼します、そこにくだらない写真があります。 賢い人の中には、リソースに何らかの構造があるはずだと推測し、写真に接頭辞と接尾辞を付けた名前を付ける人もいます。 たとえば、「
article-bg.png
」または「
product-li-bg.png
」です。 CSSから離れて、そのような開発者のハードドライブを想像してみましょう。 ムービーは同じフォルダーにありますが、「
alien_life_documental_discovery.avi
」または「
pelmeni_vs_pyatigorsk_kvn_2008_polufinal.avi
」などのファイル名を付けます。 多数のファイルがある場合、この小さなヒープ内を移動することは不可能です。 ライブラリの自動選別機（iTunes、Windows Media Playerなど）に関するトピックについては、別の記事で議論しましょう。
それほどひどくないが、レイアウト中のレイアウトと命名のより正確な戦術の別の例は、そのような状況として役立ちます。 写真は1つのフォルダーにはありませんが、意図したとおりにサブフォルダーにあります。 すべての種類の背景は
images/bgs
、アイコンは
images/icons
フォルダーにあります。 リソースの分類が正しくないため、この方法は失敗します。 使用の類似性によってではなく、論理的な類似性によって画像を分離すると、実用性が
bg.png
ニュースに属するすべての画像は、
images/news
bg.png
入れて「
bg.png
」、「
li.png
」、「
first-item.png
」と呼び
bg.png
。 この配置により、リソースを共有しやすくなり、その結果、リソースを簡単に制御できます。
2つの異なるエンティティの画像の再利用については、論理的な疑問が残ります。 例として、最近のニュースのリストの行が製品のリストの要素と同じ背景を持つデザインがあります。 この場合、いくつかの解決策があります。 たとえば、背景を2つの異なるフォルダ
articles
および
products
複製できます。 これは、ユーザーのパスワードの最小文字数と記事タイトルの最小長が1つの変数であってはならないという同じ理由で実行する必要があります。 または、オプションとして、エンティティの名前をより一般的なものに変更し、
news_items
および
news_items
ではなく、より一般的な
news_items
articles
フォルダを作成します。 2つのエンティティ間で共通のエンティティの名前を選択することのジレンマは緊張します。 同じタイプの2つの異なるエンティティの場合、設計者はすでにこれを行っているため、何らかの基準に従って一般化できます。 「メインページと1つの内部」の貧弱なデザインのケースは、臨床的とは見なしません。
ファイルの場所のスキンアルゴリズムも一般的です。 この場合、画像への相対パスはcssファイル内に示され、スタイルシートと画像は1つの共有フォルダーに配置されます。 たとえば、
themes
フォルダー内のサイトのルートで、
stylesheets
と
images
フォルダーを作成します。 これは、
images
フォルダー内のフォルダー構造には影響しません。 一部のフレームワークは、独自のスタイルを統合するこの方法しか提供しないことに注意してください。 したがって、レイアウトを開始する前にフレームワークの知識が必要です。 しかし、これはまったく異なる話です。
また、cssファイルでは、背景は次のように示されます。
background-image: url(../images/articles/bg.png)
（ルートからの）絶対パスを示す代わりに。
background-image: url(/images/articles/bg.png)
検証とバリデーターは 、このトピックのコンテキストで言及する価値があります。 Lebedevのスタジオのレイアウト設計者は、最適なバリデーターはブラウザーであると正しく言っています。 あらゆる種類のブラウザーでページが完璧に見える場合、心配する必要はありません。 しかし、有効なコードの切り札は、将来のブラウザに対する適切な反応であることを覚えておく価値があります。 すぐに例。 3番目のFirefoxの作成中に、著者はあらゆる種類のマークアップを含む健全なテキストをリンク内に配置するコードを作成しました。
<a href="#" onclick="editMe(); return false;"> <p>Lorem ipsum dolor set...</p> </a>
外部リンクのクリックが処理された結果、メニューがポップアップ表示され、現在のトピックに適用されない何かがそこに表示されました。 しかし、Chromeのリリース後、著者は上記のコードが新しいブラウザでは機能しないことを発見しました。 問題は無効なコードに隠れていました-他のブロックマークアップ要素と同様に、段落をリンク内に配置しないでください。
ドキュメントから ：
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
その結果、有効なコードの要件を考慮してコードが書き直され、問題が解決されました。
その結果、標準自体が目標の達成を妨げず、コードを記述するためのオプションが有効になるまで、標準を尊重する必要があると定式化できます。 言い換えれば、常に基準を遵守し、あなたの正当性に自信を持つことでこの規則に違反します。