🖥 CSS Form Control Styling Level 1
Unofficial Proposal Draft, 5 March 2025

Этот модуль CSS определяет различные способы стилизации элементов управления формами и их частей.

📱 @dev_notes_ru

#CSS #Form

👩‍💻 Спокойное подчёркивание текста ссылки

Синие ссылки с подчёркиванием — хороший стиль по умолчанию для ссылок в основном тексте, но он выглядит чересчур резко. Возможно, мы можем его немного смягчить и сделать более гибким.

Иногда я не могу решить, как должна выглядеть идеальная ссылка в тексте. Она должна быть очевидной, но в то же время должна быть оформлена не настолько интенсивно, чтобы отвлекать от чтения текста. В целом мне нравится идея, что ссылки должны быть синими и подчёркнутыми, так как это наиболее близко к привычному виду ссылок по умолчанию, но я гибко подхожу к этому вопросу. Ссылки, имеющие «фирменный» цвет и отличающиеся от цвета текста, кажутся прекрасными, особенно если они тоже подчёркнуты.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

💡 Совет по CSS

Заметил, что многие разработчики используют margin для добавления промежутков между элементами flexbox, особенно в меню.

Вместо margin во Flexbox можно использовать свойство gap и избежать неудобных :not(:last-child) или сброса margin на первом/последнем элементе. 😉

gap в baseeline с апреля 2021 года. ✅

📱 @dev_notes_ru

#CSS #flexbox #tips

👩‍💻👩‍💻 Тёмная и светлая темы для SVG

Использование CSS функции `light-dark()` для реализации светлого и тёмного режима для SVG иконок,включая SVG, используемые с HTML элементом `img` или в качестве CSS свойства `background-image`.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #HTML #CSS

👩‍💻 Упрощение CSS с псевдоклассом `:is()`

Недавно появился повод воспользоваться новым псевдоклассом CSS `:is()`, и он превосходен! Хочу рассказать, как с его помощью можно значительно уменьшить сложность селекторов.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

CSS Working Group приняла решение разрешить синтаксис диапазона в запросах style. Можно сравнивать с переменной контейнера:

@container style(--var < 5em)

Но можно сравнивать и обычные значения:

style(1em < 20px)
style(sibling-count() > 3)

Функция style также может быть использована для условий встроенных if()

Функция style() разработана для работы с именами свойств, поэтому можно использовать переменные без var(). Возможно, когда-нибудь браузеры также позволят обращаться к нестандартным свойствам напрямую.

Но, так же можно использовать var(). Если вам нравится var() или возможность использования резервных значений, он тоже работает!

📱 @dev_notes_ru

#CSS #feature

📱 @dev_notes_ru

#joke #css

👩‍💻 Понимание селектора `:root` и CSS переменных

Используйте возможности CSS3 с селектором `:root`, упрощающим глобальную стилизацию, повышающим удобство сопровождения и открывающим динамичный, отзывчивый дизайн.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

Обновлён цикл статей по рефакторингу CSS

🖥 Рефакторинг CSS: Введение
🖥 Рефакторинг CSS: Стратегия, тестирование и сопровождение
🖥 Рефакторинг CSS: Оптимизация размера и производительности

📱 @dev_notes_ru

#Frontend #CSS #Рефакторинг

CSS функции `min()` и `max()`

По моему опыту, CSS функцию clamp() любят больше, чем min() и max().

Конечно, она часто оказывается самой удобной, но и min(), и max() также могут принести огромную пользу.

В отличие от clamp(), требующей трех значений, функции min() и max() принимают столько значений, сколько необходимо.

Например, можно сделать что-то вроде этого:

.element {
  inline-size: min(100%, 960px, 60ch);
}

Я начал использовать min() во многих местах, где раньше использовал свойства max-, например, max-inline-size.

Один из распространенных примеров — классы .container/.wrapper:

.wrapper {
  width: min(100% - 32px, 960px);
  margin-inline: auto;
}

В данном случае я выбираю меньшее значение между 100% - 32px и 960px.

Недостатком этих свойств часто является то, что их сложно быстро прочитать, но если в CSS возникает проблема с читаемостью, несколько CSS переменных всегда упростят жизнь.

.wrapper {
  --max-width: 960px;
  --padding: 16px;
  
  width: min(
           100% - var(--padding) * 2,
           var(--max-width)
         );
}

Может показаться, что это требует больше усилий, но я предпочитаю использовать переменные CSS для таких вещей, поскольку при необходимости они легко изменяются.

📱 @dev_notes_ru

#Frontend #CSS

