Подсказки css: Всплывающая подсказка на CSS | htmlbook.ru

CSS-инструменты для фронтендера — обзор полезных решений

Для фронтенд разработки необходимо очень часто прибегать к работе с CSS-стилями. Зачастую здесь требуется повторение однотипных блоков кода, где будут допущены незначительные изменения. Также в стандартном CSS есть некоторые неудобные моменты, например, наследование, определение цветов, подключение изображений и прочее. С этими недоработками языка можно справится с помощью специальных инструментов, которые будут полезны для работы с CSS любому фронтедендеру, а некоторые даже жизненно необходимы.

Какие есть CSS-инструменты для фронтенда

Данные инструменты можно разделить на три категории:

• плагины для редактора кода, которые специализированы на работе с CSS и его основными препроцессорами;
• сами CSS-препроцессоры, которые упрощают процесс написания разметки, сглаживая недоработки стандартного CSS;
• сторонние библиотеки и инструменты, предназначенные для выполнения какой-то четко определенной задачи, например, создания анимации переходов.

Для эффективной работы с CSS во время верстки данные категории инструментов придется группировать между собой.

Плагины для работы с CSS

Рассмотрим несколько популярных плагинов для работы с CSS-кодом в редакторе Visual Studio Code. Они нацелены на создание более удобной рабочей среды: отображение цветов, миниатюр изображений, подсказки при написании стилей и так далее. Рассматриваемые плагины есть в общей библиотеке редактора VS Code, однако они есть и для некоторых других редакторов, например, SublimeText.

CSS Peak

Данный плагин чаще используется при верстке HTML-каркаса, однако он напрямую связан с CSS. Во время работы с HTML-разметкой требуется передавать классы или идентификаторы блокам и другим элементам, чтобы потом корректно оформить их в CSS или присвоить для них JS-скрипт. Для многих элементов в HTML файле может применяться один и тот же класс с общими стилями, однако таких классов может быть много, что вызовет путаницу в процессе дальнейшей верстки.

Демонстрация работы плагина CSS Peek

Плагин CSS Peak значительно облегчает работу тем, что показывает уже заданные стили для вводимого класса или идентификатора. Чтобы увидеть CSS-свойства того или иного класса на него достаточно навести указателем мыши. Свойства будут показаны в небольшом всплывающем окне.

HTML CSS Support

Чем-то похож на предыдущий плагин, но только здесь предусмотрен автоматический ввод идентификатора или класса, а не подсказка его стилей. Это будет отличным подспорьем в том случае, если в документе много классов и идентификаторов, а разработчик уже начинает в них путаться. При указании класса будет выводится подсказка, где можно выбрать подходящий вариант. Плюс, это значительно ускорит время написания как HTML-каркаса, так всей верстки в целом.

Всплывающие подсказки плагина HTML CSS Support

Path autocomplete

Плагин будет полезен не только для работы с CSS, но и другим кодом, где требуется указывать путь к разным файлам. Однако разработчиками он используется преимущественно при работе с CSS, например, когда требуется указать расположение картинки. Нужно только начать вводить путь до объекта и плагин начнет выводить подсказки, которые можно сразу же вставить, не вводя адрес полностью.

Beautify

Плагин создан для любителей красивого и чистого кода. Поддерживает не только CSS, но и SASS, JS, JSON, HTML. Особенность заключается в том, что в данном плагине можно задать собственные настройки форматирования для кода. Это актуально больше для тех, кто работает с препроцессором SASS, нежели с чистым с CSS, так как в данном препроцессоре очень много внимания уделено правильной расстановке отступов.

В настройках Beautify можно задать размеры отступов и указание того, должны ли строки завершаться переводом строки. Данные параметры можно кастомизировать под свои потребности. После этого весь новый код будет автоматически подстраиваться под заданные настройки. Это позволит избежать глупых ошибок в SASS, когда код отказывается компилироваться из-за лишнего пробела.

Prettier — code formatter

Частично похож на предыдущий плагин, однако здесь меньше возможностей для задания собственных настроек форматирования написанного кода. Зато можно быстро привести весь код к единому виду, воспользовавшись всего одним сочетанием клавиш — Ctrl+Shift+P. После этого произойдет форматирование всего кода, а также будет задана общая структура.

Страница плагина Prettier — code formatter в VS Code

