ВеCSSти с полей

HTML5.0 уходит в прошлое

Вторая очередь стандарта HTML5 — известная в W3C как HTML5.1 — в точном соответствии с планами выходит на финишную прямую. На этой неделе рабочая группа HTML опубликовала ее в статусе кандидата в рекомендации.

Раздел «Изменения» новой спецификации впечатляет — три мегабайта текста. И это только за последний год, более старые изменения вынесены в отдельный документ. Больше всего изменений связано с удалением так и не прижившихся новинок: appCache, scoped-стили, бесшовный iframe, <input type="range"> с двумя ручками (несмотря на все старания Лии Веру и ее полифил), сортировка таблиц и т.д. Ушел из спецификации и сбивающий с толку пример с несколькими заголовками h1 на разных уровнях вложенности — за все годы существования новых структурных элементов браузеры так и не удосужились сделать такую структуру доступной. Удалены и атрибуты для микроданных (сами микроданные W3C еще в 2013-м вынес в отдельную спецификацию и тут же ее забросил, но атрибуты оставались в некоторых примерах — теперь их заменили на более популярный у W3C RDFa). Впрочем, микроданные могут еще вернуться — они не так уж редко встречаются в реальном вебе (и в спецификации WHATWG они по-прежнему на месте). А еще из спецификации убраны некоторые нелогичные ограничения (например, header и footer теперь могут быть вложенными, figcaption может быть в любом месте figure, и т.д.).

Так что пора ознакомиться с новой версией спецификации получше и освежить свои знания. А позапрошлогоднюю спецификацию HTML5.0, несмотря на ее статус рекомендации, пора смело забыть и больше никогда на нее не ссылаться — она сыграла свою важную роль, но теперь интересна лишь для истории. Надо смотреть в будущее. Скоро W3C опубликует новый черновик — уже как HTML5.2!

Не забывайте также, что у HTML-спецификации по-прежнему немало проблем, спорных и ошибочных моментов, и вы можете лично поучаствовать в их исправлении. Причем и для W3C-, и для WHATWG-версии.

Новый черновик CSS-модуля псевдоэлементов 4 уровня

Рабочая группа CSS в W3C выпустила второй публичный черновик модуля псевдоэлементов 4 уровня. Этот модуль выделен из CSS-селекторов 4 уровня и дополняет его.

По сравнению с селекторами 3 уровня добавились псевдоэлементы ::selection и ::placeholder (наконец его стандартизируют!). А вторая версия черновика добавила еще ::marker для списков (этого инструмента ждали еще с 2002 года, правда, в новом черновике возможности его оформления сильно урезаны — позиционировать его по-прежнему нельзя…) и отдельный вариант ::selection для неактивного окна — ::selection-inactive. И немного упростила поведение ::first-letter, поскольку для оформления первых букв (буквиц) появился другой механизм, описанный в другом, новом CSS-модуле строчного форматирования 3 уровня.

Новый модуль также расширяет объектную модель CSS для работы с псевдоэлементами из скриптов: должен появиться отдельный интерфейс CSSPseudoElement, который, помимо свойств «тип псевдоэлемента» и «его CSS-код», будет обязан поддерживать интерфейс EventTarget из DOM2 (т.е. на псевдоэлементах наконец можно будет «ловить» события отдельно от их элементов!). Правда, этот раздел модуля пока очень слабо проработан. Но вы можете предложить свое решение любого из спорных вопросов и даже предложить свою правку спецификации на GitHub!

Модуль генерируемого контента CSS3 обновился спустя 13 лет

Лето в рабочей группе CSS в W3C началось с публикации нового черновика модуля генерируемого контента CSS 3 уровня. Публичных черновиков этого модуля не было аж с 2003 года!

Новая версия включила в себя также генерируемый контент для постраничного вывода, который раньше был отдельным модулем. Получился внушительный набор инструментов для генерации оглавлений, перекрестных ссылок, колонтитулов при печати и т.п. А вот CSS-счетчики (counters) переехали в отдельную спецификацию (хотя не исключено, что их снова объединят).

От самой радикальной идеи старой версии модуля — разрешить свойство content для всех элементов — отказались, но не до конца. В полной мере оно доступно лишь для ::before, ::after, ::marker и колонтитулов печатных страниц, но содержимое любых элементов можно будет заменять картинкой (в т.ч. градиентом и даже функцией element()). Неужели мы дождемся стандартного способа замены текста картинкой почти без издержек?

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

Флексбоксы готовы!

