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

Важная веха: 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, предназначенный именно для раскладки всей страницы. А Юна Кравец — она и раньше могла удивить нестандартным взглядом на знакомые вещи — и вовсе посвятила ему целую любовную песню!

(далее…)

Красивое выравнивание блоков по резиновой сетке. По-новому

Почти пять лет назад на нашем сайте вышла статья о том, как выстроить некие однотипные блоки (товары в каталоге, фото в галерее…) по сетке, оптимально вписанной в доступное пространство. Сейчас она — одна из самых популярных на сайте, и число ее просмотров всё растет. Ведь актуальность задачи никуда не делась. Самое время вернуться к этой теме и раскрыть ее по-новому.

(далее…)

CSS Grid на практике: добавляем гриды к существующему дизайну

Перевод статьи Practical CSS Grid: Adding Grid to an Existing Design с сайта alistapart.com для css-live.ru. Автор — Эрик Мейер.

Понять и использовать CSS-гриды проще, чем может показаться. В день, когда вышел Firefox 52 с поддержкой гридов, я на радостях решил переделать основу раскладки моего личного сайта на гридах. И это был очень несложный процесс — пять минут, чтоб написать сами стили для грида, еще 15-20 ушло на отладку.

(далее…)

Свойства для выравнивания всего и их новые тайны

Если вы освоили флексбоксы (а кто не освоил их за последние два-три года?), для вас давно не проблема отцентрировать что угодно, да и вообще выровнять как угодно. Вам давно знакомы «волшебные» свойства justify-content, align-content, align-items и align-self, и что делает каждое из их значений (не обязательно помнить их все наизусть, ведь всегда можно подсмотреть в шпаргалке или наглядном справочнике:). Но всё ли вы знаете про эти свойства? Что если я скажу вам, что их могущество не ограничено флексбоксами? И что вы видели лишь часть их значений? И что самих этих свойств не 4, а в два с лишним раза больше? Если хотите овладеть всей их мощью, узнать, причем тут новомодная грид-раскладка (CSS Grid Layout), и вас не страшат дебри спецификаций — добро пожаловать в эту статью, где я покажу вам, насколько глубока кроличья нора W3C.

CSS-гриды упомянуты не случайно: лучше сразу вооружитесь одним из браузеров, где они уже работают (Firefox 52+, Chrome 57+, Opera 44+ или Safari 10.1+/iOS 10.3+ Safari), чтобы увидеть примеры во всем их блеске.

(далее…)

CSS-гриды пришли насовсем

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

О том, что стояло за разработкой CSS Grid Layout в Chromium/Blink и Safari/WebKit, которую вела Igalia при поддержке Bloomberg.

(далее…)

Проблема выбора структуры документа

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

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

(далее…)

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

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

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

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

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

Неизведанные глубины CSS: метрики шрифта, line-height и vertical-align

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

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

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

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

(далее…)

Трюк: раздельные функции CSS-трансформации

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

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

(далее…)

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

Новые публичные черновики 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 (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.

(далее…)

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

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

(далее…)