Плагин интересен в первую очередь все же программистам, так как адаптирован для работы с языками программирования, а не разметки. Однако он умеет работать с CSS и его основными препроцессорами, приводя их к единому виду. Если в обычном CSS это не так важно, то в препроцессорах это имеет чуть ли не первостепенное значение.

Bracket pair colorizer

Простой плагин, который окрашивает открывающие и закрывающие скобки в определенные цвета, выделяя их на фоне общего кода. Благодаря этому разработчик может допускать меньше ошибок в процессе написания CSS-разметки, а также быстрее разобраться в написанном коде. Данный инструмент еще будет очень полезен для работы с JavaScript.

Пример подсветки скобок Bracket pair colorizer

Препроцессоры в CSS

Препроцессоры для CSS можно рассматривать как отдельный инструменты, так как они значительно упрощают разработку, особенно, если речь идет о больших проектах. С их помощью можно преодолеть ограничения, которые накладываются стандартным CSS. Например, использование препроцессоров позволяет лучше проработать наследование свойств, задать общие свойства, переменные и так далее. Также такой код можно легче оптимизировать для более быстрой работы.

Среди препроцессоров особенно сильно выделяются три игрока: LESS, SASS/SCSS и Stalus. Они отличаются друг от друга по функциональным возможностям, а также синтаксису, однако различие не самое сильное. Обучиться работе с CSS-препроцессорами можно очень быстро, так как различий по сравнению с основным CSS не так много, но есть много документации, обучающих роликов и профессиональных сообществ. Настроить использование препроцессоров в проекте тоже очень просто — потребуется либо специальная программа-компилятор, либо плагин для вашего редактора кода, если таковые поддерживаются.

Более подробно CSS-препроцессоры рассматривались в этой статье на нашем блоге.

Сторонние библиотеки и инструменты

Они могут быть направлены на решение какой-то конкретной проблемы или использоваться в определенной ситуации. Часто распространяются в виде библиотек, которые требуется подключить к своему проекту, скачав саму библиотеку и поместив ее папки со стилями в корневую директорию либо просто указав ссылку на нужный ресурс. В зависимости от выбранной библиотеки или инструмента процесс подключения к проекту может отличаться.

Профессиональные верстальщики выделяют для своих нужд несколько таких библиотек в зависимости от того, какой функционал в проектах им приходится реализовывать чаще всего. Есть определенный функционал, который обязательно должен присутствовать на каждом сайте и который можно реализовать преимущественно через CSS. Такие “универсальные” инструменты и будут рассмотрены далее.

CSS Scan

Инструмент позволяет просматривать CSS-свойства любого объекта на любом сайте. Будет полезен скорее на начальном этапе разработки, когда нужно понять, как реализовать тот или иной элемент, “подсмотрев” реализацию на другом ресурсе. Вместо выгрузки заинтересовавшейся страницы и просмотра ее файлов инструмент CSS Scan позволяет посмотреть все CSS-свойства прямо на странице, наведя курсор мыши на интересующий компонент. Также можно посмотреть используемые цвета, шрифты, анимацию, ссылки на какие-то сторонние компоненты, используемые для того или иного эффекта на сайте. Еще инструмент создает разметку блоков на сайте, что позволяет лучше понять его структуру и при необходимости перенести в свой проект.

Краткая демонстрация работы CSS Scan на официальном сайте

Colorzilla

Инструмент разработан для работы с цветом, а именно для быстрого получения данных о заинтересовавшем цвете. Работает по аналогии с инструментом “Пипетка” из графических редакторов — копирует все важные данные выбранного цвета. Помимо простого копирования цветов со страниц браузера инструмент еще умеет создавать на их основе палитры и градиенты. Процесс создания таковых палитр разработчик можете настроить под конкретные задачи.

Инструмент Colorzilla как расширение для браузера

Utopia

Инструмент, позволяющий настроить системный подход для масштабирования элементов на сайте. Теперь вместо написания кода для нескольких произвольных брейкпоинтов (контрольных точек), можно создать дизайн, где элементы масштабируются плавно и пропорционально. Примечательно, что разработчики инструмента утверждают, что это не сетка, типа, Bootstrap, а просто инструмент для упрощения масштабирования и позиционирования элементов на сайте.

Fontsquirrel

