Верстка \ CSS 3

Flexbox и Grids — ваши лучшие друзья в макетировании

От автора: мы решили развеять мифы о Flexbox и Grids, чтобы показать мощь этих технологий при их совместном использовании. Реализация Grids во всех браузерах заняла более шести лет. На протяжении всей жизни спецификации вокруг нее велась полемика. В 2011 ее встретили со скептицизмом, так как команда Microsoft Developer Team объявила о префиксной поддержке для IE10. Недостаток информации о предложении W3C заставил некоторых разработчиков сомневаться в необходимости другой системы макетирования, так как у нас уже были обтекания, таблицы и Flexbox. Тем не менее, благодаря усилиям разработчиков и членов CSS Working Group (Rachel Andrew и Jen Simmons) популярность Grids начала расти, а значит, появились behind-flag и ночные сборки.

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

Верстка \ CSS 3

Интригующий Selector CSS level 4

От автора: селекторы CSS массово прогрессировали на протяжении многих лет, предоставляя разработчикам гораздо больше возможностей для ориентации определенных битов на своих страницах. Примеры в этой статье являются частью спецификации CSS selector level 4. Давайте погрузимся и исследуем семь из этих интригующих селекторов, из которых, я гарантирую, некоторые вы ещё ни разу не использовали на практике!

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

Верстка \ CSS 3

CSS font display: будущее рендера шрифтов в вебе

От автора: если шрифт отсутствует на мобильном устройстве, его необходимо скачать. Это один из минусов веб-шрифтов. Пока шрифт не станет доступным, браузеру нужно решить, как отобразить блок текста с этим шрифтом. И сделать это нужно так, чтобы смена шрифтов несильно повлияла на UX и восприятие производительности.

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

Верстка \ CSS 3

Удаление неиспользуемых CSS стилей

От автора: рассуждать о монолитных стилях довольно сложно, так как, обычно, CSS файлы часто раздуваются. Удаление неиспользуемых стилей CSS должно перевести ситуацию в управляемое русло. Прежде чем мы начнем искать неиспользуемые стили, стоит отметить, что существует множество других стратегий написания обслуживаемых стилей. Наши стили можно разделить на логические части (макет страницы, кнопки, сетки, виджеты и т.д.) и использовать понятную систему именования (например, БЭМ). Как правило, разработчики делают это еще до того, как ищут неиспользуемые правила. Я думаю, это правильно, ведь стили имеют долгосрочное воздействие.

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

Верстка \ CSS 3

Как сделать прелоадер для сайта

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

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

Верстка \ CSS 3

Псевдокласс :focus-within

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

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

Верстка \ CSS 3

Пользовательские CSS-свойства – ежедневное использование

От автора: если коротко: мы используем переменные postcss-css для обработки стилей, чтобы можно было использовать пользовательские CSS-свойства в разработке, сохраняя кроссбраузерность. Похоже, что сейчас пользовательские CSS-свойства (или CSS переменные) просто везде. В сети полно постов, показывающих как, что и каким образом делать, но очень мало примеров повседневного использования. Если у вас нет четкого определения пользовательским свойствам, то на Smashing Magazine есть хорошая статья – пора использовать пользовательские CSS-свойства.

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

Верстка \ CSS 3

Пошаговое руководство по созданию тултипов на чистом CSS

От автора: не так давно я проработал небольшой урок по созданию простых тултипов на чистом CSS (без дополнительных HTML-тегов и JS). Чуть позже я использовал эту технику в своем проекте и придумал парочку советов по тому, как сделать тултипы еще лучше. Эта статья – пошаговый урок, который поможет понять эти CSS-советы, чтобы и вы могли создавать тултипы на чистом CSS. К концу статьи вы научитесь добавлять тултип к любому элементу с помощью простого атрибута.

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

Верстка \ CSS 3

Свойство backdrop-filter

От автора: свойство backdrop-filter CSS позволяет применять фильтры к контенту позади элемента. Свойство является расширением к спецификации Filter Effects Module Level 1, в которой вводится свойство filter. Новое свойство использует синтаксис filter, но сам эффект применяется к фону элемента.

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