Инструменты разработчика · Редактор HTML WYSIWYG
От тегов <font> к тегам CSS: как веб-форматирование вышло из разметки
· Фон
HTML CSS очистка текста
Рассказывает, как презентационные атрибуты HTML, такие как атрибуты шрифта, центра и выравнивания, уступили место CSS, и почему эта история объясняет сегодняшние дебаты в редакторах о встроенном стиле.
Презентация HTML на старых страницах — здесь не указана дата.
Фрагменты старых страниц часто выражают внешний вид напрямую через такие элементы, как шрифт и центр, или такие атрибуты, как bgcolor и align. В рабочей тетради указана хронология середины 1990-х годов, но ни один источник хранилища не подтверждает эти даты. Реализация может продемонстрировать только то, как этот редактор сегодня обрабатывает такую разметку.
ToolAcre не поддерживает шрифт или центр и не сохраняет атрибуты представления. Обычные неподдерживаемые оболочки разворачиваются, поэтому их видимые слова могут сохраниться, пока инструкция форматирования исчезнет. Этот результат представляет собой очищенный черновик, а не точное восстановление устаревшей страницы.
шрифт, центр и bgcolor: представление в тегах — описывает элементы и атрибуты, добавленные браузерами для оформления.
Когда презентация живет в тегах и атрибутах, контент и дизайн становится трудно изменить независимо. Выбор цвета, повторяющийся в статьях, должен редактироваться в каждом фрагменте, а центрированный заголовок не имеет собственного структурного смысла. Копирование этих конструкций также импортирует предположения из устаревшего макета.
Семантическая разметка называет такие роли, как заголовок, абзац, список и цитата. Таблица стилей назначения может последовательно отображать все вхождения. ToolAcre поддерживает этот меньший словарь, а также удаляет класс и стиль, оставляя принимающую систему ответственной за свой собственный уровень представления.
CSS отделяет структуру от представления; даты стандартов находятся за пределами хранилища
CSS предоставляет селекторы и объявления отдельно от дерева содержимого. Такое архитектурное разделение позволяет одному изменению дизайна влиять на множество документов без переписывания каждого тела. В этой статье не придумывается дата первой рекомендации или последовательность стандартов, поскольку такие исторические утверждения требуют внешних спецификаций.
Практическое правило остается проверяемым: скопированные фрагменты из ToolAcre не содержат атрибутов стиля или имен классов. Загруженный полный документ включает в себя собственную таблицу стилей оболочки ToolAcre, но эта CSS не вставлена в очищенный фрагмент, возвращаемый копированием HTML.
Элементы представления находятся за пределами этого разрешенного списка и не содержат заявлений о хронологии уровня жизни.
В рабочей тетради описывается обесценивание и снижение уровня жизни. В этом модуле нет архива стандартов, поэтому статья останавливается на текущей политике: элементы представления не поддерживаются и либо разворачиваются, либо удаляются в зависимости от их категории риска. Он не претендует на нормативную хронологию.
Отчет об удалении является полезным доказательством. Вставьте тег шрифта вокруг текста и обратите внимание, что оболочка отклоняется, а слова остаются. Вставьте контейнер опасного стиля, и его тело будет полностью удалено, поскольку необработанное содержимое стиля может создавать поверхности запроса и анализа, выходящие за рамки этого редактора.
Встроенные стили существуют где-то еще, но этот редактор их удаляет.
Встроенный стиль — это современный синтаксический механизм, но ToolAcre полностью его отвергает. Поэтому этот редактор не может продемонстрировать сохранившийся атрибут «компромиссного» стиля или порекомендовать один из своих собственных режимов вывода. Единственный автономный стиль появляется в созданном документе предварительного просмотра вокруг отфильтрованного тела HTML.
Другие контексты, особенно создание электронной почты, могут потребовать встроенных объявлений. Это требование требует отдельного конвейера для тестирования клиентов и политики CSS. Добавление сюда произвольного стиля противоречило бы текущему разрешенному списку и расширяло бы обязанности дезинфицирующего средства без доказательств или тестов.
Рабочий пример: модернизация фрагмента 1990-х годов — переписывает разметку тега шрифта как семантический HTML плюс класс и сравнивает два
Модернизируйте `<center><font color="red"><b>Maintenance</b></font></center><p align="left">Tonight</p>`, выбрав настоящий заголовок и абзац. ToolAcre разворачивает неподдерживаемое представление, отображает b в сильный, удаляет выравнивание и сохраняет p, но не может сделать вывод, что обслуживание должно быть h2.
Перепишите значение явно как `<h2>Maintenance</h2><p>Tonight</p>`, затем добавьте утвержденные целевые классы или правила таблицы стилей вне редактора. Если внутри предложения подразумевается важность, может подойти сильный; если бы жирный шрифт был просто начертанием шрифта, не сохраняйте вводящую в заблуждение семантику.
Что здесь не охватывает — CSS дебаты по методологии или стили, специфичные для платформы.
В этой статье не сравниваются CSS методологии, платформы, служебные классы или токены проектирования. Он не утверждает исторические даты для шрифтов, CSS или переходов на стандарты. Он также не предлагает автоматический конвертер, который мог бы определять семантические роли на основе визуальной устаревшей разметки.
Фильтрация не является универсальной XSS защитой. Рукописный токенизатор ToolAcre ограничен, а его предварительный просмотр находится в отдельной изолированной программной среде. Серверу, принимающему устаревшие или созданные пользователем HTML, требуется поддерживаемое дезинфицирующее средство на основе анализатора, тесты миграции и белый список для конкретного места назначения.
Вывод: знайте, почему существует правило — обобщает историю и то, как проверка вывода в редакторе HTML WYSIWYG ToolAcre помогает исключить представление из разметки.
Узнайте, почему структура и представление разделены: смысл должен пережить редизайн, а внешний вид должен управляться последовательно. ToolAcre агрессивно усиливает эту границу, удаляя из скопированных фрагментов как устаревшее представление, так и современные встроенные стили или стили на основе классов.
Используйте исходное представление, чтобы определить, что было потеряно, затем восстановите семантику вручную и настройте стиль в месте назначения. Этот процесс, возможно, не сохраняет старый вид, но он создает контент, который легче просматривать, переносить и адаптировать, не внося устаревшие решения в каждую будущую тему.