「CSSハック」の定義は何ですか？

少なくとも数年間CSSを書いている場合、CSSハックを使用しています。しかし、CSSを比較的新しい場合は、この用語を聞いたことがありますが、それが何を意味するのか正確にはわかりません。 この投稿では、CSSハックという用語が何を意味し、CSSハックがどのように使用されるかを正確に説明します。しかし、最初に、この投稿が必要だと感じた理由を説明する背景。

キーテイクアウト

CSSハックは、他の人に無視されながら、特定のブラウザバージョンにスタイルを適用する手法です。特に最新のCSS標準を完全にサポートしていない可能性のあるブラウザの古いバージョンでは、ブラウザの矛盾や制限を克服するためによく使用されます。

CSSハッキングは必ずしも無効なCSSではありません。 CSSバリーターを実行すると、一部のハッキングが警告やエラーを作成する場合がありますが、他のハッキングは問題なく合格する場合があります。時間と予算が許可されたときに、ハッキングを分離して文書化することが重要です。

CSSハッキングは状況によっては役立ちますが、コードをより複雑で維持するのが難しくなるため、一般的に悪い練習と見なされます。標準のCSSテクニックとデザインのウェブサイトを使用して、古いブラウザで優雅に分解することをお勧めします。
多くの開発者は、この用語を誤解しているようです
多くの人が知っているように、SetePointは最近、私がまとめた大規模なCSS調査の結果を公開しました。調査が尋ねた質問の1つは次のとおりです。
• 次のMicrosoftブラウザのうち、現在？

私が最初に結果を研究したとき、私はこの質問の結果の奇妙さを見逃したようでした。幸いなことに、Microsoftの最新のブラウザに取り組んでいるエンジニアであるDavid Storeyは、それを指摘しました。この質問に答えた1,418人のうち、結果は次のようになりました。

IE9 - 62％

IE10 - 61％

IE11 - 57％

エッジ - 45％

IE8 - 35％

• ie7 - 9％
• IE6 - 3％
• ie5.5 - 1％
開発者の60％以上がIE9とIE10のCSSハッキングを書くと主張しているのは十分に悪いことですが、EDGEの場合は45％ですか？ Edgeのハックはいくつかありますが、それらはまだBrowserhacksのWebサイトにはありません。そのため、多くの人がそのブラウザにハッキングを使用している可能性は低いようです。しかし、より重要な質問は、開発者がハッキングを必要とするエッジでCSSをレンダリングすることでどのような問題に遭遇しているのですか？
• 最初は、多くの参加者がユーザーエージェントスニッフィングを介したブラウザー検出でハッキングを混同していると思いました。しかし、それでさえ、なぜエッジの数がそんなに高いのかを説明しません。

それから私は彼らが質問を完全に誤解しているに違いないことに気づきました。彼らは、「ブラウザX用のCSSハッキングを書く」は「ブラウザXのサポート」と同じだと考えています。特に、ハッキングを必要としない他のブラウザの高い割合を考慮した場合、他の論理的な説明はありません。

それでは、この用語に混乱する可能性のある人のために、ハックが何であるかを正確に定義しましょう。

CSSハックとは？

CSSファイルの何かが「ハック」と見なされるためには、他のすべてのブラウザがそれを無視している間、ターゲットを絞られているブラウザにのみスタイルを適用する必要があります。

例を考えてみましょう。これはCSSハッキングです：

上記の例のCSS（「Star-HTMLハック」と呼ばれることが多い）のCSSは、

のみのインターネットエクスプローラーバージョン6以下のみをターゲットにします。 IE6をサポートするほとんどの開発者は、IE6以前に何も気にしないため、これは通常IE6のみのハックとして機能します。

「ハック」である部分は、「HTML」が続くアスタリスクです。これは、ユニバーサルセレクターと要素タイプセレクターの組み合わせです。ある時点で、誰かがこれら2つのセレクターが一緒になって別のセレクターが特定のバージョンのIEでのみ動作し、他のブラウザでは効果がないことを発見しました。これは、上記のコード例で定義されている.sidebar要素の左マージンがIE6以前にのみ適用されることを意味します。この場合、CSSは実際に有効であるため、エラーや警告が表示されません（詳細については後で詳しく説明します）。

BrowserHacksのWebサイトから取得した別の例を次に示します。今回はIE11：

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

これがハッキングである理由の詳細には入りません（部分的には理解していないからです）が、上記のCSSはインターネットエクスプローラーバージョン11にのみ適用されます。 「IE11以降」なので、MicrosoftのEdgeブラウザーでも機能することを意味すると思いますが、それを確認していません。 ここでの重要なポイントは、どのブラウザがターゲットにされているかではなく、CSSハックとは何かを理解するために同じページにいることです。

CSSハッキングはCSSですか？

StyleSheetにハッキングがある場合、W3CのCSSバリデーターを実行するとCSSが警告やエラーを作成する可能性があります。しかし、それは保証ではなく、何かがハックであるかどうかを認識する方法でもありません。

