CSS

Перевод статьи A Nerd’s Guide to Color on the Web с сайта CSS-Tricks.com для CSS-live.ru, автор — Сара Дрэснер

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

Цветосмешение

При работе с цветом очень важно понимать, что привычные еще с детства подходы к цветам не работают в компьютере из-за смешения цветов. В детстве мы работали с краской. В красках и чернилах из принтера есть маленькие частички — пигменты, которые смешиваются между собой и отражают свет, чтобы представить цвет глазу. Это субтрактивное (от англ. subtract — вычитание) цветосмешение. Чем больше цветов вы добавляете, тем темнее становится результат, пока не получится коричневый цвет. Основные цвета близки к тому, к чему вы привыкли: красный, желтый, синий. Но если смешать их при субтрактивном цветосмешении, вы придете к коричневому.

Перевод статьи Communicating Animation с сайта alistapart.com для css-live.ru. Автор — Рэйчел Нейборс.

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

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

Перевод статьи Some pointers on default cursors с сайта hiddedevries.nl, опубликовано на css-live.ru с разрешения автора — Хидде де Вриса

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

Это не пустяк: ссылки (<a/>) ведут куда-то ещё, кнопки — (<button>-ы) выполняют действия. «Палец» указывает пользователю, что его курсор находится на ссылке, которая перенаправит его куда-то. Причем ее можно открыть в другой вкладке: скопировать ссылку, перетащить её в другое окно, и так далее. Другим интерактивным элементам на странице (к примеру, кнопкам) достанется курсор по умолчанию. Краткая выжимка: палец не означает кликабельность.

Перевод статьи Communicating Between JavaScript and CSS Using CSS Variables с сайта eager.io, опубликовано на css-live.ru с разрешения автора — Зака Блума

На 2016 г. CSS-переменные полностью работоспособны в Chrome и Firefox, у IE тоже в планах реализовать их.

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

Что такое CSS-переменные?

Перевод статьи CSS containment с сайта justmarkup.com, опубликовано на css-live.ru с разрешения автора — Майкла Шарналя

Я узнал про свойство contain всего несколько недель назад, когда в ответ на мой вопрос в твиттере о применениях медиазапросов для контейнера Дэвид Бэрон упомянул его, сказав, что с contain: strict; можно избежать множества теоретических проблем с медиазапросами для контейнера. С тех пор я читаю спецификацию, пытаясь понять это свойство, и вот что мне удалось выяснить.

Перевод статьи The Languages Which Almost Became CSS с сайта eager.io, опубликовано на css-live.ru с разрешения автора — Зака Блума

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

Марк Андрессен, 1994

Когда в 1991-м Тим Бернерс-Ли объявил о создании HTML, оформлять страницы было просто нечем. То, как отображались те или иные HTML-теги, определялось браузером, часто под существенным влиянием пользовательских настроек. Хотя казалось заманчивым придумать стандартный способ, чтобы странички сами «предлагали», в каком виде их лучше отобразить.

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

Хотя, очевидно, сейчас эти языки не в ходу, мое сердце замирает при мысли о том, как всё могло бы быть. И что еще удивительнее, оказывается, во многих из этих других вариантов было такое, что разработчики и сейчас прыгали бы от счастья, появись оно в CSS.

Перевод статьи A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES с сайта zachleat.com, опубликовано на css-live.ru с разрешения автора — Зака Лезермана

Это руководство — не для шрифтовых иконок, у которых свои приоритеты загрузки и применения. К тому же, в долгосрочной перспективе, видимо, лучше сделать ставку на SVG.

Прим. перев.: в названиях методов Зак использует труднопереводимые сокращения FOIT, FOUT и FOFT:

• FOIT (Flash of Invisible Text) — букв. «мелькание невидимого текста», когда во время загрузки веб-шрифта текст не отображается вообще;
• FOUT (Flash of Unstyled Text) — букв. «мелькание неоформленного текста», когда во время загрузки веб-шрифта текст отображается шрифтом по умолчанию (напр. системным);
• FOFT (Flash of Faux Text) — букв. «мелькание синтезированного текста», когда в промежутке между загрузкой основного веб-шрифта и его вариаций (жирный, курсив и т.д.) вместо этих вариаций браузер отображает особым образом измененный основной шрифт (так называемый «ложный жирный» и «ложный курсив», чуть подробнее о них здесь).

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

Перейти к:

• Простой @font-face
• font-display
• Предзагрузка с preload
• Не использовать веб-шрифты
• Встроенный Data URI
• Асинхронный Data URI
• FOUT с помощью класса
• FOFT, или FOUT с двухэтапной отрисовкой
• Критическое FOFT
• Критическое FOFT с помощью Data URI
• Критическое FOFT с preload

