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

От автора: удаление неиспользуемых стилей CSS в ряде случаев бывает просто необходимым. Я большой поклонник utility-first CSS. После ряда экспериментов на протяжении многих лет, это то, что я нашел самым лучшим, самым удобным и масштабируемым способом написания CSS на сегодняшний день. Когда мой коллега Клемент Денуа и я построили api-search.io, я решил использовать для его стилизации Tailwind CSS, полностью настраиваемую ...

От автора: шесть лет назад, если бы вы спросили меня, как я использовал трансформацию и псевдо-контент, я бы сказал вам «не использовал». Теперь я использую их сотни раз в крупных проектах, и я не могу представить проекта любого размера в последние годы, когда я не использовал эти инструменты — псевдоэлементы CSS и transform — для достижения визуальных эффектов, анимаций и ...

От автора: я не думаю, что это часто встречаемая болезнь или что-то подобное, но я видел, как это делали несколько раз и даже настаивали на этом. Вот, что я имею в виду… Когда вы решаете сделать подключение шрифтов font face, то переходите в Google Fonts и выбираете шрифт, например, Open Sans, и он дает вам либо ссылку <link>, либо @import ...

От автора: существует множество инструментов, которые помогут вам удалить из проекта «неиспользуемые CSS». Не проходит и недели, чтобы я не сталкивался с тем, что кто-то делится или продвигает подобный инструмент. На некоторых разработчиков это действует. Я забочусь о производительности, и я знаю, что уменьшение размеров файлов — это хорошо для производительности. В самом деле. Уверен, у нас есть CSS, который ...

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

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

От автора: за последние несколько лет CSS Layout резко изменился, как и способ разработки интерфейса наших сайтов. Теперь у нас есть реальный выбор с точки зрения методов компоновки, которые мы используем в CSS для разработки наших сайтов, а это значит, что нам часто приходится выбирать, какой подход принять. В этой статье я расскажу о различных методах макета, которые вам доступны, ...

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

От автора: мы много писали о скроллинге здесь на The Pudding. Мы рассмотрели все, начиная со сравнения библиотек и заканчивая адаптивными передовыми методами и глубоким рассмотрением Scrollama. Но всегда есть место для улучшения. Одной из самых заметных попыток реализации прокрутки является липкий графический шаблон, благодаря которому графический элемент сначала «застывает» на несколько этапов прокрутки, а затем переходит к другому состоянию. ...