Главная » Css live

Css live

Удар откуда не ждали: псевдокласс :has() ломает сайты на jQuery

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

Читать далее »

Голограммы, пленочные засветки и шейдеры на чистом CSS

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

Читать далее »

CSS-выражения от контейнера для дизайнеров

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

Читать далее »

Почему у !important в CSS восклицательный знак в начале?

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

Читать далее »

Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами

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

Читать далее »

Новогодние подарки Рабочей группы CSS: значения и единицы 4 уровня, медиавыражения 4 и 5 уровней

Праздничные новогодние хлопоты не мешают Рабочей группе CSS обновлять спецификации. Накануне нового года вышли три обновленных модуля CSS: Значения и единицы 4 уровня (рабочий черновик). Добавлен параграф о вычислении значений типа URL (он унифицирован со спецификацией Fetch, что автоматом снимает вопросы о взаимодействии c CORS и т.п.). Семейство «вьюпортных» единиц (vw, vh…) пополнилось вариантами для большого, маленького и динамического вьюпорта ...

Читать далее »

День зимнего солнCSSтояния: новые публикации CSS и приятный сюрприз Safari

21 декабря, самый короткий день в 21-м году 21 века, принес сразу несколько приятных CSS-новостей. Во-первых, у CSS в очередной раз обновилось официальное определение — уже девятое по счету (можно сказать, «CSS9»🤣). Отличий от прошлогоднего не очень много. В само «официальное определение» (т.е. модули, по мнению редакторов полностью проработанные, покрытые тестами и готовые к внедрению) добавились стили для счетчиков (возможность ...

Читать далее »