Архив автора: Максим Усачев

Display: contents — не CSS-сброс

Перевод статьи Display: Contents Is Not a CSS Reset с сайта adrianroselli.com для css-live.ru, с разрешения автора — Адриана Розелли

CSS-сбросы — подборки CSS-стилей, которые отменяют дефолтные стили браузеров у многих или большинства HTML-элементов.

Недавно я видел, как разработчики применяли display: contents для списков и заголовков ради удаления внешних и внутренних отступов, и внешне получить то, для чего нужны CSS-сбросы. По сути, они используют display: contents в качестве CSS-сброса «на скорую руку».

Это опасно для доступности

Далее в статье я объясню, почему, поскольку, раз уж мне пришлось провести такое исследование, то вам уж точно не помешает хотя бы прочитать его.

Движение по траектории в CSS помимо «большой тройки» свойств

Перевод статьи CSS Motion Path beyond the Big Three Properties с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона.

Хотя работает она только в Chromium-браузерах, а черновик ее спецификации всё еще активно разрабатывается, анимация движения по траектории (CSS Motion Path) немного повзрослела за эти три года с момента первой реализации в Chrome 46.

Я уже описывал основы главного применения CSS Motion Path в виде трёх свойств — offset-path, определяющее траекторию, вдоль которой может двигаться элемент, offset-distance — для позиционирования элемента на этой траектории, и offset-rotate, которое отвечает за то, какой стороной вперед движется элемент по траектории.

После того моего обзора спецификация подросла на несколько фич (и больше того, некоторые из них уже можно «пощупать» в Chrome). Чтобы увидеть последние возможности, откройте эту статью с её демо-примерами в Chrome 66+ с включенным параметром «Экспериментальные функции веб-платформы» в chrome://flags.

Ещё одна коллекция интересных фактов про CSS-гриды (CSS Grid Layout)

Перевод статьи Another Collection of Interesting Facts About CSS Grid с сайта css-tricks.com для CSS-live.ru, автор — Мануэль Матузович

В прошлом году я собрал коллекцию интересных фактов о CSS Grid Layout после моего мастер-класса. В этом году я работал над другим мастер-классом и узнал ещё несколько увлекательных фактов о нашей любимой спецификации раскладки.

Я не жадный, поэтому ещё раз с радостью поделюсь своими знаниями и выводами с вами, с сообществом CSS-Tricks.

Фокусы со стилями для фокуса

Перевод статьи Focusing on Focus Styles с сайта css-tricks.com для CSS-live.ru, автор — Эрик Бейли

Не у каждого пользователя интернета есть мышка под рукой. При чтении со смартфона это очевидно! К тому же есть и другие способы ввода, которыми люди решают свои задачи. И для них нужны стили для фокуса.

Люди

Люди сложно устроены. Мы не всегда последовательны, а наши решения не всегда выглядят логичными. Порой мы даже делаем что-то просто так. Нам легко надоедает возиться и ковыряться с вещами, чтобы они лучше соответствовали нашим потребностям, независимо от их первоначального предназначения.

Люди также смертны. Мы можем заболеть или пораниться, случаются и обе беды сразу. Иногда это на время, а иногда — на всю жизнь. Как бы то ни было, порой привычные способы добиться нужного или желаемого бывают нам недоступны.

Аддитивная анимация с помощью Web Animations API

Перевод статьи Additive Animation with the Web Animations API с сайта css-tricks.com для CSS-live.ru, автор — Дэн Уилсон

Эти возможности пока что не поддерживаются ни одним стабильным браузером. Однако, всё, о чем я сейчас расскажу, уже есть в Firefox Nightly, и ключевые части есть в Chrome Canary (при включенном флаге «Экспериментальные возможности веб-платформы»), поэтому во время чтения этой статьи я рекомендую использовать один из этих браузеров, чтобы увидеть максимум возможностей в действии.

Какой способ анимации в вебе вы бы ни предпочли, настанет время, когда вам потребуется анимировать одно свойство в отдельных анимациях. К примеру, у вас есть эффект по наведению, масштабирующий изображение, и событие клика, по которому вызывается сдвиг — оба они влияют на transform. По умолчанию эти анимации никак не связаны друг с другом, и только одна применится визуально (поскольку обе влияют на одно CSS-свойство, и последнее значение переопределит первое).

Как использовать вариативные шрифты в реальном мире

Перевод статьи How to use variable fonts in the real world с сайта clearleft.com для CSS-live.ru, с разрешения автора — Ричарда Раттера

Использовать вариативные шрифты в реальном мире не так-то легко, как оказалось. Эта статья поясняет, как мы справились с этим на новом сайте Ampersand и что мы узнали за это время.

Вариативный шрифт — один файл шрифта, который умеет вести себя, как много разных (более развёрнуто об этом можете прочитать в отрывке моей книги «Веб-типографика»). Уже немало сайтов продемонстрировали возможности вариативных шрифтов и самой технологии управления шрифтом в их основе, но для нового сайта конференции Ampersand я хотел показать, как вариативные шрифты используются на реальном сайте. Возможно, это будет первый коммерческий сайт, который когда-либо сделал это.

CSS-гриды + CSS-колонки = ♥

Перевод статьи CSS Grid + CSS Multi-Columns = ♥ с сайта medium.com для CSS-live.ru, автор — Патрик Броссет

В этой короткой статье я рассматриваю связь между двумя раскладочными инструментами из CSS: CSS-гриды и CSS-колонки.

Эти два инструмента можно использовать вместе весьма интересными способами для построения отзывчивых веб-дизайнов.

Начнём с обзора, что каждый из их делает.

Ссылки против кнопок в современных веб-приложениях

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон

Кнопки в интерфейсе Github
Github: ссылки или кнопки?

Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в новом окне или отправляют форму, знаете? В веб-приложениях на JavaScript мы по-прежнему путаемся, какой элемент выбрать для пользовательского действия. Чтобы развеять туман, я покажу примеры использования для ссылок и кнопок в приложениях с отрисовкой на клиенте и помогу вам принимать лучшие решения с точки зрения UI.

Вникаем в механизмы Redux, делая своё хранилище (Store)

Перевод статьи Finally understand Redux by building your own Store с сайта toddmotto.com для CSS-live.ru, автор — Тодд Мотто

Redux — интересный паттерн, нехитрый по своей сути, но почему же его порой так тяжело понять? В этой статье мы рассмотрим основные идеи Redux и внутренние механизмы хранилища (Store).

Смысл здесь в том, чтобы глубже познать магию «под капотом» Redux, хранилища (Store), редюсеров (reducers) и дейтвий (action) — и механизмы их работы. Это поможет лучше отлаживать и писать более качественный код, и понимать, что именно он делает. Мы изучим всё это на примере собственного пользовательского хранилища, написанного на языке TypeScript.

«Запашки» CSS-кода

Перевод статьи CSS Code Smells с сайта css-tricks.com для CSS-live.ru, автор — Робин Рендл

Каждую неделю (или вроде того) мы публикуем рассылку, содержащую актуальные ссылки, советы и трюки по веб-дизайну и разработке. В конце мы обычно описываем изученное за неделю. Это необязательно напрямую связано с CSS или фронтенд-разработкой, но там всегда есть чем поделиться. Данный пример — один из таких разделов рассылки, в котором я расскажу о качестве кода, и то, что, на мой взгляд, должно считаться «запашком» CSS-кода.

Многие разработчики жалуются на CSS. Этот каскад! Эти непонятные названия свойств! Вертикальное выравнивание! В языке есть много странных вещей, особенно если вы лучше знакомы с языками программирования вроде JavaScript,  Ruby, и пр.

Ну что, можно уже использовать CSS-переменные?

Перевод статьи So, Can We Use CSS Variables Yet? с сайта webdesignerdepot.com для CSS-live.ru, автор — Адам Хьюз

Весь этот шум вокруг CSS-гридов в последнее время заставил меня задуматься: какие ещё потрясающие CSS-фичи доступны нам сегодня?

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

Лучший способ реализовать «обёртки» в CSS

Перевод статьи The Best Way to Implement a “Wrapper” in CSS с сайта css-tricks.com для CSS-live.ru, автор — Калоян Косев

Иногда первое, что мы пишем на странице — это элемент, оборачивающий всё остальное на странице. Термин «Обёртка» типичен для этого. Мы задаём ему класс, отвечающий за инкапсуляцию всех визуальных элементов на странице.

Я всегда боролся за то, чтобы найти лучший способ реализовать его. Я нашёл соответствующую тему на StackOverflow с более чем 250000 просмотров, что говорит о её огромной популярности. В этой статье я подытожу свои мысли.

Перед тем, как пойти дальше, сначала рассмотрим разницу между «обёрткой» (wrapper) и «контейнером» (container).

«Обёртка» против «Контейнера»

Я вижу разницу между элементом-обёрткой и элементом-контейнером.

В языках программирования слово «контейнер» обычно используется для структуры, содержащей более одного элемента. «Обёртка» же — это нечто, что оборачивается вокруг одного объекта, чтобы предоставить интерфейс к нему и расширить его функциональность.

Так что, мне кажется,  есть смысл оставить два названия, поскольку они предполагают разные функции.

От 0 до джуниора за месяц — онлайн-интенсив «Базовый HTML и CSS»

Что такое интенсив в HTML Academy

Это пять недель плотной работы: вёрстка учебного и личного проектов, еженедельные лекции, пять часов консультаций с наставником, подготовка проекта к финальной защите. Таким образом, формат учёбы максимально приближен к рабочему процессу в крупной IT-компании: настоящие дизайн-макеты, техническое задание, ревью от старшего разработчика и горящие сроки.

Курс рассчитан на тех кто только знакомится с вёрсткой, начинающих верстальщиков и тех, кто нуждается в систематизации своих навыков.

Всего интенсив состоит из десяти вебинаров, их ведут четыре опытных преподавателя-разработчика.

Сентябрь уже подходит к концу

В честь начала осени действуют акции на курсы HTML Academy и ещё можно успеть ими воспользоваться до 1 октября.

Пройти бесплатно курс «Анимация»

В формате интерактивной игры можно изучить основы анимации на CSS. Предстоит пройти путь развития цивилизации, покорить космический простор и в финале запустить ракету на Луну.

animate

Эпичный курс «Великий Кексби» — настоящая вёрстка

Интерактивные курсы помогают познакомиться с синтаксисом и особенностями HTML и CSS, но как новичку перейти от них к вёрстке первого сайта? Для этого был создан эпичный курс «Великий Кексби», доступный по подписке.

Что такое эпичный курс

В отличие от остальной программы, здесь перед учеником ставится полноценная задача: сверстать главную страницу интернет-магазина кошачьих аксессуаров «The Great Keksby».

Keksby1

Вначале он получает макет в формате изображения и описание задачи — дальше начинается работа, поделённая на одиннадцать этапов.

Задания построены аналогично остальным: требуется дописать или исправить код, выполняя поставленные цели. Любые изменения в редакторе будут сразу отображаться в мини-браузере.

Каждый раздел привязан к курсу основной программы. Поэтому вначале придётся пройти основы, чтобы после применить полученные знания на вёрстке интернет-магазина.