Изменение стиля UA вложенного заголовка `h1`

Браузеры начинают внедрять изменения в стили UA по умолчанию для вложенных заголовков разделов. Разработчикам следует убедиться, что их сайты не используют стили UA в определённых случаях, во избежание непредвиденных результатов и ошибок в проверках Lighthouse. Рассмотрим, что представляют собой эти изменения, как определить, есть ли проблема на ваших страницах, и дадим несколько советов по обеспечению соответствия и улучшению структуры сайтов.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #UA #CSS

Использование `currentColor` в 2025 году

Нужен ли `currentColor`? Не совсем, лучше использовать CSS переменные. Однако он всё равно имеет свою ценность, и об этом стоит поговорить..

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #currentColor

Резервные значения CSS переменных

Браузер не знает, является ли значение CSS переменной валидным, пока переменная не будет разрешена, а к тому времени её обработает каскад и отбросит возможные резервные значения.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

Модернизация с Web-платформой: Уменьшение движения

Демонстрация, как современная веб-платформа может упростить уменьшение движения на старой кодовой базе.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #JavaScript #A11y

`:only-child`

Иногда возникает необходимость изменить стиль элемента, если у него нет соседних элементов, и это очень просто сделать с помощью псевдокласса :only-child.

Это может быть удобно при работе с динамическим контентом, когда необходимо изменить внешний вид, если есть только один дочерний элемент, или если есть что-то вроде <figure>, где необходимо придать элементу разный стиль в зависимости от того, есть или нет <figcaption>.

figure {
  border-radius: 16px;
  padding: 4px;
  border: 1px solid black;
}

figure > img {
  border-radius: 12px 12px 0 0;
}

figure > figcaption {
  padding: 6px;
  border-radius: 0 0 12px 12px;
}

figure > img:only-child {
  border-radius: 12px;
}

Также можно сделать обратное, с помощью :not(:only-child).

Недавно я обнаружил, что сочетание с :has() может быть очень удобным, когда необходимо проверить, есть ли у элемента только один дочерний элемент:

/* Карточки с одним элементом получают больший padding */
.card:has(> :only-child) {
  padding: 2rem;
}

/* Карты с несколькими дочерними элементами сохраняют стандартный padding */
.card {
  padding: 1rem;
}

📱 @dev_notes_ru

#Frontend #CSS

Разноцветное выделение текста в CSS

`::selection` — это круто, но использование селекторов типа `:nth-child(5n+2)` — гораздо интереснее.


🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

Использование `attr()` в CSS для столбцов, цвета и размера шрифта

Теперь можно брать значения из атрибутов HTML, имеющих типы, так что если в элемент поместить атрибут data-font-size="2.2rem", то его значение можно присвоить.


🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS #attr

Стоит ли отказываться от CSS препроцессоров в 2025 году

Разбираем, можно ли в 2025 году отказаться от Sass и PostCSS в пользу нативного CSS, Lightning CSS и Tailwind. Плюсы и минусы современных инструментов.

Когда-то давно в нативном CSS не хватало многих важных функций, поэтому разработчики годами придумывали всевозможные способы упростить написание CSS.

Способы упрощения написания CSS можно разделить на две группы:

✅ Препроцессоры
✅ Постпроцессоры

К препроцессорам относятся такие инструменты, как Sass, Less и Stylus. Как следует из названия категории, эти инструменты позволяют писать CSS в их синтаксисе, прежде чем компилировать код в валидный CSS.

Постпроцессоры работают в обратном направлении — вы записываете в CSS-файл невалидный синтаксис CSS, а постпроцессоры изменяют эти значения в валидный CSS.

Сегодня существует два основных постпроцессора:

✅ PostCSS
✅ LightningCSS

PostCSS — это самый большой представитель этого направления, а Lightning CSS — новый и заслуживающий внимания.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

CSS `if()`: новая функция условной логики доступна в Chrome 137+

CSS с каждым днем превращается в настоящий «язык программирования». С появлением новых возможностей, таких как CSS переменные, функция `calc()`, псевдоклассы `:has()` и `:is()`, а также универсальные `@media` запросы, CSS упрощает создание сложных стилей и макетов.

В CSS появилась новая функция if(), пока доступная только в Chrome 137 и выше. Это первый шаг к условной логике прямо в стилях.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS

Зачем нужны логические свойства CSS

Сегодня я хотел бы поговорить о логических свойствах CSS — новом (и, возможно, более эффективном) способе определения свойств, которые по своей природе являются направленными.

🖥 Читать статью

📱 @dev_notes_ru

#Frontend #CSS