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

Перевод статьи «The Document Outline Dilemma» с сайта css-tricks.com, опубликовано на css-live.ru с разрешения автора — Амелии Беллами-Ройдз

В последние несколько недель среди веб-стандартистов было много разговоров о HTML-заголовках. Возможно, вы видели какие-то записи в блогах, твиты и обсуждения разных ишью на Гитхабе. Заголовки — часть HTML начиная с самых первых сайтов в ЦЕРНе, так что может показаться странным, что спустя 25 лет в них нашлись какие-то противоречия. Я хочу сначала вкратце рассказать, почему это всё еще стоит обсуждения, а потом добавить собственные соображения по теме. Если вы сами следили за недавней дискуссией, можете перейти сразу к разделу «Более важная дилемма».

Перевод статьи Grid + Flexbox: the best 1-2 punch in web layout с сайта www.chenhuijing.com, опубликован на CSS-live.ru с разрешения автора — Чэнь Хуэй Цзин

Через 5 дней выходит стабильный релиз Firefox 52. Знаете, что это значит? Это значит, что через 5 дней начнут поддерживаться CSS-гриды. А совсем скоро, 14 марта, подтянется Chrome 57, за ним Safari 10.1 и, надеемся, до конца 2017-го присоединится и Edge.

Я вся в предвкушении.

С 1 марта 2017 года у W3C обновился главный документ, регламентирующий работу над всеми спецификациями: W3C Process.

Главное отличие новой версии от предыдущей, принятой 1 сентября 2015-го — добавлена явная возможность помечать спецификации как устаревшие или отмененные. До сих пор по виду спецификации (особенно со статусом «Рекомендация») было непонятно, актуальна ли она до сих пор или вместо нее действует более новая (напр. HTML4.01 и HTML5.0, на смену которым пришла HTML5.1, но поисковики по-прежнему выдают ссылки на них как на актуальные спецификации!). По новому процессу такие устаревшие документы будут снабжаться специальной пометкой, что они больше не являются «руководствами к действию» и хранятся исключительно для истории и для нужд юристов-патентоведов.

Процедура внесения изменений в спецификацию тоже упрощена. Если раньше для выхода новой редакции спецификации требовалось «прогнать» ее через полный цикл черновиков и обсуждений, а до той поры изменения — включая существенные — приходилось публиковать на отдельной страничке «исправленные ошибки» (errata), то теперь изменения, не меняющие критериев соответствия спецификации (напр. дополнительные разъяснения сложных моментов) можно публиковать сразу. А для более серьезных изменений новая версия должна пройти только одну дополнительную стадию — кандидата в рекомендации, после утверждения она станет «Отредактированной рекомендацией» (Edited recommendation).

Надеемся, что с новым процессом разбираться в хитросплетениях спецификаций и их развития станет проще!

Перевод статьи Deep dive CSS: font metrics, line-height and vertical-align с сайта iamvdo.me, опубликовано на css-live.ru с разрешения автора — Венсана де Оливейры.

Line-height и vertical-align — простые CSS-свойства. Настолько простые, что большинство из нас уверены, что понимают, как они работают и как ими пользоваться. Но это не так. На деле они сложны, может быть, сложнее всех, потому что у них ведущая роль в создании одной из самых малоизвестных особенностей CSS: строчного (инлайнового) контекста форматирования.

Например, line-height можно задать в виде длины или безразмерного значения ​¹, но по умолчанию у него значение normal — «нормально». Прекрасно, но что значит «нормально»? Часто пишут, что это (по крайней мере, должно быть) 1, или где-то 1.2, даже CSS-спецификация не дает точного ответа. Мы знаем, что безразмерное  line-height считается относительно font-size, но загвоздка в том, что font-size: 100px ведет себя по-разному для разных гарнитур, так будет ли line-height всегда одинаковым или разным? Действительно ли оно от 1 до 1.2? А vertical-align, как line-height влияет на него?

