Несмотря на несколько недель ожидания новых функций веб-платформы, у нас возникла проблема «Что нового!» это важно варенье упаковано. Похоже, интернет-сообществу есть что сказать, так что пристегните ремни!
@keyframes Анимации могут быть строками
Питер Кронер поделился интересным фактом @keyframes Анимации – что они могут быть строками:
@keyframes "@animation" {
/* ... */
}
#animate-this {
animation: "@animation";
}Боже мой, время интересных фактов #CSS: имена ключевых кадров могут быть строками. Почему? Что ж, если вы хотите, чтобы ваши ключевые кадры назывались «@keyframes», это очевидно! #webdev
[image or embed]
— Питер Кронер (@sirpepe.bsky.social) 18 февраля 2026 г., 10:33
Я не знаю, зачем вам это нужно, но об этом определенно интересно узнать. @keyframes После 11 лет кроссбраузерной поддержки!
: против = вопросы по стилю
Еще один скрытый трюк, этот трюк от Темани Афиф показывает, что мы можем заменить двоеточие знаком равенства в запросе стиля. Темани проделал отличную работу, объясняя различия, но вот небольшой фрагмент кода, чтобы подвести итог:
.Jay-Z {
--Problems: calc(98 + 1);
/* Evaluates as calc(98 + 1), color is blueivy */
color: if(style(--Problems: 99): red; else: blueivy);
/* Evaluates as 99, color is red */
color: if(style(--Problems = 99): red; else: blueivy);
}Суммируя, = оценивает --Problems по-другому :Хотя у Jay-Z их, несомненно, 99 (он сам так говорил).
повествование .visually-hidden)
Дэвид Бушелл демонстрирует, как создавать Декларативное использование команд вызова — полезная функция, которая позволяет нам пропустить некоторые J’Script в пользу HTML и работает во всех последних веб-браузерах.
Кроме того, благодаря любопытному вопросу Анны Тюдор, статья породила дополнительный материал о минимальном количестве стилей, необходимых для скрытого от просмотра служебного класса. Еще семь часов?
Может быть, нет…
Как обрезать текст с середины
Уэс Бос поделился хитрым трюком, позволяющим обрезать текст посередине, используя только CSS:
Кто-то на Reddit опубликовал демо, в котором CSS обрезает текст с середины. Они не опубликовали код, поэтому вот мой снимок с flexbox.
[image or embed]
— Уэс Бос (@wesbos.com) 9 февраля 2026 г., 17:31
Донни Д’Амато попытался использовать более нативное решение ::highlight()Но ::highlight() К сожалению, он имеет некоторые ограничения. Как отметил Генри Уилкинсон, призыв Хейзел Бакарак к нативным решениям в 2019 году по-прежнему открыт, поэтому скрестим пальцы!
Как управлять цветовыми переменными с помощью относительного синтаксиса цвета
Тео Соти продемонстрировал, как управлять цветовыми переменными с помощью синтаксиса относительного цвета. Хотя это не новая функция или концепция, это, безусловно, лучшее и наиболее полное пошаговое руководство, которое я когда-либо читал, в котором рассматриваются эти сложности.
Как оптимизировать списки (современный способ)
В аналогичной статье для Piccalilli Ричард Раттер подробно показал нам, как настраивать списки, хотя в современном CSS, как я могу только предположить, есть некоторые особенности. Что такое? symbols()? Что такое? @counter-style И extends? Ричард проходит сквозь тебя Все.
Не хватает счетчиков? Хуан Диего создал подробное руководство по CSS-трюкам прямо здесь.
Как создать шкалу шрифтов с помощью :heading
Недавно началось тестирование Safari Technology Preview 237. :heading/:heading()Как объясняет Стюарт Робсон. Однако продолжение еще лучше, потому что оно показывает нам, как pow() Может использоваться для написания более чистой логики шкалы типов, хотя в конечном итоге я остановился на старой школе. –
:heading больше не надо sibling-index(): :
:root {
--font-size-base: 16px;
--font-size-scale: 1.5;
}
:heading {
/* Other heading styles */
}
/* Assuming only base/h3/h2/h1 */
body {
font-size: var(--font-size-base);
}
h3 {
font-size: calc(var(--font-size-base) * var(--font-size-scale));
}
h2 {
font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 2));
}
h1 {
font-size: calc(var(--font-size-base) * pow(var(--font-size-scale), 3));
}Уна Кравец представилась border-shape
Говоря о новых функциях, border-shape Мне удивительно думать, что у нас уже есть – или Желание пройти – corner-shape. Однако, border-shape По-другому, как указывает Уна. Он решает проблемы с ограничениями (поскольку это Является границы), позволяет использовать больше фигур и даже shape() Работайте, и вообще за кулисами все работает по-другому.
Modern.CSS хочет, чтобы вы перестали писать CSS, как будто сейчас 2015 год.
Теперь пришло время начать использовать все возможные современные CSS, и в этом Modern.css хочет вам помочь. Все те удивительные функции, о которых вы забыли, когда впервые прочитали, что они не поддерживаются? Или те, которые вы пропустили или вообще пропустили? Что ж, Modern.css содержит 75 фрагментов кода и продолжает расти, и все, что вам нужно сделать, это скопировать их.
У Кевина Пауэлла также есть для вас несколько фрагментов CSS.
А комментатор? У них тоже есть!
Честно говоря, Кевин — единственный человек, говорящий о веб-разработке, за которым я слежу на YouTube, и это так Сейчас у него почти миллион подписчиков, так что не забудьте нажать кнопку «Подписаться» на Ол К-По.
На случай, если вы это пропустили
На самом деле, ты даже не так уж и много ушел! Вышел Firefox 148 shape() Функция, которая раньше фиксировалась флагом, но теперь является функцией по умолчанию. Safari становится первым, кто протестировал Technology Preview 237 :heading. Это все, что мы видели в наших любимых браузерах за последние несколько недель (конечно, за исключением обычного шквала небольших обновлений).
При этом Chrome, Safari и Firefox объявили о своих целях на Interop 2026, показав, какие функции веб-платформы они намерены гармонизировать во всех веб-браузерах в этом году. больше, чем это Эта неделя компенсирует отсутствие блестящих функций.
Это тоже будет (но теперь можно протестировать в Chrome Canary). border-shape) Является scrolled Ключевые слова для запросов контейнера с состоянием прокрутки. поговорим о брамусе scrolled Запросы состояния прокрутки здесь.
Помните: если вы не хотите ничего пропустить, вы можете увидеть эти быстрые попадания на боковой панели css-tricks.com, как только появятся новости.
Увидимся через две недели!
