Никто не знает CSS: специфичность — не каскад

Пролог (в котором едва обошлось без драки)

Прошедшие выходные ознаменовались небольшой драмой в веб-сообществе. Началась она с безобидного «теста» по CSS в твиттере Макса Штойбера, разработчика styled-components и react-boilerplate:

Насколько хорошо вы знаете CSS? (эмодзи: ученик у доски)

При таких классах:

.red { color: red; }
.blue { color: blue; }

какого цвета будут эти дивы?

<div class="red blue">
<div class="blue red">

Решено с помощью CSS! Логическая стилизация на основе числа элементов

Перевод статьи Solved with CSS! Logical Styling Based on the Number of Given Elements с сайта css-tricks.com для CSS-live.ru, автор — Юна Кравец

Эта статья третья из серии про мощь CSS.

Все статьи серии:

А вы знали, что CSS — Тьюринг-полный? А что его можно использовать для вполне серьёзной логической стилизации? Можно-можно! И не нужно закладывать логику для стилевых правил в JavaScript, или навешивать скриптом классы, для которых вы задаете стили. Во многих случаях CSS сам справится с этим. Я до сих пор ежедневно открываю новые CSS-трюки, и этим CSS нравится мне всё больше и больше.

Стандарт для нестандартного

Стандарты, увы,  не всегда поспевают за нашими потребностями. Иногда соблазн быстро решить задачу одной-двумя нестандартными строчками бывает слишком велик. Особенно если по этой строчке не видно, что она нестандартная. Когда-то давно, в эпоху префиксов, некоторые браузеры любили выпускать свою отсебятину под видом экспериментальных новинок — авось никто разбираться не будет. А в самых запущенных случаях браузеры и вовсе годами тихо саботируют стандарт, принятый остальными, не оставляя разработчикам другого выбора.

В какой-то момент оказалось, что такими нестандартными штуками в вебе достаточно активно пользуются. И бедным браузерам, чтобы не вылететь из конкурентной гонки, волей-неволей пришлось худо-бедно эту отсебятину поддерживать. Фактически, она стала стандартом де-факто. И практикам из WHATWG ничего не осталось, как написать для этих нестандартных штук свой стандарт, названный стандартом совместимости (Compatibility Standard). Чем же он нас порадует?

Как мы делали веб-интерфейс для Google Photos: заглядываем под капот

Перевод статьи Building the Google Photos Web UI с сайта medium.com для CSS-live.ru, автор — Антин Харасимив

Несколько лет назад мне посчастливилось стать инженером в команде Google Photos и поучаствовать в их первом запуске в 2015-м. Множество людей вложило силы в этот продукт — дизайнеры, продукт-менеджеры, исследователи и бесчисленные инженеры (в области Android, iOS, веба и серверной части), если упомянуть лишь некоторые важные роли. Я отвечал за пользовательский веб-интерфейс, а точнее, за сетку с фотографиями.

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

Введение в API MutationObserver из JavaScript

Перевод статьи An introduction to the JavaScript MutationObserver API с сайта benfrain.com, автор — Бен Фрейн.

Недавно мне довелось немного поиграть с JavaScript-овым API MutationObserver и я был приятно шокирован. Я уже наметил те места, где я, наверное, мог бы сделать код чище с помощью него. Если не слышали о нём раньше, вот небольшой пример

MDN описывает интерфейс MutationObserver так:

С помощью интерфейса MutationObserver можно наблюдать за изменениями, происходящими в DOM-дереве.

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

Поддержка также хорошая. IE11 и все вечнозелёные браузеры на десктопе. На мобильных это Android 4.4 и выше и iOS6.

Удивительный и неизвестный inline-block

Эта статья задумана как начало цикла про загадки, сюрпризы, малоизученные особенности и маленькие полезные секреты самого могущественного, пожалуй, свойства в CSS — свойства display. У нас уже были статьи про новинки этого свойства — значения contents (что это вообще, его сюрпризы, преимущества и подводные камни для доступности) и flow-root. Но и старые, давно знакомые (казалось бы) значения этого свойства таят в себе немало сюрпризов, подводных камней и удивительных открытий. Прежде всего, пожалуй, это значения с «приставкой» inline-: inline-flex, inline-grid, inline-table, и, наконец, наш старый знакомый inline-block.

