От автора: Chrome экспериментирует со свойством @container в рамках спецификации уровня ограничения 3 рабочей группы CSS, над которой работают Мириам Сюзанн из Oddbird и группа инженеров по веб-платформе. @container дает нам возможность стилизовать элементы в зависимости от размера их родительского контейнера. @containerAPI не является стабильным, и подлежит изменениям синтаксиса. Если вы попробуете его самостоятельно, вы […]
От автора: имея дело со сложной анимацией CSS, есть тенденция создавать экспансивные @keyframes с большим количеством объявлений. Однако есть пара приемов, о которых я хочу поговорить, они могут помочь упростить задачу, оставаясь при этом ванильным CSS. Несколько анимаций Функции времени Первый более широко используется и знаком многим, а второй менее распространен. Для этого могут быть […]
От автора: прототип долгожданных контейнерных запросов CSS добавлен в Chrome Canary и доступен для экспериментов. Давайте рассмотрим, какую проблему они решают, узнаем, как работают, и посмотрим, как они дополняют существующие функции CSS. В настоящее время контейнерные запросы можно использовать в Chrome Canary, выполнив поиск и включив их в chrome://flags. (Потребуется перезагрузка браузера). Просмотр результатов поиска […]
От автора: сегодня мы рассмотрим fit-content и fit-content(), которые являются специальными значениями для width и grid. Это … сложно — не как концепция, а в практическом применении. Минимальное и максимальное содержание Прежде чем приступить к рассмотрению fit-content, мы должны кратко рассмотреть два особых значения для width: min-content и max-content. Они нужны вам для понимания fit-content. […]
От автора: сегодня я более взволнован новой функциональностью CSS, чем когда либо за последние шесть лет, которые я провел в качестве фронтенд-разработчика. Прототип контейнерных запросов теперь доступен в Chrome Canary. Я помню, как видел много шуток о поддержке контейнерных запросов CSS, но, наконец, они есть. В этой статье я расскажу, зачем нам нужны контейнерные запросы, […]
От автора: сегодня я более взволнован новой функциональностью CSS, чем когда либо за последние шесть лет, которые я провел в качестве фронтенд-разработчика. Прототип контейнерных запросов теперь доступен в Chrome Canary. Я помню, как видел много шуток о поддержке контейнерных запросов CSS, но, наконец, они есть. В этой статье я расскажу, зачем нам нужны контейнерные запросы, […]
От автора: пользовательские свойства в CSS исключительно полезны не только для разметки CSS, но и для абстрагирования сложности и интерактивности на более мелкие, более простые в управлении части. Это краткое руководство поможет вам быстрее понять, как они работают и как их использовать. К примеру, у вас есть такой CSS: [crayon-609e116f37305024372929/] Здесь много повторений, но как […]
От автора: проект редактора рабочей группы CSS для селекторов уровня 4 включает несколько селекторов псевдо-классов, которые уже включены в большинство современных браузеров. В этом руководстве будут рассмотрены те из них, которые в настоящее время лучше всего поддерживаются, а также приведены примеры, демонстрирующие, как вы можете начать их использовать! Селекторы псевдокласса — это те селекторы, которые […]
От автора: после многих лет поисков и обсуждений мы, наконец, получаем контейнерные запросы и они изменят дизайн пользовательского интерфейса, как это сделали медиа-запросы. Наконец-то это случилось: контейнерные запросы действительно в деле! После того, как нам годами говорили, что это невозможно, в прошлом году произошло наконец движение в нужном направлении. В этом году легенда CSS Miriam […]
От автора: после многих лет поисков и обсуждений мы, наконец, получаем контейнерные запросы и они изменят дизайн пользовательского интерфейса, как это сделали медиа-запросы. Наконец-то это случилось: контейнерные запросы действительно в деле! После того, как нам годами говорили, что это невозможно, в прошлом году произошло наконец движение в нужном направлении. В этом году легенда CSS Miriam […]
От автора: еще в 2019 году я поделился тем, как селектор CSS :is() упростит процесс написания CSS. Чего я не знал тогда и узнал совсем недавно, так это трех важных фактов о CSS: is(). Вот эти три факта: Селекторный список Специфика :is() заключается в том, что это более высоко специфичный аргумент. :is() не работает с […]
От автора: у меня непростые отношения со шрифтами. Важно не только то, какой шрифт использовать, но и то, как подобрать их размер для любого заданного размера экрана. Для меня это важно потому, что часто замечаю, как увеличиваю текст с помощью действий ⌘ + или просто переключаюсь в режим чтения Safari для лучшего чтения. Я часто […]
От автора: вы можете встретить компонент пользовательского интерфейса, у которого есть текст над изображением. В некоторых случаях текст будет трудно прочитать в зависимости от используемого изображения. Есть несколько различных решений, таких как добавление наложения градиента или тонированного фонового изображения, тени текста и других. В этой статье я исследую различные подходы и решения проблемы обработки текста, […]
От автора: возможно, материал этой статьи пока может Вам и не пригодится, но я думаю, что селектор CSS :has будет иметь большое влияние на то, как мы будем писать CSS в будущем. Фактически, если он когда-либо появится в браузерах, это разрушит ментальную модель базовой работы CSS, потому что это будет первый пример родительского селектора в […]
От автора: недавно я переделал личный веб-сайт и добавил несколько интересных трюков с CSS. В следующих нескольких постах я поделюсь некоторыми из них. Первый — это подчеркивание. В Интернете довольно часто можно увидеть анимированные эффекты подчеркивания с использованием псевдо-элементов и / или границ. Попробуйте навести курсор на примеры в демонстрации ниже. Они отлично подходят для […]
От автора: еще в 2013 году я написал одну из первых книг о Sass «Sass and Compass для дизайнеров». Хотя я считаю, что это лучшая техническая книга, написанная мною, она была гораздо менее популярна, чем другие мои книги, но это была именно та книга, которую мне хотелось написать. В то время, как разработчик CSS, я […]
От автора: в CSS есть ключевые слова для различных значений по умолчанию. В этой статье я буду рассматривать три из них: initial, inherit и относительно новое unset. Есть большая вероятность того, что, хотя большинство веб-разработчиков сталкивались с ними, многие из них, даже самые опытные, не до конца их понимают. Долгое время я знал об этих […]
От автора: CSS развивается с каждым годом. Сейчас прекрасное время для веб-разработчика, но может быть непросто оставаться в курсе последних функций. У CSS нет определенных версий, как у JavaScript. Итак, как узнать, какие есть последние функции? Консорциум World Wide Web (W3C) ежегодно создает снепшот, содержащий все текущие спецификации в одном документе. К сожалению, в нем […]
От автора: создание адаптивного изображения — это не ракетостроение. Я уверен, что вы уже много их создавали, используя CSS. Однако гибкий размер — это только один из факторов, когда речь идет об адаптивных изображениях. Иногда, в зависимости от типа устройства, нам нужно настроить качество изображения и даже тип изображения для лучшего взаимодействия с пользователем. Сегодня […]
От автора: поговорим о тенях в веб-дизайне. Тени добавляют текстуру, перспективу и подчеркивают размеры объектов. В веб-дизайне использование света и тени может добавить физического реализма и может использоваться для создания насыщенных тактильных интерфейсов. Взгляните на рисунок ниже. Он о велосипедных турах по Исландии. Обратите внимание на приукрашенную тень велосипедиста и на то, как она создает […]
От автора: для создания смешанных стилей символа или текста можно использовать плагин, помогающий стилизовать текст. Несмотря на то, что концепция хороша, реализация оставляет желать лучшего, поскольку скрипты, которые будут использоваться, являются сплошным мусором, а применяемая техника — это грубое принуждение, и CSS на самом деле может делать это сам с помощью linear-gradient и background-clip!. Проблемы […]
От автора: теперь вы можете использовать Chrome DevTools для визуальной проверки CSS-сеток и их отладки. CSS Grid — это модуль, который позволяет более эффективно разрабатывать сложные адаптивные веб-дизайны, сохраняя при этом согласованность между браузерами. Для разработчика CSS Grid — это инструмент, который помогает справляться с такими вещами, как повторное использование кода, бесконечные размеры экрана, скорость […]
От автора: CSS — это язык, которым в какой-то момент пользуются почти каждый разработчик. Хотя это язык, который мы иногда принимаем как должное, он очень мощный и имеет множество нюансов, которые могут помочь (или навредить) нашему дизайну. Вот 30 лучших практик CSS, которые помогут вам написать надежный CSS и избежать некоторых дорогостоящих ошибок. 1. Сделайте […]
От автора: представьте себе красивый и высокий header веб-сайта с большим количеством отступов сверху и снизу от содержимого. Когда вы прокручиваете вниз, он сжимается, уменьшая часть заполнения рабочей области, освобождая экран для другого контента. Обычно вам придется использовать некоторый JavaScript, чтобы добавить подобный эффект сжатия, но с момента появления position: sticky есть способ сделать это, […]
От автора: если вы проектируете или разрабатываете веб-сайты, не используйте px. Абсолютные единицы (px, in, mm, cm, pt, и pc) не подходят как для доступности и адаптивного дизайна, так и при использовании таблиц для разметки. Из всех доступных абсолютных единиц, пиксели (px) являются единственными упорно не желающими уходить. Мы коллективно (и справедливо!) отказались от всех […]
От автора: я никогда не стремлюсь специально критиковать какие-либо технологии. Я считаю, что у каждой технологии есть свой допустимый вариант использования. Но как разработчику необходимо проанализировать технологию, а также ее плюсы и минусы, прежде чем принимать ее как есть. Одна из новейших технологий, которой в наши дни уделяется много внимания, — это Tailwind CSS. Когда […]
От автора: сегодня такое прекрасное время для написания CSS. Бывали у вас такие моменты, когда вы что-то кодируете и думаете про себя: «Я хочу, чтобы этот [текст, изображение, поле, вставьте элемент по вашему выбору здесь] увеличивался или уменьшался в зависимости от размера области просмотра … но только до определенного момента?». Если вы еще не испытали […]
От автора: в статье будут рассмотрены низкоуровневые API, которые подключаются к процессу стилей и макета движка рендеринга вашего браузера. Примечание. Исходный код демонстрации, обсуждаемой во второй половине этой статьи, можно найти на GitLab. Как я уже упоминал в своей недавней статье об анимации холста внутри компонентов React, мне нравится HTML-холст. Поэтому я был очень взволнован, […]
От автора: в блоге WebKit подробно описано, как использовать отдельные свойства transform CSS в последней версии Safari Technology Preview. Это приводит браузер в соответствие со спецификацией CSS Transforms Module Level 2, которая выделяет функции translate(), rotate() и scale() из transform в отдельные свойства: translate, scale и rotate. Итак, вместо того, чтобы связывать эти три функции […]
От автора: если вы когда-либо пытались поместить липкий элемент в макет сетки и наблюдали, как элемент прокручивается вместе с остальным содержимым, вы, возможно, замечали, что position: sticky с CSS Grid не работает. Не стоит волноваться! Вполне возможно совместить эти два макета для работы вместе. Все, что вам, вероятно, понадобится, это еще одна строка CSS. Проблема […]
Свежие комментарии