Верстка \ 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, но сам эффект применяется к фону элемента.

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

Верстка \ CSS 3

Нативная валидация форм

От автора: в этой серии статей я буду излагать свои мысли после тщательного изучения современной валидации форм в CSS и JS. Я расскажу про нативные сообщения в HTML-валидации, CSS псевдоклассы :invalid и :valid, а также про Constraint Validation API, которое должно было упростить валидацию форм, но получилось слегка иначе.

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

Верстка \ HTML&CSS

Создание анимированных SVG-баннеров

От автора: я не занимаюсь дизайном и маркетингом. Я разработчик софта, но, будучи предпринимателем, я занимаюсь всем подряд. Я трачу много времени на создание зарисовок и поиски в Google , чтобы понять, что как работает, и я хотел бы поделиться своими навыками в дизайне и создании анимированной SVG-рекламы.

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

Верстка \ CSS 3

Свойство outline-offset

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

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

Верстка \ CSS 3

Как сделать пользовательские свойства (CSS-переменные) более динамичными

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

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

Верстка \ CSS 3

Проблема с препроцессингом пользовательских CSS-свойств

От автора: в CSS появились пользовательские свойства. Последнее время мы о них часто писали. Поддержка в браузерах хорошая, но ее нет и не будет в старых браузерах типа IE. Я так и вижу, насколько хорош будет «будущий CSS», если позволить препроцессорам портировать его на CSS, совместимый со старыми браузерами. Babel для CSS! Почему нет?!

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

Верстка \ CSS 3

Смотрите спецификацию CSS Grid Layout или что написано в шапке спецификации

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

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