По привычке выдержав двухмесячную театральную паузу, W3C открыл календарную весну, опубликовав наконец спецификацию модуля Flexbox-раскладки 1 уровня в статусе кандидата в рекомендации. В новом стиле, с удобным фиксированным меню слева. И призывает разработчиков браузеров реализовать ее (видимо, те 4%, кто еще этого не сделал:).

Изменений в новой редакции по сравнению с прошлой довольно много, но большинство из них вполне разумны, с ними спецификация стала логичнее и понятнее. И многие баги существующих реализаций (напр. поведение ячеек таблицы во флекс-контейнере в Хроме) перестали быть багами!

Так что поздравляем всех с таким замечательным началом весны! Пусть технологии не ограничивают полет вашей фантазии!

Первый CSS-модуль 4 уровня в статусе кандидата в рекомендации

На днях рабочая группа CSS в W3C решила напомнить нам, что будущее уже здесь, и без лишнего шума опубликовала CSS-модуль каскада и наследования 4 уровня в статусе кандидата в рекомендации. Это не опечатка. Модуль с «магической» цифрой 4 в названии — мы бы с радостью обозвали его звучным «CSS4», если бы в этом было хоть сколько-нибудь смысла — в статусе, означающем полную теоретическую готовность спецификации. Добро пожаловать в 2016-й!

Флексбоксы прощаются с экспериментальным статусом

Как стало известно из секретных¹ источников, близких к W3C, экспериментальный статус наших любимых флексбоксов почти наверняка останется в уходящем году. На прошлой неделе во время тайного совещания² члены Рабочей группы CSS приняли решение в ближайшее время перевести флексбоксы в статус кандидата в рекомендации. Т.е. в переводе с тайного языка W3C на обычный человеческий — объявить, что спецификация полностью готова, и браузеры могут смело ее реализовывать, а мы — использовать.

И в самом деле, сколько уже можно ждать. По W3Cшной традиции, для статуса кандидата в рекомендации нужно как миниум 2 совместимых реализации. А флексбоксы на сегодняшний день поддерживают больше 95% браузеров! В т.ч. больше 80% — без префикса. Для постсоветских стран CanIUse показывает цифры чуть поменьше, но их можно смело увеличивать в уме — там не учитываются Яндекс-браузер и другие «хромята», доля которых в нашей статистике вполне существенна. Если их приплюсовать, цифры будут недалеки от мировых.

CSS-переменные стали кандидатом в рекомендации

Интересный, хотя и вызывающий немало споров, модуль CSS-переменных недавно достиг статуса кандидата в рекомендации, т.е. признан достаточно проработанным для реализации и больше не должен меняться радикально. Тем не менее, Рабочая группа CSS планирует, что обсуждение этого модуля продлится как минимум до 1 июня 2016 года (в отличие от обычных 2-3 месяцев) — всё-таки это модуль 1 уровня, добавляющий в CSS функциональность, которой там никогда прежде не было, что поневоле затрагивает его базовую грамматику и вызывает массу вопросов, как это нововведение «сработается» с другими модулями.

Незадолго до этого экспериментальная поддержка CSS-переменных снова появилась в Chrome Canary (впервые после того, как из Chrome 34 убрали старую реализацию). В Firefox они стабильно поддерживаются начиная с 31-й версии. В Microsoft они еще на рассмотрении — пока с низким приоритетом, но новый статус спецификации и ваш голос могут помочь это изменить.

Подробнее узнать о преимуществах CSS-переменных и удачных сценариях их применения можно в статье Филипа Уолтона, перевод которой есть на нашем сайте:)

CSS Grid Layout включен по умолчанию в Firefox 45.0a1

В ноябре Firefox (ночные сборки, на сегодня это версия 45.0a1) стал первым браузером, в котором нынешняя версия CSS Grid Layout включена по умолчанию. Можно скачать, установить, запустить и сразу проверять примеры из наших статей, не «колдуя» в настройках. Похоже, разработчики Firefox всерьез решили выпустить 45-ю версию с полноценной поддержкой Grid — количество свежезакрытых багов по этой теме впечатляет. Уже 14 декабря эта версия перейдет в статус альфы, а там всего 3 месяца — и релиз. ВеCSSна обещает быть жаркой! :)

Сентябрьские новинки W3C

Начало осени в W3C выдалось весьма «урожайным». Рабочая группа API устройств выпустила два черновика для работы с датчиками приближения и фонового освещения, позволяющие скриптам регировать на изменение физического окружения мобильного устройства. Рабочая группа SVG обновила текущий черновик своего основного труда — спецификации SVG2. Спецификация веб-уведомлений, детище одноименной рабочей группы, достигла статуса предложенной рекомендации (предфинального). А рабочая группа CSS выпустила целую серию спецификаций, в т.ч. довольно интересных.

