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

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

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

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

Сегодня 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-ами и какие из решений — исторических, теперешних и перспективных — какие из этих проблем решают (а какие — создают взамен:).

Новый 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 уровня (мощный инструмент для впечатляющих визуальных эффектов с графикой и не только).

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