Перевод статьи Battle of the architectures с сайта mariano.io, опубликовано на css-live.ru с разрешения автора — Мариано Мигеля.

Сравнение двух популярных подходов в CSS, и чем они меня не устраивают

В последнее время в мире фронтенда много спорили о том, что такое «хороший CSS» и как нам проектировать код, чтобы он был поддерживаемым, масштабируемым, доступным и быстрым. И здесь я вижу две крайности:

1. С одной стороны, есть «семантический» подход. Те, кто считает, что код должен быть как можно проще, утверждая, что методологии вроде БЭМ и OOCSS недостаточно хороши, поскольку не уделяют должного внимания семантике и доступности.
2. С другой стороны, есть «атомный/функциональный» подход. Это те, кто возводит принцип единственной обязанности в абсолют, и штампуют сверхспециализированные служебные классы направо и налево, полностью наплевав при этом, за редкими исключениями, на читаемость и самодокументируемость кода.

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

Перевод статьи Don’t Overthink It (Flexbox) Grids с сайта css-tricks.com, опубликовано на css-live.ru, автор — Крис Койер.

Четыре года назад вышла моя статья «Относитесь к сеткам проще», собравшая немало откликов. Уже тогда мне казалось, что мы находимся на пике популярности сеток. Каждую неделю кто-нибудь рекламировал очередной фреймворк для сеток.

Посыл статьи был такой: «Не бойтесь! Сетки можно создавать и самому! В сложном фреймворке нет необходимости». Возможно, это было не так уж радужно, но вот такой уж тезис я выкатил. Вы задаете float и ширину в процентах паре элементов и баста.

Перевод статьи CSS Grid Layout and positioned items с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

В этой статье мы рассмотрим некоторые особенные возможности позиционированных грид-элементов.

В рамках работы Igalia над CSS Grid Layout в Chromium/Blink и Safari/WebKit, мы реализовали поддержку позиционированных элементов. Да, абсолютное позиционирование в гриде :)

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

Перевод статьи Semantic CSS с сайта snook.ca, опубликовано на css-live.ru с разрешения автора — Джонатана Снука.

Подзаголовок: почему все, кто говорит о важности семантики —  правы и неправы одновременно.

Я часто слышу про семантический CSS. Что ID и классам нужно давать осмысленные имена.

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

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

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

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

Последняя конференция показала, что Гугл очень большой и у него нет какой-то единой генеральной линии по поводу веба и нативных приложений. Хотя были доклады о сервис-воркерах и производительности для веба, были также представлены «Мгновенные Андроид-приложения» — неприкрытая атака на веб. Если вас раздражало, что сайты назойливо тыкали вам под нос всплывающие окошки с предложением установить их приложения, то подождите, скоро они смогут и не спрашивать.

Перевод статьи Debugging CSS с сайта benfrain.com, опубликовано на css-live.ru с разрешения автора — Бена Фрейна.

Опыта в отладке CSS у меня хоть отбавляй. Чужой код и мой собственный. Мобильные плотформы и десктопные браузеры. Всё от старых версий Internet Explorer до последних ночных сборок WebKit. Работая с людьми, я понял, что далеко не у всех налажен процесс отладки CSS.

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

А вот и мой собственный подход.

Перевод статьи BEMantic: DRY Like You Mean It с сайта https://medium.com, опубликовано на css-live.ru с разрешения автора — Мэтта Стоу.

Недавняя статья Тима Бакстера на A List Apart, «Осмысленный CSS: описывайте стилями свою логику», подбросила дровишек в костер тому мнению, будто фронтендеры, предпочитающие объектно-ориентированный подход к CSS (БЭМ или что-то вроде), как-то напрочь забывают о семантической разметке и доступности.

Лично я считаю, что так думать просто обидно. Не понимаю, почему БЭМ и семантику HTML считают взаимоисключающими. Я тешу себя надеждой, что я хороший разработчик: я горжусь как своим HTML (включая семантику и ARIA-атрибуты), так и своим CSS, где вовсю используются Sass и БЭМ.

Перевод статьи The Importance of !important: Forcing Immutability in CSS с сайта csswizardry.com, опубликовано на css-live.ru с разрешения автора — Гарри Робертса.

От одного моего совета у клиентов и слушателей волосы встают дыбом:

Я советую использовать !important.

Вообще-то я рад, что !important поначалу вызывает отвращение — обычно от него и вправду нельзя ждать ничего хорошего — но всё же с ним связано кое-что еще…

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