WebKit (Safari 9) включил поддержку CSS-селекторов 4 уровня

В блоге разработчиков Safari опубликована статья о новых CSS-селекторах, поддерживаемых в последних сборках WebKit (в т.ч. в Safari 9). Речь идет о новом функциональном псевдоклассе :matches(), а также расширении функциональных псевдоклассов :not(), :nth-child() и :nth-last-child().

Селектор :matches() позволяет удобно группировать и более компактно записывать похожие селекторы (напр. .syntax-highlighted :matches(.css-tag, .css-keyword) вместо .syntax-highlighted .css-tag, .syntax-highlighted .css-keyword). Селектор :not() теперь тоже может содержать список селекторов (модуль селекторов 3 уровня разрешал ему лишь простой селектор, т.е. один тег, класс, псевдокласс или ID).

CSS Grid Layout — на финишной прямой

На прошлой неделе Рабочая группа CSS в W3C объявила о намерении уже этой осенью перевести спецификацию CSS Grid Layout 1 в статус кандидата в рекомендации — т.е. фактически стандарта, полностью готового к реализации без префиксов и флагов. Все оставшиеся непроработанными спорные моменты нужно «утрясти» не больше чем за месяц. Поэтому Рабочая группа CSS призывает всех интересующихся поскорее ознакомиться с текущим вариантом и поучаствовать в его обсуждении.

…Мы хотим, чтобы все были довольны, но этого не получится, если вы начнете жаловаться после того, как мы закончим и все уже выпустят свои реализации, а вы соблаговолите сказать нам, что вам что-то не нравится, лишь через пару лет, так ведь? Так что посмотрите сейчас, и лучше жалуйтесь раньше, а не позже. :)

В числе моментов, которые особенно важно обсудить сейчас — свойства row-gap и column-gap и их влияние на общую ширину грид-полос, уточнение автоматического определения размера полос, добавление возможности распределения контента по аналогии с флексбоксами, а также масса небольших уточнений. Всё это нужно прояснить и проработать до осени! Особенно значимы для W3C комментарии от веб-разработчиков — ведь именно им в первую очередь нужен двумерный механизм раскладки. Так что, если не хотите терпеть неудобства от стандарта потом, скорее знакомьтесь с текущей версией (напр. по статьям на нашем сайте), смело экспериментируйте с ней и помогите сделать стандарт удобным!

CSS Snapshot 2015 — официальное определение современного CSS

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

Вот что официально входит в CSS образца 2015 года, по редакторскому черновику нового документа:

Весенние новинки Рабочей группы CSS

Прошедшая половина весны, похоже, выдалась активной и плодотворной для Рабочей группы CSS в W3C. Почти весь март прошел в постоянных телеконференциях и встречах, на которых было принято немало конструктивных решений. В частности, решено больше не менять текущую спецификацию Flexbox (наконец!), поскольку браузеры до сих пор не могут разобраться с последствиями предыдущей смены насчет абсолютно позиционированных потомков флекс-контейнера. Выпущено три новых интересных спецификации и активно дорабатывались существующие. Много внимания уделялось заслуженному модулю CSS3 UI (в частности, уточнению нюансов полезного свойства box-sizing) — он обновлялся дважды, последний раз буквально позавчера.

Большая выставка технологий Moscow Application & Technology Expo

Это рекламная статья. Ради поддержки сайта, чтобы мы могли публиковать больше переводов и для того, чтобы делать лучше и полезнее конференции в целом (прим. редакции css-live.ru)

Большая выставка технологий Moscow Application & Technology Expo

В начале весны в российской столице состоится поистине технологичное шоу, объединяющее новинки мобайла, дополненной и виртуальной реальности, Интернета  вещей, wearable-технологий, потребительскую электронику медицинского назначения, а также еще недостаточно знакомый россиянам так называемый подключенный автомобиль (технология Connected Car).

Все это будет представлено на III Международной выставке MATE 2015, которая состоится 1214 марта в московском выставочном центре «Сокольники». Регистрация – по ссылке.

W3C разрабатывает веб-стандарты для автомобилей

Летающих автомобилей к 2015 году мы не дождались, но это не значит, что прогресс в автомобильной отрасли остановился. Вот-вот по дорогам общего пользования начнут ездить машины-роботы, редкая машина обходится без бортового компьютера и навигатора, и немало важной информации (погода, пробки и др. ситуации на дороге, наличие мест для парковки и т.п.) водители и пассажиры получают из интернета. И вот недавно консорциум W3C и автопроизводители решили объединить усилия и разработать спецификации, которые помогут автомобилистам получать максимум пользы от интернета без ущерба для безопасности.