Браузер Safari часто ругают за редкое обновление и задержку внедрения новинок, но есть у него «любимые» области, в которых он опережает всех. Например, CSS-селекторы 4 уровня. Псевдоклассы :matches() — теперь это :is(), :not() с несколькими селекторами и :nth-child()/:nth-last-child() c добавочным параметром of <что угодно> он поддерживает с 2015 года. И именно в его экспериментальной сборке появилась первая реализация долгожданного псевдокласса ...

Перевод статьи React component code smells с сайта antongunnarsson.com, опубликован на CSS-live.ru с разрешения автора — Антона Гуннарсона Это не окончательный вариант статьи, могут быть новые дополнения. Растущая коллекция того, что я считаю «запашками» кода React-компонентов. Что такое «запашок» кода? «Запашок» кода — что-то такое, что вроде бы и не ошибка, но может быть признаком более серьезной проблемы в коде. Больше информации в Википедии. ...

Псевдокласс :has(), он же «родительский селектор» и «селектор предыдущего соседа» — пожалуй, одно из самых революционных новшеств CSS 2022 года (наряду с выражениями от контейнера). Его штатно поддерживают уже два стабильных браузера — Safari 15.4+ и Chrome 105+. Но кроме всеобщей радости, его внедрение принесло и неожиданные проблемы: пользователи стали жаловаться, что с новым обновлением перестали работать некоторые сайты на ...

Перевод статьи Holograms, light-leaks and how to build CSS-only shaders с сайта robbowen.digital для css-live.ru, автор — Робб Оуэн Может, я чуть преуменьшаю, но WebGL — это нечто. За пять минут на любом из сайтов, отмечающих лучшие примеры веб-дизайна наградами, можно увидеть, как сайты один за другим полностью полагаются на мощь canvas. Инструменты вроде threejs привносят в браузер мощь 3D ...

Перевод статьи CSS Container Queries For Designers с сайта ishadeed.com, опубликован на CSS-live.ru с разрешения автора — Ахмада Шадида При работе над дизайном для веба приходится иметь дело с макетами для разных размеров экрана. Опираясь на эти макеты, разработчик определяет ширину или высоту окна браузера медиазапросами, а затем, исходя из этого, меняет макет. Именно так мы верстали веб последние 10 лет, и вот-вот всё ...

Непостижимые алгоритмы Твиттера принесли мне в ленту занятный вопрос Саймона Хойберга, автора нескольких книг про JavaScript: Почему ‘!important’ перекрывает значения в css? ? Для меня это читается как «not important», т.е. «не важно», и я ждал бы от него обратного ? Действительно, для программистов, привыкших обозначать знаком ! операцию отрицания (инверсии), эта запись выглядит очень нелогично. Ее даже включили в ...

Перевод статьи Don’t Fight the Cascade, Control It! с сайта css-tricks.com для css-live.ru. Автор — Мадс Стуманн. Если делать всё правильно и использовать наследование, которое даёт CSS-каскад, то конечного CSS нужно будет писать меньше. Но поскольку часто мы загружаем CSS из разных мест — из-за чего его бывает сложно структурировать и поддерживать, — каскад может сильно расстроить, и CSS из-за него окажется больше, ...

Верите или нет, но каскадные слои — новинка CSS-модуля каскада и наследования 5 уровня, казалось бы, только-только появившаяся в черновиках — уже более двух недель как кандидат в рекомендации, без пяти минут стандарт! И W3C вовсю призывает их реализовывать. А браузеры вот-вот последуют этому призыву: уже 8 февраля по плану выходит Firefox 97 с их поддержкой по дефолту, вскоре за ним ...

Вот уже почти месяц, как псевдокласс :has() – больше, чем «родительский селектор» — можно «пощупать» в браузере. Можно подвести первые итоги эксперимента: всё не так страшно, как казалось, но не так легко, как хотелось бы. Сложнее всего оказалось обрабатывать вложенные в :has() другие функциональные псевдоклассы — :is(), :where(), :not() и сам :has(). И Антти Койвисто — ведущий разработчик реализации :has() ...

Как вы думаете, сколько CSS-градиентов нужно, чтобы нарисовать каждую из этих фигур? Один! ? Причем его даже не надо дублировать: достаточно указать один раз в одном-единственном свойстве. Таким примером в CodePen на днях поделился Темани Афиф, автор занятного и познавательного проекта css-challenges.com. Эта «магия» — заслуга свойства border-image. У нас уже есть статья о нем и его возможностях. Увы, громоздкий ...