CSS и пользовательский интерфейс, CSS и пользовательский интерфейс, CSS и пользовательский интерфейс
Откройте для себя инструменты и методы Chrome, которые помогут улучшить CSS и дизайн пользовательского интерфейса вашего сайта.
,Откройте для себя инструменты и методы Chrome, которые помогут улучшить CSS вашего сайта и дизайн пользовательского интерфейса.
,Откройте для себя инструменты и методы Chrome, которые помогут улучшить CSS вашего сайта и дизайн пользовательского интерфейса.
Совершенствуйте свои навыки разработки пользовательского интерфейса, Совершенствуйте свои навыки разработки пользовательского интерфейса, Совершенствуйте свои навыки разработки пользовательского интерфейса.
Расположение якоря
Расположите элементы относительно друг друга с помощью API позиционирования привязки.
Анимация по height: auto;
(и другие ключевые слова внутреннего размера), Анимация по height: auto;
(и другие ключевые слова внутреннего размера)
Анимация к ключевым словам внутреннего размера и обратно с помощью
interpolate-size
и calc-size()
. Анимация к ключевым словам внутреннего размера и обратно с помощью interpolate-size
и calc-size()
Стиль полосы прокрутки
Используйте свойства
scrollbar-width
и scrollbar-color
для стилизации полос прокрутки.
Баланс переноса текста в CSS
Классическая типографская техника создания разрывов строк вручную для сбалансированных текстовых блоков появилась в CSS.
,Классическая типографская техника ручного создания разрывов строк для сбалансированных текстовых блоков появилась в CSS.
Руководство по цветам CSS высокой четкости, Руководство по цветам CSS высокого разрешения
CSS Color 4 предоставляет в Интернет инструменты и возможности широкого цветового охвата: больше цветов, функций манипуляции и улучшенные градиенты.
CSS Color 4 предоставляет в Интернет инструменты и возможности широкого цветового охвата: больше цветов, функций манипуляции и улучшенные градиенты.
Типизированная объектная модель CSS
Модель типизированных объектов CSS (Typed OM) предоставляет типы, методы и гибкую объектную модель для работы со значениями CSS.
Модель типизированных объектов CSS (Typed OM) предоставляет типы, методы и гибкую объектную модель для работы со значениями CSS.
Начало работы с запросами стилей
Запросите значения стиля родительского элемента, используя правило @container.
,Запросите значения стиля родительского элемента, используя правило @container.
CSS-вложение
Одна из наших любимых функций препроцессора CSS теперь встроена в язык: правила вложения стилей.
,Одна из наших любимых функций препроцессора CSS теперь встроена в язык: правила вложения стилей.
CSS @scope,CSS @scope
Узнайте, как создавать стили с ограниченной областью действия, которые выбирают элементы только в поддереве вашего DOM.
,Узнайте, как создавать стили с областью действия, которые выбирают элементы только в пределах поддерева вашего DOM.
CSS-микс цвета()
Смешивайте цвета в любом из поддерживаемых цветовых пространств прямо из CSS.
,Смешивайте цвета в любом из поддерживаемых цветовых пространств прямо из CSS.
Больше контроля над выбором nth-child()
Предварительно отфильтруйте набор дочерних элементов перед применением к нему логики An+B.
,Предварительно отфильтруйте набор дочерних элементов перед применением к нему логики An+B.
Эксклюзивный аккордеон
Создайте эксклюзивный аккордеон с несколькими элементами
<details>
с одинаковыми name
.
Представляем инертный
Свойство inert — это глобальный атрибут HTML, который упрощает удаление и восстановление событий пользовательского ввода для элемента, включая события фокуса и события от вспомогательных технологий.
,Свойство inert — это глобальный атрибут HTML, который упрощает удаление и восстановление событий пользовательского ввода для элемента, включая события фокуса и события вспомогательных технологий.
CSS-перенос текста красивый
Включите оптимизированный перенос текста: красота важнее скорости.
CSS Grid в DevTools
Как мы разработали и реализовали поддержку инструментов CSS Grid в DevTools.
Как мы разработали и реализовали поддержку инструментов CSS Grid в DevTools.
Поддержка CSS-in-JS в DevTools
Как мы поддерживаем CSS-in-JS в DevTools и чем он отличается от обычного CSS.
,Как мы поддерживаем CSS-in-JS в DevTools и чем он отличается от обычного CSS.
Тень ДОМ
Декларативный теневой DOM
Новый способ реализации и использования Shadow DOM непосредственно в HTML.
Определенные автором имена CSS и теневой DOM
Текущий статус совместимости определяемых автором имен и теневого DOM.
Макет
Как использовать калькулятор()
Укажите размеры в CSS, используя сочетание единиц измерения.
,Указывайте размеры в CSS, используя различные единицы измерения.
Событие для закрепления позиции CSS
Регистрируйте сообщения и запускайте JavaScript.
Сделать свернутый контент доступным
Discoverhidid=until-found, значение атрибута может гарантировать, что контент в разделах-аккордеоне можно будет найти и на него можно будет ссылаться.
,Discoverhidden=until-found, значение атрибута может гарантировать, что содержимое в разделах-аккордеоне можно будет найти и на него можно будет ссылаться.
Примеры использования CSS и пользовательского интерфейса
Почему возможности веб-интерфейса важны для вашего сайта?
Что такое возможности веб-интерфейса и как они могут улучшить вашу воронку конверсии? Каковы преимущества использования этих функций?
Примеры использования анимации, управляемой прокруткой
Откройте для себя преимущества анимации, управляемой прокруткой, с помощью Policybazaar, redBus и Tokopedia.
Посмотреть примеры использования переходов
redBus, Policybazaar и Tokopedia используют API View Transitions и получают преимущества от более высокой производительности и плавного пользовательского интерфейса.
Практические примеры API Popover
Tokopedia использует API Popover, чтобы уменьшить объем кода в своем приложении.
Анимации в сети
API веб-анимации
API веб-анимации предоставляет мощные примитивы для описания императивной анимации из JavaScript.
,API веб-анимации предоставляет мощные примитивы для описания императивной анимации из JavaScript.
Несколько эффектов анимации,Несколько эффектов анимации
Свойство анимации-композиции позволяет контролировать, что должно произойти, когда несколько анимаций одновременно влияют на одно и то же свойство.
Свойство анимации-композиции позволяет контролировать, что должно произойти, когда несколько анимаций одновременно влияют на одно и то же свойство.
Сложные кривые анимации с помощью Linear()
Linear() — это функция смягчения CSS, которая линейно интерполирует между своими точками, позволяя воссоздать эффекты отскока и пружины.
,linear() — это функция смягчения CSS, которая линейно интерполирует между своими точками, позволяя воссоздать эффекты отскока и пружины.
Анимация, управляемая прокруткой
Используйте функции «Прокрутка временных шкал» и «Просмотр временных шкал», чтобы создавать анимацию, управляемую прокруткой, декларативным способом.
,Работайте с временными шкалами прокрутки и просмотром временных шкал для создания анимации, управляемой прокруткой, декларативным способом.
КУРС
Изучите адаптивный дизайн
Прочтите историю адаптивного дизайна и ознакомьтесь с основами адаптивных макетов. Вы узнаете об адаптивных изображениях, типографике, доступности и многом другом.
КУРС
Изучите CSS
Вы изучите основы CSS, такие как блочная модель, каскад и специфичность, flexbox, сетка и z-индекс. Кроме того, вы узнаете о функциях, логических свойствах и многом другом, чтобы усовершенствовать свои навыки фронтенд-разработчика.