Как сохранить css код на странице геткурс

Простой CSS

Свойства следует группировать по смыслу, и вот почему это важно:

Если взять код слева и расставить в нём свойства по порядку (пример справа), сразу обнаруживается куча ошибок: display: inline-block не будет работать с float: left , потому что в этом случае элемент становится блочным. По этой же причине не будет работать vertical-align . margin-bottom не сработает, потому что ниже перезаписывается сокращенной записью свойства margin . line-height не работает, потому что перезапишется короткой записью font .

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

Порядок свойств можно подглядеть у HTML-Академии. Для сортировки можно использовать CSScomb, но лучше просто привыкнуть записывать свойства в определённой последовательности.

Оформление кода #

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

Удалите из верхней части страницы код CSS, блокирующий отображение. Как лучше сделать?

Сейчас работаю над увеличением скорости загрузки сайта, используя Google PageSpeed Insights.

Google PageSpeed Insights дает такую рекомендацию:

Удалите из верхней части страницы код CSS, блокирующий отображение. Количество блокирующих ресурсов CSS на странице: 20. Они замедляют отображение контента. Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.

Что мне лучше сделать — вынести все теги <link rel="stylesheet"> за тег </html> ? Или использовать, например, yepnope (Modernizr) и подгружать CSS асинхронно с помощью JS? Можете предложить еще варианты решения этой проблемы?!

  • Css надо оставить в head.
  • Скрипты отправить в конец body (кроме модернайзера и тех, которые нужны сразу).
  • Стили и скрипты по возможности минимизировать и объединить.

Google выдаёт такие советы исходя из оптимизации critical rendering path. Если коротко и обобщенно, то путь от первого запроса на сервер до появления страницы на экране такой: запрос → ответ с HTML → построение DOM → загрузка необходимого CSS → построение CSSOM → событие DomContentLoaded → рендер. Более длинно и правильно описано в статье Ильи Григорика.

Как получить зеленый свет в Google Pagespeed?

Помимо очевидных и первоочередных советов о минификации и склеивании ваших CSS-файлов, необходимо всё-таки разобраться с блокированием первого рендера страницы. Мне нравится идея добавлять CSS первого экрана в <head> , а весь остальной CSS закидывать в конец страницы перед </body> . Для этих целей я рекомендую использовать npm-модуль Critical, который хорошо интегрируется в Gulp.

Используемые мной настройки:

Т. е. после окончания работы над страницей, необходимо запустить таск gulp critical , который предварительно запускает таски по сборке CSS и HTML, а затем формирует в отдельный файл critical.css CSS первого экрана, который можно вставлять инлайном в <head> . Также не забудьте проверить как выглядит ваш первый экран исключительно с инлайновым CSS, удалив из страницы ваш основной файл — ручная проверка всё еще необходима, потому что плагин хоть и хорош, но не идеален.

Разумеется, это не единственный способ использования этого модуля. Есть также возможность генерировать отдельную страницу с уже вставленным инлайном CSS, который будет исключен из основного CSS-файла, а основной, в свою очередь, будет подгружаться асинхронно. Для этого надо использовать параметры inline: true , extract: true и dest: ‘index-critical.html’ .

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

Основы CSS для GetCourse

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

На страницах, которые вы собираете сами, для изменения стиля блока нажмите кнопку «Стиль» — «Подробные настройки».

Введите код, меняющий class (вид) нужного элемента.

Как же узнать class элемента?

Кликаем правой кнопкой мышки по странице и в открывшемся меню выбираем пункт «Посмотреть код» (в зависимости от версии браузера этот пункт может называться немного по-другому).

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *