Руководство по улучшению селекторов и медиа запросов в PostCSS

Содержание материала:

Основы и настройки PostCSS

PostCSS — устройство, предназначенное для преобразования CSS стилей при помощи JavaScript плагинов. Такие плагины, как правило упрощают работу с CSS стилями, поддерживают переменные и миксины, все новое, что добавляется в CSS его разработчиками. Тем самым обеспечивают работу с CSS будущего, а также встроенные изображения и многое другое.

PostCSS уже используется индустрией лидеров, таких как: Google, Twitter, Alibaba, и Shopify.

Autoprefixer — плагин PostCSS, один из наиболее популярных CSS процессоров.

Плагины PostCSS

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

Решает глобальные проблемы CSS

  • postcss-use позволяет явно установить PostCSS плагины в CSS и выполнять их только для текущего файла.
  • react-css-modules позволяют автоматически изолировать селекторы внутри компонентов.
  • postcss-autoreset является альтернативой глобального сброса, который лучше для изолируемых компонентов.
  • postcss-initial добавляет all: initial поддержку, которая обнуляет все унаследованные стили.
  • cq-prolyfill добавлена поддержка контейнера запросов, для стилей, которые соответствуют ширине родительского узла.

Используйте CSS будущего, уже сегодня

  • autoprefixer добавялет вендорные префиксы, пользуясь правилом «Can I Use».
  • postcss-cssnext позволяет использовать функции будущего CSS уже сегодня (включая autoprefixer ).

Лучшая CSS читаемость

  • precss содержит плагины для Sass-подобных функций, таких, как переменные, вложенности, и миксины.
  • postcss-sorting сортирует содержание по правилам.
  • short добавляет и расширяет многочисленные условно заданные свойства.

Изображения и шрифты

  • postcss-assets вставляет размеры изображений и файлов.
  • postcss-sprites создает спрайты(sprites).
  • font-magician генерирует все @font-face правила, необходимые в CSS.
  • postcss-inline-svg позволяет встраивать SVG и настроить его стили.
  • postcss-write-svg позволяет написать простой SVG прямо в CSS.

Линтеры

  • stylelint представляет собой модульную таблицу стилей линтер.
  • doiuse линт CSS для поддержки браузером.
  • colorguard помогает вам поддерживать последовательную цветовую палитру.

Другие PostCSS плагины

  • lost является особенностью богатой calc() грид системы.
  • cssnano представляет собой модульный CSS Minifier.
  • rtlcss зеркала стилей для право-налево локалей.

Синтаксис postCSS

PostCSS может преобразовать стили в любой синтаксис, не только в CSS. Если еще нет поддержки для вашего любимого синтаксиса, Вы можете написать парсер и/или расширить PostCSS.

  • sugarss синтаксис на основе Sass или Stylus.
  • postcss-scss позволяет работать с SCSS(но не компилирует SCSS в CSS).
  • postcss-less позволяет работать с Less(но не компилирует LESS в CSS).
  • postcss-js позволяет писать стили в JS или преобразовать React встроенные стили, Radium или JSS.
  • postcss-safe-parser Находит и исправляет CSS ошибки синтаксиса.
  • midas преобразует CSS строку, в подсвеченный HTML.

Установка и использование PostCSS

Есть несколько способов начать использовать postCSS:

  1. Найти и добавить расширения PostCSS для инструментов сборки.
  2. Выбрать плагины и добавить их в свой процесс PostCSS.

Создание отзывчивых писем без медиа-запросов

Примечание переводчика: Представленный ниже материал содержит значительное количество технических терминов, при переводе которых могут возникнуть неточности. Если вы заметили опечатку, ошибку или неточность перевода — напишите нам, и мы оперативно всё исправим.

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

Но что, если бы вы могли построить шаблон, который был бы отзывчивым, даже в средах с бедной поддержкой современного CSS? Что если каждый раз, когда вы слышите о новом email приложении, которое все используют, вместо вздрагивания от страха вы могли бы чувствовать себя в безопасности, зная, что ваши письма выглядят достойно?

Метод, который я поддерживаю ниже, пригодится в качестве хорошего опыта для email-клиентов, которые не поддерживают медиа-запросы вообще.

Его называют резиновый гибридный (fluid-hybrid) метод, иногда — губчатый (spongy) метод почтовой разработки. Резиновая часть ссылается на то, что мы используем проценты. Гибридная часть от того, что мы также используем max-width, чтобы ограничить некоторые из наших элементов на больших экранах.

Шесть основных проблем, которые мы должны решить

1. Приложение gmail для android и IOS — боль

Это более популярное, чем дефолтное mail-приложение на Android, но Gmail не поддерживает медиа-запросы, на которые мы традиционно полагаемся, чтобы изменить размер и переформатировать наши письма для небольших экранов. Это статья покажет вам, как сделать письма отзывчивыми, которые отзывчивы даже в Gmail приложении.

2. Новые почтовые приложения выпускаются постоянно

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

3. Количество устройств с разным размером экрана практически безгранично

Мы имеем не только большие десктопы и маленькие смартфоны, есть также большие смартфоны и небольшие ноутбуки. Просто потому что кто-то имеет доступ к Gmail через свой ноутбук совсем не означает, что его экран достаточно большой, чтобы просматривать письма шириной 700px , и люди использующие iphone6+ могут справиться с двухколончатым макетом, но вместо этого обычно вырисовывается макет с одной колонкой. Эта статья покажет вам, как сделать макет, который будет подстраиваться под доступное пространство, даже в webmail.

4. Создание отзывчивого письма посредством td на мобильных устройствах не работает повсеместно

