Инструменты разработчика · Редактор HTML WYSIWYG
Почему «то, что вы видите» никогда не бывает «то, что вы получаете» в HTML
· Фон
HTML CSS довольный и редактируемый
Объясняет структурную причину, WYSIWYG может лишь приблизить конечный результат в сети, поскольку HTML описывает структуру, а CSS, устройства и клиенты определяют внешний вид, а также идею WYSIWYM, которая выросла из нее.
В редакторе идеально, на странице неправильно — открывается со знакомым несоответствием
Уведомление может выглядеть сбалансированным внутри ToolAcre и переполненным после входа на сайт, поскольку одни и те же элементы соответствуют разным таблицам стилей. Локальный iframe — это документ со своим собственным шрифтом, высотой строки, отступом и цветовой схемой освещения. Это обзорный вид, а не скриншот каждого пункта назначения.
Таким образом, WYSIWYG имеет ограниченное значение в сети. Редактор может точно отображать текущий контекст рендеринга, но «то, что вы получаете» позже, включает хост CSS, ширину контейнера, настройки браузера и преобразования контента, которые не присутствуют во время черчения.
HTML описывает структуру, а не внешний вид — объясняет, что одна и та же разметка отображается по-разному в разных таблицах стилей.
HTML в первую очередь записывает структуру и связи: заголовки, абзацы, списки, цитаты, выделение, код и ссылки. Внешний вид возникает, когда значения по умолчанию пользовательского агента и стили автора интерпретируют эти элементы. ToolAcre удаляет встроенные атрибуты стиля и класса, усиливая это разделение в скопированном фрагменте.
Один и тот же h2 может быть большим на странице по умолчанию, компактным на карточке приложения и измененным при печати. Его роль остается заголовком, даже когда размеры меняются. Авторы должны оценить, правильна ли структура, прежде чем решить, имеет ли один предварительный просмотр желаемую типографику.
Таблицы стилей пользовательского агента и каскад — охватывают стили браузера по умолчанию и то, как сайт CSS переопределяет то, что показывалось в предварительном просмотре редактора.
Браузеры начинают с правил пользовательского агента для элементов, затем каскадно применяют стили страницы и пользовательские настройки. В предварительный документ ToolAcre добавлена собственная небольшая таблица стилей. Он не импортирует маркеры дизайна хост-сайта или будущую тему CMS.
Когда скопированная разметка попадает на другую страницу, ее поля p, отступ списка, цвет ссылки и масштаб заголовка могут измениться. Решение состоит в том, чтобы не запекать во фрагмент временные стили предварительного просмотра, потому что этот редактор все равно их удаляет. Примените проверенную презентацию в месте назначения и протестируйте ее там.
Устройства, темный режим и почтовые клиенты — описывает множество контекстов рендеринга, с которыми встретится фрагмент.
Устройства изменяют доступную ширину, параметры шрифта и пользовательский масштаб. Темы темного режима могут менять цвета, а ToolAcre намеренно привязывает предварительный просмотр к светлому документу. Почтовые клиенты накладывают еще один набор ограничений HTML и CSS, которые эта страница не эмулирует и не проверяет.
Ни один источник репозитория не предоставляет матрицу совместимости браузера или почтового клиента, поэтому в этой статье указаны качественные измерения, а не обещание универсального поведения. Ответные заявления и претензии по электронной почте требуют тестирования в реальных средах поддержки. Один изолированный iframe не может заменить это доказательство.
WYSIWYM: то, что вы видите, — это то, что вы имеете в виду — представляет философию структурного редактирования, популяризированную такими инструментами, как LyX.
При структурном редактировании задается вопрос, что означает контент, а не то, точно ли поверхность рисования похожа на конечную точку. Уровни заголовков выражают иерархию, списки выражают группировку, сильные указывают на важность, а ссылки отражают пункты назначения. CSS затем визуально передает эти значения в контексте.
В книге это называется WYSIWYM и называется LyX, но исторический источник здесь недоступен. Концепцию можно объяснить, не указывая происхождение или поведение продукта: сначала создайте семантическое намерение, затем просмотрите и настройте презентацию там, где контент будет фактически жить.
Рабочий пример: один фрагмент в трех контекстах — показывает одну и ту же разметку под таблицей стилей по умолчанию, темой сайта и предварительным просмотром электронного письма.
Создайте один фрагмент с h2, p,strong,ul и общедоступной ссылкой. Откройте загруженный документ, чтобы увидеть легкую обертку ToolAcre, вставьте скопированный фрагмент на тематическую тестовую страницу и поместите адаптированную копию в одобренное предварительное письмо по электронной почте. Сохраняйте формулировку идентичной.
Эти три представления, вероятно, будут различаться, поскольку их стиль и клиентские правила различаются, в то время как исходная структура может оставаться сопоставимой. Если для электронной почты требуются таблицы или встроенное представление, это отдельный перевод; ToolAcre удаляет и таблицу, и стиль, а не делает вид, что предварительный просмотр в браузере подтвердил входящие.
Что здесь не рассматривается — CSS отладка или настройка редакторов для загрузки стилей сайта.
В этой статье не рассматривается специфика CSS, не настраиваются стили сайта и не сертифицируется разметка электронной почты. Он также не утверждает, что скопированный вывод безопасен для произвольной ненадежной публикации. Дезинфицирующее средство представляет собой узкий список разрешенных редакторов с документированным риском, связанным с дифференциальным анализатором.
Песочница предварительного просмотра останавливает сценарии, формы и доступ к тому же источнику внутри ToolAcre. Скопированный HTML покидает эту песочницу. Используйте санитарию на стороне назначения, CSP, где это возможно, адаптивные тесты и проверки доступности. Визуальное несоответствие и безопасность — это отдельные проблемы, даже если и то и другое становится видимым после публикации.
Вывод: редактируйте значение, проверяйте разметку — обобщает подход и то, как редактор HTML WYSIWYG ToolAcre позволяет вам сосредоточиться на разметке, которую вы фактически передаете.
Отредактируйте значение и проверьте разметку, прежде чем гоняться за визуальной четностью. ToolAcre делает семантический фрагмент и локальную визуализацию доступными одновременно, что помогает определить, связано ли несоответствие со структурой или с целевым представлением.
Затем переместите рассматриваемый фрагмент в репрезентативные контексты и измерьте там результат. Хороший рабочий процесс предполагает различия, фиксирует преднамеренные адаптации и избегает утверждений, что одно представление редактора предсказывает каждый браузер, устройство, тему или почтовый ящик.