CSS

Перевод статьи Web Animations API Tutorial Part 4: GroupEffects & SequenceEffects с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это четвёртая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Давайте продолжим изучать множественные анимации с Web Animations API, и рассмотрим несколько вещей, которые сегодня доступны в полифилле, предназначенные для группировки и последовательности анимаций.

Перевод статьи Web Animations API Tutorial Part 3: Multiple Animations с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это третья часть из серии учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

После обсуждения AnimationPlayer и шкалы времени в Web Animations API давайте поговорим о проигрывании сразу нескольких анимаций.

Перевод статьи Web Animations API Tutorial Part 2: The AnimationPlayer & Timeline Controls с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это вторая часть из серии учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Теперь, когда мы знаем, как с помощью Web Animations API создать базовую анимацию, пришло время поговорить о состояниях, управлении, обратных вызовах и шкале времени.

Перевод статьи Web Animations API Tutorial Part 1: Creating a Basic Animation с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это первая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Мы окинули беглым взглядом Web Animations API, но так и не добрались до какой-либо конкретики… так что давайте приступим к этому прямо сейчас.

Перевод статьи Let’s talk about the Web Animations API с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона (твиттер — @dancwilson).

Это введение в серию учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson.

Около года назад Google анонсировал «Материальный дизайн» с реализацией для веба на базе Полимера…, используя полифилл для предстоящего стандарта Web Animations API.

Перевод статьи Grid Tidbits part 3: grid track sizing с сайта thatemil.com, опубликовано на css-live.ru с разрешения автора — Эмиля Бьёрклунда (твиттер — @ThatEmil).

В этой заметке исследуются некоторые тонкости задания размеров грид-полос (иначе — рядов и колонок) в CSS Grid Layout. Гибкие размеры, функция повторения, функция minmax — вот это да!

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

Чтобы экспериментировать с примерами из этой заметки, рекомендую скачать и запустить Chrome Canary, поскольку в этом браузере самая актуальная реализация.

Перевод статьи Word Wrapping Woes  с сайта jonibologna.com, опубликовано на css-live.ru с разрешения автора — Джони Трайтел.

Почему-то мне как-то особенно «везет» на странные, неожиданные фокусы с переносом текста.

Я написала электронную книгу, и решать, как переносить строки кода в блоках — это был кошмар! Порой блок текста из-за переноса выбивался по высоте из контейнера. А одни слишком длинные ссылки чего стоили!

Вставлять дефис в месте переноса или нет? Здесь переносим, там не переносим. Тут вставляем дефис, там нет. Одно свойство ни в какую не хочет работать без другого. И почему этот горизонтальный скроллинг упорно не хочет пропадать?

/me бьется об стол

Перевод статьи A fictional conversation about progressive enhancement с сайта tommorris.org, с разрешения автора — Тома Морриса.

— Я разочаровался в современной веб-разработке. Кучи раздутых фреймворков, горы скриптов, одностраничных приложений, ссылок с #! — всё как-то переусложнено. Мы забыли старые приемы прогрессивного улушения, а взамен  получили жуткие нелепости вроде бесконечного скроллинга, которые прикольно выглядят, но проку для пользователя от них никакого. Мы будто заново изобрели эпоху флэш-заставок, но радуемся тому, что сделали весь этот бессмысленный хлам не на флэше, а на JavaScript.

Перевод статьи CSS element() function с сайта iamvdo.me, с разрешения автора — Венсана де Оливейры.

В июле я написал про продвинутые приемы работы с CSS-фильтрами, в частности, backdrop-filter и filter(). Сегодня я хочу поделиться намного более потрясающей возможностью CSS. Но прежде чем начать, хочу предупредить: она работает только в Firefox, другие браузеры пока не торопятся ее поддерживать. Может быть, скоро это изменится. Очень на это рассчитываю. Так что прочитайте и передайте другим.

Если вы читаете эту статью не в Firefox, наверное, вам стоит переключиться на него, чтобы увидеть примеры в действии. На всякий случай я добавил видео.

element()

Перевод статьи The ten commandments of sane style sheets с сайта benfrain.com, автор — Бен Фрейн.

Десять заповедей

1. Да будет у тебя единственное место в коде для каждого ключевого селектора
2. Не вкладывай (ежели не вкладываешь медиавыражений, переопределений, либо сие воистину необходимо)
3. Не используй селекторов по ID (даже ежели мнишь, что сие необходимо)
4. Не пиши браузерных префиксов в исходных файлах стилей
5. Используй переменные для размеров, цветов и z-индекса
6. Всегда первыми пиши правила для мобильных устройств (сторонись max-width)
7. Используй миксины для стеков шрифтов
8. Комментируй все магические числа и браузерные хаки
9. Не встраивай изображений в код
10. Не пиши сложного CSS там, где простой CSS достаточен

Блаженны соблюдающие сии правила, ибо они наследуют логичные таблицы стилей.

Аминь.

Перевод статьи CSS is Alive and Wells с сайта sitepoint.com, автор — Луис Лазарис

Растущая популярность React, библиотеки для пользовательских интерфейсов, которую создал Facebook, породила немало споров о CSS и о том, есть ли у него будущее в его нынешнем виде — в форме отдельного файла с объявлениями, откуда страница или фрагмент разметки берет информацию для оформления.

Здесь я не буду повторяться или приводить плюсы и минусы. Если вы не в курсе, можете ознакомиться с данной темой, пройдя по этим ссылкам:

• Дебаты на тему «А нужен ли нам вообще CSS?» от Криса Койера
• React: слайды «CSS в JS» и видеопрезентация

Зато я сейчас убедительно докажу, что CSS жив и здоров.

Перевод статьи Grid Tidbits part 2: terminology and basics с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

В этой статье мы познакомимся с терминологией «CSS Grid Layout», основами определения grid-шаблонов и размещения в них элементов.

Это вторая из цикла относительно небольших статей про «Grid Layout». В первой части мы узнали о назначении grid-ов и о текущей ситуации в браузерах.

Для этого «лакомого кусочка» мы сделаем следующее:

• Возьмём элемент и превратим его в grid.
• Увидим, как элементы сами размещаются в grid’е
• Поупражняемся в том, как управлять этим размещением

Перевод статьи Grid tidbits, part 1: the Why and Where с сайта thatemil.com, автор — Эмиль Бьёрклунд (твиттер — @ThatEmil).

CSS Grid Layout — новый способ управления раскладкой в браузере. У него и других модулей (например, flexbox) разные возможности и перспективы, но в чем-то они и перекрываются. Да, и совсем скоро он появится во многих браузерах.  В этой статье мы узнаем, что это за модуль и для чего он нужен.

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

Статьи предполагают по крайней мере базовые знания CSS-раскладки, в том числе Flexbox.

В прошлой статье золотая рыбка Grid Layout выполнила для нас множество прекрасных желаний, но тем не менее, это далеко не всё, на что она способна. При помощи волшебства Grid Layout можно творить такие вещи, для которых раньше нам бы понадобилось куча «костылей» и хаков, либо исключительно JavaScript.

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

Перевод статьи 10 Ways to Minimize Reflows and Improve Performance с сайта www.sitepoint.com, автор — Крейг Баклер.

Хотя веб-страницы достигают 2МБ, производительность остается острой темой. Чем шустрее ваше приложение, тем лучше пользовательский опыт и выше конверсия.

При этом я и сам не без греха по части добавления необдуманных CSS3-анимаций и манипулирования множеством DOM-элементов, не задумываясь о последствии. Если дело касается визуальных эффектов, то в «браузерном мире» есть два термина: