CSS-Tricks на русском Подписаться CSS Tricks - это популярный сайт, посвященный полезным приемам, техникам и ресурсам для веб-разработчиков, в частности, CSS и связанным с ним технологиям. CSS-Tricks на русском RSS thenote.app CSS-Tricks css-tricks.com RSS css-tricks.com
режим записи Свойство CSS writing-mode определяет, располагаются ли строки текста горизонтально или вертикально, а также направление, в котором движутся блоки и строки. .element { writing-mode: vertical-rl; }Это наиболее полезно для таких языков, как китайский, японский или…writing-mode изначально написан от руки и опубликован с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. writing-mode css-tricks.com
Pointer-Events Свойство pointer-events контролирует, может ли элемент стать целью событий указателя, таких как клики, состояния наведения и другие события, основанные на указателе. Другими словами, оно позволяет вам решить, должен ли браузер рассматривать элемент как интерактивный, когда…pointer-events, изначально написанное вручную и опубликованное с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. pointer-events css-tricks.com
Что важно №15: CSS, учитывающий границы, CSS, основанный на времени, CSS на всю ширину и многое другое Подобно прошлому разу, «Важное №15» довольно насыщено — прочитайте все о CSS, учитывающем границы, обеспечении доступности сеточных дорожек, создании веб-дизайнов, основанных на времени, исправлении полноэкранного CSS, улучшении настраиваемых выборов, новых функциях веб-платформы и многом другом.«Важное №15: CSS, учитывающий границы, CSS, основанный на времени, полноэкранный CSS и многое другое» было изначально написано от руки и с любовью опубликовано на CSS-Tricks. Вам также стоит подписаться на рассылку. What’s !important #15: Boundary-aware CSS, Time-based CSS, Full-bleed CSS, and More css-tricks.com
Готовьтесь к мощному свойству CSS border-shape! Недавно мы получили функцию shape() и свойство corner-shape. Что еще нам может понадобиться для создания фигур в CSS? Позвольте мне рассказать: свойство border-shape!Приготовьтесь к мощному свойству CSS border-shape! Изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Get Ready For the Powerful CSS border-shape Property! css-tricks.com
Что !important #14: Оформление промежутков, random(), изменение размера поля и многое другое Я знаю, вы заняты, поэтому в What’s !important #14 я быстро пробегусь по тому, что произошло за последние несколько насыщенных недель, несмотря на небольшое количество обновлений браузеров. От CSS Quake до CSS Gap Decorations — это нельзя пропустить!What’s !important #14: Gap Decorations, random(), field sizing и многое другое, изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. What’s !important #14: Gap Decorations, random(), field sizing, and More css-tricks.com
Сдвигающаяся грань между состояниями CSS и событиями JavaScript В CSS всегда были псевдоклассы, которые стилизовали элементы в зависимости от взаимодействия пользователя. Однако последние нововведения стирают грань между тем, на что "слушает" CSS, и тем, как они становятся альтернативой тому, на что обычно слушает JavaScript."Стирающаяся грань между состояниями CSS и событиями JavaScript" была написана вручную и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на их рассылку. The Shifting Line Between CSS States and JavaScript Events css-tricks.com
translateZ() Функция translateZ() приближает или отдаляет элемент от пользователя.translateZ() изначально была написана вручную и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. translateZ() css-tricks.com
translateY() Функция translateY() смещает элемент по вертикали на указанное расстояние.translateY() изначально написана вручную и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. translateY() css-tricks.com
translateX() Функция translateX() сдвигает элемент по горизонтали на указанную величину.translateX() изначально была написана от руки и опубликована с любовью на CSS-Tricks. Вам также следует подписаться на рассылку. translateX() css-tricks.com
перевести() Функция CSS translate() сдвигает элемент с его исходного положения на двухмерной плоскости.Функция translate() изначально была написана вручную и опубликована с любовью на CSS-Tricks. Вам также следует подписаться на рассылку. translate() css-tricks.com
Использование анимаций, управляемых прокруткой, для противоположных направлений прокрутки Иногда у дизайнеров бывают глупые идеи, которые в конце концов вам полюбятся. Мне это случилось с этой концепцией, где мне пришлось создать столбцы элементов, движущихся в противоположных направлениях, когда пользователь прокручивает страницу.Замена встраивания CodePenПримечание: Это …Использование анимаций, управляемых прокруткой, для противоположных направлений прокрутки, изначально написано и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку новостей. Using Scroll-Driven Animations for Opposing Scroll Directions css-tricks.com
Первый взгляд на анимации, запускаемые при прокрутке Давайте рассмотрим различия между анимациями, управляемыми прокруткой, и анимациями, запускаемыми прокруткой.Первый взгляд на анимации, запускаемые прокруткой, изначально был написан от руки и с любовью опубликован на CSS-Tricks. Вам также стоит подписаться на рассылку. A First Look at Scroll-Triggered Animations css-tricks.com
Сирена песня ariaNotify() Появился совершенно новый метод ariaNotify(), определенный спецификацией WAI-ARIA 1.3, который предоставляет средства для программного запуска озвучивания в программе чтения с экрана.«Песнь сирены ariaNotify()» изначально была написана от руки и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. The Siren Song of ariaNotify() css-tricks.com
Реквизит для этого Props for That создает динамические элементы на основе того, что CSS обычно не может отображать в браузере. Например, положение курсора, значения прогресса, определенные состояния форм, текущее время, скорость прокрутки.Prop For That изначально был написан вручную и опубликован с любовью на CSS-Tricks. Вам также стоит подписаться на их рассылку. Prop For That css-tricks.com
Что важно #13: @функция, alpha(), CSS Wordle и многое другое Функции CSS, функция alpha(), сеточные ряды, некоторые вещи о диалоговых окнах, о которых вы, возможно, не знаете, CSS Wordle и многое другое — это то, что важно сейчас.Что важно #13: @function, alpha(), CSS Wordle и многое другое, изначально написано и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. What’s !important #13: @function, alpha(), CSS Wordle, and More css-tricks.com
Почему не работает переход между 3D-видами? Почему мой переход 3D-просмотра не работает?! Sunkanmi решает эту проблему и предлагает элегантное решение.«Почему мой переход 3D-просмотра не работает?» изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. Why Isn’t My 3D View Transition Working? css-tricks.com
Нет необходимости включать «навигацию» в ваши метки навигации Одна из тех нюансов, которую стоит хранить в запасе, когда вы пишете для программ чтения с экрана.Не нужно включать слово «навигация» в метки навигации, которые были написаны от руки и опубликованы с любовью на CSS-Tricks. Также стоит подписаться на новостную рассылку. There’s no need to include ‘navigation’ in your navigation labels css-tricks.com
Создание запоминающихся веб-опытов: Современный набор инструментов CSS Существует множество способов создавать запоминающиеся впечатления. Иногда это так просто, как форма, которая заполняется гладко. Но здесь я хочу поделиться техниками, которые я использую, когда хочу, чтобы сайт казался живым и запоминался.Создание запоминающихся веб-опытов: современный набор инструментов CSS, изначально написанный и опубликованный с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Creating Memorable Web Experiences: A Modern CSS Toolkit css-tricks.com
Прокрутка с управлением, прокрутка с триггером, состояния прокрутки и переходы представления Я сказал одно, а имел в виду другое, и использовал одно, когда мне нужно было другое. Сравниваю анимации, управляемые прокруткой, анимации, запускаемые прокруткой, состояния прокрутки в запросах контейнера и переходы представления для своего будущего "я".Scroll-Driven, Scroll-Triggered, Scroll States и View Transitions, изначально написанные от руки и опубликованные с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Scroll-Driven, Scroll-Triggered, Scroll States, and View Transitions css-tricks.com
Еще одна попытка создать идеальную круговую диаграмму CSS... без JavaScript! Мы снова погружаемся в CSS-круговые диаграммы! На этот раз автор Антуан Вильпре объясняет семантические и гибкие диаграммы без единой строки JS.Еще одна попытка создать идеальную CSS-круговую диаграмму... без JavaScript! Изначально написана от руки и с любовью опубликована на CSS-Tricks. Вам определенно стоит подписаться и на рассылку. Another Stab at the Perfect CSS Pie Chart… Sans JavaScript! css-tricks.com
offset-path Свойство offset-path в CSS определяет путь движения, по которому элемент будет следовать во время анимации.Изначально это свойство называлось motion-path. Оно, как и все остальные связанные свойства motion-, переименовываются в спецификации в offset-. Мы меняем…offset-path, изначально написанное вручную и опубликованное с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. offset-path css-tricks.com
@custom-media Правило @custom-media в CSS позволяет создавать псевдонимы для медиа-запросов.@custom-media изначально было написано вручную и опубликовано с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. @custom-media css-tricks.com
@функция Правило @function определяет пользовательские CSS-функции. Эти пользовательские функции представляют собой повторно используемые блоки CSS, которые могут принимать аргументы, содержать сложную логику и возвращать значения на основе этой логики.@function изначально написана вручную и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. @function css-tricks.com
::поиск-текст Псевдоэлемент CSS ::search-text выбирает совпадающий текст из функции браузера "найти на странице". ::search-text изначально написан и опубликован с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. ::search-text css-tricks.com
Утилита Astro Markdown Component для любого фреймворка В предыдущей статье я говорил о том, почему и как использовать компонент Markdown в Astro.Здесь мы расширим эту тему и поможем вам использовать Markdown везде — независимо от используемого вами фреймворка. Итак, …Утилита компонента Astro Markdown для любого фреймворка была написана и опубликована с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Astro Markdown Component Utility for Any Framework css-tricks.com
Что важно #12: Тестирование Safari, ::checkmark, позиционирование HTML-якорей и многое другое Старое (тестирование в Safari, когда у вас нет Safari), новое (::checkmark), промежуточное (позиционирование якорей, но с использованием HTML) и многое другое.Что такое !important #12: Тестирование Safari, ::checkmark, позиционирование HTML- якорей и многое другое, написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. What’s !important #12: Safari Testing, ::checkmark, HTML Anchor Positioning, and More css-tricks.com
Раскрытие текста с помощью буквенного интервала CSS Пока мы не получим что-то вроде ::nth-letter, мы всё равно можем создать некоторые действительно крутые текстовые эффекты, используя существующие возможности CSS, такие как letter-spacing, ::first-word и ::first-line.Открывающий текст с помощью CSS letter-spacing был написан от руки и опубликован с любовью на CSS-Tricks. Вы действительно должны подписаться на новостную рассылку. Revealing Text With CSS letter-spacing css-tricks.com
Техническое письмо в эпоху ИИ Это не совсем о ИИ. Это о техническом письме в эпоху ИИ. У меня есть некоторые мысли на эту тему, и я надеюсь, что они будут полезны вам, людям, которые читаете.Техническое письмо в эпоху ИИ было написано от руки и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Technical Writing in the AI Age css-tricks.com
Переходы представления между документами: масштабирование на сотни элементов Каждое имя перехода вида на странице должно быть уникальным. Проблема в том, что каждый псевдоэлементовый селектор в вашем CSS нацелен на конкретное имя, поэтому ваши стили анимации взрываются в неуправляемую стену селекторов.Переходы вида между документами: масштабирование на сотни элементов изначально написано и опубликовано с любовью на CSS-Tricks. Вы действительно должны подписаться на новостную рассылку. Cross-Document View Transitions: Scaling Across Hundreds of Elements css-tricks.com
Состояние центрирования CSS в 2026 году Несмотря на бесчисленное количество онлайн-ресурсов, легко запутаться при попытке центрировать элемент. Существуют документированные решения, но действительно ли вы понимаете, почему работает выбранный вами код? Давайте посмотрим на текущее состояние вариантов центрирования сегодня, в 2026 году.Состояние центрирования CSS в 2026 году, изначально написанное от руки и опубликованное с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. The State of CSS Centering in 2026 css-tricks.com
Stack Overflow: Когда мы перестаём задавать вопросы Это всё ещё бьёт по голове, когда видишь крутой спад в вопросах на Stack Overflow. Что это значит для обучения в нашей отрасли?Stack Overflow: Когда мы перестаём задавать вопросы, изначально написано от руки и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на новостную рассылку. Stack Overflow: When We Stop Asking css-tricks.com
Переходы представления между документами: подводные камни, о которых никто не упоминает Это часть 1 из двух частей серии о переходах вида между документами, в которой рассматриваются все подводные камни, от отказа от устаревшего способа подключения к ним до малоизвестного таймаута в 4 секунды.Переходы вида между документами: подводные камни, о которых никто не упоминает, были написаны от руки и опубликованы с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. Cross-Document View Transitions: The Gotchas Nobody Mentions css-tricks.com
Что важно #11: 3D сцены вокселей, Летающий фокус, синтаксис CSS и многое другое Если 3D сцены вокселей (которые можно стилизовать), анимации полета фокуса или новые синтаксисы CSS вам интересны, то этот выпуск What’s !important определенно для вас.What’s !important #11: 3D сцены вокселей, полет фокуса, синтаксисы CSS и многое другое изначально написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку. What’s !important #11: 3D Voxel Scenes, Flying Focus, CSS Syntaxes, and More css-tricks.com
Вычисление и отображение цен со скидкой в CSS Умное использование CSS для расчета и отображения цены продукта со скидкой путем указания базовой цены и суммы скидки, в котором представлены современные возможности CSS, такие как attr(), mod() и round().Расчет и отображение цен со скидкой в CSS изначально написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. Computing and Displaying Discounted Prices in CSS css-tricks.com
rotateX() Функция rotateX() поворачивает элемент вокруг оси X в трехмерном пространстве.rotateX() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. rotateX() css-tricks.com
rotateY() Функция rotateY() вращает элемент вокруг его вертикальной оси y.rotateY() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. rotateY() css-tricks.com
rotateZ() Функция rotateZ() вращает элемент вокруг его оси z, то есть по часовой стрелке или против часовой стрелки.rotateZ() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. rotateZ() css-tricks.com
rotate() Функция rotate() вращает элемент по часовой стрелке или против часовой стрелки в 2D-плоскости.rotate() изначально написана от руки и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. rotate() css-tricks.com
Скоро мы наконец сможем изгнать JavaScript в Тень Предлагаемый API ShadowRealm представляет новый вид области, разработанный специально для изоляции, и только для этого.Скоро мы наконец сможем изгнать JavaScript в ShadowRealm, изначально написанный и опубликованный с любовью на CSS-Tricks. Вам также стоит подписаться на рассылку. Soon We Can Finally Banish JavaScript to the ShadowRealm css-tricks.com
Почему пользователи клавиатуры не могут прокручивать контейнеры переполнения Когда пользователь клавиатуры переходит к таблице с помощью клавиши Tab, фокус попадает на ячейку. Затем они нажимают клавиши со стрелками, чтобы прочитать строку, но ничего не происходит. Ваши пользователи экранных читателей этого не заметили, потому что они ориентируются в дереве доступности, а не в контейнере прокрутки.Почему пользователи клавиатуры не могут прокручивать ваши контейнеры с переполнением, был написан и опубликован с любовью на CSS-Tricks. Вам действительно следует подписаться на рассылку новостей. Why Keyboard Users Can’t Scroll Your Overflow Containers css-tricks.com
Использование CSS для формы углов "сложенные уголки" Я наткнулся на технику складывания углов от Kitty Giraudel. В последнее время я увлекся формами углов, поэтому решил, что эту форму угла можно использовать для создания складываемых углов.Использование CSS corner-shape для создания складываемых углов изначально написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Using CSS corner-shape For Folded Corners css-tricks.com
Подарок в стиле скроллинг-истории для мамы в День матери 2026 Я объясню, как моя мама вдохновила этот эксперимент по скроллинг-истории на День матери 2026 года — но также, как она вдохновила мой подход к разработке и жизни.Подарок скроллинг-истории для мамы на День матери 2026 года, изначально написанный и опубликованный с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. A Scrollytelling Gift for Mum on Mother’s Day 2026 css-tricks.com
API подсказок Google Мэт Маркис о том, как Google делает что-то подобное маркетингу альбома U2, но в области веб-стандартов:Как пользователь Chrome, вы, скорее всего, получили Gemini Nano в виде 4ГБ передачи недавно; без запроса разрешения или необходимости в нем. Если вы удалите его, Оригинальный Prompt API от Google был написан и опубликован с любовью на CSS-Tricks. Вам также следует подписаться на новостную рассылку. Google’s Prompt API css-tricks.com
Создание зигзагообразных макетов CSS с помощью сетки и трюка с трансформацией Большинство сеточных макетов расположены в аккуратных рядах, идеально выровнены, как солдаты в строю. Но иногда вы хотите что-то с большим ритмом, например, зигзагообразный узор. Вот как это сделать с помощью CSS Grid.Создание зигзагообразных макетов CSS с помощью сетки и трюка с трансформацией изначально написано и опубликовано с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку новостей. Making Zigzag CSS Layouts With a Grid + Transform Trick css-tricks.com
Карты фиксированного роста: более хрупкие, чем кажутся Выровнять несколько колонок карточек по одной линии — это головная боль, с которой мы все сталкивались, и это становится еще сложнее при работе с фиксированной высотой.Карточки с фиксированной высотой: более хрупкие, чем кажутся, изначально написаны от руки и с любовью опубликованы на CSS-Tricks. Вам также стоит подписаться на рассылку. Fixed-Height Cards: More Fragile Than They Look css-tricks.com
Что важно #10: HTML в Canvas, шестиугольные карты, оптимизация для электронной бумаги и многое другое Разработчики экспериментировали с HTML-in-Canvas, функцией аналитики карты мира в виде шестиугольников, веб-операционной системой для устройств с электронными чернилами, заменой источников изображений с помощью свойства контента и многим другим. Это Что важно #10.Что важно #10: HTML-in-Canvas, шестиугольные карты, оптимизация для электронных чернил и многое другое изначально написано и опубликовано с любовью на CSS-Tricks. Вам также следует подписаться на рассылку новостей. What’s !important #10: HTML-in-Canvas, Hex Maps, E-ink Optimization, and More css-tricks.com
Важность родного случайности в CSS Мы получаем новые функции для генерации случайных чисел в CSS! Но путь к этому был долгим и извилистым.Важность нативной случайности в CSS, изначально написанная от руки и опубликованная с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. The Importance of Native Randomness in CSS css-tricks.com
contrast() Функция фильтра contrast() увеличивает или уменьшает контрастность элемента.contrast() изначально была написана вручную и опубликована с любовью на CSS-Tricks. Вам действительно стоит подписаться на рассылку. contrast() css-tricks.com
контрастный цвет() Функция contrast-color() принимает значение и возвращает либо черный, либо белый цвет, в зависимости от того, какой из них является наиболее контрастным для этого значения.Функция contrast-color() изначально была написана вручную и с любовью опубликована на CSS-Tricks. Вам действительно стоит подписаться на рассылку. contrast-color() css-tricks.com
Теперь используем несуществующий ::n-буквенный селектор Мой обходной путь может дать властям еще одну причину заявить, что нативная поддержка не нужна, или если мой хак с :nth-letter будет широко использоваться, боги браузеров могут признать необходимость его реальной реализации.Давайте использовать несуществующий псевдоселектор ::nth-letter прямо сейчас, изначально написанный от руки и с любовью опубликованный на CSS-Tricks. Вам также стоит подписаться на рассылку. Let’s Use the Nonexistent ::nth-letter Selector Now css-tricks.com