Простой генератор веб-шрифтов. Его принцип работы заключается в том, что пользователь загружает файл со шрифтами, а на выходе получает преобразованный для дальнейшего использования в верстке шрифт. Здесь уже будут все необходимые стили, а также оптимизация, благодаря чему можно будет забыть о некорректном отображении используемого шрифта в проекте.

Главная страница Fontsquirrel

Sprite

Применяется в тех случаях, когда нужно сделать из нескольких картинок одну. Обычно такая необходимость возникает, когда изображения на странице расположены близко друг к другу, но какого-либо взаимодействия между ними и пользователем не предусмотрено. Тогда будет разумнее преобразовать такое изображение в одно. Таким образом получится немного оптимизировать сайт. Инструмент Sprite позволяет сделать это гораздо быстрее, чем использование стандартных графических редакторов, плюс, он более легок в управлении и настройке.

Gulp

Это многофункциональный сборщик проектов. Перед сдачей крупных проектов их часто требуют корректно сжать. Это необходимо не столько для уменьшения веса и последующей оптимизации, сколько для предотвращения утечки данных. Gulp умеет работать файлами стилей и используется преимущественно для автоматического преобразования SASS в CSS. Фронтендером может рассматриваться как неплохая альтернатива плагинам для редактора кода. Единственным серьезным недостатком Gulp является необходимость его настраивать отдельно под каждый проект.

Box shadows

Позволяет быстро добавить тому или иному объекту одну или несколько теней. Правда, делается это не через стандартные свойства CSS, а посредством копирования “родительского” элемента и изменения свойств копии. Это позволяет сделать более широкий спектр настроек данного инструмента. Умеет также делать внутренние тени. Использование Box shadows позволяет ускорить разработку сложных теней у разных элементов, так как через стандартные инструменты CSS пришлось бы долго прописывать код для оформления блоков.

Owl carousel

Это библиотека для быстрого создания продвинутых слайдеров на страницах, которые к тому же сразу получаются адаптивными. Поддерживается модульная структура проекта, благодаря чему можно отсоединить плагины, которые не используются в проекте, или создать новые при необходимости. Примечательно, что библиотека поддерживает CSS2 и старые версии браузеров.

Главная страница Owl carousel

Glassmorphism

Онлайн-генератор стиля матового стекла. Здесь, с помощью бегунков можно задать степень непрозрачности и размытия, а также выбрать основной цвет для блока, на который будет применен эффект матового стекла. Плюс, еще можно настроить обводку для объекта. CSS-код генерируется автоматически в зависимости от указанных вами настроек. Готовый код вы можете видеть в отдельном окне на сайте. Прямо оттуда же можно скопировать сгенерированный код.

Настройки Glassmorphism

Заключение

Стандартный CSS пускай и прост в изучении и применении, он недостаточно функционален, когда речь идет о быстрой и сложной верстке большого проекта. Представленные библиотеки, инструменты и плагины способны облегчить работу с CSS, а также вообще над всем проектом при верстке. Большинство из них максимально просто подключить и использовать в проекте. Для достижения наибольшей эффективности рекомендуется работать сразу с несколькими из представленных инструментов.

Всплывающие подсказки на CSS. Библиотека microtip.css

tooltipcssmicrotipподсказки

Представляем вашему вниманию отличную легковесную css библиотеку microtip.css.
Библиотека предназначена для создания всплывающих подсказок на любых элементах сайта

Установка

npm

npm install microtip

yarn

yarn add microtip

CDN

https://unpkg.com/microtip/microtip.css

Прямая загрузка

curl -o microtip https://github.com/ghosh/microtip/blob/master/microtip.css

Подключение

PostCSS

@import 'microtip';

Webpack

import microtip from 'microtip/microtip. css'

SCSS

@import ‘microtip/microtip’;

HTML

<link rel="stylesheet" href="https://unpkg.com/microtip/microtip.css">

Использование

Использовать данную библиотеку очень просто. Достаточно добавить атртибуты aria-label и role=»tooltip» к элементу, которому требуется тултип. Текст сообщения задается в атртибуте aria-label=»Ваш текст». Пример с позиционированием всплывающей подсказки:

 <button aria-label="Hey tooltip!" data-microtip-position="up" role="tooltip">

Позиционирование всплывающих подсказок