Давайте углубимся в не самый простой CSS-механизм…

Перевод статьи  A Trick: Individual CSS Transform Functions с сайта danielcwilson.com, опубликовано на css-live.ru с разрешения автора — Дэна Уилсона.

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

Сегодня W3C опубликовал первые публичные черновики двух новых модулей CSS: изоляции (CSS Containment level 1) и временных функций (CSS Timing Functions level 1).

CSS-модуль изоляции позволяет отделить часть дерева отрисовки от остальной страницы, сделать ее полностью независимой, благодаря чему можно много чего оптимизировать. За это отвечает новое свойство contain. Хотя у спецификации до сих пор был только редакторский черновик, это свойство уже работает в последних версиях Blink-браузеров. У нас был перевод статьи о нем, а недавно мы опять вспоминали его в связи со способами создания контекста форматирования.

Временные функции (они же функции плавности) нам хорошо знакомы по анимациям и переходам, откуда их и вынесли в отдельный модуль для удобства. К знакомым значениям steps(), cubic-bezier() и ключевым словам для ее конкретных значений добавилась новая функция — frames(). Она очень похожа на steps() (значение тоже меняется ступенчато), но каждое состояние (начальное, конечное и все промежуточные) длится одинаковое время, что удобно для зацикленных анимаций. Правда, браузеры эту новую функцию, похоже, пока не поддерживают.

Перевод статьи Do we need a new heading element? We don’t know с сайта jakearchibald.com, опубликовано на css-live.ru с разрешения автора — Джейка Арчибальда.

В спецификацию HTML предлагают добавить новый элемент <h>. Это решает довольно частую задачу. Возьмем такой пример HTML:

Рабочая группа CSS обновила документ по ссылке https://www.w3.org/TR/CSS/, традиционно указывающей на «последнюю версию CSS». На смену «снимку» CSS за 2015 год пришел новый «снимок», отражающий состояние технологии в нынешнем, 2017 году. Постоянная ссылка этой версии документа выглядит так: www.w3.org/TR/css-2017/. Так что те, кто скучает без красивых «номерных» обозначений («CSS3», «CSS4» и т.д.), имеют все основания называть его «CSS-2017» — по аналогии с ES2017 для последней версии JS.

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

Новые значения свойства display из модуля CSS Display 3-го уровня (за развитием которого мы следили с позапрошлого года) потихоньку проникают в браузерную реальность. Первая ласточка — display:contents — уже больше года поддерживается в Firefox, без всяких префиксов и флагов. Вторая ласточка «прилетит» вот-вот: в Firefox 53+ и Chrome 57+ появляется display: flow-root. И оно уже работает в ночных сборках и Canary соответственно.

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

На вчерашней телеконференции участники рабочей группы CSS в W3C обсудили, какие модули спецификации войдут в следующее официальное определение CSS, которое заменит нынешний CSS-2015. Список модулей, более-менее отсортированный по убыванию готовности и разбитый на группы «Уже есть в списке», «Будут добавлены» и «Пока не в списке», в черновом виде уже доступен на гитхабе.

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

Среди рассматриваемых кандидатов также модули выравнивания блока 3 уровня (обобщение всевозможных align-* и justify-* для разных ситуаций), грид-раскладки 1 уровня (уж его-то точно надо!), Ruby-раскладки 1 уровня (создавался для крошечных подсказок к восточным текстам иероглифами, но сейчас, в эпоху всепроникающих эмодзи, иероглифами пишут почти все!:), текста 3 уровня (всё про межсловные пробелы, переносы слов, выключку текста и т.п.), направления письма 3 уровня (важно для мультиязычных сайтов, а еще влияет на направление главной и поперечной осей в тех же флексбоксах) и CSS-фильтров 1 уровня (мощный инструмент для впечатляющих визуальных эффектов с графикой и не только).

Так что следите за новостями! И с наступающим Новым годом, с открывающимися новыми возможностями!