Некоторые почтовые клиенты (на IOS и даже некоторые нативные mail приложения на относительно старых версиях Android) не правильно группируют/складывают одну под другую (в одну колонку, см. ссылку) ячейки в одной и той же строке; будут сгруппированы (stack, https://www.emailonacid.com/blog/article/email-development/how_android_is_strangling_responsive_design/) только две отдельные таблицы. В этой статье используется совершенно другой метод, который полностью поддерживается всеми приложениями и устройствами. Обычно решением это проблемы является использование таблиц с атрибутами align=‛right‛ или align=‛left‛ , но это наводит нас на еще одну ловушку.

5. Когда используется метод выравнивания ( align ) для отзывчивой разработки, ваши таблицы группируются с выравниванием по левой или правой стороне в мобильных приложениях, которые не поддерживают медиа-запросы.

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

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

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

6. Когда вы используете выравнивание таблицы для отзывчивой разработки, вы теряете способность вертикально выравнивать контент в соседних колонках. (как связано?)

В этой статье будет также показано, как выровнять по вертикали две колонки в одной и той же строке по верху или по середине, как если бы они были в ячейках таблицы с атрибутом valign в одной и той же строке.

В этой статье используется «резиновый гибридный» метод, который позволяет вам выравнить ваши колонки по верху, середине или низу

1. Давайте приступим

Откройте пустой файл и сохраните его как index.html, затем скопируйте туда следующий код:

Давайте быстро пробежимся через все элементы в приведенном выше коде:

!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
этот DOCTYPE на мой взгляд лучший — с ним меньше всего проблем.

Дает нам поддержку для всех Unicode символов в нашем документе.

Используется затем, чтобы телефоны windows отображали нашу мобильную версию корректно. Код спрятан внутри условного комментария, который скрывает его от каких-либо других ‘mso’ (Microsoft Outlook) продуктов, чтобы предотвратить проблемы с изображениями: Windows Live Mail не будет отображать изображения при использовании этого тега.

Мы включили элемент title , хотя лучше оставить его пустым. Тег title требуется для валидации XHTML, но некоторые нативные почтовые клиенты Android будут отображать этот заголовок перед предзаголовком в предварительном просмотре почты, что не является идеальным.

Далее между и у нас есть условие CSS для Outlook, чтобы заставить его свернуть границы у всех таблиц и предотвратить нежелательные зазоры. Это правило нацелено на все версии Microsoft Outlook начиная с body мы, во-первых, имеем тег center , чтобы центрировать его контент и задать опору, по причине наличия нескольких глобальных CSS свойств (с тех пор как тег body часто ‛раздевают‛ в почтовых клиентах). Мы также имеем

2.Определяем стили

Затем создайте пустой CSS файл styles.css. В этот файл вставьте следующий код:

Здесь я обнуляю все поля и отступы у тега body , таблиц и ячеек таблицы и обнуляю любые границы, которые могут появиться у изображений. Наши стили для table и td занимают место атрибутов HTML cellpadding и cellspacing . Что использовать (атрибуты или стили) полностью зависит от вас; в прошлом я всегда использовала атрибуты HTML вместо CSS свойств там, где это возможно, однако при работе на более масштабных проектах я обнаружила, что определение стилей в CSS является более управляемым, особенно, если вы работаете на платформе, которая преобразует ваш CSS код во встроенный CSS.

Я обычно включаю min-width тегу body , чтобы избежать ситуаций, когда контент не принимает полную ширину на области просмотра мобильных устройств, и это всегда хорошая практика, чтобы установить цвет фона, даже если это белый цвет, чтобы избежать цвета обоев в Outlook или Lotus Notes.

Для элемента wrapper также есть несколько свойств для предотвращения странного поведения и изменением размеров у текста на Windows Phones and iOS, а также table-layout: fixed , чтобы обеспечить центрированному контенту актуальное центрирование в Yahoo mail. Мы устанавливаем max-width 600px нашему . webkit , чтобы ограничить содержимое в Apple Mail 6 (и ниже) и Outlook 2011.

3 Создание структуры у внешнего контейнера

Мы начнем с одного из ключевых строительных блоков для этого метода: условных таблиц для Outlook, которые скрыты от других клиентов. Нам требуется это потому, что мы будем использовать свойство max-width , которое не поддерживается Outlook. Поэтому нам требуется создать таблицы специально для Outlook с явной пиксельной шириной, чтобы заключить все в Outlook.

Используем «условные» таблицы для Outlook, так как Outlook не поддерживает свойство max-width .

Таким образом в нашем HTML файле давайте удалим [content goes here] и вставим в следующий код. Я придерживаюсь правила выравнивать условные комментарии по левому краю, но вы можете форматировать их как угодно.

Примечание: здесь нет стилей для ‛условных‛ таблицах. Я собираюсь использовать инструмент inliner.cm, который также встраивает стили внутрь ‛условных‛ таблиц. Если вы собираетесь использовать другой инструмент, то он может не делать этого, так что удостоверьтесь, что ваш инструмент добавляет cellpadding=»0″ cellspacing=»0″ border=»0″ в ваши условные Outlook таблицы.

Внутри условных таблиц вы можете увидеть элемент

, который является ключевым внешним блоком для всех клиентов кроме Outlook.

Мы хотим, чтобы эта внешняя таблица имела 100% ширину на маленьких экранах, но на больших экранах максимальная ширина должна быть 600px . Поэтому нам необходимо установить ширину в 100% и задать max-width 600px .

Ширина нашей таблицы равна 100% , пока она не достигет 600px .

Итак вставьте следующий код в наш styles.css:

Мы также имеем объявление Margin: 0 auto; с целью центрировать таблицу в Yahoo при просмотре в Chrome. Хотя margin применяется ради Yahoo, я всегда пишу Margin с заглавной буквы, таким образом Outlook не сможет его обрезать; за этот хак спасибо – ссылка.

Сейчас мы имеем внешнюю структуру, самое время перейти к добавлению контента.

4. Добавление баннера на всю ширину

Во-первых, скачайте файлы статьи и переместите директорию /images в ту же папку, где у вас лежит index.html.

Сейчас давайте добавим класс full-width-image к td внутри нашей таблицы .outer , затем заменим наш заполнитель [content goes here] на тег img , таким образом наша таблица выглядит так:

Ширина для изображения задана в пикселях и в HTML, таким образом Outlook будет отображать изображение корректно, но нам необходимо перезаписать ширину в CSS на 100% , чтобы изображение могло свободно менять размер в других клиентах.

Мы также установили max-width в соответствии с px шириной, которая установлена в HTML ( 600px ) так как Windows Phone не всегда хороши, когда max-width установлено 100% . Мы установили высоте auto , чтобы наше изображение не ‛разваливалось‛ при ошибочном соотношении сторон (aspect ratio). (метод).

5. Добавляем одинарною колонку

Добавьте строку к outer таблице со следующей разметкой:

И следующие стили в наш CSS файл:

Отметьте, что я использую тег p и набор классов для его стилизации. Мне нравится использовать параграф, чтобы стилизовать текст, и вы можете управлять им достаточно легко, благодаря хаку с М, который я упоминал выше. Также я использую класс .h1 вместо тега h1 , так как Outlook имеет h1 , h2 и h3 стили, которые всегда переопределяют ваши стили.

Таким образом в CSS выше мы создали 10px padding для нашей колонке, мы сбросили все поля для параграфов, установили базовые стили для ссылок и задали классы .h1 , .h2 , затем выровняли тест по левому краю и стилизовали параграфы.

6. Добавляем двухколончатый макет*

* который может быть центрирован в случае стека (см. скрин ниже).

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

Для начала добавьте новую строку в table.outer . Она содержит ячейку с классом .two-column , внутри которого расположены ‛условные‛ таблицы для Outlook с двумя колонками шириной в 50% :

Эти условные колонки важны так как без них Outlook не позволит расположить ваши 2 таблицы бок о бок. Outlook не поддерживает max-width , поэтому эти колонки помогут ограничить каждый столбец до корректного размера.

Сейчас замените каждый [content goes here] заменитель на следующий:

Мы собираемся расположить две колонки на больших десктопах и получить центрированный стек (одна под другой) на мобильных устройствах, используя комбинацию text-align: center и display: inline-block . Все строчные и строчно-блочные элементы подчиняются свойству text-align . Поэтому, если мы обернем наши таблицы в div , которому установлено inline-block , мы сможем легко установить нужное выравнивание при стеке, задав свойство text-align на контейнере. Вы можете выравнивать как угодно и inline-block подчинится. Вы можете обозначить таблицу как inline-block , но только если вы не будете вкладывать внутрь другие таблицы. Вещи могут начать вести себя странно, если вы начнете вкладывать таблицы внутрь inline-block таблиц, поэтому если вам нужна вложенность всегда используйте inline-block для div .

Давайте стилизуем наш контейнер (ячейку) .two-column с выбранным нами выравниванием. Мы также собираемся добавить font-size: 0 , чтобы избавиться от пробелов между колонками (нашими inline-block элементами) внутри ячейки.

Сейчас давайте стилизуем наши inline-block div, которые фактически являются колонками.

Мы используем ширину 100% с max-width 300px , таким образом колонка будет иметь 100% ширину на экранах с областью просмотра ниже 300px .

Вы можете установить vertical-align (для вертикального выравнивания) что угодно: top , center или bottom . vertical-align:top означает, что каждая колонка как будто является ячейкой таблицы со свойством HTML valign=‛top‛ ; middle как будто имеет valign=‛middle‛ . Отметьте, что вы можете иметь много строк из этих div внутри одной и той же ячейки и вертикальное выравнивание будет всегда диктоваться вертикальным выравниванием на row-by-row основе. Это довольно изящно. Также, чтобы подстраховаться, так как Outlook не понимает свойство vertical-align , задайте в ‛условных‛ таблицах нужное значение для атрибута valign .

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

Давайте наши два [content goes here] на следующий код:

Каждая колонка ( .inner ) имеет 300px ширину с 10px отступом с каждой стороны, оставляя 280px для изображения.

Далее стилизуем класс .contents задав 100% ширину.

И затем давайте добавим наши стили двухколончатому макету: поставим размер текста, выравнивание, обеспечим изображению 100% ширину, добавим тексту небольшой верхний отступ.

Теперь вы имеетe двухколончатый макет, который складывается вертикально, когда вы меняете размер браузера или, когда ваша область просмотра уже чем 300px .

7. Добавляем трехколончатый макет

Снова мы собираемся создать расположенные рядом колонки, которые складываются на мобильных устройствах посредством комбинации text-align: center и display: inline-block .

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

Пример стека из трех колонок, при использовании text-align: center у контейнера.

Пример стека из трех колонок, при использовании text-align: left у контейнера.

Таким образом мы повторяем двухколончатый процесс с дополнительной колонкой. Добавьте новую строку в таблицу .outer . (Обычно я предпочитаю использовать ширину в % для ячеек в моей ‛Условной‛ Outlook таблицах, но в этом случае проще установить ширину каждой в 200px ).

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

Сейчас давайте вставим наши колонки заменив заполнитель [content goes here].

Вот и все. Теперь вы должны иметь трехколончатый макет, где колонки будут складываться на узких экранах.

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

Добавляем трехколончатый макет с несколькими строками

Когда вы хотите добавить несколько строк в ваш макет, вы можете добавить сколько угодно inline-block элементов к контейнеру ячейки. Ниже вы можете увидеть, что на узких экранах идет простое переформатирование колонок.

Хотя вам не требуется разделять сроки div-ов для большинства клиентов, вам потребуется добавить дополнительный

к вашей ‛условной‛ таблице в Outlook.

Здесь вы можете увидеть как в ‛условной‛ таблице был добавлен новый ряд, который содержит три дополнительных ячейки каждая шириной в 200px .

Далее добавим таблицу, заменив заполнитель [content goes here] у каждой ‛условной‛ ячейки.

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

Еще больше колонок

Вы можете иметь столько колонок сколько хотите, но не забывайте о том, что ширина блоков должна быть равна ширине контейнера и не забывайте об ‛условных‛ таблицах для Outlook.

8. Добавляем двухколончатый ‛Sidebar‛ макет

Далее мы создадим двухколончатый макет с 500px колонкой и затем 100px sidebar для иконки.

Во-первых, добавим строку и ячейку с классом .left-sidebar и внутри ячейки расположим ‛условную‛ таблицу для Outlook, которая имеет простую строку и две неравные колонки.

Примечание: здесь я использую несколько классов для одного элемента. Некоторые inliner инструменты не поддерживают это, поэтому сперва проверьте вашу систему или платформу. Как уже говорилось выше, я использую inliner.cm, чтобы встроить свой CSS, который поддерживает множественные классы.

В первую колонку добавьте таблицу, которая содержит нашу иконку:

Во вторую колонку добавьте таблицу с текстом и ссылкой:

Эти таблицы просты и не имеют никаких вложений, чтобы сэкономить на разметке я собираюсь установить таблицам display: inline-block , а не оборачивать их в div . Как говорилось выше, эта практика имеет смысл только когда вы используете много вложенных элементов. Если вы будете использовать много вложений, оберните таблицу в div и вставьте .column .right в него.

Теперь давайте стилизуем контейнер и настроим колонки:

Наконец, давайте настроим текст и цвет ссылки:

Теперь вы должны иметь левую колонку и когда вы уменьшите окно вашего браузера, иконка центрируется и встанет выше текста.

9. Добавляем перевернутый sidebar

Теперь расположим текст по левой стороне, а иконку по правой. Но порядок расположения иконки и текста на мобильных устройствах оставим тем же.

Во-первых, мы собираемся скопировать и вставить весь ряд с нашей .left-sidebar ячейкой, и единственное что мы поменяем это класс .left-sidebar на .right-sidebar .

Остальное все также.

Что мы собираемся делать это использовать dir=‛rtl‛ (означает направление справа налево) к нашей выгоде. Это свойство используется для алфавитов, которые работают справа налево, такие как арабский. Но в нашем случае это используется для того, чтобы рассказать почтовым клиентам о том, что необходимо отображать элементы в обратном порядке.

Во-первых, контейнеру ( .right-sidebar ) необходимо добавить dir=‛rtl‛ . Этим мы отображаем наши таблицы справа налево. Таким образом наш открывающий тег должен выглядеть так:

Затем в Outlook условных комментариях, нам также потребуется добавить dir=‛rtl‛ таблице, так как мы говорим таблице отобразить

в обратном порядке.

Таким образом начало у наших условных комментариев должно выглядеть так:

Наконец, нам потребуется добавить dir=‛ltr‛ к .column-left и .column-right таблицам, так как внутри них есть контент (англ. Текст, который требует слева направо). Если мы не сделаем это, то они будут наследовать направление от родителя — справа налево.

Итак колонки .column-left и .column-right должны выглядеть так:

Таким образом наша полная строка должна выглядеть так:

Наконец добавим стили, которые почти те же, что и у .left-sidebar , кроме цвета ссылки.

10. Прогрессивное улучшение с медиа-запросами

Сейчас у вас есть полный email шаблон, который отзывчив везде без медиа-запросов. Но, конечно, есть немало почтовых клиентов, которые поддерживают медиа-запросы, таким образом мы можем сделать прогрессивное улучшение для таких клиентов как IOS Mail.

Во-первых, для всех столбцов сделаем ширину 100% при области просмотра уже 400px . Для трех колонок у изображений установим ширину в 50% ; для двух в 100% . Для колонок переопределяем лишь max-width , так как именно она ограничивает ширину.

Итак добавьте следующий CSS:

Между 401px и 600px добавим следующий код, чтобы сделать появление двух и трех колонок более отзывчивым.

11. Встраивание вашего кода

Если ваша потовая платформа не заботится о встраивании для вас, то вам потребуется сделать это вручную. Во-первых, уберите тег
в вашего документа и замените его на . Скопируйте содержимое style.css и вставьте его в элемент . Наконец, скопируйте и вставьте полный файл в inliner.cm и дождитесь результата. После окончания результат скопируйте контент и вы готовы к работе.

Несколько финальных замечаний и подсказок

Бывает непорядок, когда имеются различные отступы у различных колонок. В примере выше вы можете отметить класс .inner , который используется для 10px отступов к каждому макету. Это важно, так как когда складывается стек на мобильных устройствах вы задумываете, чтобы все было однородным.

Для модернизации определенных проектов этот метод может быть довольно сложным.

Безусловно есть определенные места, для которых можно выйти за пределы 600px (но не для Outlook).

Не нужно использовать объявление CSS в HTML-теге , как часто делают при вёрстке веб-страниц. Вместо этого объявление нужно разместить сразу за тегом — однако Gmail ищет любые теги style в письме и удаляет их.

Кроме того стоит рассмотреть вариант, при котором изображение становится фоном для новой HTML-таблицы, которая заключает в себе все строки и столбцы той таблицы, в которой будут отображаться части картинки. Этим можно добиться такого же эффекта, как при «нарезке» изображения при меньшем количестве кода. Нужно помнить, что Outlook 2007 не показывает фоновые изображения — всегда важно тестировать письмо на наиболее важном и популярном у подписчиков почтовом сервисе.

Тестируем

Первыми средствами тестирования писем являются браузеры Firefox и Internet Explorer. Если сообщение хорошо выглядит в них, то велик шанс на то, что и в клиентах вроде Outlook, Yahoo, Gmail и других с ним не будет больших проблем. Если это возможно, следует даже пойти дальше и протестировать письмо в IE 6 — это позволит увидеть, как письмо будет «рендериться» в Outlook 2003. Чтобы примерно понять, как письмо будет показываться на iPhone и iPad нужно протестировать его в Safari.

Как объединить медиа-запросы SASS?

Есть 4 медиа-запроса для ширины экранов. Допустим я хочу применить к определенному размеру экрана определенное свойство SASS к определенному селектору. Как сделать так, чтобы в конечном CSS оставалось 4 медиа-запроса, а не «спагетти» из медиа-запросов?

SASS файл:

Конечный CSS:

А надо вот так (под каждый экран):

1 ответ 1

Нашел решение от aaronjensen. Библиотека собирает кучу медиа-запросов в один при компиляции.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css sass scss или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

Как работать с CSS-препроцессорами и БЭМ

Список рекомендаций по неусложнению жизни себе и другим участникам проекта по вёрстке.

Содержание

Sass, LESS, stylus, PostCSS.

Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, пожалуйста, создайте issue на GitHub или форкните репозиторий и пришлите pull request.

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

Золотые правила

Cоблюдайте предложенные здесь или свои собственные соглашения.

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

  1. Весь код проекта должен выглядеть так, словно он написан одним человеком, вне зависимости от количества разработчиков.
  2. Делать нужно настолько просто, насколько возможно. Но не проще.
  3. Любой инструмент при бездумном использовании может выстрелить в ногу.

БЭМ (как метод именования селекторов)

Зачем

  • Самодокументируемость.
  • Имитация пространства имён (простота и безопасность модификации).
  • Отсутствие зависимости от DOM-структуры.
  • Проектное реиспользование блоков.
  • Кросспроектное реиспользование блоков.

Само понятие БЭМ — не только метод именования селекторов, но парадигма восприятия проекта как набора сущностей (блоки, элементы, модификаторы). Полный стек БЭМ подразумевает двойную шаблонизацию и имеет относительно высокий порог входа. Используйте БЭМ хотя бы как способ именования селекторов.

Блок — это самостоятельная часть страницы

  • Название класса должно быть простым и коротким.
  • Название класса должно отвечать на вопрос «Что это?»
  • Не используйте сокращения кроме наиболее частых
  • Название не должно отвечать на вопрос «Как выглядит?»

Блоки можно и нужно вкладывать друг в друга

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

Элемент — часть БЭМ-блока

  • Название класса формируется из названия блока с добавлением __ и названия элемента.
  • Название класса должно быть простым и коротким.
  • Название класса должно отвечать на вопрос «Что это?»
  • Избегайте сокращений, кроме наиболее частых.
  • Название не должно отвечать на вопрос «Как выглядит?»

Элемент можно использовать вне его блока только в исключительных случаях

Элемент — часть блока, но, поскольку, БЭМ-дерево независимо от HTML-дерева, элемент можно использовать и вне его блока в некоторых исключительных условиях (сам блок должен быть на странице).

Пример: расположение попапа-элемента не внутри блока-родителя, а в самом конце DOM (дабы показывать попап независимо от ограничения видимости родителей).

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

Почему нельзя просто так располагать элемент вне блока:

  • теряется логика разметки,
  • сложно стилизовать элементы, которые могут оказаться где угодно (float, абс. позиционирование и некоторые другие стили такого элемента могут «сломать» верстку).

Элементов может не быть

Не у всех блоков должны быть элементы: кнопка — всегда БЭМ-блок, но БЭМ-элементы у неё внутри встречаются относительно редко.

Как отличить БЭМ-блок и БЭМ-элемент

Просто задайте себе вопрос: «Эта сущность может потребоваться мне отдельно, сама по себе? Или она нужна только внутри её родителя?» Если нужна отдельно — это БЭМ-блок, если мыслима только внутри родителя — это БЭМ-элемент.

В действительно сомнительных случаях делайте выбор в пользу БЭМ-блока.

Не забывайте о миксовании (возможности иметь на одном теге и класс уровня БЭМ-элемента какого-то родительского блока, и свой класс уровня БЭМ-блока).

На всех проектах (кроме совсем уж крошечных или имеющих гарантировано нулевую возможность модификации) есть фрагменты дизайна, которые мудро всегда делать БЭМ-блоками по причине высокой вероятности повторения.

Некоторые фрагменты дизайна — всегда БЭМ-блоки

  • Кнопка (любые кнопки)
  • Блоки внутри форм (блок для текстового поля, блок для радиокнопки и т.п.)
  • Пагинация
  • Табы
  • Лейблы (метки)
  • Социальные ссылки
  • «Лайк» со счётчиком

Модификатор — дополнительный класс для смены оформления или поведения

  • Название класса формируется из названия блока/элемента с добавлением — и названия модификатора.
  • Название должно быть простым и коротким.
  • Название класса может отвечать на вопросы «Что это?», «Что меняется?», «Чем отличается от прочих?»
  • Избегайте сокращений, кроме наиболее частых.

Модификатор нельзя использовать самостоятельно

Класс модификатор никогда не должен использоваться самостоятельно, но всегда только с тем классом, который он модифицирует.

Миксование — комбинирование на одном теге классов БЭМ-блока и БЭМ-элемента

Комбинация возможна в любом сочетании: БЭМ-блок + БЭМ-элемент, БЭМ-блок + БЭМ-блок, БЭМ-элемент + БЭМ-элемент. Этот подход позволяет:

  • Добавить некоторые стилевые свойства, необходимые только в месте добавления (использование модификатора нерационально). Пример: для .btn внутри .page-header необходим внешний левый отступ в 37 пикс. Можно дописать для тега с .btn дополнительный класс .page-header__btn и дать отступ с помощью этого селектора. Это нормальная практика, её можно спокойно использовать.
  • Объединить стилизацию 2-х и более блоков. Пример: для .article и для .page-footer__section шрифтовые свойства одинаковы. Можно вынести определение шрифтовых свойств в новый блок .text и дописать этот класс на .article и .page-footer__section . Этот подход излишне связывет части страницы (напоминает OOCSS и класс-хелпер), не делайте так.
  • Обойтись без тега-обёртки с добавляемым селектором. Пример: страница каталога, 7+ товаров в потоке, каждый товар — .product , но каждому элементу потока нужны стилевые свойства ячеек модульной сетки (по которой выстроен потоковый вывод). Можно добавить для .product класс ячейки модульной сетки, что бы не делать обертку с этим классом. Это чревато конфликтом отступов/размеров, не смешивайте на одном теге классы обёртки и содержимого.

Классы БЭМ-блоков следует писать первыми.

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

Один БЭМ-блок = один файл

В файловой системе при работе с CSS-препроцессорами каждый БЭМ-блок должен быть описан в своём отдельном файле.

БЭМ-дерево плоское, в отличие от DOM

В классах БЭМ-элементов нельзя прописывать иерархию (два и более сегмента __ недопустимы).

Sass, LESS, Stylus, PostCSS.

Файловая организация

  • Один БЭМ-блок = один препроцессорный файл. Всегда.
  • Файл со стилизацией БЭМ-блока должен называться так же, как сам блок.
  • Используйте «генераторы блоков» (простой пример, пример посложнее) для ускорения работы.

@import

  • Компилируйте один файл (диспетчер подключений), в котором подключаются все прочие.
  • Импортируйте файлы только в диспетчере подключений (допустимо импортировать примеси внутри отдельного файла, например, mixins.scss ).
  • Не пишите никаких селекторов в диспетчере подключений.
  • Не импортируйте файлы внутри медиа-условий.
  • Один БЭМ-блок = один препроцессорный файл. Всегда.

Вложения селекторов

  • Чем меньше уровней вложенности, тем лучше.
  • Не допускайте более 3-х уровней вложенности (псевдоэлемены, псевдоселекторы и медиа-условия не считаются увеличивающими вложенность).
  • Осторожно используйте жесткое наследование.
  • Всегда оставляйте пустую строку перед вложенным селектором или @media .
  • Всегда делайте дополнительный отступ для вложений.

@media

  • Вкладывайте @media в селекторы, а не наоборот.
  • Не вкладывайте @media друг в друга.
  • Предпочтите путь mobile-first, избегайте указания @media -условия max-width в пользу min-width.
  • Пишите @media рядом, не пишите селекторы между ними.
  • Пишите условия для @media там, где используете @media , не пишите условия в переменных.

Амперсанд

  • Используйте амперсанд только перед:
    • разделителем БЭМ-элемента,
    • разделителем БЭМ-модификатора,
    • псевдоэлементом или псевдоселектором.
  • Никогда не используйте амперсанд в местах разделения словосочетаний имён блоков, элементов или модификаторов (см. пример).
  • Никогда не повторяйте написанный с амперсандом селектор внутри одного контекста.

Очередность написания в контексте селектора

В контексте селектора используйте следующую очередность:

  1. Стилевые правила для этого селектора.
  2. @media этого контекста.
  3. Псевдоселекторы и псевдоэлементы.
  4. Вложенные сторонние селекторы.
  5. БЭМ-элементы.
  6. БЭМ-модификаторы.

Руководство по улучшению селекторов и медиа запросов в PostCSS

PostCSS Custom Media

PostCSS Custom Media lets you use Custom Media Queries in CSS, following the CSS Media Queries specification.

Use PostCSS Custom Media to process your CSS:

Or use it as a PostCSS plugin:

PostCSS Custom Media runs in all Node environments, with special instructions for:

The preserve option determines whether custom media and atrules using custom media should be preserved in their original form.

The importFrom option specifies sources where custom media can be imported from, which might be CSS, JS, and JSON files, functions, and directly passed objects.

Multiple sources can be passed into this option, and they will be parsed in the order they are received. JavaScript files, JSON files, functions, and objects will need to namespace custom media using the customMedia or custom-media key.

The exportTo option specifies destinations where custom media can be exported to, which might be CSS, JS, and JSON files, functions, and directly passed objects.

Multiple destinations can be passed into this option, and they will be parsed in the order they are received. JavaScript files, JSON files, and objects will need to namespace custom media using the customMedia or custom-media key.

See example exports written to CSS, JS, MJS, and JSON.

Руководство по улучшению селекторов и медиа запросов в PostCSS

If page speed is important to you chances are high you’re already doing code splitting. If your CSS is built mobile-first (in particular if using a framework such as Bootstrap or Foundation) chances are also high you’re loading more CSS than the current viewport actually needs.

It would be much better if a mobile user doesn’t need to load desktop specific CSS, wouldn’t it?

That’s the use case I’ve written this PostCSS plugin for! It lets you extract all @media rules from your CSS and emit them as separate files which you can load as
or as dynamic import.

Before

After

  • example-desktop.css

Simply add the plugin to your PostCSS config. If you’re not familiar with using PostCSS you should read the official PostCSS documentation first.

You can find complete examples here.

option default
output.path path.join(__dirname, ‘..’)
output.name ‘[name]-[query].[ext]’
queries <>
combine true
stats true
entry null

By default the plugin will emit the extracted CSS files to your root folder. If you want to change this you have to define an absolute path for output.path .

Apart from that you can customize the emited filenames by using output.name . [name] is the filename of the original CSS file, [query] the key of the extracted media query and [ext] the orignal file extension (mostly css ). Those three placeholders get replaced by the plugin later.

вљ пёЏ by emiting files itself the plugin breaks out of your bundler / task runner context meaning all your other loaders / pipes won’t get applied to the extracted files!

By default the params of the extracted media query is converted to kebab case and taken as key (e.g. screen-and-min-width-1024-px ). You can change this by defining a certain name for a certain match. Make sure it exactly matches the params (see example below).

By default the plugin extracts all media queries into separate files. If you want it to only extract the ones you’ve defined a certain name for (see queries option) you have to set this option false . This ignores all media queries that don’t have a custom name defined.

The same media rules will probably appear several times in your original CSS file. This happens when you develop a CSS component and don’t want to define the responsive behavior in another file / context.

By default the plugin will merge equal media rules into one after the extraction so you’ve got finally only one media rule per file. In case you don’t want this merge (for whatever reason) you can disable it by setting this option false .

Since the emited, extracted files are outside of the bundler / task runner context your possibly defined CSS minification doesn’t take effect. To minimize the emited files as well you have to set this option true.

By default the plugin displays in your terminal / command prompt which files have been emited. If you don’t want to see it just set this option false .

By default the plugin uses the from value from the options of the loader or of the options you define in postcss().process(css, < from: . >) . Usually you don’t need to change it but if you have to (e.g. when using the plugin standalone) you can define an absolute file path as entry.

If you’re using webpack you should use media-query-plugin which is built for webpack only and thus comes with several advantages such as applying all other loaders you’ve defined and hash support for caching.

If this plugin is helpful to you it’ll be great when you give me a star on github and share it. Keeps me motivated to continue the development.

Как работать с CSS-препроцессорами и БЭМ

Список рекомендаций по неусложнению жизни себе и другим участникам проекта по вёрстке.

Содержание

Sass, LESS, stylus, PostCSS.

Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, пожалуйста, создайте issue на GitHub или форкните репозиторий и пришлите pull request.

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

Золотые правила

Cоблюдайте предложенные здесь или свои собственные соглашения.

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

  1. Весь код проекта должен выглядеть так, словно он написан одним человеком, вне зависимости от количества разработчиков.
  2. Делать нужно настолько просто, насколько возможно. Но не проще.
  3. Любой инструмент при бездумном использовании может выстрелить в ногу.

БЭМ (как метод именования селекторов)

Зачем

  • Самодокументируемость.
  • Имитация пространства имён (простота и безопасность модификации).
  • Отсутствие зависимости от DOM-структуры.
  • Проектное реиспользование блоков.
  • Кросспроектное реиспользование блоков.

Само понятие БЭМ — не только метод именования селекторов, но парадигма восприятия проекта как набора сущностей (блоки, элементы, модификаторы). Полный стек БЭМ подразумевает двойную шаблонизацию и имеет относительно высокий порог входа. Используйте БЭМ хотя бы как способ именования селекторов.

Блок — это самостоятельная часть страницы

  • Название класса должно быть простым и коротким.
  • Название класса должно отвечать на вопрос «Что это?»
  • Не используйте сокращения кроме наиболее частых
  • Название не должно отвечать на вопрос «Как выглядит?»

Блоки можно и нужно вкладывать друг в друга

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

Элемент — часть БЭМ-блока

  • Название класса формируется из названия блока с добавлением __ и названия элемента.
  • Название класса должно быть простым и коротким.
  • Название класса должно отвечать на вопрос «Что это?»
  • Избегайте сокращений, кроме наиболее частых.
  • Название не должно отвечать на вопрос «Как выглядит?»

Элемент можно использовать вне его блока только в исключительных случаях

Элемент — часть блока, но, поскольку, БЭМ-дерево независимо от HTML-дерева, элемент можно использовать и вне его блока в некоторых исключительных условиях (сам блок должен быть на странице).

Пример: расположение попапа-элемента не внутри блока-родителя, а в самом конце DOM (дабы показывать попап независимо от ограничения видимости родителей).

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

Почему нельзя просто так располагать элемент вне блока:

  • теряется логика разметки,
  • сложно стилизовать элементы, которые могут оказаться где угодно (float, абс. позиционирование и некоторые другие стили такого элемента могут «сломать» верстку).

Элементов может не быть

Не у всех блоков должны быть элементы: кнопка — всегда БЭМ-блок, но БЭМ-элементы у неё внутри встречаются относительно редко.

Как отличить БЭМ-блок и БЭМ-элемент

Просто задайте себе вопрос: «Эта сущность может потребоваться мне отдельно, сама по себе? Или она нужна только внутри её родителя?» Если нужна отдельно — это БЭМ-блок, если мыслима только внутри родителя — это БЭМ-элемент.

В действительно сомнительных случаях делайте выбор в пользу БЭМ-блока.

Не забывайте о миксовании (возможности иметь на одном теге и класс уровня БЭМ-элемента какого-то родительского блока, и свой класс уровня БЭМ-блока).

На всех проектах (кроме совсем уж крошечных или имеющих гарантировано нулевую возможность модификации) есть фрагменты дизайна, которые мудро всегда делать БЭМ-блоками по причине высокой вероятности повторения.

Некоторые фрагменты дизайна — всегда БЭМ-блоки

  • Кнопка (любые кнопки)
  • Блоки внутри форм (блок для текстового поля, блок для радиокнопки и т.п.)
  • Пагинация
  • Табы
  • Лейблы (метки)
  • Социальные ссылки
  • «Лайк» со счётчиком

Модификатор — дополнительный класс для смены оформления или поведения

  • Название класса формируется из названия блока/элемента с добавлением — и названия модификатора.
  • Название должно быть простым и коротким.
  • Название класса может отвечать на вопросы «Что это?», «Что меняется?», «Чем отличается от прочих?»
  • Избегайте сокращений, кроме наиболее частых.

Модификатор нельзя использовать самостоятельно

Класс модификатор никогда не должен использоваться самостоятельно, но всегда только с тем классом, который он модифицирует.

Миксование — комбинирование на одном теге классов БЭМ-блока и БЭМ-элемента

Комбинация возможна в любом сочетании: БЭМ-блок + БЭМ-элемент, БЭМ-блок + БЭМ-блок, БЭМ-элемент + БЭМ-элемент. Этот подход позволяет:

  • Добавить некоторые стилевые свойства, необходимые только в месте добавления (использование модификатора нерационально). Пример: для .btn внутри .page-header необходим внешний левый отступ в 37 пикс. Можно дописать для тега с .btn дополнительный класс .page-header__btn и дать отступ с помощью этого селектора. Это нормальная практика, её можно спокойно использовать.
  • Объединить стилизацию 2-х и более блоков. Пример: для .article и для .page-footer__section шрифтовые свойства одинаковы. Можно вынести определение шрифтовых свойств в новый блок .text и дописать этот класс на .article и .page-footer__section . Этот подход излишне связывет части страницы (напоминает OOCSS и класс-хелпер), не делайте так.
  • Обойтись без тега-обёртки с добавляемым селектором. Пример: страница каталога, 7+ товаров в потоке, каждый товар — .product , но каждому элементу потока нужны стилевые свойства ячеек модульной сетки (по которой выстроен потоковый вывод). Можно добавить для .product класс ячейки модульной сетки, что бы не делать обертку с этим классом. Это чревато конфликтом отступов/размеров, не смешивайте на одном теге классы обёртки и содержимого.

Классы БЭМ-блоков следует писать первыми.

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

Один БЭМ-блок = один файл

В файловой системе при работе с CSS-препроцессорами каждый БЭМ-блок должен быть описан в своём отдельном файле.

БЭМ-дерево плоское, в отличие от DOM

В классах БЭМ-элементов нельзя прописывать иерархию (два и более сегмента __ недопустимы).

Sass, LESS, Stylus, PostCSS.

Файловая организация

  • Один БЭМ-блок = один препроцессорный файл. Всегда.
  • Файл со стилизацией БЭМ-блока должен называться так же, как сам блок.
  • Используйте «генераторы блоков» (простой пример, пример посложнее) для ускорения работы.

@import

  • Компилируйте один файл (диспетчер подключений), в котором подключаются все прочие.
  • Импортируйте файлы только в диспетчере подключений (допустимо импортировать примеси внутри отдельного файла, например, mixins.scss ).
  • Не пишите никаких селекторов в диспетчере подключений.
  • Не импортируйте файлы внутри медиа-условий.
  • Один БЭМ-блок = один препроцессорный файл. Всегда.

Вложения селекторов

  • Чем меньше уровней вложенности, тем лучше.
  • Не допускайте более 3-х уровней вложенности (псевдоэлемены, псевдоселекторы и медиа-условия не считаются увеличивающими вложенность).
  • Осторожно используйте жесткое наследование.
  • Всегда оставляйте пустую строку перед вложенным селектором или @media .
  • Всегда делайте дополнительный отступ для вложений.

@media

  • Вкладывайте @media в селекторы, а не наоборот.
  • Не вкладывайте @media друг в друга.
  • Предпочтите путь mobile-first, избегайте указания @media -условия max-width в пользу min-width.
  • Пишите @media рядом, не пишите селекторы между ними.
  • Пишите условия для @media там, где используете @media , не пишите условия в переменных.

Амперсанд

  • Используйте амперсанд только перед:
    • разделителем БЭМ-элемента,
    • разделителем БЭМ-модификатора,
    • псевдоэлементом или псевдоселектором.
  • Никогда не используйте амперсанд в местах разделения словосочетаний имён блоков, элементов или модификаторов (см. пример).
  • Никогда не повторяйте написанный с амперсандом селектор внутри одного контекста.

Очередность написания в контексте селектора

В контексте селектора используйте следующую очередность:

  1. Стилевые правила для этого селектора.
  2. @media этого контекста.
  3. Псевдоселекторы и псевдоэлементы.
  4. Вложенные сторонние селекторы.
  5. БЭМ-элементы.
  6. БЭМ-модификаторы.

Группировка селекторов. Назначение псевдо-класса :extend() в Less

Проще говоря, псевдокласс :extend() автоматизирует следующий процесс:

  1. Отыскать селекторы с одинаковыми свойствами.
  2. Выбрать базовый селектор.
  3. Перечислить все найденные селекторы в объявлении базового селектора.
  4. Все новые селекторы добавить в список селекторов базового объявления.

Появилось в v1.4.0

В указанном выше правиле селектор :extend будет применять «расширяющий селектор» ( nav ul ) на класс .inline где бы ни появился класс .inline. Блок декларации останется как есть, без каких-либо ссылок к расширению (т.к. расширение – это не CSS).

В результате получим:

Обратите внимание, как селектор nav ul:extend(.inline) преобразовывается на выходе как nav ul — расширение удаляется перед выводом, а блок селектора остается неизменным. Если в тот блок не вложено никаких свойств, он удаляется из вывода (но расширение по-прежнему может влиять на другие селекторы).

Синтаксис :extend()

Псевдокласс :extend() либо присоедине к селектору, либо размещен в наборе правил. Он выглядит как псевдо-класс с параметром селектора, опционально следующим за ключевым словом all :

Расширение селекторов может содержать один или несколько классов, разделенных запятыми. Например:

Расширение селекторов, присоединенный к селектору

Расширение селекторов, присоединенное к селектору, выглядит как обычный псевдо-класс с параметром в виде селектора. Селектор может содержать несколько extend, но все они должны стоять в конце селектора.

  • Extend после селектора: pre:hover:extend(div pre) .
  • Между селектором и extend можно ставить пробел: pre:hover :extend(div pre) .
  • Можно ставить несколько extend: pre:hover:extend(div pre):extend(.bucket tr) — То же самое, что и pre:hover:extend(div pre, .bucket tr)
  • А вот так нельзя: pre:hover:extend(div pre).nth-child(odd) . Extend должен стоять в конце.

Если набор правил содержит несколько селекторов, у любого из них может быть Extend. Несколько селекторов с extend в одном наборе правил:

Контекстная группировка

Расширение селекторов (Extend) можно размещать внутри набора правил с помощью синтаксиса &:extend(selector) . Размещение псевдокласса :extend() в теле является своеобразным ярлыком для размещения его в каждом селекторе этого набора правил.

Extend внутри набора правил:

То же самое, что и добавление extend после каждого селектора:

Группировка внутренних селекторов

Extend может группировать внутренние селекторы. Например:

В результате получим:

По сути, расширение просматривает скомпилированный CSS, а не оригинальный Less-код. Например:

Точное совпадение с Extend

Расширение селекторов (Extend) по умолчанию ищет точные совпадения между селекторами. Неважно, использует ли селектор «ведущую звезду». Неважно, что два N-ных выражения имеют одинаковое значение, они должны быть одинаково сформированы, чтобы совпадать. Единственное исключение – кавычки в селекторе атрибута, т.к. Less считает, что у них одинаковое значение и они совпадают.

Ведущая звезда не играет роли. Селекторы *.class и .class эквивалентны, но extend не будет сравнивать их:

В результате получим:

Порядок псевдо-классов имеет значение. Cелекторы link:hover:visited и link:visited:hover соответствуют одинаковому набору элементов, но extend рассматривает их как разные:

В результате получим:

N-ное выражение

Форма N-ного выражения не имеет значения. N-ные выражения 1n+3 и n+3 эквивалентны, 3эквивалентны, но extend не будет их сравнивать:

В результате получим:

Тип кавычек в селекторе атрибута не важен. Все следующие записи эквивалентны.

В результате получим:

«all» в Расширении селекторов

Когда вы указываете ключевое слово «all» последним в аргументе псевдокласса :extend() , — это говорит Less сравнить этот селектор с частью другого селектора. Селектор скопируется и совпавшая часть селектора только тогда заменится расширением, создав новый селектор. Например:

В результате будем иметь такие CSS стили:

Вы можете считать, что этот вариант операции по сути совершает обычный поиск и замену.

Интерполяция селекторов с Расширением селекторов

Расширение селекторов НЕ может сравнивать селекторы с переменными. Если селектор содержит переменную, расширение проигнорирует ее. Для этого существует запрос функции ожидания, но это не простая замена. Однако, расширение можно присоединить к интерполированному селектору.

Селектор с переменной не будет сравниваться:

А расширение с переменной в целевом селекторе ни с чем не совпадает:

Оба предыдущих примера компилируются в:

Однако, :extend , присоединенное к интерполированному селектору будет работать:

Предыдущий LESS компилируется в следующий CSS:

Охват / Расширение селекторов внутри @media

Расширение селекторов, написанное внутри медиа-декларирования должно совпадать только с селекторами внутри того же самого медиа-декларирования:

Расширения селекторов верхнего совпадают со всем, включая селекторы внутри встроенного медиа:

Выявление дубликатов

Пока что дубликаты не обнаружены. Например:

В результате получим:

Случаи использования расширений

Классический

Классический случай использования – избегать добавления базового класса. К примеру, если у вас есть

и вы хотите, чтобы у вас был подтип animal, который переопределит фоновый цвет, то у вас есть два варианта. Первое — изменить HTML-код

или создать упрощенный код и использовать расширение в Less, например

Уменьшение размера CSS

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

В результате получим:

Пример (с расширением селекторов):

В результате получим:

Комбинирование стилей / Более продвинутая примесь

Другой случай использования – альтернатива примесям, т.к. примеси могут использоваться только с простыми селекторами, если у вас есть два разных HTML-блока, но вам нужно применить к ним одинаковый стиль, вы можете использовать расширения. Например:

Создание отзывчивых писем без медиа-запросов

Примечание переводчика: Представленный ниже материал содержит значительное количество технических терминов, при переводе которых могут возникнуть неточности. Если вы заметили опечатку, ошибку или неточность перевода — напишите нам, и мы оперативно всё исправим.

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

Но что, если бы вы могли построить шаблон, который был бы отзывчивым, даже в средах с бедной поддержкой современного CSS? Что если каждый раз, когда вы слышите о новом email приложении, которое все используют, вместо вздрагивания от страха вы могли бы чувствовать себя в безопасности, зная, что ваши письма выглядят достойно?

Метод, который я поддерживаю ниже, пригодится в качестве хорошего опыта для email-клиентов, которые не поддерживают медиа-запросы вообще.

Его называют резиновый гибридный (fluid-hybrid) метод, иногда — губчатый (spongy) метод почтовой разработки. Резиновая часть ссылается на то, что мы используем проценты. Гибридная часть от того, что мы также используем max-width, чтобы ограничить некоторые из наших элементов на больших экранах.

Шесть основных проблем, которые мы должны решить

1. Приложение gmail для android и IOS — боль

Это более популярное, чем дефолтное mail-приложение на Android, но Gmail не поддерживает медиа-запросы, на которые мы традиционно полагаемся, чтобы изменить размер и переформатировать наши письма для небольших экранов. Это статья покажет вам, как сделать письма отзывчивыми, которые отзывчивы даже в Gmail приложении.

2. Новые почтовые приложения выпускаются постоянно

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

3. Количество устройств с разным размером экрана практически безгранично

Мы имеем не только большие десктопы и маленькие смартфоны, есть также большие смартфоны и небольшие ноутбуки. Просто потому что кто-то имеет доступ к Gmail через свой ноутбук совсем не означает, что его экран достаточно большой, чтобы просматривать письма шириной 700px , и люди использующие iphone6+ могут справиться с двухколончатым макетом, но вместо этого обычно вырисовывается макет с одной колонкой. Эта статья покажет вам, как сделать макет, который будет подстраиваться под доступное пространство, даже в webmail.

4. Создание отзывчивого письма посредством td на мобильных устройствах не работает повсеместно

Некоторые почтовые клиенты (на IOS и даже некоторые нативные mail приложения на относительно старых версиях Android) не правильно группируют/складывают одну под другую (в одну колонку, см. ссылку) ячейки в одной и той же строке; будут сгруппированы (stack, https://www.emailonacid.com/blog/article/email-development/how_android_is_strangling_responsive_design/) только две отдельные таблицы. В этой статье используется совершенно другой метод, который полностью поддерживается всеми приложениями и устройствами. Обычно решением это проблемы является использование таблиц с атрибутами align=‛right‛ или align=‛left‛ , но это наводит нас на еще одну ловушку.

5. Когда используется метод выравнивания ( align ) для отзывчивой разработки, ваши таблицы группируются с выравниванием по левой или правой стороне в мобильных приложениях, которые не поддерживают медиа-запросы.

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

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

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

6. Когда вы используете выравнивание таблицы для отзывчивой разработки, вы теряете способность вертикально выравнивать контент в соседних колонках. (как связано?)

В этой статье будет также показано, как выровнять по вертикали две колонки в одной и той же строке по верху или по середине, как если бы они были в ячейках таблицы с атрибутом valign в одной и той же строке.

В этой статье используется «резиновый гибридный» метод, который позволяет вам выравнить ваши колонки по верху, середине или низу

1. Давайте приступим

Откройте пустой файл и сохраните его как index.html, затем скопируйте туда следующий код:

Давайте быстро пробежимся через все элементы в приведенном выше коде:

!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
этот DOCTYPE на мой взгляд лучший — с ним меньше всего проблем.

Дает нам поддержку для всех Unicode символов в нашем документе.

Используется затем, чтобы телефоны windows отображали нашу мобильную версию корректно. Код спрятан внутри условного комментария, который скрывает его от каких-либо других ‘mso’ (Microsoft Outlook) продуктов, чтобы предотвратить проблемы с изображениями: Windows Live Mail не будет отображать изображения при использовании этого тега.

Мы включили элемент title , хотя лучше оставить его пустым. Тег title требуется для валидации XHTML, но некоторые нативные почтовые клиенты Android будут отображать этот заголовок перед предзаголовком в предварительном просмотре почты, что не является идеальным.

Далее между и у нас есть условие CSS для Outlook, чтобы заставить его свернуть границы у всех таблиц и предотвратить нежелательные зазоры. Это правило нацелено на все версии Microsoft Outlook начиная с body мы, во-первых, имеем тег center , чтобы центрировать его контент и задать опору, по причине наличия нескольких глобальных CSS свойств (с тех пор как тег body часто ‛раздевают‛ в почтовых клиентах). Мы также имеем

2.Определяем стили

Затем создайте пустой CSS файл styles.css. В этот файл вставьте следующий код:

Здесь я обнуляю все поля и отступы у тега body , таблиц и ячеек таблицы и обнуляю любые границы, которые могут появиться у изображений. Наши стили для table и td занимают место атрибутов HTML cellpadding и cellspacing . Что использовать (атрибуты или стили) полностью зависит от вас; в прошлом я всегда использовала атрибуты HTML вместо CSS свойств там, где это возможно, однако при работе на более масштабных проектах я обнаружила, что определение стилей в CSS является более управляемым, особенно, если вы работаете на платформе, которая преобразует ваш CSS код во встроенный CSS.

Я обычно включаю min-width тегу body , чтобы избежать ситуаций, когда контент не принимает полную ширину на области просмотра мобильных устройств, и это всегда хорошая практика, чтобы установить цвет фона, даже если это белый цвет, чтобы избежать цвета обоев в Outlook или Lotus Notes.

Для элемента wrapper также есть несколько свойств для предотвращения странного поведения и изменением размеров у текста на Windows Phones and iOS, а также table-layout: fixed , чтобы обеспечить центрированному контенту актуальное центрирование в Yahoo mail. Мы устанавливаем max-width 600px нашему . webkit , чтобы ограничить содержимое в Apple Mail 6 (и ниже) и Outlook 2011.

3 Создание структуры у внешнего контейнера

Мы начнем с одного из ключевых строительных блоков для этого метода: условных таблиц для Outlook, которые скрыты от других клиентов. Нам требуется это потому, что мы будем использовать свойство max-width , которое не поддерживается Outlook. Поэтому нам требуется создать таблицы специально для Outlook с явной пиксельной шириной, чтобы заключить все в Outlook.

Используем «условные» таблицы для Outlook, так как Outlook не поддерживает свойство max-width .

Таким образом в нашем HTML файле давайте удалим [content goes here] и вставим в следующий код. Я придерживаюсь правила выравнивать условные комментарии по левому краю, но вы можете форматировать их как угодно.

Примечание: здесь нет стилей для ‛условных‛ таблицах. Я собираюсь использовать инструмент inliner.cm, который также встраивает стили внутрь ‛условных‛ таблиц. Если вы собираетесь использовать другой инструмент, то он может не делать этого, так что удостоверьтесь, что ваш инструмент добавляет cellpadding=»0″ cellspacing=»0″ border=»0″ в ваши условные Outlook таблицы.

Внутри условных таблиц вы можете увидеть элемент

, который является ключевым внешним блоком для всех клиентов кроме Outlook.

Мы хотим, чтобы эта внешняя таблица имела 100% ширину на маленьких экранах, но на больших экранах максимальная ширина должна быть 600px . Поэтому нам необходимо установить ширину в 100% и задать max-width 600px .

Ширина нашей таблицы равна 100% , пока она не достигет 600px .

Итак вставьте следующий код в наш styles.css:

Мы также имеем объявление Margin: 0 auto; с целью центрировать таблицу в Yahoo при просмотре в Chrome. Хотя margin применяется ради Yahoo, я всегда пишу Margin с заглавной буквы, таким образом Outlook не сможет его обрезать; за этот хак спасибо – ссылка.

Сейчас мы имеем внешнюю структуру, самое время перейти к добавлению контента.

4. Добавление баннера на всю ширину

Во-первых, скачайте файлы статьи и переместите директорию /images в ту же папку, где у вас лежит index.html.

Сейчас давайте добавим класс full-width-image к td внутри нашей таблицы .outer , затем заменим наш заполнитель [content goes here] на тег img , таким образом наша таблица выглядит так:

Ширина для изображения задана в пикселях и в HTML, таким образом Outlook будет отображать изображение корректно, но нам необходимо перезаписать ширину в CSS на 100% , чтобы изображение могло свободно менять размер в других клиентах.

Мы также установили max-width в соответствии с px шириной, которая установлена в HTML ( 600px ) так как Windows Phone не всегда хороши, когда max-width установлено 100% . Мы установили высоте auto , чтобы наше изображение не ‛разваливалось‛ при ошибочном соотношении сторон (aspect ratio). (метод).

5. Добавляем одинарною колонку

Добавьте строку к outer таблице со следующей разметкой:

И следующие стили в наш CSS файл:

Отметьте, что я использую тег p и набор классов для его стилизации. Мне нравится использовать параграф, чтобы стилизовать текст, и вы можете управлять им достаточно легко, благодаря хаку с М, который я упоминал выше. Также я использую класс .h1 вместо тега h1 , так как Outlook имеет h1 , h2 и h3 стили, которые всегда переопределяют ваши стили.

Таким образом в CSS выше мы создали 10px padding для нашей колонке, мы сбросили все поля для параграфов, установили базовые стили для ссылок и задали классы .h1 , .h2 , затем выровняли тест по левому краю и стилизовали параграфы.

6. Добавляем двухколончатый макет*

* который может быть центрирован в случае стека (см. скрин ниже).

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

Для начала добавьте новую строку в table.outer . Она содержит ячейку с классом .two-column , внутри которого расположены ‛условные‛ таблицы для Outlook с двумя колонками шириной в 50% :

Эти условные колонки важны так как без них Outlook не позволит расположить ваши 2 таблицы бок о бок. Outlook не поддерживает max-width , поэтому эти колонки помогут ограничить каждый столбец до корректного размера.

Сейчас замените каждый [content goes here] заменитель на следующий:

Мы собираемся расположить две колонки на больших десктопах и получить центрированный стек (одна под другой) на мобильных устройствах, используя комбинацию text-align: center и display: inline-block . Все строчные и строчно-блочные элементы подчиняются свойству text-align . Поэтому, если мы обернем наши таблицы в div , которому установлено inline-block , мы сможем легко установить нужное выравнивание при стеке, задав свойство text-align на контейнере. Вы можете выравнивать как угодно и inline-block подчинится. Вы можете обозначить таблицу как inline-block , но только если вы не будете вкладывать внутрь другие таблицы. Вещи могут начать вести себя странно, если вы начнете вкладывать таблицы внутрь inline-block таблиц, поэтому если вам нужна вложенность всегда используйте inline-block для div .

Давайте стилизуем наш контейнер (ячейку) .two-column с выбранным нами выравниванием. Мы также собираемся добавить font-size: 0 , чтобы избавиться от пробелов между колонками (нашими inline-block элементами) внутри ячейки.

Сейчас давайте стилизуем наши inline-block div, которые фактически являются колонками.

Мы используем ширину 100% с max-width 300px , таким образом колонка будет иметь 100% ширину на экранах с областью просмотра ниже 300px .

Вы можете установить vertical-align (для вертикального выравнивания) что угодно: top , center или bottom . vertical-align:top означает, что каждая колонка как будто является ячейкой таблицы со свойством HTML valign=‛top‛ ; middle как будто имеет valign=‛middle‛ . Отметьте, что вы можете иметь много строк из этих div внутри одной и той же ячейки и вертикальное выравнивание будет всегда диктоваться вертикальным выравниванием на row-by-row основе. Это довольно изящно. Также, чтобы подстраховаться, так как Outlook не понимает свойство vertical-align , задайте в ‛условных‛ таблицах нужное значение для атрибута valign .

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

Давайте наши два [content goes here] на следующий код:

Каждая колонка ( .inner ) имеет 300px ширину с 10px отступом с каждой стороны, оставляя 280px для изображения.

Далее стилизуем класс .contents задав 100% ширину.

И затем давайте добавим наши стили двухколончатому макету: поставим размер текста, выравнивание, обеспечим изображению 100% ширину, добавим тексту небольшой верхний отступ.

Теперь вы имеетe двухколончатый макет, который складывается вертикально, когда вы меняете размер браузера или, когда ваша область просмотра уже чем 300px .

7. Добавляем трехколончатый макет

Снова мы собираемся создать расположенные рядом колонки, которые складываются на мобильных устройствах посредством комбинации text-align: center и display: inline-block .

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

Пример стека из трех колонок, при использовании text-align: center у контейнера.

Пример стека из трех колонок, при использовании text-align: left у контейнера.

Таким образом мы повторяем двухколончатый процесс с дополнительной колонкой. Добавьте новую строку в таблицу .outer . (Обычно я предпочитаю использовать ширину в % для ячеек в моей ‛Условной‛ Outlook таблицах, но в этом случае проще установить ширину каждой в 200px ).

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

Сейчас давайте вставим наши колонки заменив заполнитель [content goes here].

Вот и все. Теперь вы должны иметь трехколончатый макет, где колонки будут складываться на узких экранах.

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

Добавляем трехколончатый макет с несколькими строками

Когда вы хотите добавить несколько строк в ваш макет, вы можете добавить сколько угодно inline-block элементов к контейнеру ячейки. Ниже вы можете увидеть, что на узких экранах идет простое переформатирование колонок.

Хотя вам не требуется разделять сроки div-ов для большинства клиентов, вам потребуется добавить дополнительный

к вашей ‛условной‛ таблице в Outlook.

Здесь вы можете увидеть как в ‛условной‛ таблице был добавлен новый ряд, который содержит три дополнительных ячейки каждая шириной в 200px .

Далее добавим таблицу, заменив заполнитель [content goes here] у каждой ‛условной‛ ячейки.

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

Еще больше колонок

Вы можете иметь столько колонок сколько хотите, но не забывайте о том, что ширина блоков должна быть равна ширине контейнера и не забывайте об ‛условных‛ таблицах для Outlook.

8. Добавляем двухколончатый ‛Sidebar‛ макет

Далее мы создадим двухколончатый макет с 500px колонкой и затем 100px sidebar для иконки.

Во-первых, добавим строку и ячейку с классом .left-sidebar и внутри ячейки расположим ‛условную‛ таблицу для Outlook, которая имеет простую строку и две неравные колонки.

Примечание: здесь я использую несколько классов для одного элемента. Некоторые inliner инструменты не поддерживают это, поэтому сперва проверьте вашу систему или платформу. Как уже говорилось выше, я использую inliner.cm, чтобы встроить свой CSS, который поддерживает множественные классы.

В первую колонку добавьте таблицу, которая содержит нашу иконку:

Во вторую колонку добавьте таблицу с текстом и ссылкой:

Эти таблицы просты и не имеют никаких вложений, чтобы сэкономить на разметке я собираюсь установить таблицам display: inline-block , а не оборачивать их в div . Как говорилось выше, эта практика имеет смысл только когда вы используете много вложенных элементов. Если вы будете использовать много вложений, оберните таблицу в div и вставьте .column .right в него.

Теперь давайте стилизуем контейнер и настроим колонки:

Наконец, давайте настроим текст и цвет ссылки:

Теперь вы должны иметь левую колонку и когда вы уменьшите окно вашего браузера, иконка центрируется и встанет выше текста.

9. Добавляем перевернутый sidebar

Теперь расположим текст по левой стороне, а иконку по правой. Но порядок расположения иконки и текста на мобильных устройствах оставим тем же.

Во-первых, мы собираемся скопировать и вставить весь ряд с нашей .left-sidebar ячейкой, и единственное что мы поменяем это класс .left-sidebar на .right-sidebar .

Остальное все также.

Что мы собираемся делать это использовать dir=‛rtl‛ (означает направление справа налево) к нашей выгоде. Это свойство используется для алфавитов, которые работают справа налево, такие как арабский. Но в нашем случае это используется для того, чтобы рассказать почтовым клиентам о том, что необходимо отображать элементы в обратном порядке.

Во-первых, контейнеру ( .right-sidebar ) необходимо добавить dir=‛rtl‛ . Этим мы отображаем наши таблицы справа налево. Таким образом наш открывающий тег должен выглядеть так:

Затем в Outlook условных комментариях, нам также потребуется добавить dir=‛rtl‛ таблице, так как мы говорим таблице отобразить

в обратном порядке.

Таким образом начало у наших условных комментариев должно выглядеть так:

Наконец, нам потребуется добавить dir=‛ltr‛ к .column-left и .column-right таблицам, так как внутри них есть контент (англ. Текст, который требует слева направо). Если мы не сделаем это, то они будут наследовать направление от родителя — справа налево.

Итак колонки .column-left и .column-right должны выглядеть так:

Таким образом наша полная строка должна выглядеть так:

Наконец добавим стили, которые почти те же, что и у .left-sidebar , кроме цвета ссылки.

10. Прогрессивное улучшение с медиа-запросами

Сейчас у вас есть полный email шаблон, который отзывчив везде без медиа-запросов. Но, конечно, есть немало почтовых клиентов, которые поддерживают медиа-запросы, таким образом мы можем сделать прогрессивное улучшение для таких клиентов как IOS Mail.

Во-первых, для всех столбцов сделаем ширину 100% при области просмотра уже 400px . Для трех колонок у изображений установим ширину в 50% ; для двух в 100% . Для колонок переопределяем лишь max-width , так как именно она ограничивает ширину.

Итак добавьте следующий CSS:

Между 401px и 600px добавим следующий код, чтобы сделать появление двух и трех колонок более отзывчивым.

11. Встраивание вашего кода

Если ваша потовая платформа не заботится о встраивании для вас, то вам потребуется сделать это вручную. Во-первых, уберите тег
в вашего документа и замените его на . Скопируйте содержимое style.css и вставьте его в элемент . Наконец, скопируйте и вставьте полный файл в inliner.cm и дождитесь результата. После окончания результат скопируйте контент и вы готовы к работе.

Несколько финальных замечаний и подсказок

Бывает непорядок, когда имеются различные отступы у различных колонок. В примере выше вы можете отметить класс .inner , который используется для 10px отступов к каждому макету. Это важно, так как когда складывается стек на мобильных устройствах вы задумываете, чтобы все было однородным.

Для модернизации определенных проектов этот метод может быть довольно сложным.

Безусловно есть определенные места, для которых можно выйти за пределы 600px (но не для Outlook).

Не нужно использовать объявление CSS в HTML-теге , как часто делают при вёрстке веб-страниц. Вместо этого объявление нужно разместить сразу за тегом — однако Gmail ищет любые теги style в письме и удаляет их.

Кроме того стоит рассмотреть вариант, при котором изображение становится фоном для новой HTML-таблицы, которая заключает в себе все строки и столбцы той таблицы, в которой будут отображаться части картинки. Этим можно добиться такого же эффекта, как при «нарезке» изображения при меньшем количестве кода. Нужно помнить, что Outlook 2007 не показывает фоновые изображения — всегда важно тестировать письмо на наиболее важном и популярном у подписчиков почтовом сервисе.

Тестируем

Первыми средствами тестирования писем являются браузеры Firefox и Internet Explorer. Если сообщение хорошо выглядит в них, то велик шанс на то, что и в клиентах вроде Outlook, Yahoo, Gmail и других с ним не будет больших проблем. Если это возможно, следует даже пойти дальше и протестировать письмо в IE 6 — это позволит увидеть, как письмо будет «рендериться» в Outlook 2003. Чтобы примерно понять, как письмо будет показываться на iPhone и iPad нужно протестировать его в Safari.

Группирование CSS-правил в Media Queries и производительность :: Хранитель заметок

Группирование CSS-правил в Media Queries и производительность

Препроцессоры позволяют использовать медиа-запросы непосредственно внутри блока свойств. После обработки соответствующие селекторы будут заключены внутри блока медиа-запроса. Препроцессор, таким образом, меняет порядок селекторов.

Из файла test.less

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

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

  • Одинаковые последовательности символов отлично сжимаются при передаче с HTTP-сервера, если настроено сжатие файлов.
  • Отдельные блоки Media Queries почти не влияют на производительность браузера при рендеринге страницы.

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

Топ-пост этого месяца:  Что такое облачные хранилища - обзор 10 лучших облачных сервисов
Добавить комментарий