что значит стили инлайново
Как и почему вы должны инлайнить критический CSS
Дата публикации: 2016-11-24
От автора: на рассвете интернета веб-сайты в основном показывали только текстовую информацию. Медленно, но верно скорость соединения росла, и постепенно пользователи смогли загружать изображения и видео высокого качества довольно быстро. Сейчас сайты не просто дают необходимую информацию в текстовом виде, сайты стали сложнее. Появились CSS и JS фреймворки, плагины и т.д. Загрузка всех этих дополнительных файлов занимает определенное время.
Более быстрый сайт обеспечивает лучший пользовательский опыт, что может сильно повлиять на его успех. Как разработчикам повысить производительность? Разработчики могут использовать один метод, который сильно повысит производительность. Можно инлайнить критический CSS, а остальной загружать асинхронно. В этой статье мы пройдемся по всем этапам и поможем вам повысить производительность вашего сайта.
Что такое критический CSS?
К критическому CSS относится тот код, который отвечает за стили видимой части страницы сайта при загрузке. К контенту видимой части относится контент, который пользователь видит самым первым после загрузки. Это может быть меню и другие элементы. Крайне важно правильно применить стили и как можно быстрее отрисовать эту часть страницы.
Тут стоит также отметить, что пользователи могут заходить на ваш сайт через множество устройств с разными разрешениями экрана. Так что сам контент видимой части экрана ничего не решает. Чтобы решить эту проблему, к критическому CSS коду нужно отнести также стили базового макета и шрифтов.
В современных практиках по разработке часто рекомендуют инлайнить критический CSS. Такой код вставляется на страницу следующим образом:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Почему инлайнить стили обязательно?
Если вы зайдете на Google PageSpeed Insights и проанализируете одну из страниц вашего сайта, вам может выскочить предупреждение об оптимизации вставки CSS при помощи встраивания критических стилей и асинхронной загрузки остальных стилей.
Браузер не станет отрисовывать видимую часть страницы, пока не загрузит все файлы CSS, с чем могут возникнуть проблемы, если файлов много.
Не у всех ваших пользователей будет быстрое соединение, и они не будут ждать, пока загрузятся библиотеки, CSS и JS. Если они не смогут получить тот контент, за которым пришли, это будет очень плохо. Даже у пользователей с быстрым соединением может потеряться сеть, например, при проезде по туннелю. Находясь в туннеле, у пользователей будет доступ к основному контенту в том случае, если критический CSS встроен в разметку, а все остальные файлы загружаются только после отображения основного контента.
На изображении ниже показана разница между обычной и оптимизированной страницей. Из скриншота видно, что оптимизированная страница отображает контент на 0.5 секунды раньше. Разница будет более заметной, когда будет подключено много дополнительных библиотек.
Нужно ли вам инлайнить критический CSS?
Все зависит от ситуации. Если вы не используете тяжелые фреймворки или библиотеки, а файлы CSS весят мало, то вам не нужно встраивать стили.
Если же вы работаете с фреймворком типа Bootstrap, возможно, вы не воспользуетесь всеми возможностями данного фреймворка. В таком случае можно вырезать критический CSS из файлов фреймворка, а сам Bootstrap загружать асинхронно. Это должно значительно повысить скорость загрузки сайта.
Инлайновые стили можно кэшировать, в то время как HTML зачастую не кэшируют. В этом кроется разница. Помните об этом, когда делаете обновления! Кроме того, встроенные стили увеличивают вес страницы при каждой ее загрузке. К примеру, если на каждой странице сайта есть дополнительно 30Кб инлайновых стилей, то просмотр 10 страниц одним пользователем обойдется вам в 300Кб. Может показаться, что все не так плохо, однако в некоторых частях мира передача данных очень дорогая (а также на некоторых 3G/4G тарифах). Убедитесь, чтобы стили, которые вы хотите встроить в разметку, действительно были критичны для страниц, чтобы вы не инлайнили все подряд.
Как найти критический CSS
Искать критический CSS самому довольно сложно и скучно. К счастью, есть специальные инструменты, которые ускорят этот процесс.
С помощью Grunt
Если вы знакомы с Grunt, то там есть плагин, упрощающий данный процесс — grunt-critical. Если вы больше любите Gulp или npm, смотрите разделы ниже. Сперва необходимо установить плагин с помощью команды:
Подумайте об использовании инлайна CSS в вашем следующем email проекте
Дата публикации: 2017-12-29
От автора: у новичков в email разработке возникают три главные проблемы, с которыми вы, скорее всего, уже столкнулись: в email шаблонах почти всегда банятся внешние ресурсы, вся разметка построена на таблицах, а также необходим инлайн CSS. В этой статье мы поговорим о последнем пункте и узнаем, почему и как это сделать.
Вы уже знаете, что необходимость инлайнить CSS изменилась с тех пор, как Gmail начал поддерживать тег style. Тем не менее, эта техника все еще широко применяется в региональных клиентах электронной почты и в некоторых нативных приложениях почты для старых устройств на андроид, а также в старых приложениях Gmail. Инлайнинг отлично подходит для сложных макетов. Инлайнинг может послужить основой для техник прогрессивного улучшения.
Решив, что это важно, давайте поговорим о доступных онлайн инструментах и инструментах командной строки.
Ниже мы обсудим разные инструменты, узнаем их плюсы, а также минусы. Задача – чтобы после прочтения статьи вы могли легко использовать их и замечать в них недостатки.
Общие моменты при инлайнинге CSS
Инлайнинг – широко применяемый метод конвертирования вставляемых и внешних CSS стилей в более надежный email код. Процесс похож с последним Email в ежегодной коллекции на сайте Acid. Отличный способ поддерживать старые и менее развитые email клиенты.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
До сих пор продолжаются споры по поводу отказа от инлайн стилей в будущем – можно заключить, что все до сих пор зависит от email клиентов конечных пользователей.
Возьмем шаблон из предыдущего урока по использованию препроцессора Sass в email разработке. Сравним вставляемые стили…
И инлайн…
Версии одного и того же шаблона. Скриншоты сняты с T-Online.de, что ясно показывает, если этот клиент важен для вас, вам нужно использовать инлайн стили для его поддержки. Outlooks на основе Word и разные версии Lotus Notes также лучше работают с инлайн стилями.
Множество email разработчиков инлайнит CSS вручную, но сразу понятно, что такой подход занимает много времени, и могут возникать ошибки. Здесь могут сильно пригодиться CSS инлайнеры. Но существует ли идеальный инструмент для этого?
Это вам нужно решить для себя самому. У разных инструментов свою сильные и слабые стороны. Ваша задача и конечный результат определят правильный ответ.
Из статьи Julie Ng возьмем предварительные условия для CSS инлайнеров:
Не удалять условные комментарии
Не сцеплять несколько CSS свойств в сокращение
Инлайнить и подключать только определенный CSS
Запомните эти условия. Перейдем к подробному разбору.
Начало работы с инлайнерами CSS
Если поискать в сети инлайн инструменты, можно найти 4 других варианта ручного инлайнинга:
API, где вы посылаете HTML и CSS и получаете инлайн версию документа
Инструменты командной строки типа ruby gems и глобально установленные пакеты NPM
CSS инлайнеры есть в таск раннер плагинах
Далее рассмотрим примеры описанных выше вариантов.
CSS инлайнеры через командную строку
Начнем с простейшего инструмента, но вы увидите, что он потрясающе справляется со своей задачей. Инструмент называется Inlining. Доступен на Github и NodeJS package manager.
Инлайн стили должны быть в отдельном CSS файле. При инлайнинге CSS мы применим следующие стили:
Экосистему NodeJS, а также как устанавливать NPM пакеты мы представили в предыдущем уроке. Быстро вспомним предыдущую статью. Следуя шагам установки:
вы должны легко установить Inlining.
Если у вас возникли проблемы, которые вы не можете решить сами, пишите об этом в комментариях, мы поможем.
После глобальной установки с помощью следующей команды inlining input.html >output.html можно инлайнить стили. Результат обработки input.html будет помещен в файл output.html. Используя тестовый шаблон, мы получим HTML ниже:
Стоит объяснить пару моментов по этому инструменту:
Он оставляет медиа запросы в теге style – вы увидите, что не все инструменты делают это
Хорошо инлайнит свойства width классов макета col67, col33
Добавляет тег tbody, завершая разметку table
Удаляет неизвестные CSS классы типа ExternalClass
Изучив превью Litmus, можно сделать вывод, что правильный жидкий макет применяется в большинстве мобильных email клиентов, а десктоп представление отображается на десктопе и webmail клиентах. В инструменте нет кастомизации процесса инлайнинга, но мне и так нравится результат. Мне не понравилось два момента: 1 – инструмент умеет инлайнить CSS только из внешних стилей, 2 – он использует табуляцию, что усложняет изменение после инлайнинга. В целом, я рекомендую этот инструмент.
Настройка инструмента автоматизации
Когда я захотел протестировать разные инструменты по инлайнингу, я узнал, что есть только один эффективный способ – собрать их и запустить через скрипт. Работать будет любое решение, но для упрощения нашей работы есть специальные инструменты, таск раннеры. Так мне нужно будет править только HTML, CSS и настройки инлайнеров CSS, остальные части процедуры сделают за меня.
Таск раннеры – инструменты автоматизации ежедневных задач. Обычно настройка основана на файле конфигураций определенного таск раннера, где хранятся все задачи, которые необходимо выполнить по простой команде.
Мы выберем Gulp – часто используемый, быстрый JS таск раннер. По простой стандартной команде мы создадим все команды запуска разных CSS инлайнеров. Установка такая же, как в разделе про Inlining.
Детально автоматизацию задач мы разберем в следующей статье по созданию автоматизированного фреймворка по созданию email. Все же, вас нужно познакомить с популярным JS таск раннером чисто для этой статьи. Поехали!
Рекомендуемые настройки проекта можете скачать с Github, но я все же быстро расскажу, как все работает. Если у вас возникли предложения по улучшению, пишите в комментариях.
В нашем проекте у нас будут:
input.html – хранит разметку шаблона email и тег link на main.css, в котором лежат стили шаблона, или же встраиваемые стили в тег style. В этом теге мы и будем тестировать принцип работы
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
gulpfile.js – хранит все задачи по инлайнингу
файлы и папки NPM – файл package.json и папка node_modules – здесь будут размещены gulp util пакеты (например, gulp-rename для настройки имени выходного файла) и пакеты CSS inliner, доступные через NPM
Я открыл отдельные JS файлы для каждого CSS инлайнера, который не настроен на прямой запуск с Gulp
Папка results – хранит сгенерированный инлайновый HTML
Инлайновые стили в background-image
SVG можно вставить в CSS прямо как есть, но такой код не будет работать в IE. Однако если его заэскейпить, код будет работать во всех браузерах включая IE9.
Например, можно взять такой код:
заэскейпить его и использовать как фон, при это все инлайновые стили сохранятся:
И всё равно всё будет работать:
Кроссбраузерность
Интересно, что такие стили работают во всех современных браузерах, но у каждого свои представления о том, как это должно выглядеть в итоге:
Chrome
Тени, трансформации и градиенты работают, градиент поворачивается вместе с фигурой. Пустые места в углах плитки фона заполняются градиентом.
Firefox
Тени, трансформации и градиенты работают, но тень поворачивается вместе с фигурой, а градиент — нет.
Safari
Тени, трансформации и градиенты работают, градиент поворачивается вместе с фигурой. Пустые места в углах плитки фона ничем не заполняются.
Трансформации и градиенты работают, тени — нет. Градиент поворачивается вместе с фигурой. Пустые места в углах плитки фона не заполняются.
С одной стороны, инлайновые стили в фоне везде отображаются по-разному, с другой — это настолько странная конструкция, что непонятно почему она вообще работает.
Стили в фонах открывают широчайшие возможности для экспериментов и заодно позволяют помечтать о разных возможностях, которых сейчас в фонах нет, но очень хочется, чтобы были.
Например, если делать паттерны с помощью градиентов, иногда хочется просто взять и повернуть плитку фона, например, на 45 градусов, чтобы получилась чешуя:
(Нормально отображается только в Chrome и Opera)
Ещё один вариант чешуи:
Или вот хочется сделать сложный фон из нескольких градиентов и повернуть всю группу сразу (в данном случае такой группой является полупрозрачный трёхцветный градиент):
Или, например, хочется изменить размер фона, но так, чтобы какие-то линии сохранили свой размер. box-shadow при ресайзе background-size именно так и работает:
(Chrome, Opera, Firefox, Safari)
Ресайзится только плитка фона, размер теней не меняется. Из этого можно сделать, например, калейдоскопический паттерн:
(Chrome, Opera, Firefox, Safari)
Используя border-image c градиентами можно делать совсем уж замысловатые штуки:
(Chrome, Opera, Firefox, Safari)
Играться можно до бесконечности.
Если у вас есть идеи куда это можно применить, поделитесь.
Все мои эксперименты с инлайновыми стилями можно увидеть в этой коллекции (смотреть лучше в Хроме и Опере).
Дисплей: встроенный-блок значение
Пример
span.a <
display: inline; /* the default for span */
width: 70px;
height: 70px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
>
span.b <
display: inline-block;
width: 70px;
height: 70px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
>
span.c <
display: block;
width: 70px;
height: 70px;
padding: 15px;
border: 1px solid blue;
background-color: yellow;
>
Используйте встроенный блок для создания навигационных ссылок
Одним из распространенных применений display: inline-block является создание горизонтальных навигационных ссылок:
Пример
.nav <
background-color: yellow;
padding: 15px;
list-style-type: none;
text-align: center;
>
.nav li <
display: inline-block;
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
>
Сетка коробок
Тем не менее, inline-block значение свойства display делает это проще!
Примеры
Старый способ-использование float (Обратите внимание, что нам также необходимо указать свойство clear для элемента после плавающих полей):
Пример
.floating-box <
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
>
Такой же эффект может быть достигнут с помощью значения inline-block свойства display (Обратите внимание, что clear не требуется):
Плохо ли использовать инлайновые стили в оформлении статей или новостей на сайте?
Посудите сами, поправите вы через инлайн стили один блок, потом другой, потом третий и тд, а потом вам надо будет внести правки сразу в несколько одинаковых блоков.
Лучше один раз добавить еще один класс в css, чтобы потом удобно управлять всем этим делом, чем каждый раз мучаться.
На счет увеличения файла, не беда, есть же различные минификаторы, тот же grunt с его плагинами отлично справляется со сжиманием всего и всюду)
Инлайн стили это те, которые описаны для каждого отдельного элемента в атрибуте style, а мне всё же кажется что вам нужны не инлайн стили, а просто индивидуальные стили для статей; несколько стилевых правил, описанных не в главном файле со стилями, а либо в отдельном, либо просто в блоке style.
К тому же, это просто не нужно. Нет никакой нужды хранить индивидуальные стили в основном стилевом файле, если можно их разделить.
UPD: хочу заметить, что Артём и лайкавшие его ответ были немножко сбиты с толку тем, что автор использовал термин инлайн, хотя имел в виду page specific.