Чтобы узнать все о свойствах CSS и о том, как правильно их применять, ознакомьтесь с нашим курсом AtoZ: CSS , полным руководством по CSS, построчным знакомым от опытного разработчика и лондонского учителя Генеральной Ассамблеи Ги Рутледжа.
Press shift question mark to access a list of keyboard shortcuts
Обсуждение PostCSS-cssnext появилось ранее в этом году в «7 плагинах PostCSS, которые помогут вам в PostCSS», опубликованных SitePoint. PostCSS-cssnext — это плагин для написания CSS нового поколения. Эта статья дает представление об истории проекта и его преимуществах. Как только мы получим более глубокое понимание PostCSS-cssnext, мы перейдем к нескольким примерам, с которыми вы можете поиграть. К концу статьи вы будете хорошо разбираться в будущем синтаксисе CSS с PostCSS-cssnext и сможете решить, будет ли это то, что вы хотите использовать в предстоящем (или существующем) проекте!
Потребность в следующем поколении CSS
Независимо от языка, разработчики всегда следят за последними функциями. В то время как такие инструменты, как Babel, предоставляют разработчикам JavaScript поддержку будущих функций ECMAScript, PostCSS-cssnext предоставляет веб-дизайнерам будущие функции CSS. В настоящее время это означает предложение поддержки функций, связанных с CSS4, таких как переменные CSS , вложение и многое другое! Теперь, прежде чем мы продолжим, я хотел бы отметить тот факт, что будущие возможности CSS могут быть изменены, и спецификация CSS4 ничем не отличается в этом отношении. Тем не менее PostCSS-cssnext смягчает негативное влияние, которое это может оказать на проект, заранее информируя пользователей о любых изменениях, которые могут произойти.
От cssnext к PostCSS-cssnext
Первоначально «cssnext» предназначался для выполнения таких задач, как минимизация кода и отображение сообщений об ошибках. Эти возможности были полезны, однако они не поддерживали будущие возможности CSS, что является конечной целью проекта PostCSS-cssnext. Как следствие, команда cssnext решила отказаться от идеи cssnext как отдельного инструмента на том основании, что время, потраченное на его поддержку, может быть лучше потрачено на поддержку будущего синтаксиса CSS и любых его последующих изменений. Для дополнительных процессов, связанных с CSS, разработчики могут интегрировать PostCSS-cssnext с другими технологиями, такими как cssnano для минимизации кода и postcss-browser-reporter для отчетов об ошибках.
Рассекая PostCSS-cssnext
Если мы углубимся в репозиторий PostCSS-cssnext на GitHub , то увидим, насколько модульным является этот плагин. Внутри файла src / features.js мы увидим, что код для каждой будущей функции CSS заключен в свой собственный модуль, названный в соответствии с соответствующей спецификацией CSS.
// https://npmjs.com/package/postcss-custom-properties customProperties: (options) => require("postcss-custom-properties")(options), // https://npmjs.com/package/postcss-apply applyRule: (options) => require("postcss-apply")(options), // https://npmjs.com/package/postcss-calc calc: (options) => require("postcss-calc")(options),
Поскольку это пакет подключаемых модулей, PostCSS-cssnext поставляется с подключаемыми модулями PostCSS. Это означает, что мы можем установить эти функции индивидуально, если захотим, хотя использование PostCSS-cssnext означает, что нам не нужно! Например, если мы хотим использовать только пользовательские свойства CSS , мы можем установить его через npm следующим образом:
npm install postcss-custom-properties --save-dev
Для получения полного списка всех функций CSS, которые поддерживает PostCSS-cssnext, перейдите на страницу с выделенными функциями на веб-сайте PostCSS-cssnext.
Также следует отметить, что PostCSS-cssnext поставляется в комплекте с автоматическим префиксом и пиксрем . Не беспокойтесь, если вы не знакомы с этими инструментами. Они являются постпроцессорами для создания кросс-браузерно-совместимого CSS, и мы скоро узнаем, как они работают.
Посмотрите на примеры PostCSS-cssnext
Теперь, когда мы подробно рассмотрели PostCSS, давайте рассмотрим несколько примеров!
Использование пользовательских свойств с var()
Пользовательские свойства являются одними из самых популярных функций CSS. Важно отметить, что все пользовательские свойства ограничены селектором :root .
:root { --fontSize: 2em; }
После определения мы можем использовать var() внутри нашего CSS. В дополнение к root селектору, мы должны обратить внимание на использование тире, -- при именовании пользовательских свойств. Это обеспечивает соответствие нашего кода спецификации w3c .
Использование пользовательских свойств с @apply
С @apply мы можем сделать пользовательские свойства с помощью var() еще дальше и ссылаться на наборы данных. Это полезно в ситуациях, когда вы хотите повторно использовать группу стилей без необходимости писать их снова и снова! В нашем примере мы видим, как мы можем использовать эту функцию при создании макета.
:root { --flex-row: { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; } } .flex-row { @apply --flex-row; }
Приведенные выше правила CSS внутри селектора :root определяют гибкий контейнер. Если мы хотим изменить этот макет, все, что нам нужно сделать, это изменить одно значение внутри --flex-row и изменение вступит в силу везде, где --flex-row используется вместе с @apply .
Краткое примечание о нашем коде
Хотя я прямо не упомянул использование вложенности , мы видели, как оно использовалось в приведенном выше примере ( --flex-row в селектор :root ). Для тех, кто совершенно не знаком с концепцией вложения, вы можете прочитать больше об этом в документации CSS 3-го уровня . Как следует из названия, вложение позволяет нам вкладывать правила CSS в другие правила CSS . Не вдаваясь в подробности, это действительно практичная функция, поэтому я предлагаю проверить это!
Еще одна интересная вещь, которую мы, возможно, не осознали, это то, что весь наш код совместим с разными браузерами! Как мы узнали ранее, cssnext поставляется с автоматическим префиксом , который автоматически добавляет все префиксы вендора в скомпилированный код CSS.
Вычисление выражений
Мы уже взглянули на функцию var() . Теперь давайте узнаем, как мы можем использовать пользовательские свойства с var вместе с функцией calc . В нашем примере мы будем использовать calc() для вычисления размеров шрифта для наших заголовков.
:root { --fontSize: 1rem; } h1 { font-size: calc(var(--fontSize) * 3); } h2 { font-size: calc(var(--fontSize) * 2.75); } h3 { font-size: calc(var(--fontSize) * 2.25); } h4 { font-size: calc(var(--fontSize) * 2); }
Здесь мы видим, что наша переменная --fontSize передается в calc() для умножения ее значения. В дополнение к умножению, calc() также может использоваться для выполнения деления, вычитания и сложения.
Скрытые силы Pixrem
Некоторое время назад мы упоминали эффект, который autoprefixer оказал на наш код. В дополнение к добавлению префиксов поставщиков пакет плагинов PostCSS-cssnext будет также генерировать запасные значения пикселей для блоков rem с помощью pixrem . Это делается для браузеров, где rem не поддерживается, и если мы проанализируем наш скомпилированный CSS в приведенной выше демонстрации, мы увидим, что наши заголовки теперь имеют значения как px и rem , что дополнительно обеспечивает кросс-браузерную совместимость.
h1 { font-size: 48px; font-size: 3rem; } h2 { font-size: 44px; font-size: 2.75rem; } h3 { font-size: 36px; font-size: 2.25rem; } h4 { font-size: 32px; font-size: 2rem; }
Пользовательские медиа-запросы
Использование мобильного интернета огромно , а это значит, что адаптивный дизайн важен как никогда. Если вы еще не знали, существует ряд запланированных изменений, которые упростят процесс создания медиазапросов.
@custom-media --small-viewport (max-width: 600px); @media (--small-viewport) { /* styles for small viewport */ .danger { flex-direction: column; background-color: rebeccapurple; } }
В нашем первом медиа-запросе мы видим, что @custom-media используется для создания пользовательского медиа-запроса . Как только это будет сделано, мы можем передать имя нашего @media() правило @media() чтобы установить точку останова. Теперь мы можем видеть, как наши элементы меняются от строки к столбцу, а цвет фона меняется с оранжевого на Ребекку фиолетового, когда наше окно просмотра уменьшается (от 600 пикселей и ниже).
Диапазоны медиазапросов
При написании медиа-запросов PostCSS-cssnext позволяет нам быть более лаконичными с нашим кодом, позволяя нам определять диапазоны медиа-запросов . Это означает, что мы можем заменить max , min и equal значения операторами > , < и = . Хотя эти символы незначительны, они ускоряют разработку и облегчают чтение кода.
@custom-media --medium-viewport (width >= 600px) and (width <= 1280px); @media (--medium-viewport) { .danger { display: flex; justify-content: space-around; padding: 1rem; background: teal; } }
В приведенном выше фрагменте приведен код --medium-viewport . Если мы изменим размер области просмотра, чтобы он был меньше 600 пикселей, то медиа-запрос для маленьких экранов из предыдущего примера вступит в силу, то есть, flex-direction будет установлен в column а цвет фона будет Rebecca purple. Когда страница отображается на экранах, широких или равных 600px, вплоть до экранов шириной 1280px, свойство flex-direction будет возвращаться к значению row умолчанию, а цвет фона будет бирюзовым. Как только ширина области просмотра превысит 1280 пикселей, цвет фона вернется к оранжевому.
Вывод
Мы только что многое изучили и получили много знаний о PostCSS-cssnext. Так что ты думаешь? Считаете ли вы PostCSS-cssnext полезным? Надеемся, что вы ушли из этой статьи с пониманием об инструменте и его способности привнести будущие возможности CSS в современный мир. Для тех, кто хочет поиграть с PostCSS-cssnext, я создал этот стартовый набор с Gulp .