Данная библиотека позволяет выбирать местоположения для tooltip. Это решается добавлением атртибута data-microtip-position. Данный атрибут принимает следующие параметры: top, top-left, top-right, bottom, bottom-left, bottom-right, left and right.

Например:

 <button aria-label="Hey tooltip!" data-microtip-position="top-left" role="tooltip">

Модификаторы размера

Изначально размер тултипа задается в зависимости от расположенного в нем текста. Библиотека позволяет дополнительно задать размер тултипа путем добавления data-microtip-size. Данный аттрибут принимает следующие параметры: small, medium, large, fit

Пример:

 <button aria-label="This is a decently long text!" data-microtip-position="top-left" data-microtip-size="medium" role="tooltip">

Примечание — аттрибут fit установит ширину подсказки — такую же как и ширина элемента. Данный способо работает только с позиционированием top и bottom

Кастомизация

Библиотека microtip позволяет изменять параметры своей библиотеки:

Пример::root { --microtip-transition-duration: 0.5s; --microtip-transition-delay: 1s; --microtip-transition-easing: ease-out; --microtip-font-size: 13px; --microtip-font-weight: bold; --microtip-text-transform: uppercase; }Также допустима кастомизация microtip для одного элемента:

.button { --microtip-transition-duration: 0.2s; --microtip-transition-delay: 0s; --microtip-transition-easing: ease-in-out; }

Variable	Description	Default Value
--microtip-transition-duration	Устанавливает время анимации тултипа	. 18s
--microtip-transition-delay	Задержка появления всплывающей подсказки	0s
--microtip-transition-easing	Тип анимации для появления тултипа	ease-in-out
--microtip-font-size	Размер шрифта во всплывающей подсказке	13px
--microtip-font-weight	font-weight для текста тултипа	normal
--microtip-text-transform	text-transform для текста	none

Проект на GitHub

Смотрите также

Группа Вконтакте

Руководство по CSS для северной части штата

| Медицинский университет SUNY Upstate

Ниже перечислены основные классы CSS, содержащиеся в таблице стилей global-rwd. css. Мы используем классы для согласованности и потому, что Cascade удаляет стили в WYSIWYG. Некоторые классы доступны для всех пользователей Cascade через раскрывающийся список «Форматы» или автоматически добавляются с помощью блока «Контент» или «Мультимедиа», но большинство из них доступны только для опытных пользователей.

Развернуть все

Цвета

Другие цвета, недоступные для класса css:

Текст и шрифты

intro_text, intro-text

жирный: жирный, box-title, box_title или просто используйте или

курсив: курсив или используйте < я>

подчеркнуть: не использовать .

allcaps: allcaps

size75, size80, size85, size95 (остальные удалены в RWD)

h3. Заголовок Bootstrap Вторичный текст

h4. Заголовок начальной загрузки Вторичный текст

h5. Заголовок Bootstrap Вторичный текст

h5. Заголовок Bootstrap Вторичный текст

h6. Заголовок Bootstrap Вторичный текст

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Вы можете использовать тег для выделения текста .

 
Тег mark можно использовать для выделения текста.
 

Текст с выравниванием по левому краю.

 
Текст с выравниванием по левому краю.
 

Текст с выравниванием по центру.

 
Выровненный по центру текст.
 

Текст с выравниванием по правому краю.

 
Текст с выравниванием по правому краю.
 

Обоснованный текст… Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed arcu quis orci convallis sollicitudin. Donec tincidunt ante id maximus eleifend.

Suspendisse eu quam pulvinar, rhoncus augue eu, euismod nibh. Mauris dui tellus, aliquet eu rutrum sed, feugiat tristique mauris. Aenean fermentum mi eget nisl tincidunt, nec commodo lacus fringilla. Vestibulum tortor nunc, rutrum a pretium ac, malesuada quis erat. Quisque vehicula nec neque nec sollicitudin.

 
Текст по ширине.
 

Без переноса текста… Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed arcu quis orci convallis sollicitudin. Donec tincidunt ante id maximus eleifend. Suspendisse eu quam pulvinar, rhoncus augue eu, euismod nibh. Mauris dui tellus, aliquet eu rutrum sed, feugiat tristique mauris. Aenean fermentum mi eget nisl tincidunt, nec commodo lacus fringilla. Vestibulum tortor nunc, rutrum a pretium ac, malesuada quis erat. Quisque vehicula nec neque nec sollicitudin.

 
Текст не переносится.
 

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
Тел. : (123) 456-7890

 <адрес>
  Twitter, Inc.

  795 Фолсом Авеню, Люкс 600

  Сан-Франциско, Калифорния 94107

  Телефон:  (123) 456-7890

 

Подробнее на сайте Weizhen

Классы семейств шрифтов

• ариал

Ниже нет специального кода CSS, но для справки:

• обычный (тело): font-family:opensansr,verdana,arial,sans-serif !important;
• свет: семейство шрифтов: opensansl, arial, без засечек
• полужирный: семейство шрифтов: opensansb, arial, без засечек;

Ссылки

• Обычная ссылка
• Класс: без подчеркивания
• Класс: подчеркивание при наведении
• Класс: ссылка (как обычная ссылка)
• Класс: hide-link-icon <--внешняя ссылка

быстрые ссылки-кнопки (по возможности используйте быстрые ссылки в Мегаблоке контента)

 
 
 
 
 
 
 
 php">Отзыв EMS
 
 
 
 
 
 
 

boxlink (примечание: не используйте в WYSIWYG, ссылка удаляется при отправке )

Запросить встречу

  
Запросить встречу 
 
  

Поля и отступы

Ширина и высота

Ширина

Проценты:

ширина20, ширина25, ширина30, ширина35, ширина40, ширина4 5, ширина50, ширина55, ширина50, ширина55, ширина60, ширина65, width70, width75, width80, width85, width90, width95, width200

пикселей:

width5px, width20px, width25px…. width2200px
max-width5, max-width20, max-width25…. max-wi дтх2000

Авто:

width-auto / width_auto

Mixed:

min200px_max50_left ({min-width:200px;max-width:50%;float:left;margin-right:10px})

900 06 Высота (только в пикселях ) 3

Высота строки (в процентах)

lheight80, lheight90, lheight95, lheight120, lheight125, lheight150, lheight200

Bootstrap Columns

 

Проценты на основе 12

пикселя относятся к размеру носителя, а не размера контейнера 0% ниже 1200 пикселей.

col-md-4 составляет 33,3%

при/выше 992px

и 100% ниже.

col-sm-3 составляет 25%

при/выше 768px

и 100%

ниже 768px.

col-xs-2

составляет 16,6%

при/выше 340 пикселей

и 100%

ниже

340px.

col-5xs-1

is

8,3%

at

/

выше

600px

и 90 003

100%

ниже

600

пикс.

col-4xs-12 и все 12 идут 100% на всех носителях.

col-4xs-6 и все 4xs

ломаются ниже 480px.

Подробнее здесь…

 

Поплавки и выравнивание

centerobject, aligncenter, center, centertable
leftobject, alignleft
rightobject, alignobject

Только RWD:

col-sm-push-4 (любое число 1-12), pull-left

col-sm-pull-4 (любое число 1-12), pull-right

col-sm-offset-4 (любое число 1-12)

 

Borderleft1, borderleft2 900 85 граница справа1, граница справа2

граница внизу1 , borderbottom2
noborder

Углы

round5, round7, round9
roundtop5, roundtop7, roundtop9
roundbottom5, roundbottom7, roundbottom9

Shadows

darkshadow3, darkshadow5
mediumshadow3, mediumshadow5
lightshadow 3, lightshadow5

Дисплей, Очистить, Горизонтальное правило

Дисплей

блок, inline-block, inline
hide, hidden (оба отображают значение «none»)

Clear

br. all (пример:
)
clr, clearfix

Horizontal Rule

