Инструменты разработчика · Редактор HTML WYSIWYG
Встроенные стили и классы: чтение HTML, создаваемого визуальным редактором
· Как это работает
HTML CSS довольный и редактируемый
Объясняет, как варианты визуального форматирования становятся тегами, встроенными стилями или ничем вообще, и как адаптировать эти выходные данные к сайту, управляемому таблицей стилей.
Фрагмент выглядит правильно, пока не соответствует вашей таблице стилей — открывается с выводом редактора, который конфликтует с сайтом CSS.
Фрагмент может выглядеть правильно в исходном приложении, поскольку его атрибут стиля выигрывает локально, а затем конфликтует с целевой темой или теряет этот атрибут во время публикации. ToolAcre предпочитает не проводить встроенную презентацию. В его разрешенном списке повсюду удаляются стиль и класс, оставляя поддерживаемые структурные и семантические элементы для назначения стиля.
Эта политика делает предварительный просмотр намеренно скромным. Заголовок, список или сильная фраза остаются узнаваемыми, но цвета, шрифты, интервалы и скопированные классы системы дизайна исчезли. Очищенный фрагмент легче рассуждать, хотя он не может воспроизвести каждый внешний вид или функцию исходного кода как автономный стилизованный компонент.
Обычно существуют три представления; этот редактор сохраняет семантические теги и удаляет стиль и класс
HTML может выражать значение с помощью элементов, локального представления с атрибутами стиля или многоразового представления с именами классов, интерпретируемыми таблицей стилей. Эти механизмы не взаимозаменяемы. Сильный элемент говорит что-то о важности; красный стиль просто выбирает цвет; класс означает только то, что определяет конкретная таблица стилей.
Этот редактор сохраняет семантическое подмножество и отказывается от обоих каналов представления. Даже безобидный класс неизвестен белому списку, поскольку определения классов принадлежат принимающему сайту, а не ToolAcre. В отчете об удалении отброшенному атрибуту присваивается имя, чтобы автор мог отличить преднамеренную очистку от необъяснимого визуального изменения.
Почему этот редактор отказывается от встроенных стилей вместо сохранения автономного представления
Многие редакторы сохраняют встроенные стили, поскольку эти объявления передаются вместе со вставленным фрагментом, не требуя внешней таблицы стилей. ToolAcre делает противоположный подход: атрибут стиля достаточно широк, чтобы создать непредсказуемую визуализацию и URL-несущие поверхности CSS, в то время как этому инструменту рисования нужен только структурированный текст.
Тесты включают значение стиля, содержащее URL в форме JavaScript, и доказывают, что весь атрибут стиля исчезает. Это свидетельство узкого фильтра, а не утверждение, что каждая возможная полезная нагрузка CSS была независимо классифицирована. Внесение в список разрешенных стилей вообще исключает сохранение частичного дезинфицирующего средства CSS в этом модуле.
Рабочий пример: форматы, которые действительно предлагает эта панель инструментов
Панель инструментов предлагает жирный шрифт, курсив, два типа списков, четкое форматирование, выбор блоков, ссылки и отмену ссылок. Вывод жирным шрифтом и курсивом нормализуется в сторону Strong и Em. Выбор блока включает абзац, h1–h4, цитату и предварительный текст. Не существует выбора цвета, выбора шрифта, действия выравнивания или поля класса.
Примените эти элементы управления к образцу абзаца и проверьте исходный код. Полезно сравнивать предполагаемое значение и выделяемые элементы: цитата должна стать блочной кавычкой, кодовый интервал может использоваться pre, а заголовок должен быть заголовком. Не делайте вывод о поддержке подчеркивания, надстрочного индекса или других тегов из разрешенного списка только потому, что исходный режим может сохранить их.
Адаптация вывода означает его стилизацию в месте назначения; здесь нельзя создавать классы
Адаптация CMS начинается после экспорта. Добавьте целевые классы в этот CMS, шаблон компонента или проверенное преобразование, где известны их определения. ToolAcre не может преобразовать неизвестные встроенные объявления в токены, специфичные для проекта, и не может проверить, существует ли класс в вашей рабочей таблице стилей.
Сохраняйте семантические теги там, где они соответствуют содержимому. Удаление строгой структуры или структуры заголовков только для того, чтобы сделать каждый узел стилизованным интервалом, сводит на нет преимущества очистки. Уровень назначения должен определять внешний вид, в то время как черновик содержит абзацы, иерархию, списки, цитаты, код и ссылки, которые остаются значимыми и без темы.
Встроенные стили могут подходить для других рабочих процессов, но они не выводятся этим инструментом.
Встроенные стили могут быть необходимы в системах, которые не сохраняют и не загружают общую таблицу стилей, особенно в некоторых путях создания электронной почты. Однако этот репозиторий не предоставляет процессор совместимости электронной почты и не выдает атрибута стиля. Позже автор должен перевести чистый черновик с помощью проверенного рабочего процесса, специфичного для электронной почты.
Разовые встраивания могут иметь аналогичные ограничения, но это не расширяет контракт этого редактора. Загруженный документ включает фиксированную таблицу стилей предварительного просмотра, созданную ToolAcre и использующую очищенную разметку тела; копирование фрагмента не копирует эту оболочку или ее CSS. Осмотрите точный артефакт, доставленный в пункт назначения.
Что здесь не распространяется — CSS специфическая отладка, токены проектирования или инструменты автоматического преобразования.
В этой статье не проводится автоматическая отладка CSS, токенов дизайна карты, встроенных стилей и обещаний четности пикселей. Он также не говорит о том, что семантические теги определяют определенное объявление программы чтения с экрана или рейтинг в поиске. Семантика улучшает структуру, в то время как фактическое представление и интерпретация остаются зависимыми от потребляющей среды.
Предварительный просмотр в песочнице — это визуализированная поверхность проверки, а не модель вашей активной таблицы стилей. Он привязан к легкой теме документа и не предоставляет никаких скриптов, форм или доступа к тому же источнику. Чистый предварительный просмотр не может установить, что один и тот же фрагмент безопасен или визуально корректен в каждой системе публикации.
Вывод: прочитайте результат, затем примите решение — обобщает выбор и то, как редактор HTML WYSIWYG ToolAcre позволяет вам увидеть разметку, прежде чем решить, что оставить.
Прочитайте вывод, затем определитесь с пунктом назначения. ToolAcre намеренно превращает стилизованный вставленный материал в меньший семантический словарь, записывает удаления и предоставляет источник для проверки. Такой рабочий процесс не позволяет случайному встроенному представлению стать невидимым техническим долгом, одновременно признавая, что визуальная точность может снизиться.
Тестируйте с репрезентативным контентом, а не со всей неопубликованной кампанией. Подтвердить заголовки, списки, выделения и ссылки; затем примените утвержденные классы, в которых будет размещаться контент. Если требуется идентичная по пикселям передача, политика отсутствия стилей этого инструмента является несоответствием, а не скрытой функцией, ожидающей включения.