ВеCSSти с полей

Первый публичный черновик модуля CSS-шрифтов 4 уровня

11 июля рабочая группа CSS опубликовала первый публичный черновик модуля CSS-шрифтов 4 уровня. То есть это уже не сырая идея, а осязаемый и обсуждаемый проект, и разработчики браузеров уже могут вовсю экспериментировать с его новинками.

Их немало: управление отображением шрифта при загрузке (варианты на выбор — сразу отобразить текст шрифтом по умолчанию, а после загрузки шрифта подменить, не отображать текст первых 3 секунды загрузки шрифта, либо оставить шрифт по умолчанию, если не удалось загрузить шрифт быстро/моментально), причем для каждого шрифта это можно задавать отдельно, выбор угла наклона для наклонного шрифта, ограничение максимального и минимального размера шрифта, унификация размеров букв из разных шрифтов и многое другое, вплоть до многоцветных шрифтов и управления их палитрой. Так что стоит взглянуть. Тем более что некторые новинки (например, font-display, о котором упоминалось в статье Зака Лезермана о загрузке шрифтов, которая у нас переведена) уже работают в браузерах!

Июньские новинки мира веб-стандартов

HTML, CSS, JS

Последняя неделя июня выдалась урожайной на новости для всех трех «китов» фронтенда — HTML, CSS и JS.

Самое заметное событие именно в мире JS: комитет TC39 утвердил спецификацию ECMAScript 2017 (она же 8-я редакция ECMA-262). Понятно, что формальный статус стандарта не так важен, как поддержка в браузерах и инструментах, но то, что это уже стандарт, а не «какой-то черновик», для кого-то может быть важно. Основные новинки — уже полюбившийся многим async и первое стандартное средство для «распараллеливания» задач между основным потоком и воркерами (SharedArrayBuffer). И по мелочи — методы padStart и padEnd для строк, новые методы для объектов и т.п.

(далее…)

Новые гриды уже в Edge Insider Preview

ms-grid

Радостная новость от Microsoft: буквально несколько часов назад статус самого, наверное, популярного запроса к разработчикам Edge — обновить реализацию CSS-гридов до соответствия актуальной спецификации — сменился с «В разработке» на «Доступен в превью» (конкретно, в Windows 10 Insider Preview build 16226). Пока за флагом, но зато уже без префикса.

Темп, с которым браузеры — даже традиционно «неторопливые» — подхватывают это долгожданное нововведение, безумно радует. Есть все шансы, что к концу года гриды действительно станут повсеместными (кроме, возможно, совсем старых андроидов, которым в любом случае лучше давать упрощенную мобильную раскладку). Так что спешите осваивать все возможности новой эры верстки!

Первый черновик CSS 5 уровня

css5

Если к модулям CSS 4 уровня мы уже привыкли, то 5 уровень (так и хочется назвать его «CSS5», хоть это и неправильно) — еще новинка. Но один такой модуль уже есть! Пока только в виде редакторского черновика, но всё же. Им стал модуль медиавыражений 5 уровня.

По сравнению с модулем медиавыражений 4 уровня (тоже еще не утвержден, но текущая опубликованная редакция выглядит достаточно зрелой) новинка позволит проверять из CSS, доступны ли скрипты (причем отдельно для момента загрузки страницы и для произвольного момента, что не по силам обычному <noscript>), узнавать уровень внешней освещенности, если устройство имеет соответсвующий датчик (напр. чтобы сделать интерфейс на экране мобильника максимально контрастным на ярком солнце и «приглушить» его в темноте), а также узнавать, надо ли показывать все анимации или лучше по возможности их убрать (напр. для читалок на электронных чернилах). Возможно, этот список еще будет расширяться.

Так что с очередным «левел-апом», CSS!

Подарки от браузеров ко дню вебмастера

pic

4 апреля (4.04), в неофициальный праздник всех, кто связан с веб-разработкой — «день вебмастера», сразу два браузера решили порадовать веб-разработчиков хорошими новостями.

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

(далее…)

Важная веха: Android обошел Windows и стал платформой №1 в вебе

Изменение доли разных ОС в вебе

