🧒 🧓🏾 👶🏿 CSSを使用して不要なHTML要素を無効にする 🔷 👩🏾‍💼 🚩

多くの場合、プロジェクトをクライアントに引き渡すと、HTMLコードの制御が失われます。クライアントがCMS（コンテンツ管理システム）を使用して、HTMLコードの特定の部分を完全に制御できる場合があります。クライアントが単にテンプレートを使用してコードをドキュメントに出力する場合があります。
ほとんどの場合、提供するテンプレートまたはCMSの使用方法をクライアントに伝えることは非常に困難であり、セマンティックレイアウトとウェブ標準について激しい発言をすることは受け入れられないこともあります。クライアントは、彼が知っている「古い、良いマークアップ」を使用することができます。ほとんどの場合、 bgcolor、align、 「eternal」 フォントなどの不要な（非推奨の）タグと属性が含まれます。この記事では、CSSを使用して不要なHTMLタグをブロックし、クライアントを正しい方向に慎重に誘導する方法について説明します。

この問題にはいくつかの解決策があります。それらの1つは、不要なタグが使用されたときにCSSを使用して警告画像を表示することです。この方法の詳細な説明はこちらとこちらです。 2番目の解決策は、サーバー側で不要なタグと属性を「切り取る」ことです。この方法が最も効果的です。別のことは、サイトが置かれているサーバーを常に制御できるとは限らないことです。
アイデアは、すべてのブラウザでスタイルの自然なカスケードとレガシーを保持し、クライアントによる使用が望ましくないHTMLをエレガントに「無効化」することです。不要なタグは単に機能しなくなるため、クライアントはその使用を停止します。クライアントが正しい道を案内するためのエレガントでストレスのない方法。
不要なHTMLタグと属性：

  <font>
 <ベースフォント>
 <中央>
 <ストライク>
 <s>
 <u>
 bgcolor
ボーダー
揃える
 vspace
 hspace
不揃い
幅
身長

解決策
理想的には、同等のCSSプロパティの継承値を挿入することで、いくつかのHTMLタグを調整することができます。標準ベースのブラウザーは、コードで指定された不要な属性を単に無視し、代わりにカスケードで継承された値を使用します。
たとえば、次のCSS：

 フォント{色：継承;  }

このコードよりも優先されます：

  <font color = "blue">青</ font>

したがって、 フォントタグ内のテキストの色は、コードで指定されている青ではなく、カスケードによって継承される色になります。必要なもの。ただし、ご存知のとおり、Internet Explorerには継承された値に関する問題があります。また、7番目のバージョンでも。だからどんな仕事：
役立つ表現とcurrentStyle：

 フォント{
色：継承;  / *通常のブラウザ* /
 color：式（this.parentNode.currentStyle ['color']）;  / * IE * /}

動作しますか？さて、さらに進んでみましょう：

 フォント{
 font-family：継承;  / *通常のブラウザ* /
 font-family：expression（this.parentNode.currentStyle ['fontFamily']）;  / * IE * /
 }

Opera 9はfont-familyの意味を継承しないことを除いて、すべてが素晴らしいです。幸いなことにフォントも私たちに合っています：

 フォント{
フォント：継承;  / *通常のブラウザ* /
 font-family：expression（this.parentNode.currentStyle ['fontFamily']）;  / * IE * /
 }

私たちはそれを理解しました。 font-sizeプロパティに移りましょう。フォントサイズの値は計算された値に対して継承されるため、これには繊細さが必要です。 bodyのfont-sizeプロパティが2emに設定されている場合、フォントサイズ値の計算はこの時点から開始されるため、前の式はここでは機能しません。ブラウザは、 フォントタグの親要素である2emのfont-size値を確認し、計算値4em（2emから2em）を表示します。そして、これは私たちが必要とするものではありません。解決策は簡単です。すべてのブラウザーで、100％の初期フォントサイズ値を使用する必要があります。落ち着かせるために、不要なbasefont タグにいくつかのプロパティを追加しましょう。以下に、 font タグとbasefontタグを調整するためのルールの完全なリストを示します 。

 フォント、basefont {
色：継承;  / *通常のブラウザ* /
 color：式（this.parentNode.currentStyle ['color']）;  / * IE * /
フォント：継承;  / *通常のブラウザ。  Operaのフォントサイズではなくフォント* /
 font-family：expression（this.parentNode.currentStyle ['fontFamily']）;  / * IE * /
フォントサイズ：100％;  / *すべてのブラウザー。 サイズは継承されます* /
 }

先に進みます。基本的な手法を使用して、タグcenter、s、strike 、およびuを元に戻します。

 センター{
 text-align：継承;  / *通常のブラウザ* /
 text-align：expression（this.parentNode.currentStyle ['textAlign']）;  / * IE * /
 }
 s、ストライキ、u {
テキスト装飾：継承。  / *通常のブラウザ* /
 text-decoration：expression（this.parentNode.currentStyle ['textDecoration']）;  / * IE * /
 }

