Kelin Posted April 14, 2013 Report Share Posted April 14, 2013 Решил устроить дискуссию на тему Flexbox.Итак, как вы считаете, стоит ли начинать использовать Flexbox в верстке или все-таки нужно еще чуть подождать, пока пользователей IE<10 не станет меньше? Quote Link to comment Share on other sites More sharing options...
lexxcode Posted April 14, 2013 Report Share Posted April 14, 2013 ну вот Firefox вот-вот включит у себя поддержку и можно использовать Quote Link to comment Share on other sites More sharing options...
nerv Posted April 14, 2013 Report Share Posted April 14, 2013 ссылка http://habrahabr.ru/post/153925/ для тех кто не в курсе Quote Link to comment Share on other sites More sharing options...
Great Rash Posted April 15, 2013 Report Share Posted April 15, 2013 Я на днях пытался разобраться с флексом. У меня от этого стандарта на голове волосы зашевелились. Он такой неудобный, что диву даёшься: ну как можно было так испоганить такую отличную идею. Вот помнится статья s0rr0w была на хабре про то как он видит позиционирование элементов это был класс, эсли бы это реализовали то было б отлично. А в итоге нам подсовывают очередную корявую ерунду.P.S. Ну я может я просто не разобрался и не понял фишки... Quote Link to comment Share on other sites More sharing options...
lexxcode Posted April 15, 2013 Report Share Posted April 15, 2013 А что у тебя вызвало сложность, ну или неудобство?Да, у дяди s0rr0w интересная идея, жаль, что далеко не все воспринимают ее Quote Link to comment Share on other sites More sharing options...
SelenIT Posted April 15, 2013 Report Share Posted April 15, 2013 Имхо, смотря для какой задачи. У флексов всё-таки ноги четко растут из языка разметки интерфейсов (мозилловского XUL-а), и это сильно сказывается. Для растяжки менюхи по ширине, например — самое то. Да и для колонок, имхо, всяко лучше извратов с float-ами и псевдотаблицами. А для контента... о5 же, надо смотреть по задаче.Главный ужас сейчас, имхо — наличие в ходу одновременно 3-х (!) фигово совместимых между собой вариантов синтаксиса. Но, по идее, это можно обойти, и даже для совсем старья обеспечить приемлемый fallback на те же float-ы. Наиболее актуальная, имхо, статья по вопросу - http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/ Quote Link to comment Share on other sites More sharing options...
Great Rash Posted April 15, 2013 Report Share Posted April 15, 2013 А что у тебя вызвало сложность, ну или неудобство?Ну например как сделать вот такую резиновую конструкцию? Чтоб резина была и по высоте и по ширинеА после, как сделать конструкцию, чтобы блоки 1 и 3 были шириной в 200px, а остальные блоки занимали всю оставшуюся ширину? Quote Link to comment Share on other sites More sharing options...
Kelin Posted April 15, 2013 Author Report Share Posted April 15, 2013 для колонок, имхо, всяко лучше извратов с float-ами и псевдотаблицами Вот именно, это очень удобно, но проблемы с синтаксисом и кроссбраузерностью меня все же вынуждают оставаться на этих самых float'ах. ссылка http://habrahabr.ru/post/153925/ для тех кто не в курсе И вот: http://habrahabr.ru/post/125802/Тут побольше плюшек описано Quote Link to comment Share on other sites More sharing options...
s0rr0w Posted April 15, 2013 Report Share Posted April 15, 2013 Да, у дяди s0rr0w интересная идея, жаль, что далеко не все воспринимают ееСпасибо, господа, за теплые словаЯ эту идею почти до совершенства довел, даже через гайдлайны все остальные элементы спозиционировал, начиная от таблиц, заканчивая флоатами. Никому в w3c это не интересно.Оставлю-ка я это сдесь.Первые потугиhttp://lists.w3.org/...10Sep/0097.htmlhttp://lists.w3.org/...10Sep/0243.htmlhttp://lists.w3.org/...10Sep/0280.htmlВторыеhttp://lists.w3.org/...12Feb/1172.htmlОсобенно мне нравятся ответы Гуглогуру Таба Эткинсаhttp://lists.w3.org/...12Feb/1344.htmlIn my opinion, this is a fool's errand. I don't think it's possible to come up with a single layout model that solves all of the major use-cases that the separate models we currently have can do. I believe the complexity of having several layout models is a worthy cost for the benefit of making it simple and easy to solve problems once you decide with model to use.Читаем между строк: Я не хочу разбираться во всем этом, лучше оставить все как есть, так мне проще Quote Link to comment Share on other sites More sharing options...
Int Posted April 15, 2013 Report Share Posted April 15, 2013 Ну например как сделать вот такую резиновую конструкцию? Чтоб резина была и по высоте и по ширинеА после, как сделать конструкцию, чтобы блоки 1 и 3 были шириной в 200px, а остальные блоки занимали всю оставшуюся ширину?Вспоминаем цитату с баша про вилларибо и виллабаджо? Или у кого-то такое отвращение к таблицам, что даже если без них придётся писать в 10 раз больше кода, но зато без них? Quote Link to comment Share on other sites More sharing options...
nerv Posted April 15, 2013 Report Share Posted April 15, 2013 s0rr0w, можно коротко в чем соль и почему твой способ лучше чем ...? Только объясняй как для неспециалиста Quote Link to comment Share on other sites More sharing options...
s0rr0w Posted April 15, 2013 Report Share Posted April 15, 2013 Эволюция схем позиционирования была примерно такойВначале был просто поток. Потом в нем появились вкрапления по типу инлайн-блоков, флоатов, инлан-таблиц и так далее. Управление потоком неразрывно связано с позиционированием. Если вы переставляете ноду куда-то в другое место по дереву, это может отражаться на множестве ее характеристик, например она станет визульно меньше по размеру, так как слева стоит float, который нужно обтекать. Переставление ячейки таблицы меняет ее положение. И так далее. Потом появились "проблемы", и разработчики стандартов понемногу начали склоняться к статическому представлению контента на странице. Вот есть блок, он вот тут гвоздиком прибит и это хорошо. Сейчас все больше появляется мест в стандарте, когда физическое местоположение ноды в дереве DOM перестает влиять на отображение. И если для управления местоположением элемента в дом-дереве есть куча методов, то для аналогичного управления, динамически через CSS, потребуется работать с ужасным интерфейсом - style.Логично предположить, что наиболее выгодным для разработчика будет тот метод позиционирования, который позволяет комбинировать силу DOM-методов и потоковое управление контентом. Добавляем сюда требования к адаптивности, ведь мы не хотим создавать множество медиакверей для разных устройств, потому что это банально дорого. Кто работал с графическими редакторами, тот знает, что там используются направляющие (guidelines), которые помогают в выравнивании контента. И есть такой эффект как прилипание к направляющей, когда край какого-то объекта подносится близко к линии. Берем аналогичное поведение для страницы. Мы разлиновываем контейнеры направляющими и рассказываем блокам, как они должны прилипать к определенным линиям. Если размеры не позволяют прилипнуть, мы можем перескочить к следующей направляющей.Прилипать можно по разному количеству сторон. Если разлиновать некий бокс вертикальными и горизонтальными направляющими, а потом заставить ячейки прилипнуть ко всем 4-м сторонам, то получим таблицу. Если взять только один элемент и прикрепить его к какой-то одной стороне, то получится флоат. Гриды и флексбоксы делаются путем аналогичного прилипания. Лайнбоксы ни что иное как гайдлайны для инлайн-контента. Выравнивание текста = прилипание к определенному гайдлайну (центрирование тоже можно сделать путем прилипания разных точек, т.е. бокс описывается не 4-мя а 8-ю точками)Только что я описал базовый механизм позиционирования почти всего в CSS 1 Quote Link to comment Share on other sites More sharing options...
Great Rash Posted April 16, 2013 Report Share Posted April 16, 2013 Дал бы ему просто ссылку на статью на хабре, где стопицот минусов наглядно показывают насколько закостенел мозг у большинства web-разработчиков.Вспоминаем цитату с баша про вилларибо и виллабаджо? Или у кого-то такое отвращение к таблицам, что даже если без них придётся писать в 10 раз больше кода, но зато без них?Понимаешь, модель flexbox создавалась как раз чтобы раз и навсегда решить проблемы с позиционированием в CSS, это должна быть панацея от всех проблем. Если я правильно понимаю, такой же панацеей должен был стать float в свое время. А в итоге мы будем иметь еще один кастрированный недоинструмент, с синтаксисом, который придумывал какой-то псих. Quote Link to comment Share on other sites More sharing options...
Int Posted April 16, 2013 Report Share Posted April 16, 2013 Понимаешь, модель flexbox создавалась как раз чтобы раз и навсегда решить проблемы с позиционированием в CSS, это должна быть панацея от всех проблем. Если я правильно понимаю, такой же панацеей должен был стать float в свое время. А в итоге мы будем иметь еще один кастрированный недоинструмент, с синтаксисом, который придумывал какой-то псих.Так я и говорю, может быть, просто таблицами сверстать? Quote Link to comment Share on other sites More sharing options...
Great Rash Posted April 16, 2013 Report Share Posted April 16, 2013 Таблицами просто и легко, я не спорю и я не фанат семантики. Но мы тут за новые технологии базарим, так что интересно увидеть реализацию именно на них. Quote Link to comment Share on other sites More sharing options...
s0rr0w Posted April 16, 2013 Report Share Posted April 16, 2013 (edited) Дал бы ему просто ссылку на статью на хабре, где стопицот минусов наглядно показывают насколько закостенел мозг у большинства web-разработчиков.Он не то, чтобы закостенел. Просто люди не хотят смотреть дальше своего носа. Никому не интересно думать над проблемой и искать способы ее решенияПонимаешь, модель flexbox создавалась как раз чтобы раз и навсегда решить проблемы с позиционированием в CSS, это должна быть панацея от всех проблем. Если я правильно понимаю, такой же панацеей должен был стать float в свое время. А в итоге мы будем иметь еще один кастрированный недоинструмент, с синтаксисом, который придумывал какой-то псих.Текущую спецификацию пишут программисты. Не веб-разработчики. Поэтому судят все только со своей колокольни - легко или тяжело реализовать. Никому не интересно, что их высер (а по другому тяжело назвать некоторые идеи) не имеет вообще связи с реальностью, что он просто не жизнеспособен еще на моменте идеи.Взять те же гриды. Это просто ужас, они повторяют таблицы и flex-box'ы. Нахрена они такие красивые нужны? Edited April 16, 2013 by s0rr0w Quote Link to comment Share on other sites More sharing options...
SelenIT Posted April 16, 2013 Report Share Posted April 16, 2013 модель flexbox создавалась как раз чтобы раз и навсегда решить проблемы с позиционированием в CSS, это должна быть панацея от всех проблем. Если я правильно понимаю, такой же панацеей должен был стать float в свое время. Насколько я понимаю, не совсем. Float-ы изначально были только для врезок (на замену <img align="...">), но их побочные эффекты (напр. создание БКФ) оказались удобны для эмуляции колонок... «и понеслась» ©. А флексбоксы выросли всё-таки из XUL-а (AFAIK, первый синтаксис был буквальной калькой оттуда, display: <XUL-элемент>), т.е. инструмента для частной задачи — автоматической «раскидки» элементов интерфейса (менюшек, кнопок, панелей, тулбаров и т.п.) по сторонам экрана. На панацею, имхо, претендовал (по крайней мере, пытался) Template Layout (aka «вёрстка ASCII-артом»). Quote Link to comment Share on other sites More sharing options...
Great Rash Posted April 16, 2013 Report Share Posted April 16, 2013 Т.е., по сути, flex нужен только для раскидывания меню по ширине, так? А как же holy grail layout в примере от Mozilla? Quote Link to comment Share on other sites More sharing options...
SelenIT Posted April 16, 2013 Report Share Posted April 16, 2013 Имхо, «грааль» — это тоже своего рода частный случай «раскидки» панелей Quote Link to comment Share on other sites More sharing options...
nerv Posted April 17, 2013 Report Share Posted April 17, 2013 s0rr0w, спасибо Quote Link to comment Share on other sites More sharing options...
SelenIT Posted April 18, 2013 Report Share Posted April 18, 2013 Похоже, авторам Grid Layout-а стало стыдно, и они решили поменять синтаксис на... по сути, привязку к направляющим Quote Link to comment Share on other sites More sharing options...
Great Rash Posted April 19, 2013 Report Share Posted April 19, 2013 Чот я не нашел там свойства repeat, я конечно бегло изучил... а оно одно из самых интересных. Quote Link to comment Share on other sites More sharing options...
s0rr0w Posted April 19, 2013 Report Share Posted April 19, 2013 Похоже, авторам Grid Layout-а стало стыдно, и они решили поменять синтаксис на... по сути, привязку к направляющим Это только мааааленькая часть от того, что действительно могут направляющие. Но, похоже, пора доставать из шухлядки свои наработки, да начинать точить камень нанаово.Господа, предлагаю следующий план1. Собрать рабочую группу2. Открыть проект на том же гитхабе3. Написать спеку на русском4. Сделать множество примеров5. Перевести на английский6. Закинуть в w3cКто со мной?Чот я не нашел там свойства repeat, я конечно бегло изучил... а оно одно из самых интересных.http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/#repeat-notationДа, в целом, можно сказать, что идея дала всходы. 3 Quote Link to comment Share on other sites More sharing options...
lexxcode Posted April 19, 2013 Report Share Posted April 19, 2013 Не знаю чем, но готов помочь Quote Link to comment Share on other sites More sharing options...
amelice Posted April 19, 2013 Report Share Posted April 19, 2013 Кто со мной? Я. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.