Тег: верстка

CSS Custom Properties. CSS-переменные vs Sass-переменные

CSS Custom Properties. CSS-переменные vs Sass-переменные

CSS-переменные — это пользовательские CSS-свойства (Custom Properties), экспериментальная технология, находящаяся на третей стадии редакторского черновика (Editor’s Draft, о котором уже упоминалось в статье про CSS вложенности. Но не смотря на это, пользовательские CSS-свойства поддерживаются в большинстве современных и популярных браузерах. Поэтому данный синтаксис вполне можно применять как есть, но если вам все-таки нужно осуществить поддержку и в более старых браузерах, то необходимо использовать плагин postcss-custom-properties.

Шаблонизатор Nunjucks от Mozilla

Поговорим о шаблонизаторе Nunjucks от Mozilla, который вдохновлен jinja2. Он достаточно мощный, поддерживает наследование шаблонов, асинхронное управление кодом, макросы, пользовательские теги и много другое. В нем есть все, что необходимо для комфортной фронтэнд разработки. В этой статье мы вкратце разберем основные возможности данного шаблонизатора.

Возможности шаблонизатора Nunjucks

Вложенные CSS-правила (CSS Nesting)

Недавно был опубликован редакторский черновик (Editor’s Draft) модуля CSS Nesting. В нем описаны новые правила синтаксиса, с помощью которых можно будет вкладывать одни CSS-правила в другие (наподобие того, как это делается в препроцессорах).

CSS Nesting Module. Вложенности в CSS

Ресурсы необходимые для верстальщика

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

  • Can I use — довольно известный ресурс, с помощью которого можно узнать поддержку и совместимость определенных свойств и технологий с разными версиями браузеров. Название говорит само за себя.

Например, статистика использования браузеров https://caniuse.com/usage-table, по ней мы можем определить, сколько процентов пользователей имеется у каждого браузера.

Или вот https://caniuse.com/#feat=flexbox — по таблице мы видим, что флекс-свойства работают во всех браузерах последних версий (но не работают в IE9 и ниже).

Can I use
Can I use

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

Полезные расширения Google Chrome для веб-разработчиков

Ниже будет небольшая подборочка 🙂

Полезные расширения Google Chrome для веб-разработчиков:

  • PerfectPixel — расширение, помогающее верстать с пиксельной точностью. То есть, вы выбираете изображение (макет разрабатываемого сайта) и регулируя его положение на странице, с легкостью сможете сверстать сайт, идеально совпадающий с макетом. Также есть возможность настроить прозрачность, масштаб и инверсию данной подложки.
Настройки PerfectPixel
Настройки PerfectPixel

Как быстро выложить сайт на GitHub хостинг с помощью PhpStorm

Один из самых простых и удобных способов быстро выложить сайт на GitHub хостинг — воспользоваться возможностями редактора PhpStorm.

В PhpStorm осуществлена интерактивная работа с Git — это огромный плюс данного редактора, дающий возможность работать с системой контроля версий даже без знаний команд, и снижающий риск осуществления ошибок.

irene-97 — пользователь GitHub, cantus — название сайта
irene-97 — пользователь GitHub, cantus — название сайта

На примере я покажу, как выложить сайт на Github хостинг (сделать его доступным по ссылке).

Flexible Boxes — CSS флексбокс генератор

Flexible Boxes — это очень полезный ресурс для тех, кто использует флексы в вёрстке сайтов.

С помощью Flexible Boxes вы сможете интерактивно изобразить желаемое расположение блоков, и мгновенно увидеть результат реализации на HTML и CSS.

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

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