Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Новые приключения в адаптивном дизайне

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

Сжимаем изображения

Адаптивные элементы

Если привязать размеры элемента к размеру шрифта, а мы можем это сделать при помощи единиц “rem”, то тогда можно использовать интересную формулу постепенного роста, либо сжатия компонента: font-size: calc(16px + (24-16)*(100vw-400px)/(800-400));.

Загразка шрифтов

Шрифт подгружается и отображается браузером одним из двух подходов:

Если используется FOIT, то в некоторых браузерах есть таймаут (3 сек.), после чего, если веб-фонт не загрузился, то включится шрифт по-умолчанию. Так ведут себя Хром и Файерфокс. А вот Сафари с другой стороны будет ждать пока не загрузится и может вообще не показать контент.

Можно отслеживать загрузку шрифтов и влиять на их отображение:

Это поможет избежать 3-х секундной задержки и тем более поможет справиться с Сафари, который будет ждать столько сколько нужно, потому что он все равно никуда не торопиться.

В видео Виталий рассказывает еще о многом, рекомендую к просмотру:

New Adventures in Responsive Web Design – Vitaly Friedman – btconfMUC2018 from beyond tellerrand on Vimeo.

Поделиться:
comments powered by Disqus