Загрузка...
Как написать стили для выпадающих списков select, сохраняя читаемость, доступность и контрастность в соответствии с требованиями WCAG 2.1.
CSS для настройки HTML-элемента SELECT
CSS для настройки текста поверх изображений
Улучшение читаемости текста, расположенного над фоновым изображением, с использованием разных техник комбинирования градиентов, прозрачности подложки и теней.
Использование CSS для управления выделением текста
CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа
Смягчение теней с помощью слоёв в CSS-свойстве box-shadow
Запечатлеть все тонкости реальной тени с помощью box-shadow не просто, но кое-то можно улучшить, применяя к блокам несколько слоев теней.
JavaScript Intl API интернационализация (I18n)
Примеры использования методов Intl API для интернационализации Javascript приложений (i18n): форматирование дат, чисел, валют, единиц измерения.
Преобразование текста в речь c помощью JavaScript
Использование JavaScript SpeechSynthesis API для синтеза речи, то есть для преобразования в браузере текста в речь и его многочисленные особенности.
Уменьшающаяся при прокрутке «шапка» страницы без JavaScript
Обычно, чтобы добавить такой эффект уменьшения шапки при скролле страницы, используется немного JavaScript и CSS, но с появлением position: sticky то же самое можно сделать, используя только CSS.
Выезжающая боковая панель (sidebar)
Как создать отзывчивую выдвигающуюся боковую панель (sidebar) для навигации, которая отслеживает состояние, поддерживает управление с клавиатуры, работает с Javascript и без него в разных браузерах
Календарь с помощью CSS-grid в несколько строк кода
Макет сетки календаря — идеальный кандидат для использования CSS-grid и его свойств: grid-template-columns и grid-column.
Адаптивная CSS-grid сетка в 3 колонки с помощью 3-х CSS-свойств
Как сделать простой адаптивный макет с сеткой в 3 колонки с помощью CSS-grid и всего 3 CSS-свойств grid-area, grid-gap и grid-template-area.
Float-блоки по углам контейнера c текстом вокруг
Как с помощью только CSS расположить картинку или любой float-блок в нижнем углу или по бокам контейнера и текстом вокруг неё.
Поиск в DOM ближайшего родителя с position: relative
Отладка взаимного позиционирования HTML-элементов и поиск ближайшего родителя с CSS-свойством position: relative с помощью JavaScript в консоли браузера.
Передача данных между CSS и JavaScript с помощью CSS-переменных
Практические примеры обмена данных между CSS и JavaScript с помощью CSS-переменных. Передача значений настраиваемым CSS-свойствам из Javascript.
CSS-свойство aspect-ratio
Применение CSS-свойства aspect-ratio для установки отношения сторон контейнеру вместо использования трюков с помощью padding-top: 56.25% и несколько практических примеров.
Node.textContent и Element.innerText для получения и установки текста
Оба метода Node.textContent и Element.innerText используются для получения и установки текста в HTML-элементе, рассмотрим их сходство и отличие.
Event Loop, Callbacks, Promises, и Async/Await, часть 4 из 4
Функция async позволяет обрабатывать асинхронный код таким образом, чтобы он выглядел синхронным. Функция async под капотом по-прежнему использует обещания (promise), но имеет более традиционный JavaScript-синтаксис.
Event Loop, Callbacks, Promises, и Async/Await, часть 3 из 4
Обещание (promise) представляет собой завершение асинхронной функции. Это объект, который может вернуть значение когда-нибудь в будущем. Он выполняет ту же миссию, что функция обратного вызова (callback), но с множеством дополнительных фич и более читаемым синтаксисом.
Event Loop, Callbacks, Promises, и Async/Await, часть 2 из 4
Функции обратного вызова (callback) не имеют специального синтаксиса; это просто функция, переданная в качестве аргумента другой функции.
Event Loop, Callbacks, Promises, и Async/Await, часть 1 из 4
Рассмотрим работу цикла событий (event loop), а также разберём два элемента цикла событий: стек (stack) и очередь (queue).
Руководство по CSS-переменным
Настраиваемые CSS-свойства для каскадных переменных, о которых давно просили, но которые всё ещё недостаточно используются, предлагают революционные возможности для совместной работы и повторного использования кода.