Накануне новогодних праздников W3C разместил на своем сайте страничку с наиболее яркими и важными для веба как открытой платформы моментами уходящего года:

• Виртуальная реальность. В октябре в Сан-Хосе (США) прошла большая конференция по вебу и виртуальной реальности, где представители более 70 организаций обсуждали вопросы доступности веб-ресурсов из виртуальной реальности, эффективную передачу видео с полным обзором (360°) и аудио с эффектом погружения, превращения веб-страниц в целые виртуальные пространства и многое другое. Есть краткий, но обстоятельный отчет и видео.
• Стандартизация веб-платежей.
• Новый стандарт веб-аутентификации (в мае опубликован публичный черновик, в следующем году планируется довести до кандидата в рекомендации).
• Ставший в ноябре рекомендацией стандарт Media Source Extensions, расширяющий DOM-интерфейс HTMLMediaElement из HTML5.1: теперь у скриптов есть низкоуровневый доступ к источникам видео (включая те самые 360°) и можно эффективно делать с ними разные крутые штуки, причем это уже работает практически во всех браузерах.
• Веб-стандарты для автомобилей приносят первые ощутимые плоды.
• Основа всего в вебе — «золотой стандарт» HTML5.1 — утвержден как рекомендация! В этой версии стандарта улучшена поддержка отзывчивых веб-приложений, доступность веб-документов, навигация и др. А сейчас вовсю идет работа над HTML5.2, который должны утвердить в следующем году.
• CSS исполняется 20 лет! CSS1 был утвержден 17 декабря 1996 г. В честь юбилея W3C публикует специальную праздничную страничку, содержание и оформление которой будет постоянно меняться и отражать вехи истории CSS весь ближайший год. Учитывая, какой долгой и богатой была эта история, там явно будет на что посмотреть.

Так что поздравляем всех читателей CSS-live.ru с этим замечательным поводом! :)

Перевод статьи CSS Grid! с сайта meyerweb.com для css-live.ru, автор — Эрик Мейер

Гриды к нам приходят! Гриды к нам приходят! На самом деле, наконец они появятся в ближайшем браузере! Ураааааа!

Эй, потише там. Что за тарарам?

CSS Grid начнет поддерживаться по дефолту в Chrome и Firefox в марте 2017-го. А именно, Мозилла включит его в Firefox 52, намеченном на 7 марта. Судя по тому, когда Grid включили по дефолту в Chrome Canary, похоже, что Google выпустит его с Chrome 57, намеченным на 14 марта. В обоих случаях, с тех пор как поддержку включат по дефолту в основных релизных каналах — т.е. «вечнозеленых» браузерах, которыми пользуются обычные люди — вся-вся поддержка гридов, что сейчас есть в версиях для разработчиков, станет доступна для всех. Всё гридовое Просто Начнет Работать™^®©.

Эти даты железобетонно гарантированы?

Перевод статьи The 100% correct way to do CSS breakpoints для CSS-live.ru, автор — Дэвид Гилбертсон

Постарайтесь на пару минут забыть про CSS. Не думайте о веб-разработке. Забудьте про цифровые пользовательские интерфейсы.

А когда вы забудете про всё это, хочу, чтоб ваше сознание отправилось в путешествие. В путешествие в прошлое. Назад в детство. В первый ваш день в школе.

Хотя свойство border-image уже поддерживают более 96% браузеров (с оговорками, но всё же), популярным пока его не назовешь. Пожалуй, поначалу оно кажется неоправданно сложным: объединяет в себе 5 отдельных свойств, каждое с несколькими значениями, да еще неочевидные правила взаимодействия с обычным border — легко запутаться. Даже многие неплохие руководства (типа статьи Дадли Стори, которую мы переводили в прошлом году) грешат тем, что даже после них ощущение сложности не проходит.

Есть мнение, что его сложность преувеличена, а возможности недооценены. Попробуем исправить это упущение.