HTML (от англ. HyperText Markup Language — гипертекстовый язык разметки) — формальный тэговый язык описания разметки документов. HTML удобен и часто используется для задания общей структуры документа, в то время как стилизация отдельных элементов происходит с помощью стилей CSS. CSS (от англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания стилизации документа, записанного с помощью языков форматирования (например, HTML или XUL). CSS может подключаться к HTML документу двумя принципиально различными способами: как отдельные таблицы стилей внутри заголовка HTML документа или отдельным файлом (внешние таблицы стилей) и в атрибуте style требующих стилизации элементов — то есть быть встроенными (inline). Часто HTML документы используются для передачи в почтовых сообщениях, потому что повышают информативность электронных писем, особенно рекламных и новостных. Однако, многие почтовые клиенты (более 50 % рынка почтовых клиентов) не имеют возможности отображения внешних CSS, хотя имеют возможность корректно отображать встроенные элементам стили.
Способы передачи в сети почтовых сообщений.
Электронные почтовые сообщения часто отправляются с помощью SMTP- протокола. Данный протокол зачастую работает по протоколу 25 в сетях TCP/IP.
SMTP-сообщение содержит поле DATA, в котором может находиться любая текстовая информация, в том числе форматированная или стилизованная. Таким образом, отображение данных писем полностью зависит от принимающего их почтового клиента. Очень часто в письмах, особенно с рекламой или новостями используют форматирование и стилизацию, поскольку они повышают их читаемость и информативность.
Передача HTML в почтовых сообщениях.
Каждое почтовое HTML-сообщение является набором элементов — сущностей, описанных в стандарте. Каждый элемент может иметь ноль или более атрибутов, определяющих те или иные характеристики отображения. В том числе может быть определен и атрибут style, значением которого являются перечисленные через точку с запятой правила CSS.
Использование CSS.
Как уже было сказано, CSS — формальный язык описания стилизации форматированных документов. В CSS задаются различные правила для стилизации элементов документа с помощью нотации «название: значение;». Если CSS подключается как внешний к документу, то также необходимо использовать CSS-селекторы для выбора элементов, к которым применятся соответствующие правила. Если же CSS используется внутри атрибута style, то писать селекторы не нужно. Идея CSS заключается в использовании принципа DRY (от англ. Don’t Repeat Yourself), который позволил бы отделить форматирование, как структуру, от стилизации документа.
Подключение CSS к HTML.
Спецификациями CSS и HTML предоставляются три различных способа подключения CSS стилей к документу, который они описывают:
- Если предпочтительнее использоваться отдельный файл для таблиц стилей, то путь к файлу с таблицами стилей заносится в атрибут href элемента и все правила CSS, находящиеся в файле, действуют на весь html документ согласно соответствующим CSS-селекторами. Например:
-
……
- Возможно указание таблиц стилей CSS и комментариев к ним прямо в документе, внутри элемента style. Действие этих стилей также согласно соответствующим CSS-селекторам на весь документ. Например:
-
......
- Возможно указание правил стилизации применительно лишь к одному элементу с помощью HTML атрибута style. Например:
………
В первых двух случаях говорят о том, что на весь HTML-документ действуют внешние (подключенные) таблицы стилей, а в последнем случае говорят, что стили находятся inline (или встроены) по отношению к некоторому элементу.
Проблема вычистки подключенных стилей.
Несмотря на распространенность HTML в почтовых клиентах, многие почтовые клиенты удаляют CSS, подключенный любым из первых двух перечисленных способов.
Происходит это из соображений того, что письмо, во-первых, должно быть самодостаточным, то есть не зависеть от сторонних подключаемых файлов, а, во-вторых, из-за того, что некоторые разработчики почтовых клиентов считают, что пользовательские стили могут конфликтовать с их собственными (если технологически клиент сделан с использованием CSS стилей). Таким образом, мы лишаемся мощного инструмента контроля отображения во многих клиентах, а также это вынуждает нас отходить от принципа DRY, столь удобного в разработке программного обеспечения.
Возможные способы решения проблемы.
Среди способов решения данной проблемы можно выделить следующие:
- Встраивание CSS-стилей соответствующим элементам вручную.
− Плюсы: простота реализации.
− Минусы: нарушение принципа DRY, много ручной работы, возможность человеческой ошибки.
- Изменение отображения сообщения на стороне принимающего.
− Плюсы: максимальный контроль над отображением.
Минусы: необходимо влиять на платформу принимающего. Часто нет такой возможности.
- Автоматическое встраивание CSS-стилей HTML-элементам на стороне отправителя.
− Плюсы: приемлемый контроль над отображением у конечного пользователя.
− Минусы: сложность работы с HTML.
Оценивая плюсы и минусы, можно сделать вывод, что способ с автоматическим встраиванием стилей на стороне отправителя является наиболее подходящим для решения предложенной проблемы.
Рассмотрим пример программы для автоматического встраивания стилей соответствующим HTML-элементам путем выбора их с помощью указанных CSS-селекторов. Поскольку, как было упомянуто, HTML является сложным для обработки языком в силу неопределенности части спецификации, то после исследований возможностей трансляторов по обработки HTML было принято решение использовать клиент-серверный подход (с использованием веб-браузера) для решения данной проблемы. Задачей сервера в данном случае является анализ CSS-текста с использованием библиотеки для генерации трансляторов формальных языков ANTLR4 и генерация структуры, согласно которой затем будет происходить автоматическое встраивание текста клиентской Javascript-программой в веб-браузере. Задачей же клиентской программы является, во-первых, быть точкой входа для пользователя, а во-вторых, непосредственно встраивание стилей в HTML-документ с помощью программного интерфейса веб-браузера и дальнейшая отдача результирующего HTML.
Структура решения
Общую структуру приложения можно представить в следующем виде:
− Серверная часть. Основная задача серверной части — анализ формального языка CSS с целью создать структуру данных с правилами встраивания. Также необходима для передачи статических ресурсов — файлов с HTML и Javascript, требуемых для работы клиентского приложения.
− Клиентская часть. Основная задача клиентского приложения — произвести встраивание стилей в HTML-документ. Также клиентское приложение служит входной точкой для пользователя.
Типичный цикл работы программы можно представить следующим образом:
- В клиентском приложении с помощью интерфейса вводятся код HTML документа в текстовом виде и код CSS файла также в текстовом виде.
- CSS-код отправляется на сервер для дальнейшего анализа.
- Серверное приложение осуществляет анализ присланных ему CSS-стилей и отвечает структурой данных (и кодом 200 — «успех»), необходимой для встраивания. Если же случается какая-либо ошибка, то возвращаемый ответ будет содержать код 500(«внутренняя ошибка сервера») и текст ошибки.
- Клиентское приложение использует полученную структуру для непосредственного встраивания стилей.
- В специальном месте интерфейса выводится текст HTML-документа со встроенными соответствующим элементам CSS-стилями. Возможно дальнейшее использование данного текста.
Работа серверного приложения.
Анализ CSS-кода происходит с помощью библиотеки ANTLR4 и разработанной для нее грамматики, записанной в расширенной нотации Бэкуса-Наура, требуемой для того, чтобы разобрать текст на следующие сущности:
− StylingSheet — стилевая таблица. Содержит строку — значение CSS-селектора, которое нужно затем для выбора HTML-элемента, которому будут встроены CSS-стили, а также коллекцию элементов типа StylingRule.
− StylingRule — стилевое правило. Содержит в себе название, значение, а также флаг важности правила. Необходимо для непосредственного создания строки встроенных стилей конкретного элемента.
Данные сущности связаны в грамматике для транслятора ANTLR следующим образом:
StylingSheet: SheetSelector '{' StylingRulesBlock '}';
StylingRulesBlock
: StylingRule
| (StylingRule ';')*
| StylingRule (';' StylingRule)*;
StylingRule: StylingRuleName ':' StylingRuleValue;
SheetSelector: ID;
StylingRuleName: ID;
StylingRuleValue: ID
ID: ([A-Za-z0–9\-=\ [\]\*] | ANY_STRING)+;
Где запись «[A-Za-z0–9\-=\ [\]\*]» обозначает символы все латинские символы любого регистра, а также цифры и знаки «=», «-», «*», «]» и «[», а запись через «|» означает «или», а «+» в конце правила обозначает «как можно большее число раз, при этом хотя бы один» (жадный алгоритм). Отсылка ANY_STRING — правило лексического анализатора, соответствующее любой строке. Описание этого и некоторых других лексических правил исходит из спецификации CSS3.
Данная грамматика ANTLR позволяет получить синтаксическое дерево нужного нам формата, а затем преобразовать и передать клиентскому приложению необходимую структуру для встраивания стилей.
Работа клиентского приложения.
Рис. 1. Схема работы функции Встроить
Как видно из схемы на рисунке 1, клиентское приложение по протоколу HTTP получает структуру (в подпроцессе Получить Таблицы) для дальнейшего прохода по ней и встраивания стилей соответствующим элементам. Для создания необходимого дерева объектов из HTML-кода создается элемент типа iframe внутри подпроцесса Создать Документ и возвращает документ, соответствующий данному HTML-коду. Непосредственно выбор элементов и встраивание происходят в подпроцессе Обработать Элементы, схема работы которого представлена на рисунке 2.
Рис. 2. Схема работы функции Обработать Элементы
Важно отметить, что если у элемента уже есть стили в атрибуте style, то новые стили будут добавлены перед ними, что обеспечивает необходимый приоритет следования и применения стилей.
Заключение.
Была рассмотрена важность использования CSS и HTML при отправке электронных писем, различные способы подключения CSS-стилей к HTML документам, а также проблема удаления большей частью почтовых клиентов подключаемых стилей CSS. Были предложены варианты решения проблемы и рассмотрена реализация клиент-серверной программы для автоматического встраивания CSS соответствующим HTML-элементам.
Литература:
- БенХеник. HTML и CSS. Путьк совершенству / БенХеник. — Питер, 2011. — 336
- Terence Parr. The Definitive ANTLR 4 / Terence Parr — The Pragmatic Bookshelf, 2013. — 325 с.
