SelenIT: статьи и переводы

Перевод статьи Avoiding chaos when using Flexbox ‘order’ для css-live.ru, с разрешения автора — Амелии Беллами-Ройдз

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

Рома Комаров поделился исследованием, как с помощью флексбоксов и CSS-свойства order получить эффект сортировки таблицы на чистом CSS. Другие CSS-эксперты тотчас выступили с предупреждением, что такой подход не рекомендуется, а то и вовсе прямо противоречит спецификации.

Рома принял критику и добавил в статью предостережение: это лишь эксперимент, не пытайтесь повторить это в продакшне! Но в твиттерном обсуждении люди задавали вопрос, всплывающий снова и снова:

По инсайдерской информации из W3C, просочившейся наружу в виде твита Рейчел Эндрю, рабочая группа CSS решила опубликовать первый рабочий черновик CSS-гридов второго уровня. С долгожданными подсетками и не только!

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

Привычные нам CSS-селекторы 3 уровня стали рекомендацией W3C еще в 2011-м (почти одновременно с CSS2.1), а черновик селекторов 4 уровня был опубликован еще в 2013-м и очень долго не менялся. Но на этой неделе рабочая группа CSS спохватилась и показала, что работа над селекторами не заброшена. С перерывом в два дня обе спецификации обновились: 30 января — старая, а 1 февраля — новая.

Спецификация CSS Box Alignment становится всё более зрелой, и кроме шпаргалки по выравниванию блоков Рейчел Эндрю и нашего обзора свойств для выравнивания всего в сети появляются новые материалы о ней. Пожалуй, пришла пора и нам освежить знания об этих свойствах.

11 декабря рабочая группа WHATWG объявила о важных изменениях в своей работе. С этого момента у WHATWG есть своя патентная политика, во многом схожая с патентной политикой W3C (специальные представители фирм-участников анализируют специальные копии стандарта на предмет патентных проблем, в «живой стандарт» попадает только то, что прошло эту проверку). Благодаря этому к WHATWG смог подключиться Microsoft, и теперь WHATWG объединяет все 4 ведущих компании-разработчика браузерных движков — Google, Mozilla, Microsoft и Apple. Также у WHATWG появилась новая «управляющая группа», которая будет следить за соответствием разрабатываемых стандартов этой политике, куда вошли представители всех 4 компаний.

Перевод статьи <i is="the walrus"> с сайта bkardell.com для CSS-live.ru, автор — Брайан Карделл

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

Перевод статьи Web Components: The Long Game с сайта infrequently.org для CSS-live.ru, автор — Алекс Рассел

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

Начиная проект, в котором возникли и много лет дорабатывались веб-компоненты, Дмитрий Глазков, Алекс Комороске и я ставили перед собой несколько главных целей:

Мы уже привыкли, что специфичность CSS-селекторов и приоритет соответствующих им правил — одно и то же. Но всегда ли должно быть так? Таким вопросом озадачила на этой неделе рабочую группу CSS легендарная Лия Веру.

В ишью на гитхабе Лия обратила внимание на то, что принцип «более конкретные CSS-правила переопределяют более общие» — всего лишь эвристика. В большинстве простых случаев она помогает, но нередко эта эвристика дает сбой, и тогда приходится прибегать к хакам типа повторения одного класса в селекторе несколько раз или добавления лишних :not(). Лия предлложила вместо этих хаков ввести новый функциональный псевдокласс (например, :filter()), похожий на :matches() из селекторов 4 уровня, но c нулевой специфичностью (не меняющий специфичность остальной части селектора).

Перевод статьи How Pure CSS Images Helped Me Understand React Components с сайта medium.com для CSS-live.ru, автор — Майкл Манджаларди

В начале 2016-го я так устал от попыток выучить React, что едва не бросил разработку. Я стал жертвой синдрома самозванца. Теперь я работаю React-разработчиком на полную ставку и успел написать книгу «Изучение React.js для визуалов»

Как же я преодолел синдром самозванца и наконец освоил React? Причин несколько, но важнее всего оказалось то, что я научился делать рисунки на чистом CSS.

Перевод статьи Designer’s Guide to Flexbox and Grid с сайта medium.com для CSS-live.ru, автор — Джон Яблонски

Что надо знать дизайнерам про эти раскладочные инструменты и перемены, которые они несут

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

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

Еще один модуль CSS, о котором мы рассказывали, незаметно дозрел до статуса, с которого W3C советует начинать повседневное использование новинок.

Свойство contain позволяет ограничивать изменения дерева отрисовки, перерисовку CSS-боксов и изменения их размеров в пределах элемента. Поэтому оно так важно для динамичных интерфейсов и компонентного веба, позволяя оптимизировать отдельные компоненты и интерфейсы в целом. Но, как и любую оптимизацию, новинку нельзя применять бездумно, всегда тестируйте производительность с разными значениями этого свойства и выбирайте по лучшему практическому результату. Работает пока только в Blink-браузерах (Хроме и «хромятах»), в Firefox в разработке (частично работает за флагом).

Из Парижа (на фото), где недавно проходила встреча рабочей группы CSS, прилетела занятная новость: свойства grid-row-gap и grid-column-gap, а также их сокращение grid-gap…

Перевод статьи Building Production-Ready CSS Grid Layouts Today с сайта smashingmagazine.com для CSS-live.ru, автор — Мортен Рэнд-Хедриксен

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

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

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

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

Приступим!

На прошлой неделе рабочая группа CSS опубликовала обновленные версии двух важных модулей CSS 3 уровня — Box Alignment и CSS Display. Статус у них пока прежний (черновик), но по планам редакторов следующая версия должна стать кандидатом в рекомендации — в общем, «почти готово». А буквально через день обновился еще один черновик — CSS Motion Path 1 уровня.