автордың кітабынан сөз тіркестері  Отзывчивый дизайн на HTML5 и CSS3 для любых устройств

Бен Фрэйн

https://rwd.education/.

Нужный код лежит в репозитории: https://github.com/PacktPublis

Прогресс в развитии новых интернет-технологий не ослабевает. Набирает популярность WASM (WebAssembly) — средство создания веб-кода, который работает быстрее, чем компилируемый язык. Оно существенно ускорит работу веб-приложений. Лин Кларк (Lin Clark), разработчик браузера Mozilla, опубликовал доступную серию статей о WebAssembly, с которой можно ознакомиться по адресу: https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/.

Модуль CSS Grid, подробно рассмотренный в главе 5, имеет в разработке версию Level 2, которая позволит использовать подсетки. Вариативные шрифты, которые мы рассмотрели в главе 6, станут повседневным явлением, так что ожидайте интересных вещей и в этом направлении.

В общем, ждите перемен и будьте готовы их принять!

Перед оптимизацией производительности обязательно проведите количественные измерения (иначе вы не сможете понять, насколько эффективной была работа по повышению производительности). Затем внесите поправки, выполните тестирование и повторите цикл.

Рис. 11.12. Инструмент Lighthouse покажет, что и как можно улучшить

Инструменты для оценки производительности
Есть также эффективные средства для определения уровня производительности и ее оптимизации. Лично я предпочитаю пользоваться сайтом http://webpagetest.org/. В наипростейшем варианте набирается URL-адрес и делается щелчок на кнопке START TEST. Сайт покажет полный анализ страницы, но, что еще полезнее, если вы выберете опцию визуального сравнения, он покажет раскадровку страницы по мере ее загрузки, позволяя сконцентрироваться на как можно более быстром завершении вывода страницы на экран. На рисунке ниже показано, как выглядит раскадровка загрузки главной страницы сайта BBC:

Рис. 11.11. Просмотр загрузки страницы как диафильма может наглядно показать историю производительности

Также в инструменты разработчика браузера встроены мощные тулзы повышения производительности. Lighthouse — это часть инструментов разработчика Google Chrome, которые можно запустить на вкладке Audits. Укажите в данном инструментарии ваш сайт, и он выдаст вам список возможных улучшений (рис. 11.12).

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

Средства контроля качества кода
При написании кодов HTML и CSS прощаются многие огрехи. Можно просчитаться с количеством вложенных элементов, забыть поставить кавычки или слеш в элементе или не заметить проблему. Мне чуть ли не еженедельно приходится сталкиваться с собственными просчетами в разметке. Иногда это ляпы вроде опечаток. А иногда ученические ошибки типа вложения div в span (разметка, при которой элемент блочного уровня div попадает в линейный элемент span, приводит к непредсказуемым результатам). К счастью, нам в помощь разработаны специальные инструментальные средства. Можете обратиться по адресу: http:// validator.w3.org/ и вставить на этот сайт свою разметку. В результате будут помечены все ошибки и получены номера их строк, что существенно облегчит их устранение.

Рис. 11.9. Пропускайте проверку HTML на свой страх и риск!

А еще лучше установите и настройте средства контроля качества вашего кода HTML, CSS и JavaScript. Или выберете текстовый редактор с определенным уровнем встроенной проверки правильности кода. Тогда по мере набора кода вы будете видеть обозначенные проблемные области. Посмотрите на пример простой ошибки в написании кода CSS, которая сразу же была замечена редактором Visual Studio Code:

Рис. 11.10. Пользуйтесь инструментами, которые избавят вас от основных проблем

Я специально набрал widtth вместо width. Редактор это заметил и указал на ошибку, предлагая при этом разумные альтернативы. По возможности нужно пользоваться именно такими инструментами. Лучше потратить время на их подбор, чем на выискивание глупых ошибок в своем коде.

Для погружения в тему рекомендую эти статьи: http://www.cssmojo.com/how-to-style-a-carousel/ и http://www.cssmojo.com/use-radio-buttons-for-single-option/. Они позволят понять, как довольно сложные взаимодействия могут быть обработаны конструкциями, созданными на основе HTML и CSS.

А теперь поговорим о браузерах.

Одним из наиболее эффективных средств экономии времени, которым я пользуюсь, является BrowserSync. После его настройки при сохранении работы любые изменения, вносимые, к примеру, в CSS, внедряются в браузер, не требуя при этом постоянного обновления экрана. Если это вас не сильно впечатлило, добавлю: обновляются и любые другие окна браузеров на устройствах, находящихся в той же Wi-Fi-сети. При этом при внесении каждого изменения уже не приходится брать каждое тестируемое устройство и щелкать на кнопке обновления. Это средство синхронизирует также прокрутку и щелчки на элементах интерфейса. Настоятельно рекомендую: http://browsersync.io/.

Псевдоэлементы ::before и ::after вставляются в DOM в качестве теневых DOM-элементов. Псевдоэлемент ::before вставляется в качестве первого дочернего элемента своего родительского элемента, а ::after — в качестве его последнего дочернего элемента.

При использовании этих настроек CSS мы можем просмотреть DOM-дерево и увидеть псевдоэлемент ::after.

Рис. 11.7. Можно использовать псевдоэлементы для взаимодействия с кодом JavaScript

Потом это значение можно будет прочитать в коде JavaScript. Сначала присвоим значение переменной:

var size = window

.getComputedStyle(document.body, ':after')

.getPropertyValue('content');

Чтобы подтвердить концепцию, я создал простую самостоятельно вызываемую функцию (она выполняется сразу, как только браузер проведет ее синтаксический анализ), которая после загрузки страницы выводит в окне предупреждения разные сообщения в зависимости от размера окна просмотра:

var size = window

.getComputedStyle(document.body, ':after')

.getPropertyValue('content');

(function alertSize() {

if (size.indexOf('Splus') != -1) {

document.body.textContent =

size + ' I will run functions for small screens';

}

if (size.indexOf('Mplus') != -1) {

document.body.textContent =

size + ' Run a different function at medium sizes';

}

if (size.indexOf('Lplus') != -1) {

document.body.textContent =

size + ' I will run functions for LARGE screens';

}

})();

Итак, в зависимости от размера экрана, когда вы откроете этот пример, то увидите что-то вроде этого:

Рис. 11.8. JavaScript может считать значение из CSS-кода

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

Можно также решить эту проблему с помощью пользовательских свойств CSS (глава 6), но я склонен придерживаться старого подхода, поскольку он по-прежнему хорошо работает в таких браузерах, как Internet Explorer 11.

К счастью, есть более подходящий способ. Впервые я познакомился с ним на сайте Джереми Кейта (Jeremy Keith) http://adactio.com/journal/5429/.

Полный код можно найти в каталоге example_10-01. Суть в том, что в CSS вставляется нечто такое, что может быть легко считано и правильно воспринято кодом JavaScript.

Рассмотрим этот прием в CSS:

@media (min-width: 20rem) {

body::after {

content: 'Splus';

font-size: 0;

}

}

@media (min-width: 47.5rem) {

body::after {

content: 'Mplus';

font-size: 0;

}

}

@media (min-width: 62.5rem) {

body::after {

content: 'Lplus';

font-size: 0;

}

}

В каждом брейкпоинте, который мы хотим связать с JavaScript, используется псевдоэлемент after (можно использовать и before, так как подойдет любой из них) и указывается содержимое этого псевдоэлемента для именования брейкпоинта. В предыдущем примере я использовал Splus для экранов не меньше меньших, Mplus — для экранов не меньше средних и Lplus — для экранов не меньше больших. Здесь можно использовать любые значимые имена и изменять значения там, где есть смысл (использовать другие показатели ориентации, высоты, ширины и т.д.).