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

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

Перевод статьи 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-версии.

Новый черновик 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 пока открытых вопросов?

Регрессивные веб-приложения

Перевод статьи Regressive Web Apps с сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита.

На конференции Google I/O в этом году было немало докладов о разработке для веба. Приятная перемена по сравнению с прошлыми годами, когда о вебе едва вспоминали и можно было скорей подумать, что  Google I/O — конференция для разработчиков приложений под Андроид.

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

(далее…)

БЭМантика: пишите осмысленные стили без повторов

Перевод статьи BEMantic: DRY Like You Mean It с сайта https://medium.com, опубликовано на css-live.ru с разрешения автора — Мэтта Стоу.

Недавняя статья Тима Бакстера на A List Apart, «Осмысленный CSS: описывайте стилями свою логику», подбросила дровишек в костер тому мнению, будто фронтендеры, предпочитающие объектно-ориентированный подход к CSS (БЭМ или что-то вроде), как-то напрочь забывают о семантической разметке и доступности.

Лично я считаю, что так думать просто обидно. Не понимаю, почему БЭМ и семантику HTML считают взаимоисключающими. Я тешу себя надеждой, что я хороший разработчик: я горжусь как своим HTML (включая семантику и ARIA-атрибуты), так и своим CSS, где вовсю используются Sass и БЭМ.

(далее…)

Любовное письмо к jQuery

Перевод статьи A love letter to jQuery с сайта madebymike.com.au, опубликовано на css-live.ru с разрешения автора — Майка Ритмюллера.

jQuery, любимая! Мы провели 10 лет вместе, а по меркам JavaScript-библиотеки это больше, чем все 50. Пусть сейчас мы и видимся реже, чем некогда, но ты нужна мне ничуть не меньше, чем в дни нашей первой встречи.

Никогда не забуду нашей первой совместной функции:

	$(document).ready(function(){
	  alert(‘страница загрузилась’);
	});

Эх! Надеюсь, ты простишь, что я тогда вызвал у тебя это тревожное всплывающее окошко. Так уж было заведено в ту пору, а я хотел лишь убедиться, что ты работаешь: конечно же, ты работала, сейчас бы я ни на миг не усомнился в этом. Теперь нам не так часто бывает нужен $(document).ready(), но я помню те наши замечательные деньки. А также помню, как мучительно бывало, когда я пытался делать это без тебя!

(далее…)

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

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

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

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

Свойство background-clip и его применения

Перевод статьи The `background-clip` Property and its Use Cases с сайта css-tricks.com, переведено для css-live.ru с разрешения автора — Аны Тюдор.

background-clip — одно из тех свойств, о которых я давно знала, но почти не использовала. Может, лишь пару раз в ответах на Stack Overflow. До прошлого года, когда я начала создавать эту огромную коллекцию ползунковых регуляторов (слайдеров). Некоторые дизайны, что я решила воспроизвести, были довольно-таки сложны, а мне на каждый ползунок отводился один-единственный элемент, и им как назло оказался input, к которому даже псевдоэлементов толком не добавить. Хоть в некоторых браузерах такое и работает, то, что оно работает — на самом деле баг, и мне не хотелось на это полагаться. Так что в итоге мне пришлось использовать фоны, рамки и тени в изобилии. И я многому научилась при этом, и в этой статье делюсь некоторыми их тех уроков.

Первым делом давайте посмотрим, что такое background-clip и что оно делает.

(далее…)

Будущее загрузки CSS

Перевод статьи The future of loading CSS с сайта jakearchibald.com, опубликовано на css-live.ru, автор — Джейк Арчибальд.

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

Chrome собирается изменить поведение <link rel="stylesheet">, что будет заметно, если эта конструкция окажется внутри <body>. Из описания в почтовой рассылке разработчиков Blink не очень понятно, чем это грозит и что это дает, так что я решил пояснить это здесь.

(далее…)

Подробно о размещении элементов в грид-раскладке (CSS Grid Layout)

Перевод статьи Deep Dive into Grid Layout Placement с сайта blogs.igalia.com, опубликовано на css-live.ru с разрешения автора — Мануэля Рего Касановаса.

Полный обзор разных методов позиционирования элементов, предлагаемых спецификацией CSS Grid Layout.

В последние месяцы в рамках моей работы в Igalia я сосредоточенно доделывал те новые/пропущенные места в реализации CSS Grid Layout в движке Blink, что относились к размещению элементов. Вкратце, работа в основном велась по 2 направлениям:

  • Поддержка неявного грида перед явным. Так, чтобы к гриду можно было добавлять полосы не только в направлении заполнения (обычно справа/снизу), но и с противоположной стороны.
  • Правильная интерпретация неизвестных именованных грид-линий. Это случай, когда элемент привязывается к линии под названием «foo», но нигде в гриде нет линий с таким именем.

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

Теперь, когда я всё это доделал, самое время объяснить, как им пользоваться. Хотя мой коллега Серхио уже писал об этом в 2014-м, спецификация с тех пор поменялась, так что, думаю, лучше попытаться объяснить всё целиком с нуля. Эта статья — что-то вроде выжимки с примерами из раздела «Размещение грид-элементов» спецификации CSS Grid Layout.

(далее…)

Display: contents и его новые друзья спешат на помощь

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

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

Так вот: теперь освободить элементы из-под этого «DOMашнего ареста» можно. Правда, пока только в одном браузере — Firefox (добавлено 25.05.2017: уже не только, в Chrome 58+ примеры тоже работают, но нужно включить флаг «Экспериментальные функции веб-платформы» в chrome://flags). Так что желательно открыть его, чтобы увидеть примеры в действии.

(далее…)

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

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

(далее…)