![[Перевод] Прокачиваем навыки CSS с помощью селектора :has()](https://habrastorage.org/webt/6l/si/tk/6lsitknanqlqucpeyu6efsothve.png)
Привет, друзья! Представляю вашему вниманию перевод этой замечательной статьи, посвященной продвинутому использованию нового CSS-селектора :has(). :has() предоставляет возможность "заглядывать вперед" с помощью CSS и стилизовать родительский элемент (предка). Этот селектор может быть легко расширен для стилизации одного или нескольких дочерних элементов (потомков). Регистрация состояний или позиций элемента позволяет стилизовать почти любую комбинацию элементов как уникальных…
Подробнее![[Перевод] Условные выражения в CSS](https://habrastorage.org/webt/od/j4/cd/odj4cdqkszr4exf6muavvgk6d3s.jpeg)
Мне нравится думать о CSS как о языке дизайна с условными выражениями. На протяжении многих лет CSS был известен как способ стилизации веб-страниц. Однако сегодня этот язык эволюционировал настолько, что в нём уже есть правила условных выражений. Любопытно то, что эти правила реализуются не напрямую (например, в CSS всё ещё нет if/else). Инструменты дизайна наподобие Figma, Sketch и Adobe XD сильно облегчили жизнь дизайнеров, однако им всё равно не хватает той гибкости, которая есть у CSS.
Подробнее
Недавно в LinkedIn встретился очень любопытный пост. Пост был с картинками. На картинках были интерфейсы приложения погоды. Автор поста очень точно подметила — это не совсем про дизайн. Я скажу больше — это совсем не про дизайн. Искусственный интеллект никогда не научится создавать такие штуки как, например, интерфейсы и UI-Kit-ы, не говоря уже о создании и внедрении дизайн-систем в правильном их понимании. Дизайн-систем в мире хватает, и они постоянно развиваются — дополняются и улучшаются.
Подробнее
Всем привет! Я в веб-разработке не так давно. Сейчас я пишу свой сайт, который будет выступать в качестве моего портфолио и, возможно, даже целого проекта. При добавлении модального окна для авторизации на свой сайт, я подумал, а что будет, если публиковать подобные модульные вещи, чтобы любой человек мог их скопировать и не думать о них, а использовать в разработке. То есть создать готовый модуль для встраивания. Мне, как разработчику было бы удобно использовать готовое решение, тем
Подробнее![[Перевод] CSS-селектор :has() и междустрочные интервалы в длинных текстах](https://habrastorage.org/getpro/habr/post_images/c08/9b4/e65/c089b4e652c15967550b753561c5f518.png)
Если вы работали с сайтами, содержащими много длинных текстов, особенно с сайтами на CMS, где пользователи работают в WYSIWYG-редакторе, то вы наверняка писали CSS для управления междустрочными интервалами между различными элементами типографики — заголовками, параграфами, списками и т. д. Читать дальше →
Подробнее![[Перевод] Топ рекомендаций по Core Web Vitals на 2023 год](https://habrastorage.org/webt/65/fk/lb/65fklbb2f2f-gr0shnqx_11kd_s.png)
Привет, друзья! Представляю вашему вниманию перевод этой замечательной статьи, представляющей собой коллекцию лучших практик, которые по мнению команды Chrome DevRel являются наиболее эффективными способами улучшения показателей Core Web Vitals. Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный…
Подробнее
Я рад пролить свет на тот факт, что CSS grid-template-rows и grid-template-columns теперь можно анимировать во всех основных веб-браузерах! Что ж, CSS Grid уже давно технически поддерживает анимацию, ведь она встроена прямо в спецификацию CSS Grid Layout Module Level 1. Читать дальше →
Подробнее
Сворачивающиеся разделы с контентом, называемые как аккордеон, являются распространенным шаблоном пользовательского интерфейса. Однако контент, скрытый в свернутых разделах, становится невозможным для поиска по странице пользователем. Кроме того, нельзя ссылаться на текстовые фрагменты внутри свернутой области. HTML-атрибут hidden=until-found и событие beforematch могут решить эти проблемы. Добавляя hidden=until-found в контейнер для вашего скрытого контента, вы позволяете браузеру
Подробнее
"Тачка на прокачку" уже давно не выходит. А вот "Django на прокачку" снова продолжает вас радовать. В сегодняшнем эпизоде мы: 1. Узнаем, что такое препроцессоры и чем они интереснее обычного CSS; 2. Разберёмся с SASS и SCSS, узнаем, чем они отличаются; 3. И рассмотрим на практике, как использовать SASS/SCSS в Django-проекте. Как обычно, меньше болтовни – больше кода. Центрирует картинку Макс. Выходит за рамки Егор. Статью написали авторы канала PyLounge.
Подробнее
Напишем слайдеры изображений на чистых HTML и СSS. Меняем только CSS, разметка в HTML остается неизменной. Внешний вид из-за разного CSS при этом разительно различается, а в слайдеры можно вставить неограниченное число картинок. Сначала мы создали круговой слайдер с бесконечным вращением, похожий на виджет-спиннер с изображениями. Затем мы сделали слайдер, пролистывающий стопку фотографий. Продолжение — к старту курса по Fullstack-разработке на Python. Читать дальше →
Подробнее
В предыдущей статье у нас получился красивый слайдер («карусель») с круговым вращением. А сегодня я создам слайдер, пролистывающий стопку «полароидных» снимков. Пока не смотрите код, сначала я должен вам многое про него рассказать. Поехали! К старту нашего курса по Fullstack-разработке на Python. Читать дальше →
Подробнее
Одни расширения добавляют в браузер новые функции, а другие предоставляют данные о посещаемых веб-страницах: Wappalyzer расскажет о технологиях, которые применялись в разработке сайта. Similar web показывает трафик и ранжировании сайта. Momentum изменяет содержание страниц или заменяет домашнюю страницу. Я расскажу о разработке расширения для Chrome на Vue 3 и Quasar. Это расширение которое будет изменять размер шрифта на посещаемых веб-страницах. Подробности — к старту…
Подробнее