тонкий (1px), средний (2px), светло-серый (например,

---

Изображения

Если возможно, используйте блок изображения в Мультимедиа Мегаблоке.

• img-responsive — если изображение большое, сжимается до размера div
• width200 — если изображение маленькое, расширяется до размера div
• imagerollover — используется для ссылок на изображения (также используйте класс hide-link-icon в , если это внешняя ссылка или файл)

Пример кода:

Таблица

Для простых таблиц, особенно тех, которые будут часто обновляться, используйте «simple-table » в Контентном Мегаблоке.

Подробно о работе с таблицами на сайте Каскад-Обучение.

Используемые классы:

• table table table-striped table-upstate — add for добавляет интервал между границами в 1 пиксель, отступы в 3 пикселя для ячеек
  table-head — добавить для первой строки, центральный и полужирный белый текст, фон color1, отступ 5px

  Дополнительные классы:

  • tvalignbottom, tvalignmiddle, tvaligntop — вертикальное выравнивание текста
  • taligncenter, talignleft, talignright — горизонтальное выравнивание текста
  • tcellpadding1 -> tcellpadding5 — добавить отступ внутри ячейки
  • tcellspacing1 -> tcellspacing5 — добавить расстояние между ячейками

  Пример кода:

  
   
     
       
       
     
     
       
       
       
       
     
     
       
        тд>
       
       
     
     
       
       
       
        9 0085    
     
       
       
       
       
      90 085    
       
       
       
           
     
   
  

  Буквы	Примеры
  A	Альберт Эйнштейн	Алабама	Аллигаторы
  B	Бетховен	Ботсвана	Батареи
  C	Чарльз Шульц	Калифорния	Классные комнаты
  D	Don Knots	Дания	Письменные столы
  E	Элла Фицджеральд	Европа	Уши

  Пример результата:

  Аккордеоны

  Если возможно, используйте блок аккордеона в Мегаблоке контента.

  Пример кода аккордеона:

  Раскрыть все 
   
   
    
  Бла-бла-бла
    
   
  Скрытый текст здесь
   
   
   

  Руководство по поддержке CSS для почтовых клиентов [+Контрольный список]

  История версий

  14 ноября 2017 г.

  В Outlook.com и приложении Outlook для iOS добавлена ​​поддержка фоновых изображений CSS и некоторых связанных свойств, а также определенных свойств Flexbox и Grid .

  Также в руководство добавлена ​​Почта iOS 11 без заметных отличий от iOS 10.

  22 сентября 2017 г.

  Microsoft обновила приложения Outlook для iOS и Android, добавив более согласованную поддержку CSS, включая медиа-запросы.

  13 сентября 2017 г.

  Полностью переработанный и измененный дизайн руководства, тестирование 278 различных свойств и функций CSS в 35 почтовых клиентах.

  Чтобы справиться с огромным увеличением контента, мы добавили функцию поиска и возможность напрямую ссылаться на отдельные почтовые клиенты и свойства для удобства обмена.
  Обсудите это в нашем блоге.

  2 мая 2014 г.

  Удалена поддержка различных параметров выбора (E) в Gmail и добавлена ​​поддержка направление , вертикальное выравнивание и тип списка в Outlook ’07/’10/’13.

  19 сентября 2013 г.

  Добавлена ​​поддержка тегов мультимедиа @font-face , @media и HTML 5 в почтовых клиентах, а также свойств CSS, относящихся к электронной почте. Мы повторно протестировали все клиенты веб-почты и последние версии существующих клиентов.

  30 января 2013 г.

  Outlook.com больше не поддерживает свойство CSS margin, включая margin-top , поле справа , поле внизу и поле слева . Поддержка float также была прекращена.

  17 июля 2012 г.

  Добавлена ​​предварительная версия Outlook 2013. Результаты теста CSS идентичны результатам Outlook 2007 и 2010.
  Подробности см. в записи блога.

  1 февраля 2012 г.

  background-image теперь поддерживается в Gmail.

  10 декабря 2010 г.

  Обновлено, чтобы отразить поддержку поля в Outlook.com.

  22 апреля 2010 г.

  В руководство добавлены результаты тестов нашего почтового клиента CSS3. Добавлено 21 новое свойство с разным уровнем поддержки в популярных почтовых клиентах. Примечательно, что клиенты Webkit были большими победителями, включая Apple Mail, iPhone Mail и вскоре iPad. На данном этапе CSS3 рекомендуется для декоративных целей в электронной почте (например, для добавления text-shadow ) из-за плохой поддержки свойств layout и box-model.
  Обсудите это в нашем блоге.

  6 августа 2009 г.

  Полностью переработанное руководство, включающее 7 новых мобильных почтовых клиентов с акцентом на самые популярные почтовые клиенты. Веб-версия руководства теперь содержит 10 самых популярных почтовых клиентов, а руководство в формате PDF включает все 23 протестированных почтовых клиента.