Архив автора: SelenIT

Варианты «clearfix-хака» и его замен: сводная таблица

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

(далее…)

Новый display:flow-root — не clearfix, но что это и зачем?

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

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

(далее…)

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

Грядут гриды!

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

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

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

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

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

(далее…)

На 100% правильный способ делать контрольные точки в CSS

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

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

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

(далее…)

Еще раз про border-image

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

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

(далее…)

Пространство в системах дизайна

Перевод статьи Space in Design Systems с сайта https://medium.com, опубликовано на css-live.ru с разрешения автора — Нейтана Кёртиса.

1-1scyy1iu_z0nic9lnqhohg

От основ до продвинутых понятий, чтобы задействовать пространство с умом

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

(далее…)

Псевдоэлементы, которых не может быть

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

(далее…)

Руководство по цветам в вебе для «ботаников»

Перевод статьи A Nerd’s Guide to Color on the Web с сайта CSS-Tricks.com для CSS-live.ru, автор — Сара Дрэснер

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

Цветосмешение

При работе с цветом очень важно понимать, что привычные еще с детства подходы к цветам не работают в компьютере из-за смешения цветов. В детстве мы работали с краской. В красках и чернилах из принтера есть маленькие частички — пигменты, которые смешиваются между собой и отражают свет, чтобы представить цвет глазу. Это субтрактивное (от англ. subtract — вычитание) цветосмешение. Чем больше цветов вы добавляете, тем темнее становится результат, пока не получится коричневый цвет. Основные цвета близки к тому, к чему вы привыкли: красный, желтый, синий. Но если смешать их при субтрактивном цветосмешении, вы придете к коричневому.

Субтрактивное цветосмешение пигментов

(далее…)

Новые статусы 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 заново:). К сожалению, далеко не все новинки поддерживаются актуальными браузерами, но с новым статусом спецификации браузерам должно стать просто стыдно их игнорировать. Так что готовимся к новым невиданным красотам в вебе!

Анимации: ищем общий язык

Перевод статьи Communicating Animation с сайта alistapart.com для css-live.ru. Автор — Рэйчел Нейборс.

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

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

(далее…)

Языки, чуть было не ставшие CSS

Перевод статьи The Languages Which Almost Became CSS с сайта eager.io, опубликовано на css-live.ru с разрешения автора — Зака Блума

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

Марк Андрессен, 1994

Когда в 1991-м Тим Бернерс-Ли объявил о создании HTML, оформлять страницы было просто нечем. То, как отображались те или иные HTML-теги, определялось браузером, часто под существенным влиянием пользовательских настроек. Хотя казалось заманчивым придумать стандартный способ, чтобы странички сами «предлагали», в каком виде их лучше отобразить.

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

Хотя, очевидно, сейчас эти языки не в ходу, мое сердце замирает при мысли о том, как всё могло бы быть. И что еще удивительнее, оказывается, во многих из этих других вариантов было такое, что разработчики и сейчас прыгали бы от счастья, появись оно в CSS.

(далее…)

Дело не в моральных принципах: доступность нужна всем

Перевод статьи It’s Not About Morals: Accessibility is for the Masses с сайта una.im, опубликовано на css-live.ru с разрешения автора — Юны Кравец.

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

(далее…)

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-версии.