起こった！ CSSと式のみを使用して、ほとんどの不要なタグを「無効」にしました。
しかし、属性についてはどうでしょうか？ HTML4には、あなたの神経をほとんど損なう可能性のある多くの不要な属性が含まれています。それらもオフにしましょう。 alignから始めましょう。

  * [align] {text-align：inherit;  } / *通常のブラウザ* /

すべて問題ありませんが、IE6は属性セレクターをサポートしていません。したがって、タグのalign属性をチェックするように式を変更する必要があります。起こったことは次のとおりです。

  * [align] {text-align：inherit;  } / *通常のブラウザ* /
 * {text-align：expression（this.align？this.parentNode.currentStyle ['textAlign']： ''）;  } / * IE * /

次の行は、 imgタグの属性です。 align属性に加えて、 border、vspace、およびhspace属性を無効にします。 マージンとボーダーの値は継承されないため、ここでは単純なルールが適用されます。

  img {マージン：0; ボーダー：なし;  } / *すべてのブラウザ* /

ここでは、IE6の不溶性の問題に直面しています。 vspaceとhspaceは 、その中のmarginプロパティと同等ではないため、IE6は引き続き表示します。私に起こった唯一の解決策は、ドキュメントをロードするときにこれらの属性を単純に削除する小さなスクリプトを書くことでした：

  window.onload = function（）{
 for（i = 0; i
 document.getElementsByTagName（ 'img'）[i] .removeAttribute（ 'vspace'）;
 document.getElementsByTagName（ 'img'）[i] .removeAttribute（ 'hspace'）;
 }
 }

私はjavascriptを使用したくないのですが、この場合、他の選択肢は見当たりません。それでまあ。 olタグのtype属性を完成させましょう：

  ol {list-style-type：decimal;  } / *すべてのブラウザ* /

そして今、 bodyのbgcolor属性：

  body {背景色：透明;  } / *すべてのブラウザ* /

テーブル。最後のステップ。表のHTML4 / 4.01には、ページレイアウトに広く使用されている多くの不要な属性があります。しかし、クライアントにレイアウトにテーブルを使用させたくないのですか？したがって、 幅、高さ、bgcolor、valign、およびborder属性をオフにしましょう。

 テーブル、tr、th、td {
幅：自動;  / *すべてのブラウザ* /
高さ：自動;  / *すべてのブラウザ* /
背景色：透明;  / *すべてのブラウザ* /
垂直方向の配置：継承。  / *すべてのブラウザ（IEを含む）* /
ボーダー：なし;  / *すべてのブラウザ* /
 }

要約すると：
CSSルールと最小限のJavaScriptを使用して、不要なタグと属性のほとんどを「無効化」し、自然な継承をエレガントに保持しました。クライアントに「教える」必要はありません。いずれにしても、クライアントは正しいマークアップを使用する必要があります。 1つの非常に重要な発言を考えると、マークアップの使用に制限がないように、クライアントに説明されているCSSクラスの十分な数を提供することが非常に重要です。
すべてのスタイルを一緒に：

 フォント、basefont {
色：継承;  / *通常のブラウザ* /
 color：式（this.parentNode.currentStyle ['color']）;  / * IE * /
フォント：継承;  / *通常のブラウザ。  Operaのフォントサイズではなくフォント* /
 font-family：expression（this.parentNode.currentStyle ['fontFamily']）;  / * IE * /
フォントサイズ：100％;  / *すべてのブラウザ* /
 }
センター{
 text-align：継承;  / *通常のブラウザ* /
 text-align：expression（this.parentNode.currentStyle ['textAlign']）;  / * IE * /
 }
 s、ストライキ、u {
テキスト装飾：継承。  / *通常のブラウザ* /
 text-decoration：expression（this.parentNode.currentStyle ['textDecoration']）;  / * IE * /
 }
 * [align] {text-align：inherit;  } / *通常のブラウザ* /
 * {text-align：expression（this.align？this.parentNode.currentStyle ['textAlign']： ''）;  } / * IE * /
 img {マージン：0; ボーダー：なし;  } / *すべてのブラウザ* /
 ol {list-style-type：decimal;  } / *すべてのブラウザ* /
 body {背景色：透明;  / *すべてのブラウザ* /}
テーブル、tr、th、td {
幅：自動;  / *すべてのブラウザ* /
高さ：自動;  / *すべてのブラウザ* /
背景色：透明;  / *すべてのブラウザ* /
垂直方向の配置：継承。  / *すべてのブラウザ（IEを含む）* /
ボーダー：なし;  / *すべてのブラウザ* /
 }

monc.seの資料に基づく記事の無料翻訳および準備

CSSを使用して不要なHTML要素を無効にする

More articles: