Главная » Архив меток: CSS (страница 30)

Архив меток: 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 и нажимаете вместо этого клавишу табуляции. Это то, о чем я два года назад особо не задумывался. Он просто не был важен для моих проектов дизайна. Но со временем, когда я начал работать над тем, чтобы сделать свои проекты более доступными, я обнаружил, что в ...

Читать далее »