Новые возможности и полезные советы CSS

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

CSS: от хаоса к возможностям

Если вы давно работаете с веб-разработкой, то помните времена, когда CSS казался хаосом, и приходилось придумывать хаки, чтобы что-то заработало. Сегодня эти времена позади. Современные возможности CSS включают контейнерные запросы, каскады, селекторы дочерних элементов, селектор :has, сетки и под-сетки, новые цветовые пространства и многое другое. Эти инструменты сделали CSS мощным и гибким инструментом. И на этом инновации не заканчиваются! В ближайшем будущем мы можем получить запросы состояния, выравнивание текста, основанное на балансе, и якорное позиционирование в CSS. С таким широким спектром новинок мы предлагаем углубиться в несколько полезных техник и идей.

Основы каскада и специфичности

Многие боятся каскада и специфичности CSS. Однако разобраться с этой концепцией не так сложно, как может показаться. Чтобы помочь вам лучше освоить две самые фундаментальные части CSS, Энди Белл написал замечательный учебник по каскаду и специфике.

.my-element { 
	background: goldenrod; 
	background: coral;
}

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

Тестирование HTML с помощью CSS

Вы знали, что можно тестировать HTML с помощью CSS? Современные селекторы CSS настолько мощные, что это стало реальным. C помощью CSS можно проверять доступность, находить ненужные элементы или анализировать структуру HTML. Эта методика особенно полезна, если у вас нет доступа к коду клиента. Просто отправьте им тестовый CSS-файл, и они смогут сами найти проблемные элементы. Тестирование с помощью CSS имеет ряд преимуществ.

Самоизменяющиеся CSS-переменные

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

Подход использует запросы в стиле контейнеров для доступа к предыдущему состоянию пользовательского свойства. Это может быть полезно, когда вы хотите циклически перебирать различные оттенки, не имея статического списка значений, визуально сопоставить border-radius или, например, вложить списки меню.

Это решение пока является строго экспериментальным (поэтому не используйте его в продакшене!), но поскольку, скорее всего, запросы стиля получат широкую поддержку в браузере раньше, чем inherit(), оно имеет большой потенциал.

Висячая пунктуация в CSS

Свойство hanging-punctuation позволяет выравнивать текст таким образом, чтобы кавычки и другие знаки препинания не нарушали общий вид блока текста. Хотя эта функция поддерживается только Safari, её использование улучшает типографику в поддерживающих браузерах.

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

Небольшой совет, который может избавить вас от множества головных болей, чтобы избежать проблем в формах, добавьте input, textarea { hanging-punctuation: none; }, чтобы пунктуация в полях ввода не выходила за границы.

Проблемы с aspect-ratio

Свойство aspect-ratio упрощает создание адаптивных элементов. И чаще всего это происходит безупречно. Однако есть вещи, которые могут нарушить соотношение сторон. Три основные причины:

1. Одновременное указание ширины и высоты.
2. Контент, который растягивает контейнер.
3. Высота, заданная из неожиданных источников. Как объясняет Крис, одна из возможных поломок - установка обоих размеров, что может показаться очевидным, но может сбить с толку, если один из размеров будет установлен не там, где вы ожидали. Растягивание и контент, заставляющий увеличивать высоту, также могут привести к неожиданным результатам. Эти моменты стоит учитывать, чтобы избежать неожиданных результатов.

CSS для "мозаичных" макетов

Мозаичный (masonry) макет пока недоступен в CSS, но CSS Working Group активно обсуждает два подхода:

1. Расширение CSS Grid.
2. Новый тип отображения display: masonry.