Инструменты разработчика · Редактор HTML WYSIWYG
Скрытая цена беспорядочной разметки: доступность, вес страницы и редизайн
· Почему это важно
HTML доступность очистка текста
Утверждается, что вложенные промежутки, встроенные шрифты и пустые абзацы не являются косметическими: они нарушают вспомогательные технологии, раздувают страницы и усложняют каждый редизайн.
Редизайн, который не удался в старых статьях, открывается с новой таблицей стилей, которая не может переопределить тысячи встроенных стилей.
Редизайн может изменить каждое утвержденное правило заголовка и при этом оставить старые статьи визуально непоследовательными, если эти статьи содержат локальные стили и импровизированные оболочки. Глобальный CSS не может легко управлять представлением, встроенным в контент. ToolAcre удаляет атрибуты стиля и класса, показывая, какая часть фрагмента зависит от них.
Полученное визуальное изменение является свидетельством, а не автоматическим планом миграции. Удаленный класс может иметь необходимое значение через компонент приложения, тогда как встроенное объявление шрифта может быть одноразовым украшением. Прежде чем применять очистку архива, просмотрите источник и место назначения вместе.
Что на самом деле означает «беспорядочный» — определяет это конкретно: избыточные оболочки, встроенное представление, несемантические теги и хаки с пробелами.
Беспорядочная разметка конкретна: вложенные диапазоны без какой-либо семантической задачи, оболочки div, используемые только для пробелов, устаревшие теги b и i, встроенные стили, пустые абзацы, атрибуты событий и повторяющиеся фрагменты представления. Само по себе количество байтов не является определением; ненужная или вводящая в заблуждение структура является проблемой обслуживания.
ToolAcre разворачивает обычные неподдерживаемые контейнеры, сопоставляет несколько устаревших встроенных тегов с семантическими эквивалентами, удаляет атрибуты за пределами списков для каждого элемента и балансирует допустимую вложенность. Он не обнаруживает каждый избыточный разрешенный элемент. Могут остаться два вложенных сильных элемента, поскольку оба являются допустимыми членами узкого словаря.
Доступность: что слышат программы чтения с экрана — объясняет, как недостающая структура и поддельные заголовки влияют на навигацию.
Доступность начинается с реальной структуры, которую могут раскрыть пользовательские агенты и вспомогательные инструменты. Абзац, выделенный жирным шрифтом, по-прежнему остается абзацем, а элемент заголовка входит в структуру заголовка документа. Последовательность набранных дефисов представляет собой текст; ul и li обеспечивают машиночитаемые отношения списков.
Не преувеличивайте точные объявления. Вспомогательные технологии и пользовательские настройки различаются, и этот репозиторий не содержит тестовой матрицы перекрестного чтения. Обоснованная рекомендация — кодировать смысл с помощью соответствующих элементов, сохранять логический порядок заголовков и проверять репрезентативный вывод с использованием реальных инструментов доступности, на которые опирается ваша аудитория.
Вес страницы и рендеринг — описывает, как раздутая разметка добавляет байты и усложняет макет.
Дополнительная разметка добавляет передаваемые и анализируемые символы, но в этой статье не указан порог производительности или штраф за универсальный рендеринг. Более непосредственная цена — это сложность: отладка селекторов и миграций становится сложнее, когда эквивалентные статьи выражают одну и ту же идею через несвязанные оболочки и локальные объявления.
ToolAcre подсчитывает очищенные HTML символы, что может привести к уменьшению количества символов после фильтрации, но этот счетчик не является показателем производительности. Скорость страницы зависит от документов, стилей, скриптов, мультимедиа, кэширования и устройств. Рассматривайте меньший источник как сигнал о ремонтопригодности, а затем измерьте реальную страницу, прежде чем делать заявления о производительности.
Редизайн и миграция — объясняет, почему встроенные стили и одноразовая разметка сопротивляются глобальным изменениям.
Редизайн таблицы стилей работает лучше всего, когда повторяющийся контент использует стабильную семантику и централизованное представление. Встроенные стили устойчивы к глобальным изменениям цвета, интервалов и типографики. Неизвестные имена классов могут привязать контент к устаревшей теме. Пустые блоки и разрывы вручную сохраняют старые предположения о макете еще долгое время после изменения окружающего шаблона.
Поэтому миграция должна отделять смысл от представления. Сохраняйте уровни заголовков, абзацы, списки, цитаты, код и намеренные ссылки; перенести утвержденный внешний вид в стили назначения. Редактор помогает проверить отдельный фрагмент, но не может вывести модель компонента для всего сайта или выполнить массовое обновление сохраненных записей.
Рабочий пример: очистка одной статьи — берет вставленную статью, проверяет ее разметку и показывает более чистую версию с тем же внешним видом.
Возьмите скопированную статью со стилизованным элементом div, фальшивым полужирным заголовком, двумя абзацами и написанными от руки тире. Фильтрация удаляет div, style и class, но не может знать, что жирная линия должна стать h2, а тире — li. Человек должен перестроить эти смысловые выборы.
Сравните визуальный результат и источник после каждой коррекции. Замените поддельный заголовок выбранным уровнем заголовка, а тире реальным списком, затем проверьте схемы ссылок и границы абзацев. Чистая версия может выглядеть проще в песочнице, поскольку пункт назначения CSS еще не применен.
Что сюда не входит — автоматическая массовая очистка, архитектура CSS или измерение производительности.
В этой статье не описываются алгоритм массовой очистки, архитектура CSS или бюджет производительности. Он также не утверждает, что санитария сама по себе создает доступный контент. Альтернативный текст, язык, назначение ссылок, иерархия заголовков и редакционная ясность требуют информации, выходящей за рамки разрешенного списка тегов.
Также не следует публиковать ненадежные архивы только потому, что ToolAcre принял их фрагменты. Написанный от руки токенизатор предупреждает о различиях в анализаторе браузера. Используйте поддерживаемое на стороне сервера дезинфицирующее средство в соответствии с политикой принимающей системы и тестируйте визуализированные результаты отдельно от локальных черновиков.
Вывод: чистая разметка становится дешевле с каждым годом — краткое изложение ситуации и то, как проверка вывода в редакторе HTML WYSIWYG ToolAcre предотвращает беспорядок в исходном коде.
Чистую разметку легче понять каждый год после публикации, потому что будущие редакторы смогут определить структуру без взлома презентаций. Выгода увеличивается за счет редизайна, экспорта и миграции, даже если немедленное сокращение байтов является скромным.
Предотвратите беспорядок в источнике, проверяя репрезентативные выходные данные перед тем, как они попадут в CMS. Используйте ToolAcre для выявления и фильтрации багажа, затем намеренно укажите недостающую семантику и стилизуйте ее в пункте назначения. Внимательно просмотрите одну статью, прежде чем масштабировать любое преобразование до тысяч.