Верстка \ CSS 3

Улучшаем внешний вид ссылок с помощью модуля CSS Text Decoration

От автора: интернет работает на ссылках. Помимо всего прочего, у ссылок очень строгие ограничения по стилям, по большей части из соображений безопасности. Дизайнеры, например, Marcin Wichary заметили, что эти ограничения влияют на разборчивость ссылок, поэтому они предложили свои способы обхода этих запретов. CSS стандарты развиваются, и множество из этих проблем постепенно решаются, что улучшает юзабилити и внешний вид ссылок.

Продолжить чтение

Верстка \ CSS 3

Балансировка текста и изображений с помощью Flexbox

От автора: в конце семестра студенты сдают мне свои работы. В этих демо зачастую можно встретить очень длинный текст сбоку или под изображениями, или же наоборот, слишком большие изображения с небольшим отрывком текста. В работу дизайнера входит балансировка текста и изображений, чтобы все смотрелось гармонично: что-то одно не должно заглушать страницу за счет другого. Это крайне важно в выносках (небольшие отрывки текста с изображением), которые должны быть жидкими и уметь адаптироваться к изменению размера экрана и непредсказуемому изменению количества контента. После недолгих экспериментов я нашел идеальное решение, удовлетворяющее обоим условиям. Для этого нам понадобится flexbox и фоновые изображения.

Продолжить чтение

Верстка \ CSS 3

Из Sass в PostCSS

От автора: я работал с Sass на протяжении многих лет. Но сейчас я хочу поменять способ написания стилей с помощью PostCSS и плагина cssnext. Мне нравится идея, что уже сегодня можно писать CSS синтаксисом будущего и использовать инструменты, подходящие под те, к которым я привык. Мой личный сайт идеально подходит для тестирования новых функций.

Продолжить чтение

Верстка \ CSS 3

Стилизация лендингов с помощью PostCSS

От автора: у нас есть Sass, LESS, Stylus, зачем нам препроцессор PostCSS? У Sass есть свой уникальный синтаксис, а у PostCSS нет особых ограничений по написанию стилей. Это больше инструмент трансформации CSS. Трансформации в PostCSS осуществляются с помощью плагинов, написанных на JS. Входящий CSS конвертируется в дерево, которое потом трансформируется плагинами. Конечный этап заключается в обратной конвертации дерева в CSS при помощи PostCSS.

Продолжить чтение

Верстка \ CSS 3

Сокращенный синтаксис CSS считается антишаблоном

От автора: я часто сталкиваюсь с небольшой, но удивительно значимой проблемой, когда работаю с чьим-то кодом, делаю рефакторинг, проверяю его. И проблема заключается в использовании сокращенного синтаксиса CSS.

Продолжить чтение

Верстка \ CSS 3

Создание сложных макетов с PostCSS-Flexbox

От автора: узнайте, как с помощью этой маленькой, но мощной PostCSS функции создавать системы сеток, о которых вы всегда мечтали. Flexbox – замечательный инструмент для сокращения кода. Кроме того, в нем есть несколько отличных функций по изменению порядка сортировки элементов и выравнивания. Однако данный инструмент не проводит вычисления по размерам колонок и разделителей. Эксперты повторяют из раза в раз: Flexbox – хороший инструмент, но это не система сеток.

Продолжить чтение

Верстка \ HTML&CSS

Оптимизация изображений

От автора: каждый разработчик знает, что в вопросе веб-производительности и пользовательского опыта важно каждое изображение. Изображения – это низко висящие плоды оптимизации производительности. Сжатие без визуальной потери качества может принести пользу организациям путем снижения веса страниц без ущерба для работы пользователя, что повышает производительность и привлекает все больше аудитории. Существует множество техник, для определения того, какое изображение необходимо загрузить, но эти «правильные изображения» еще необходимо создать. Целью веб-разработчиков и сервисов по повышению производительности должно быть обеспечение всех пользователей на всех типах устройств и во всех браузерах оптимальными изображениями. (Другой целью должна быть доступность, но это тема для отдельной статьи!).

Продолжить чтение

Верстка \ CSS 3

Директива @support и ее JS двойники. Можно использовать!

От автора: вчера я прочла замечательную статью «директива @supports изменит вашу жизнь» за авторством Шарлотты Джексон. Я наконец выделила время на то, чтобы познакомиться с этой староновой функцией. Давайте быстренько разберем эту директиву.

Продолжить чтение