С него-то мы и начнем наш экскурс в фундаментальные глубины CSS образца 2018 года, в конце которого у нас должно сложиться целостное представление обо всех существующих механизмах раскладки в браузере. Готовы к сюрпризам?

Как создавать Vue-компоненты, словно профи

Перевод статьи How To Build Vue Components Like A Pro 😎 с сайта blog.bitsrc.io для css-live.ru, автор — Rajat S

Vue — один из самых быстро растущих фреймворков в современном мире. Представленный как «интуитивный, быстрый и компонентный» инструмент на базе паттерна MVVM для построения интерактивных интерфейсов, Vue стал любимым JavaScript-фреймворком для разработки интерактивных веб-приложений и интерфейсов для каждого разработчика. Его 97 тыс. звёзд на GitHub с релиза в 2014 яркое тому подтверждение.

В отличие от Angular, который основан на старой доброй архитектуре Model-View-Controller (модель, представление, контроллер), Vue следует системе Model-View-View-Model (модель, представление, модель представления)

Химия CSS-гридов

На StackOverflow один участник задал вопрос, как сверстать на CSS Grid периодическую таблицу Менделеева. Примеров периодических таблиц на гридах в Сети навалом, есть и очень симпатичные. Но чаще всего они стремятся воспроизвести лишь внешний вид таблицы, порой вручную расставляя элементы по клеткам.

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

Компоненты и разделение ответственности

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

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

Эффективная работа над стандартами, часть 2: трудный путь к компромиссу

Перевод статьи Effective Standards Work, Part 2: Threading the Needle с сайта infrequently.org для css-live.ru, автор — Алекс Рассел

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

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

Эффективная работа над стандартами, часть 1: оперативная обстановка

Перевод статьи Effective Standards Work, Part 1: The Lay Of The Land с сайта infrequently.org для css-live.ru, автор — Алекс Рассел

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

«Почему браузеры не соблюдают стандарты!» — задумчиво бормочет разработчик (заводя баг на chrbug.com). «Ведь смысл стандартизации — чтобы всё работало одинаково, в конце-то концов». Если что-то попало в Стандарт, то все его единообразно реализуют… верно?

Устойчивый, декларативный, контекстный (новый взгляд на сильные стороны CSS)

Перевод статьи Resilient, Declarative, Contextual с сайта keithjgrant.com для css-live.ru, автор — Кит Грант

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

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

11 лучших англоязычных ресурсов для верстальщиков

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

Если вы намерены расти в своей профессии, вам придется много учиться, то есть читать книги, сайты и форумы. И вы не продвинетесь далеко, если будете ограничиваться русскоязычными ресурсами. Потому что самые толковые тексты выходят на английском. CSS Live и онлайн-школа английского языка Skyeng объединили усилия и нашли 10 отличных ресурсов, которые помогут вам в работе – если, конечно, вы знаете английский.

Состояние дел в вебе: главные стратегии оптимизации изображений

Перевод статьи State of the Web: Top Image Optimization Strategies с сайта dougsillars.com для css-live.ru, с разрешения автора — Дага Силларса

Изображения — ключевая часть веба. Красивые образы так и манят посетителя всё глубже в историю, которую пытается донести ваша страница — будь то новости, развлечения или электронная коммерция. Но при всей важности картинок, их большой размер может (потенциально) замедлить загрузку страниц, и пользователи в итоге просто уйдут с сайта. На самом деле, HTTP-архив показывает, что средний мобильный сайт на ~50% состоит из картинок (по объему в килобайтах).

Еженедельная подборка красивых эффектов на CSS/SVG/JS #79

Подборка свежих эффектов, интересных идей и полезных наработок.

«Мона Лиза» из линий

Технологии: canvas, JS.
Автор: Никита Дубко (@dark_mefody)

Мона Лиза из линий Посмотреть живой пример