開発者ツール · HTML WYSIWYG エディター
<font> タグから CSS へ: Web 書式設定がマークアップからどのように移行したか
· 背景
html css テキストクリーンアップ
フォント、中央揃え、整列属性などのプレゼンテーション上の HTML がどのように CSS に取って代わられたのか、またその歴史が今日のエディターでのインライン スタイルの議論を説明する理由について詳しく説明します。
古いページのプレゼンテーション用 HTML — ここには日付の主張はありません
古いページ フラグメントでは、font や center などの要素、または bgcolor や align などの属性を通じて外観を直接表現することがよくあります。このワークブックには 1990 年代半ばの年表が添付されていますが、それらの日付を検証するリポジトリ ソースはありません。実装では、このエディターが現在そのようなマークアップをどのように処理するかを示すことしかできません。
ToolAcre ではフォントや中央を使用できず、プレゼンテーション属性も保持されません。通常のサポートされていないラッパーはラップ解除されるため、フォーマット命令が消えても表示される単語は存続する可能性があります。その出力はクリーンなドラフトであり、従来のページを忠実に復元したものではありません。
font、center、および bgcolor: タグ内のプレゼンテーション — ブラウザが外観のために追加した要素と属性を説明します
プレゼンテーションがタグと属性内に存在する場合、コンテンツとデザインを独立して変更することが困難になります。記事全体で繰り返される色の選択は、すべての断片で編集する必要があり、中央揃えの見出しには固有の構造的意味はありません。これらの構成をコピーすると、古いレイアウトからの前提条件もインポートされます。
セマンティック マークアップは、見出し、段落、リスト、引用などの役割に名前を付けます。宛先スタイルシートは、すべての出現を一貫して表示できます。 ToolAcre は、その小規模な語彙をサポートし、クラスとスタイルも削除して、受信側システムが独自のプレゼンテーション層を担当するようにします。
CSS は構造をプレゼンテーションから分離します。標準の日付はリポジトリの証拠の外にあります
CSS は、コンテンツ ツリーとは別にセレクターと宣言を提供します。このアーキテクチャ上の分割により、各本文を書き直すことなく、1 つの設計変更が多くのドキュメントに影響を与えることができます。このような歴史的主張には外部仕様が必要であるため、この記事は最初の推奨日や規格の順序を発明するものではありません。
実際的なルールは引き続きテスト可能です。ToolAcre からコピーされたフラグメントにはスタイル属性やクラス名が含まれません。ダウンロードされた完全なドキュメントには ToolAcre 独自のラッパー スタイルシートが含まれていますが、その CSS は Copy HTML によって返されるサニタイズされたフラグメントには挿入されません。
表現上の要素はこの許可リストの外にあり、現存する標準的な年表の主張がありません。
このワークブックでは、非推奨化と生活標準からの削除について説明します。このモジュールには標準アーカイブがないため、この記事は現在のポリシーで止まります。プレゼンテーション要素はサポートされておらず、リスク カテゴリに応じてアンラップまたは削除されます。規範的な年代を主張するものではありません。
撤去報告書は有効な証拠です。テキストの周囲にフォント タグを貼り付け、単語が残る一方でラッパーが拒否されることを確認します。危険なスタイル コンテナを貼り付けると、その本体が丸ごと削除されます。これは、生のスタイル コンテンツがこのエディタの範囲を超えてリクエストや解析サーフェスを作成する可能性があるためです。
インライン スタイルは他の場所に存在しますが、このエディターはそれらを削除します
インライン スタイルは最新の構文メカニズムですが、ToolAcre はそれを完全に拒否します。したがって、このエディタは、生き残っている「妥協」スタイル属性を実証したり、独自の出力モードの 1 つを推奨したりすることはできません。唯一の自己完結型スタイルは、生成されたプレビュー ドキュメントのフィルター処理された本文 HTML の周囲に表示されます。
他のコンテキスト、特に電子メールの作成では、インライン宣言が必要になる場合があります。この要件には、クライアント テストと CSS ポリシーを備えた別のパイプラインが必要です。ここに任意のスタイルを追加すると、現在の許可リストに矛盾し、証拠やテストなしにサニタイザーの責任が拡大することになります。
作業例: 1990 年代のスニペットの最新化 — フォントタグのマークアップをセマンティック HTML とクラスとして書き換え、その 2 つを比較します
実際の見出しと段落を選択して、`<center><font color="red"><b>Maintenance</b></font></center><p align="left">Tonight</p>` を最新化します。 ToolAcre はサポートされていないプレゼンテーションをアンラップし、b をstrong にマップし、align を削除して p を保持しますが、Maintenance が h2 であるべきであると推論できません。
意味を `<h2>Maintenance</h2><p>Tonight</p>` として明示的に書き換えてから、承認された宛先クラスまたはスタイルシート ルールをエディターの外に追加します。文の中で重要性が意図されている場合は、strong が適している可能性があります。太字が単にフォントの太さである場合は、誤解を招くセマンティクスを保持しないでください。
これでカバーされないもの — CSS 方法論の議論やフレームワーク固有のスタイル設定
この記事では、CSS 手法、フレームワーク、ユーティリティ クラス、またはデザイン トークンを比較しません。フォント、CSS、または標準の変遷の歴史的な日付は主張しません。また、視覚的な従来のマークアップからセマンティックな役割を推測できる自動コンバーターも提供しません。
フィルタリングは普遍的な XSS 防止ではありません。 ToolAcre の手書きトークナイザーは制限されており、そのプレビューは個別にサンドボックス化されています。従来の HTML またはユーザー生成の HTML を受け入れるサーバーには、パーサーベースのサニタイザー、移行テスト、および宛先固有の許可リストが維持されている必要があります。
要点: ルールが存在する理由を知る — 履歴と、ToolAcre の HTML WYSIWYG エディターでの出力の検査がマークアップからのプレゼンテーションの防止にどのように役立つかを要約します。
構造とプレゼンテーションが分離されている理由を理解してください。意味は再設計に耐える必要がありますが、外観は一貫して管理される必要があります。 ToolAcre は、コピーされたフラグメントから従来のプレゼンテーションと最新のインラインまたはクラスベースのスタイルの両方を削除することで、その境界を積極的に適用します。
ソース ビューを使用して失われたものを特定し、セマンティクスを手動で復元し、宛先でスタイルを設定します。このプロセスでは古い外観が維持されない可能性がありますが、将来のすべてのテーマに時代遅れの決定を持ち込むことなく、レビュー、移行、適応が容易なコンテンツが生成されます。