開発者ツール · HTML WYSIWYG エディター
インライン スタイルとクラス: ビジュアル エディターが生成する HTML の読み取り
· 仕組み
html css コンテンツ編集可能
視覚的な書式設定の選択肢がどのようにタグ、インライン スタイル、あるいはまったく何もならないのか、またその出力をスタイルシート駆動のサイトに適応させる方法について説明します。
スニペットは、スタイルシートに適合するまでは適切に見えます。サイト CSS と衝突するエディター出力が表示されます。
フラグメントは、そのスタイル属性がローカルで優先され、その後宛先テーマと衝突するか、公開中にその属性が失われるため、ソース アプリケーションでは正しく見えることがあります。 ToolAcre はインライン プレゼンテーションを実行しないことにしました。そのホワイトリストはスタイルとクラスをどこでも削除し、宛先でサポートされている構造要素とセマンティック要素をスタイルに残します。
このポリシーでは、プレビューを意図的に控えめにしています。見出し、リスト、または強い語句は認識可能なままですが、色、フォント、間隔、およびコピーされたデザイン システム クラスは失われます。クリーンなスニペットは推論が容易ですが、すべてのソースの外観や機能を自己完結型のスタイル付きコンポーネントとして再現できるわけではありません。
通常、3 つの表現が存在します。このエディタはセマンティックタグを保持し、スタイルとクラスを削除します
HTML では、要素を使用して意味を表現したり、スタイル属性を使用したローカル プレゼンテーション、またはスタイルシートによって解釈されたクラス名を使用した再利用可能なプレゼンテーションを表現したりできます。これらのメカニズムは互換性がありません。強い要素は重要性について何かを語ります。赤のスタイルは単に色を選択するだけです。クラスは、特定のスタイルシートが定義するもののみを意味します。
このエディターはセマンティック サブセットを保持し、両方のプレゼンテーション チャネルを拒否します。 ToolAcre ではなく受信サイトがクラス定義を所有しているため、無害なクラスであってもホワイトリストでは認識されません。削除レポートでは、破棄された属性に名前が付けられるため、作成者は意図的なクリーンアップと説明できない視覚的な変更を区別できます。
このエディターが自己完結型のプレゼンテーションを維持する代わりにインライン スタイルを拒否する理由
多くのエディターはインライン スタイルを保持します。これは、これらの宣言が外部スタイルシートを必要とせず、貼り付けられたフラグメントとともに移動するためです。 ToolAcre はその逆の取引を行います。スタイル属性は、予測できないレンダリングや URL を含む CSS サーフェスを作成できるほど広範囲にわたるのに対し、この製図ツールは構造化テキストのみを必要とします。
テストには、JavaScript 形式の URL を含むスタイル値が含まれており、スタイル属性全体が消えることを証明します。これは狭いフィルターの証拠であり、考えられるすべての CSS ペイロードが独立して分類されているという主張ではありません。スタイルをまったくホワイトリストに登録しないと、このモジュールで部分的な CSS サニタイザーを維持することが回避されます。
作業例: このツールバーが実際に提供する形式
ツールバーには、太字、斜体の 2 つのリスト タイプ、明確な書式設定、ブロックの選択、リンクとリンク解除が表示されます。太字と斜体の出力は、strong と em に向かって正規化されます。ブロックの選択肢には、段落、h1 ～ h4、blockquote、pre が含まれます。カラーピッカー、フォントセレクター、配置アクション、またはクラスフィールドは存在しません。
これらのコントロールをサンプル段落に適用し、ソースを検査します。有用な比較は、意図された意味と発行された要素の比較です。引用符は blockquote になる必要があり、コードのようなスペースは pre を使用でき、見出しは見出しである必要があります。ソース モードでこれらのタグが保持される可能性があるという理由だけで、下線、上付き文字、またはその他の許可リストに登録されているタグのサポートを推測しないでください。
出力を調整するということは、出力先でスタイルを設定することを意味します。ここではクラスを作成できません
CMS の適応はエクスポート後に開始されます。その CMS に宛先クラス、コンポーネント テンプレート、または定義がわかっているレビュー済みの変換を追加します。 ToolAcre は、不明なインライン宣言をプロジェクト固有のトークンに変換できず、運用スタイルシートにクラスが存在するかどうかを検証できません。
コンテンツと一致する場所にセマンティック タグを保持します。すべてのノードをスタイル付きスパンにするためだけに強い構造や見出し構造を削除すると、クリーンアップの利点が逆効果になります。宛先レイヤーは外観を決定する必要がありますが、下書きにはテーマがなくても意味のある段落、階層、リスト、引用、コード、リンクが含まれます。
インライン スタイルは他のワークフローに適合する可能性がありますが、このツールでは出力されません
インライン スタイルは、共有スタイルシートを保存またはロードしないシステム、特に一部の電子メール作成パスで必要になる場合があります。ただし、このリポジトリは電子メール互換性プロセッサを提供せず、スタイル属性も発行しません。ライターは、後で電子メール固有のテスト済みワークフローを通じてクリーン ドラフトを翻訳する必要があります。
1 回限りの埋め込みにも同様の制約がある可能性がありますが、それによってこの編集者の契約が拡張されるわけではありません。ダウンロードされたドキュメントには、サニタイズされた本文マークアップを中心に ToolAcre によって作成された修正プレビュー スタイルシートが含まれています。フラグメントをコピーしても、そのラッパーやその CSS はコピーされません。目的地に渡される正確なアーティファクトを検査します。
これでカバーされないもの — CSS 特異性のデバッグ、デザイン トークン、または自動変換ツール
この記事は、CSS の特異性、マップ デザイン トークン、インライン スタイルを自動的にデバッグしたり、ピクセル パリティを約束したりするものではありません。また、セマンティック タグが特定のスクリーン リーダーのアナウンスや検索ランキングを強制するということも避けています。セマンティクスは構造を改善しますが、実際のプレゼンテーションと解釈は消費環境に依存したままになります。
サンドボックス プレビューはレンダリングされた検査サーフェスであり、ライブ スタイルシートのモデルではありません。これはライト ドキュメント テーマに固定されており、スクリプト、フォーム、または同一オリジン アクセスを許可しません。見た目がきれいなプレビューでは、同じフラグメントがすべての出版システムで安全であるか、視覚的に正しいかどうかを確認することはできません。
要点: 出力を読んでから決定する — 選択内容と、何を保持するかを決定する前に ToolAcre の HTML WYSIWYG エディターでマークアップを確認する方法を要約します。
出力を読んで、目的地を決定します。 ToolAcre は、スタイル付きで貼り付けられたマテリアルを意図的に小さな意味論的な語彙に変換し、削除を記録し、レビュー用にソースを公開します。このワークフローは、視覚的な忠実度が低下する可能性を受け入れながら、偶発的なインライン プレゼンテーションが目に見えない技術的負債になることを防ぎます。
未公開のキャンペーン全体ではなく、代表的なコンテンツでテストします。見出し、リスト、強調、リンクを確認します。次に、コンテンツが存在する承認済みのクラスを適用します。ピクセル同一の転送が要件である場合、このツールのスタイルなしポリシーは不一致であり、有効化を待っている隠し機能ではありません。