Интересную новость сегодня опубликовал сервис веб-статистики Statcounter. По его данным, в марте 2017 года глобальная доля пользователей с Android незначительно, но превысила долю пользователей с Windows (37.93% против 37.91% от общей суммы десктопных и мобильных ОС). То есть впервые с 1980-х гг. Windows уступила звание самой популярной платформы. При этом еще пять лет назад доля Android составляла всего 2.4%.

(далее…)

Месяц CSS-гридов: первые итоги

ciu-grid

Март 2017-го года можно с полным правом назвать месяцем CSS-гридов, и не потому, что «астрологи объявили» (хотя мудрые люди действительно предсказывали это заранее:). Трудно вспомнить другой месяц в истории веба, в начале которого одну из самых долгожданных технологий верстки поддерживали бы (без флагов и т.п.) ноль браузеров, а в конце — целых четыре: с 7 марта — Firefox, с 14 — Chrome для десктопов, с 21 — Opera, а с 27 — Safari, десктопный и мобильный! Сhrome для Android с поддержкой CSS Grid вот-вот появится в Google Play, формально он тоже успел выйти в марте. Один Edge пока остался со своей старой и неактуальной реализацией (хотя именно Microsoft, надо отдать им должное, первым хоть как-то реализовал гриды в браузерах), но вряд ли его разработчики смогут отмахнуться от той кучи просьб обновить гриды, что пришла им за эти дни. Добавлено 03.04.2017: так и вышло — статус этого запроса сменился с «В ожидании» на «Мы работаем над этим»!

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

(далее…)

W3C обновляет свой рабочий процесс

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

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

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

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

Два новых первых публичных черновика CSS

Новые публичные черновики CSS

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

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

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

Опубликовано новое официальное определение CSS (CSS-2017)

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

(далее…)

Рабочая группа CSS определяет состав будущего CSS-2017

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

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

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

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

Итоги года для веб-платформы от W3C

Накануне новогодних праздников 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 с этим замечательным поводом! :)

Новые статусы HTML5.1 и SVG2

15 сентября 2016 г. — особый день для веб-стандартов: сразу две важные спецификации обновили свой статус. HTML5.1 стал предложенной рекомендацией (последняя, чисто формальная стадия перед окончательным утверждением!). Так что, если вы еще не убрали из закладок старичка HTML5.0, самое время обновить их.

Основные отличия нынешней публикации от июньского кандидата в рекомендации — убраны некоторые новинки, которые так и не были реализованы и находились «под риском», например, элемент dialog и тип toolbar для menu. В целом же поддержка HTML5.1 браузерами весьма неплоха.

А рабочая группа HTML продолжает работу уже над следующей редакцией HTML — HTML5.2. С прошлого месяца доступен ее публичный черновик. Как пишет в блоге W3C один из авторов спецификации, Чарльз МакКэти Невил, HTML5.1 — самая близкая к реальности и лучше всех нацеленная в будущее спецификация HTML из когда-либо существовавших, но HTML5.2 должна превзойти ее в этом. И исправить большинство ее ошибок. Планируется, что HTML5.2 будет готов уже в следующем, 2017 году, так что пора поглядывать и в этот черновик.

А в мире SVG перемены еще круче: основной стандарт векторной графики обновил не вторую, а первую цифру. SVG2 стал кандидатом в рекомендации, что означает, что стандарт проработан теоретически и готов к реализации. Предыдущая версия стандарта — SVG1.1 — была рекомендацией аж с 2003 года (с «косметическим» обновлением до второй редакции в 2011-м), так что необходимость таких перемен назревала давно. Особенно при нынешней популярности SVG в вебе.

Раздел существенных изменений по сравнению с SVG1.1 внушительный — 30 подразделов! Некоторые разделы старой спецификации из новой полностью убраны, многое унифицировано со стандартами DOM и CSS, уточнены многие неоднозначные места. Вообще изменений столько, что, пожалуй, самое время учить SVG заново:). К сожалению, далеко не все новинки поддерживаются актуальными браузерами, но с новым статусом спецификации браузерам должно стать просто стыдно их игнорировать. Так что готовимся к новым невиданным красотам в вебе!

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!