CSSにハッキングを含んで、警告やエラーがない可能性があります。たとえば、使用するCSSハッキングのみがStar-HTMLハックを使用してIE6をターゲットにしている場合、スタイルシートはハッキングに関連するエラーや警告なしで正常に検証します。 また、

いくつかのハック（上記で説明したIE11ハックなど）は、ベンダー固有のコード（例：-ms-fullscreen）を使用しています。そのような場合、バリデーターのデフォルト設定は、「パス」グリーン画面メッセージでCSSを表示できます。

しかし、バリデーター画面をスクロールすると、次のような警告が表示されます。

この場合、次のように警告しています。この種のCSSを警告の代わりにエラーとしてより快適に見ると、検証型の入力領域の下の「その他のオプション」セクションを使用して、バリデーターの設定を調整できます。

「ベンダー拡張機能」オプションを「エラー」に変更すると、ベンダーのプレフィックスまたは他のブラウザ固有のCSS（必ずしもハッキングではない）が含まれている場合、スタイルシートが検証を渡すことができなくなります。 一方、このようなものを使用する場合があります。

上記のCSSはIE8以下をターゲットにします。 「ハック」は、バックスラッシュとナイン（9）の組み合わせです。 9部分がラインを無効にするため、ほとんどのブラウザはフルラインを無視します。しかし、何らかの理由で、インターネットエクスプローラーバージョン8以下は引き続き有効であると見なされ、マージン設定を適用します。 ただし、この場合、BALIBARTARにどんな設定を選択しても、エラーメッセージが表示され、StyleSheetは検証に合格しません。

ハッキングではないテクニックは何ですか？

<span>* html <span>.sidebar</span> {
</span>  <span>margin-left: 5px;
</span><span>}</span>

次の方法と手法は、必ずしもCSSハッキングとして分類されるべきではありません。

！重要な宣言はハッキングではありません

追加された重要なキーワードを使用したCSSの行は、まったく別の問題です。これは有効なCSSであり、特定のブラウザをターゲットにするためには使用されません。これはハックではありませんが、悪いCSSと見なすことができます。

ベンダープレフィックスは必ずしもハッキングではありません

ベンダーのプレフィックスは特定のブラウザをターゲットにしますが、これらは慣習的にハックと呼ばれるものではありません。ほとんどの場合、ベンダーのプレフィックスを使用している場合は、有効な標準コードも提供しています。それはハックではありません。そうは言っても、ブラウザをターゲットにしてベンダー固有のコードを記述し、ハックとしての資格を得る場合があります。 _：-MS-Fullscreenを使用する上記のコードは例です。別の良い例は、ハードウェアの加速をトリガーすることです WebKitブラウザで。しかし、ベンダーのプレフィックスは、ほとんどの場合、別の主題です。実際、W3Cにはベンダー固有のコードに関するドキュメントがあり、これら自体がハッキングと見なされるべきではないという概念をサポートしています。

高分析セレクターはハッキングではありません

StyleSheetの別の部分で何かをオーバーライドしようとするためにセレクターに本当に具体的であることは、CSSハックではありません。 CSSは悪いですが、ハックではありません。

古い構文はハックではありません

これの良い例は、FlexBoxのディープブラウザサポートに必要な複雑なコードです。これがおそらく今日不必要であるという事実に加えて、私はそのようなことをハックとして分類するものではありません。これらのブラウザがそれをサポートしたときは有効なコードだったので、ハックと同じ効果があるかもしれませんが、同じことではないと思います。

条件付きコメントはどうですか？

CSSまたはHTMLを記述して、インターネットエクスプローラーの特定のバージョンをターゲットにすることができる（または、インターネットエクスプローラーの特定のバージョンを除外する）

条件付きコメントは、少し灰色の領域です。特定の方法で書かれている場合、それらは有効なHTMLですが、「ハッキー」です。

2008年に、ポールアイルランドは「条件付きクラス」と呼ばれるものを普及させました。これらは条件付きコメントを使用して、StyleSheetで使用できるクラスを作成して、有効なCSSを使用してIEの特定のバージョンをターゲットにしています。

それでは、条件付きコメントの使用は「CSSハック」ですか？より慣習的なCSSハックを使用するときに意図されたものとまったく同じことを達成したからといって、私はイエスと言うでしょう。

CSSハッキングを使用する必要がありますか？

多くのWeb開発トピックの場合と同様に、ここでの答えは、単に

はい

または

no

ではありません。正解はですです。ほとんどの純粋主義者は、それらを使用しないと言うでしょう。しかし、それはしばしばそれほど単純ではありません。ハッキングに関しては、私のアドバイスはこれです：

