Стандарты, увы, не всегда поспевают за нашими потребностями. Иногда соблазн быстро решить задачу одной-двумя нестандартными строчками бывает слишком велик. Особенно если по этой строчке не видно, что она нестандартная. Когда-то давно, в эпоху префиксов, некоторые браузеры любили выпускать свою отсебятину под видом экспериментальных новинок — авось никто разбираться не будет. А в самых запущенных случаях браузеры и вовсе годами тихо саботируют ...
Читать далее »Архив меток: CSS
Удивительный и неизвестный inline-block
Эта статья задумана как начало цикла про загадки, сюрпризы, малоизученные особенности и маленькие полезные секреты самого могущественного, пожалуй, свойства в CSS — свойства display. У нас уже были статьи про новинки этого свойства — значения contents (что это вообще, его сюрпризы, преимущества и подводные камни для доступности) и flow-root. Но и старые, давно знакомые (казалось бы) значения этого свойства таят ...
Читать далее »Химия CSS-гридов
На StackOverflow один участник задал вопрос, как сверстать на CSS Grid периодическую таблицу Менделеева. Примеров периодических таблиц на гридах в Сети навалом, есть и очень симпатичные. Но чаще всего они стремятся воспроизвести лишь внешний вид таблицы, порой вручную расставляя элементы по клеткам. А я вдруг осознал, до чего же это удачный пример для изучения гридов: ведь их логика удивительно похожа ...
Читать далее »Как я произвел удаление 250 КБ неиспользуемых стилей CSS с помощью PurgeCSS
От автора: удаление неиспользуемых стилей CSS в ряде случаев бывает просто необходимым. Я большой поклонник utility-first CSS. После ряда экспериментов на протяжении многих лет, это то, что я нашел самым лучшим, самым удобным и масштабируемым способом написания CSS на сегодняшний день. Когда мой коллега Клемент Денуа и я построили api-search.io, я решил использовать для его стилизации Tailwind CSS, полностью настраиваемую ...
Читать далее »Компоненты и разделение ответственности
Перевод статьи Components and concerns c сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита Порой мы слишком увлекаемся ложными противопоставлениями в мире веб-дизайна и веб-разработки. Недавно я подметил одно, регулярно всплывающее в области дизайн-систем и компонентов. Это насчет разделения ответственности. У веба долгая история разделения структуры, представления и поведения с помощью HTML, CSS и JavaScript. Оно служило ...
Читать далее »Кое-что об инструментах для «неиспользуемого CSS»
От автора: существует множество инструментов, которые помогут вам удалить из проекта «неиспользуемые CSS». Не проходит и недели, чтобы я не сталкивался с тем, что кто-то делится или продвигает подобный инструмент. На некоторых разработчиков это действует. Я забочусь о производительности, и я знаю, что уменьшение размеров файлов — это хорошо для производительности. В самом деле. Уверен, у нас есть CSS, который ...
Читать далее »Центрирование CSS: Самый крутой новый способ и самый крутой старый
От автора: это не полное руководство по центрированию. Это всего лишь небольшое наблюдение за старым и новым. Одна из самых сложных вещей, связанных с центрированием CSS — это когда вам нужно центрировать вещи как по вертикали, так и по горизонтали, и вы не знаете ширины или высоты того, что вы центрируете. Вертикальное центрирование представляет дополнительную сложность. Верите или нет, этот ...
Читать далее »Устойчивый, декларативный, контекстный (новый взгляд на сильные стороны CSS)
Перевод статьи Resilient, Declarative, Contextual с сайта keithjgrant.com для css-live.ru, автор — Кит Грант Я долго размышлял о том, из чего складывается философия CSS. Одни вроде бы «понимают» её, а другие нет. Мне всегда казалось, что если бы можно было прямо указать на это, то, возможно, CSS обрёл бы больше смысла для тех, кто «бодается» с ним. Одной из моих ...
Читать далее »Специфичность CSS для :not(), :has() и :matches()
От автора: несколько лет назад я написал короткую статью про специфичность CSS, близость элементов и обратные псевдоклассы. Все в ней по-прежнему актуально, но у меня есть некоторые обновления. Во-первых, я хотел бы прояснить то, что некоторые люди, возможно, нашли сбивающим с толку. В этом посте я сказал: Но оказывается, что обратный псевдо-класс не считается псевдо-классом. Это может быть понято некоторыми ...
Читать далее »Доступные индикаторы фокуса в CSS: Кое-что, что следует принимать во внимание
От автора: фокус — это странное кольцо, которое появляется, когда вы промахиваетесь мимо клавиши caps и нажимаете вместо этого клавишу табуляции. Это то, о чем я два года назад особо не задумывался. Он просто не был важен для моих проектов дизайна. Но со временем, когда я начал работать над тем, чтобы сделать свои проекты более доступными, я обнаружил, что в ...
Читать далее »