CSS

Перевод статьи Developer Fallacies с сайта heydonworks.com, опубликовано на css-live.ru с разрешения автора — Хейдона Пикеринга.

Время от времени веб-разработчики (и вообще программисты) находят неудачные аргументы в защиту своего выбора технологий, рабочих процессов или организационных схем, а также для принижения чужого выбора. Я видел такое не раз, да и сам порой не удерживался от крепкого словца по такому поводу. Мы особенно уязвимы для неудачных аргументов, поскольку привыкли считать себя логичными. Как же сильно мы порой заблуждаемся.

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

Перевод статьи Blending Modes Demystified с сайта alistapart.com для css-live.ru. Автор — Джастин Макдауэл.

Веб-графика всё больше уходит от преобразований с потерей качества. Мы не хотим, чтобы изменения в дизайне или графике вредили исходному материалу. Таким образом, если нам понадобится откатить изменения или поменять что-то другое, оригинал сохранится.

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

Что такое режимы наложения

Перевод статьи A Responsive Guide to Type Sizing с сайта blog.cloudfour.com, опубликовано на css-live.ru с разрешения автора — Эрика Джанга.

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

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

Перевод статьи Click SVG Element to Focus (and Style) с сайта css-tricks.com, опубликовано на css-live.ru, автор — Крис Койер.

Читатель пишет:

Вы не могли бы помочь мне сделать SVG кликабельным с помощью CSS? Задача такая: есть SVG-элемент, и по клику на любую из его частей в этом месте должна появляться обводка? Во вторник у меня собеседование по телефону на работу в качестве SVG-иллюстратора и мне не хотелось бы облажаться.

Перевод статьи `flex-grow` is weird. Or is it?s с сайта css-tricks.com, опубликовано на css-live.ru, автор — Мануэль Матузовик.

Перед вами гостевой пост Мануэля Матузовика. В нем показано, как работает flex-grow, а также его странные выкрутасы и всё такое. А затем на нескольких примерах мы увидим, как можно реализовать типовые задачи раскладки с помощью flex-grow и flex-basis.

Когда я узнал про flex-grow, то тут же сделал простой пример, чтобы понять для чего оно и как работает. Я думал, что во всём разобрался, но когда я решил попробовать его на сайте, который смастерил мой коллега, то оно меня подвело. И что бы мы ни делали, раскладка выглядела и вела себя не так, как в том примере. И я поневоле засомневался, а понял ли я вообще хоть что-то про flex-grow.

Перевод статьи Classy CSS: a Programmatic Approach to Sass Stylesheets с сайта una.im, опубликовано на css-live.ru с разрешения автора — Юны Кравец.

Классный CSS, пожалуйста

Перевод статьи Pseudo and pseudon’t с сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита.

Мне нравятся CSS-псевдоклассы. Они как нельзя кстати, чтобы добавлять в интерфейсы какие-нибудь приятные мелочи в ответ на действия пользователя.

Взять, например, псевдоклассы для форм: :valid, :invalid, :required, :in-range, и много чего еще.

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

Перевод статьи Why I’m Excited About Native CSS Variables  с сайта philipwalton.com, опубликовано на css-live.ru с разрешения автора — Филипа Уолтона.

Несколько недель назад CSS-переменные — точнее, пользовательские CSS-свойства — стали доступны в Chrome Canary за флагом «Экспериментальные возможности веб-платформы».^[1]

Как только один из разработчиков Chrome Эдди Османи написал о новинке в Твиттере, на него неожиданно обрушилась масса недовольства, злобы и скептицизма. По крайней мере, неожиданно для меня, учитывая, как меня эта возможность восхитила.

Настоящего героя, владеющего суперсилой CSS-спецификаций, трудно сбить с толку. Но в жизни, как и в супергеройском кино, попадаются задачи, на первый взгляд неразрешимые. Например: есть страничка, которую кто-то нехороший собирается через 5 секунд погрузить во тьму, установив ей style="background:#000 !important" на body. Нужно «спасти» страничку, сохранив ее в читаемом виде, с белым фоном… ну хотя бы минут десять. Хотя бы в новейших браузерах.

Ну и поскольку это задачка для CSS-супергероя, то единственное, чего можно касаться — это CSS странички. Ни разметку, ни «злодейский» скрипт трогать нельзя. И чтобы не было слишком легко, псевдоэлементы использовать тоже нельзя.

See the Pen MaxvxJ by Ilya Streltsyn (@SelenIT) on CodePen.

Инлайновый стиль, да еще и с !important. Абсолютное оружие. В известной визуализации «SpeciFISHity» авторства Эстель Вайл (Стандартисты) — атомная бомба. Казалось бы, что можно ему противопоставить?

Перевод статьи Do We Actually Need Specificity In CSS? с сайта philipwalton.com, c разрешения автора — Филипа Уолтона.

Окей, прежде чем начать, я хочу заранее прояснить одну вещь. Эта статья — не напыщенные фразы о том, как сильно я ненавижу специфичность. Если нужна статья об этом, то уверен, что в сети таких полно.

Цель моей статьи — задать актуальный и откровенный вопрос сообществу веб-разработчиков, и, надеюсь, заставить людей задуматься.

Попытаюсь сформулировать вопрос так, чтобы затронуть самую суть проблемы: если бы мы жили в мире, где специфичность никогда не добавлялась бы к каскаду, было бы лучше или хуже?

Перевод статьи FLEXBOX MYTH BUSTING  с сайта jonyablonski.com, опубликовано на css-live.ru с разрешения автора — Джона Яблонски.

Если вы периодически пишете CSS, то скорее всего слышали про «flexbox» (Модуль раскладки гибких боксов). Возможно, вы даже слышали, что flexbox способен решить множество проблем, которые, как считается, трудно, а то и невозможно решить без помощи Javascript. Вероятно, вы даже слышали или сами считаете, будто использовать flexbox пока рановато. В этой статье я развею множество «мифов», которые окружают эту мощную модель раскладки.

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

В своей серии статей я изучал Web Animations API, чтобы поделиться тем, что я узнал об этом новом инструменте. Полагаю, что пришло время собрать в одном месте все обнаруженные мной ресурсы. Надеюсь, этот раздел будет часто обновляться по мере того, как люди начнут использовать и обсуждать Animations API.

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

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

Мы неплохо поработали и, надеюсь, выяснили, что из себя представляет Web Animations API. В завершении этой серии давайте резюмируем, что мы обсудили ранее и рассмотрим, что ещё не реализовано.

Перевод статьи Use Cases For Css Calc с сайта vincentp.me, опубликовано на css-live.ru с разрешения автора — Винсента Пикеринга

Цитата из твиттера:

Винсент Пикеринг:
— С каждым днём нахожу всё больше применений для calc(). Он действительно полезный

Гарри Робертс:
— Напишешь о некоторых из них?

Безусловно, Гарри, вот основные вещи, для которых я применяю функцию Calc сегодня:

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

Это пятая часть из серии вводных/учебных статей про Web Animations API, который вот-вот появится в браузерах. Если у вас есть мысли/вопросы, вы заметили, что я неправильно истолковал спецификацию, или хотите обсудить со мной что-то конкретное в будущих статьях, то обращайтесь ко мне в Twitter, @dancwilson. Раньше на моем блоге на Codepen вышла более краткая версия этой статьи, почти сразу после того, как Хром объявил о поддержке Motion Path за флагом.

Наконец-то! Анимация движения по контуру… теперь возможна не только в SVG.