Верстальщик и CSS: как быть в тренде новых технологий?

На самом деле, о чем же идет речь? Речь идет о черновиках рабочей группы CSS. У них есть свой чудесный сайт: drafts. csswg. org. И время от времени то, что они там сообразили и написали, перекочевывает на основной сайт рабочей группы CSS.

Черновиках рабочей группы CSS

Разноцветные обозначения — это стадии жизненного цикла спецификации, начиная от черновика, про который мы упоминали, и заканчивая рекомендацией для вендоров. Вендоры в нашем случае это компании-разработчики браузеров.

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

Вот, например для webkit-a.

А вот так для блинка. Он скромно называется хром платформа, хотя честнее было бы назвать ее Chromium. Хотя бы потому что она, в частности, roadmap оперы.

Достаточно неплохая платформа есть и у EDGE.

И только у Firefox до 2016 года был просто текстовый документ. Сейчас они исправились — создали свою платформу с roadmap, но пока почти без данных.

Но это еще не все. На самом деле вы можете во всем этом процессе еще и поучаствовать. Все черновики — это репозитории на GitHub и, как в любом репозитории, в них можно создать issue, где вы сможете пообщаться с авторами спецификации, редакции. Они, кстати, оперативно отвечают. Кроме того, можно создавать pull request и напрямую участвовать в спецификации. Если вам кажется, что ваши наработки сделают только лучше — не стесняясь отправляйте им pull request.

Вы наверняка сейчас задаетесь вопросом — «зачем?». Да хотя бы затем, что знание и имя — это потенциальные деньги. Представьте эффект, который вы произведете, придя на собеседование в крупную компанию и сказав: «Мои pull request принимает w3c». Поверьте, человек, к которому прислушиваются в w3c, который знает эти спецификации «от и до», будет лучшим в решении любой задачи.

Но перейдем к делу, что вообще за черновики? О чем мы вообще говорим?

Motion-path

Например, вы слышали о такой спецификации, как motion-path?

Это спецификация, которая позволяет создать какой-то путь и разместить на нем элемент. Путь может создаваться как path, в котором вы прописываете координаты точек либо, например, функцией circle (которая, к сожалению, пока не работает) и даже URL со ссылкой на какую-нибудь SVG картинку.

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

Вот мои несколько точек:

Мы при помощи motion-offset задаем положение самолета на этом пути и самое замечательное, что его можно анимировать и в результате получить нечто подобное.

Как видите, положение красиво меняется и, более того, этот самолетик не просто следует по пути, но еще и поворачивается. Делается это при помощи motion-rotation: auto, но мы можем задать какое-то конкретное значение и даже заставить его летать задом наперед.

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

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

Object-fit

Что касается изображений. Вы уверены, что умеете должным образом с ними обращаться? То есть кто из вас пользуется в работе object-fit?

Допустим у нас есть чудесный медведь. Сразу уточню, что это не просто медведь, а элемент image.

И, если мы изменим его размер, то он похудеет, а кто вообще любит худых медведей? С помощью object-fit: cover мы можем сделать то, что мы можем делать с помощью background-size. В данном случае сделать так, чтобы картинка без искажения заполняла все пространство.

Стандартное поведение image — это object-fit: fill. Есть еще несколько вариантов contain, например.

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

Типографика

А теперь давайте поговорим про типографику. Знаете какие извращения с переносами можно наблюдать на многих сайтах?

Мы можем задать ему, как будет выглядеть перенос при помощи свойства hyphenate-character.(Сразу стоит оговориться, что не любой Юникод символ можно использовать).

С помощью hyphenate-limit-zone мы задаем, сколько нужно оставить текста, прежде чем сработает перенос.

Свойством hyphenate-limit-chars мы зададим, как будет срабатывать перенос. На картинке ниже мы задаем следующий алгоритм: переноситься будут слова минимум от 5 символов, при этом до и после переноса должно быть 2 и более символов.

И главное, свойство limit-lines очень полезно, оно позволяет задать максимальное количество переносов строк подряд.

Ну и limit-last задает значение, позволяющее или не позволяющее переносить текст на новую страничку. По умолчанию значение «нельзя», однако на практике можно сделать и так, чтобы строка всегда переносилась на новую страницу (хотя, с точки зрения типографики, этого делать не нужно). Более подробно это описано здесь.

Из последнего, что хочется отметить — это новые медиа-запросы пятого уровня, в частности, новую функцию light-level.

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

Функция light-level позволяет делать немыслимое. Она отлавливает не ширину экрана или тип устройства, к чему мы привыкли, а окружение, в котором человек находится в данный момент. Точнее сказать, это автояркость для вашего сайта. Предположим, что у нас есть интернет-магазин с личным кабинетом, на котором пользователь может отслеживать состояние своего заказа или новостной блок. Как сделать так, чтобы человек не портил глаза из-за того, что наш сайт имеет яркий дизайн, светлый фон и прочее? Функция light-level проверит, обладает ли устройство, с которого посещают наш сайт, датчиками окружающего света и на основе их данных будет применять свойства для сайта, делая менее ярким в темное время суток и наоборот более ярким в солнечный день.

Итоги

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

Информация подготовил программист производственного отдела AXI — Дмитрий Г. За что ему почёт и уважение! (: