От автора: раньше CSS привязывался к физическим измерениям и направлениям, физически отображая элементы слева, справа, сверху и снизу. Мы использовали float left и right, свойства сдвига top, left, bottom и right. Задавали margin, padding и рамки через margin-top и padding-left. Эти физические свойства и значения имеют смысл, если вы работаете в горизонтальной плоскости, сверху вниз и режиме письма слева направо. ...

От автора: CSS становится мощнее. Благодаря функциям типа CSS Grid и пользовательским свойствам (или CSS переменным), мы видим, как развиваются действительно креативные решения. Мы до сих пор не знаем всех возможностей CSS, которые могут упростить написание UI, и это удивительно! Среди этих возможностей сейчас одна из моих любимых в CSS: фильтры. Давайте узнаем, как с помощью фильтров можно решить проблему, ...

От автора: мы используем CSS Grid в процессе разработки на Mud уже в течение нескольких месяцев, и мне очень нравится гибкость, которую это дает мне при компоновке. До сих пор мы обходились без реального решения под Веб — мы пытались придумать что-то с помощью float и flexbox. Но теперь, честно говоря, я не могу представить себе жизнь без Grid! Одна ...

От автора: как я часто говорю, каждый элемент в дереве документа представляет собой прямоугольный блок. В общем, этот «прямоугольный блок» состоит из двух разделов. Во-первых, у нас есть сам блок, который состоит из областей границы, отступов и полей. Во-вторых, у нас есть содержимое блока; область содержимого. Для работы с ней нам пригодится display contents CSS. С помощью свойства CSS display ...

От автора: для сотни инженеров, разработчиков и дизайнеров, работающих над Yelp, обеспечение визуальной согласованности — это сложная задача. Мы перенесли веб-компоненты из Yelp Cheetah в React, чтобы повысить производительность дизайнеров и разработчиков, обеспечивая при этом визуальную согласованность в веб-приложении. И создали Lemon Reset — пакет, содержащий согласованные, кросс-браузерные теги React DOM, оснащенные модулями CSS. Поскольку компоненты системы проектирования являются строительными ...

От автора: некоторое время назад я не знал о свойстве CSS writing mode, пока не наткнулся на статью Ире Адеринокуна Локализация и перевод в Веб.   Если вам не терпится, вот демо-версия, убедитесь, что вы можете изменять размер окна просмотра, чтобы вызывать заданный медиа-запрос CSS. Свойство writing-mode Свойство CSS writing-mode определяет, будут ли строки текста укладываться только горизонтально или вертикально ...

От автора: каждый веб-шрифт включает пустые пространства выше и ниже текста, что затрудняет управление отображением пространства в компонентах пользовательского интерфейса. Я создал инструмент Text Crop Tool, чтобы предоставить разработчикам и дизайнерам возможность удалять эти пустые пространства, от которых больше не будет зависеть высота строки, и точнее отображать компоненты. Вот как я это сделал. Как это работает Я добавил красную рамку ...

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

От автора: иногда сложно устанавливать CSS переменные для изменения системы дизайна: если область видимости переменных слишком мала, система потеряет однообразие. Если переменные слишком глобальные, теряется детализация. Возможно, мы можем решить обе проблемы. Я попробовал бы свести переменные системы дизайна до двух типов: глобальные и компонентные. Глобальные переменные приносят единообразие в компоненты. Компонентные переменные дают детализацию и изоляцию. Позвольте показать вам, ...

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