1. プロジェクトの予算と時間の制約内で、ハッキングを使用せずに有効な標準ベースのクロスブラウザーCSSを記述するために、あなたの力ですべてを行います。 ハッキングを書くときは、ハリー・ロバーツがお勧めするようなことをしてください。そのため、時間と予算が許すとハッキングが分離され、リファクタリングが簡単になります。
2. 常にハックにコメント（またはドキュメント）を含め、できるだけ早くコードをリファクタリングしてみてください。
3. 概要
4. この投稿から他に何も覚えていない場合は、これを覚えておいてください：

a CSSハックは1つ以上の特定のブラウザバージョンにCSSを適用し、同じCSSは他のブラウザによって無視されます。

これは、CSSハックの単純な定義です。したがって、CSSでMicrosoft Edgeをサポートしているからといって、Hacks for Edgeを書くという意味ではありません。サポートはまったく別のトピックです。

この投稿には、誰もが同意しているわけではないことがいくつかあるかもしれませんが、ハッキングが何であるかを理解しているほとんどの開発者は、上記の結論の概要に同意すると思います。

何かを除外したり、エラーを犯した場合は、コメントでお気軽にお知らせください。必要な修正を行います。 CSSハッキングに関するよくある質問（FAQ）

CSSハックは、標準のCSSルールでは不可能な特定のスタイルまたはレイアウトを作成するためにWeb開発者が使用する手法です。これらのハッキングは、ブラウザの矛盾や制限を克服するためによく使用されます。たとえば、開発者はCSSハックを使用して、Webサイトがインターネットエクスプローラーの古いバージョンに正しく表示されるようにする場合があります。ただし、コードをより複雑で維持するのが難しくなるため、CSSハッキングを必要な場合にのみ使用することが重要です。型破りな方法でCSSセレクターまたはプロパティを使用することを伴います。たとえば、開発者はCSSハックを使用して、そのブラウザに固有のバグまたは機能を活用することにより、特定のブラウザをターゲットにする場合があります。これには、そのブラウザによってのみ認識されるCSSプロパティの使用、またはブラウザのみが理解する方法でCSSセレクターを使用することが含まれます。珍しいと思われるCSSコードが表示されている場合、または標準のCSS構文に従わない場合、CSSハッキングである可能性があります。CSSハックは悪い練習ですか？特定の状況では、それらは一般に悪い慣行と見なされます。これは、コードを理解して維持するのがより困難になり、異なるブラウザで予期しない動作を引き起こす可能性があるためです。 CSSハックを使用する代わりに、通常、標準のCSSテクニックを使用して、古いブラウザで優雅に劣化する方法でウェブサイトを設計する方が良いです。

いくつかの一般的なCSSハッキングとは何ですか？

一般的なCSSハッキングには「ボックスモデルハック」が含まれます。これは、ブラウザが要素の幅と高さを計算する方法の違いによって引き起こされるレイアウトの問題を修正するために使用されます。 「スターハック」は、インターネットエクスプローラー7以下をターゲットにするために使用されます。もう1つの一般的なCSSハックは、「アンダースコアハック」です。これは、インターネットエクスプローラー6以下をターゲットにするために使用されます。 CSSハッキングを使用することは、すべての主要なブラウザと互換性のある方法でウェブサイトを設計することです。これには、CSSリセットを使用して、スタイルが異なるブラウザに一貫して適用されるようにし、広くサポートされていないCSS機能の使用を回避することが含まれます。さらに、さまざまなCSS機能のブラウザ互換性を確認するために使用できますか？ Modernizrなどの検出ライブラリは、特定のCSS機能がユーザーのブラウザによってサポートされているかどうかを検出します。その後、この情報を使用して、ブラウザの機能に応じてさまざまなスタイルまたはレイアウトを適用できます。もう1つの選択肢は、SASS以下のようなCSSプリプロセッサを使用することです。これにより、より強力で保守可能なCSSコードを書くことができます。 CSSハッキングの詳細については、オンラインです。 CSS-TricksやSmashing MagazineなどのWebサイトは、CSSハックやその他の高度なCSSテクニックに関する記事を公開することがよくあります。さらに、CodePenやJSFiddleなどのWebサイトでCSSハッキングの多くのチュートリアルと例を見つけることができます。最新のブラウザの標準コンプライアンスが改善されているため、今日はあまり関連性がありません。ただし、古いブラウザをサポートしたり、ブラウザのバグを回避したりする必要がある場合など、CSSハックが必要になる可能性がある状況がまだあります。したがって、CSSハッキングがどのように機能しているかを理解することは依然として有用です。それらが過度に使用されている場合。これは、ブラウザが解析するためにCSSコードをより複雑で難しくすることができるためです。さらに、一部のCSSハッキングには、パフォーマンスに最適化されていないCSSプロパティまたはセレクターを使用することが含まれます。ブラウザ開発者ツールを使用して、要素に適用されるスタイルを検査します。 BrowserStackなどのオンラインツールを使用して、さまざまなブラウザでWebサイトの外観と動作をテストすることもできます。さらに、Seleniumなどの自動テストツールを使用して、さまざまなブラウザーやデバイスでWebサイトが正しく機能するようにすることができます。

以上が「CSSハック」の定義は何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。