Cтатьи по тегу «CSS Display module level 3»

28 августа модуль CSS Display 3 уровня, за развитием которого мы наблюдаем с его появления, следя за его новинками и хорошо забытыми старыми секретами, стал кандидатом в рекомендации. То есть спецификация считается полностью теоретически проработанной и готовой к реализации. Отличий от предыдущего черновика совсем немного: уточнено, что для «особых» элементов, для которых display:contents работает как none, оно будет и вычисляться как none, а также уточнено определение контекста форматирования и оговорено, что display не анимируется (даже дискретно).

Эта статья задумана как начало цикла про загадки, сюрпризы, малоизученные особенности и маленькие полезные секреты самого могущественного, пожалуй, свойства в CSS — свойства display. У нас уже были статьи про новинки этого свойства — значения contents (что это вообще, его сюрпризы, преимущества и подводные камни для доступности) и flow-root. Но и старые, давно знакомые (казалось бы) значения этого свойства таят в себе немало сюрпризов, подводных камней и удивительных открытий. Прежде всего, пожалуй, это значения с «приставкой» inline-: inline-flex, inline-grid, inline-table, и, наконец, наш старый знакомый inline-block.

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

На прошлой неделе рабочая группа CSS опубликовала обновленные версии двух важных модулей CSS 3 уровня — Box Alignment и CSS Display. Статус у них пока прежний (черновик), но по планам редакторов следующая версия должна стать кандидатом в рекомендации — в общем, «почти готово». А буквально через день обновился еще один черновик — CSS Motion Path 1 уровня.

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

Заинтригованы? Если да — добро пожаловать в статью и узнайте, как вроде бы пустяк, о котором сразу не подумали, едва не перевернул вверх дном одно из базовых понятий CSS. Впрочем, в любом случае заходите, если что, похвастаетесь «тайным знанием» перед коллегами, которые статью не читали:)

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

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

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

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

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