Что за глобальные проблемы с центрированием по вертикали?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 24.01.19 14:53
Оценка:
Смотрю разные сайты, примеры, обсуждения и рекомендации — для вертикального выравнивания блока в контейнере (и чтобы работало во всех браузерах) до сих пор применяются различные пляски с бубном.

На W3 в 2014-м об этом писали: At this time (2014), a good way to center blocks vertically without using absolute positioning (which may cause overlapping text) is still under discussion. Но подобные дискуссии велись и за десять лет до этого, а в итоге до сих пор ничего однозначного не родили.

Кто в теме — поясните, пожалуйста, какие принципиальные проблемы могут столько лет не давать прийти к соглашению? Если в контейнере давно и успешно выравнивается по вертикали текст, высота которого зависит от кучи параметров — что мешает точно так же выровнять блок? Если вертикальное выравнивание в таблице прекрасно работало еще 25 лет назад — почему до сих пор единственным надежным способом является применение таблиц вместо div-блоков?
выравнивание вертикали вертикальное блок table div контейнер
Re: Что за глобальные проблемы с центрированием по вертикали?
От: Ops Россия  
Дата: 24.01.19 16:28
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>и чтобы работало во всех браузерах


ЕМ>Кто в теме — поясните, пожалуйста, какие принципиальные проблемы могут столько лет не давать прийти к соглашению?


Ты сам ответил на свой вопрос. Для современных браузеров есть flex и align-items + justify-content.

Вопрос, что ты понимаешь под "всеми" https://caniuse.com/#search=align-items
Переубедить Вас, к сожалению, мне не удастся, поэтому сразу перейду к оскорблениям.
Re[2]: Что за глобальные проблемы с центрированием по вертикали?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 24.01.19 20:56
Оценка:
Здравствуйте, Ops, Вы писали:

Ops>https://caniuse.com/#search=align-items


Для flex там таки есть изрядный список Known Issues. Возможно, поэтому его и не используют повсеместно. Многие до сих пор запихивают блоки в таблицы — хоть и давно не рекомендуется, и криво, но работает-то реально везде, и безотказно.
Re[3]: Что за глобальные проблемы с центрированием по вертикали?
От: Ops Россия  
Дата: 24.01.19 21:12
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>Для flex там таки есть изрядный список Known Issues. Возможно, поэтому его и не используют повсеместно.


Они все для конкретных браузеров, большинство из которых устаревшие. Там же все на диаграмме видно, у какого какие особенности, если они вообще есть, а из последних версий только IE особенный, ну, может, еще старые андроиды остались, и кто-то на них использует встроенный браузер, а не хром какой-нибудь. Но если тебе нужно и старье, тады ой — пляши с бубном, иначе никак.

ЕМ>Многие до сих пор запихивают блоки в таблицы — хоть и давно не рекомендуется, и криво, но работает-то реально везде, и безотказно.


Ну это ненадолго. Недавно своими глазами видел, как человеку, долго сопротивлявшемуся, пришлось отказаться от IE — необходимый ему сайт стал использовать шифрование, которое тот не поддерживает.
Переубедить Вас, к сожалению, мне не удастся, поэтому сразу перейду к оскорблениям.
Re[4]: Что за глобальные проблемы с центрированием по вертикали?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 25.01.19 12:16
Оценка:
Здравствуйте, Ops, Вы писали:

Ops>если тебе нужно и старье, тады ой — пляши с бубном, иначе никак.


Ладно, если бы 10-15-летнее старье, но ведь еще несколько лет назад flex использовали очень осторожно.

И я вообще не могу понять этой логики — она либо нечеловеческая, либо отсутствует напрочь. Выравнивание в верстке — одна из основных операций. Для текста еще на заре ввели text-align и vertical-align. Контейнеры div ввели не намного позже — где-то в середине-конце 90-х. Так почему же до введения flex не додумались до такой элементарной вещи, как универсальный способ выравнивания блока в блоке?

В конце концов, трюк с горизонтальным выравниванием через "auto" в margin-left/margin-right используется очень давно, а такая же комбинация с margin-top/margin-bottom, если где-то и работает, то далеко не везде. Для чего потребовалось стандартизировать вертикальное выравнивание путем введения дополнительной сущности (flex)?
Re[5]: Что за глобальные проблемы с центрированием по вертикали?
От: c-smile Канада http://terrainformatica.com
Дата: 25.01.19 21:44
Оценка: 130 (5)
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>В конце концов, трюк с горизонтальным выравниванием через "auto" в margin-left/margin-right используется очень давно, а такая же комбинация с margin-top/margin-bottom, если где-то и работает, то далеко не везде. Для чего потребовалось стандартизировать вертикальное выравнивание путем введения дополнительной сущности (flex)?


Я тут был попытался описать ситуацию:
https://terrainformatica.com/2018/12/11/10-years-of-flexboxing/

Т.е. 12 лет назад предлагалась простая конструкция — flex units вместо того дурацкого auto.

Для вертикального middle позиционирования имели бы:

div {
  height: 10em;
  margin-top:1*;
  margin-bottom:1*;
}



Но google chromium команда зарубила это. Поэтому и имеем зоопарк с flexbox, grid и прочая.

А margin-left:auto (что должно было бы означать margin-left:1* ) как было что-то непонятное так и есть.

В свете того что нынче "Internet == Google Chrome" будем есть что они скажут и дальше.
Re[6]: Что за глобальные проблемы с центрированием по вертикали?
От: Ops Россия  
Дата: 26.01.19 06:57
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>Т.е. 12 лет назад предлагалась простая конструкция — flex units вместо того дурацкого auto.


CS>Для вертикального middle позиционирования имели бы:


CS>
CS>div {
CS>  height: 10em;
CS>  margin-top:1*;
CS>  margin-bottom:1*;
CS>}
CS>



CS>Но google chromium команда зарубила это. Поэтому и имеем зоопарк с flexbox, grid и прочая.


А мотивация какая была? На первый взгляд идея отличная.
Переубедить Вас, к сожалению, мне не удастся, поэтому сразу перейду к оскорблениям.
Re[6]: Что за глобальные проблемы с центрированием по вертикали?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 26.01.19 21:34
Оценка: +1
Здравствуйте, c-smile, Вы писали:

CS>Т.е. 12 лет назад предлагалась простая конструкция — flex units вместо того дурацкого auto.


Это больше для особых случаев выравнивания. Но центрирование — настолько фундаментальный случай выравнивания, что упорное нежелание (в течение десятков лет) распространить vertical-align на блоки вызывает даже не изумление, а прямо-таки оторопь.

CS>Но google chromium команда зарубила это.


Тут она хоть могла отговориться тем, что требуются дополнительные сущности, поведение не совсем прозрачно и т.п. А вот какие аргументы были против того, чтобы vertical-align работал и для блоков?

CS>А margin-left:auto (что должно было бы означать margin-left:1* ) как было что-то непонятное так и есть.


По отдельности оно действительно непонятно, как должно интерпретироваться (разве что прижатием к правому краю). А если одновременно и слева, и справа auto, то вполне логично, что они делаются равными. И столь же логично распространить это на margin-top и margin-bottom.
Re[7]: Что за глобальные проблемы с центрированием по вертикали?
От: c-smile Канада http://terrainformatica.com
Дата: 01.02.19 02:55
Оценка: 6 (2)
Здравствуйте, Ops, Вы писали:

Ops>А мотивация какая была? На первый взгляд идея отличная.


Flexbox продвигал google в лице г. по имени Таб Аткинс. У этого кадра какое-то болезное самомнение.

В результате оно родило flexbox фигню которая к тому же ломает CSS box model.

Примерно в то же время MS начала работу над display:grid;

В результате имеем flexibility в flexbox выражаемую как значение flex: 1.0 — т.е. property числовым значением.
И та же самая flexibility в grid уже задается в 1fr юнитах.

Ад и Израиль, короче.

Вообще, CSS в версии 1.0 была законченной цельной конструкцией. Ибо разработана была одним человеком Håkon Wium Lie

А с CSS 3.0 началась вакханалия по имени modular design. Что в простонародье означает "лебедь, рак и щука".

В результате имеем флексы в четырех разных видах одновременно.

MS вот не потянула имплементацию этого всего дела плюс взаимодействие их друг с другом …
Re[8]: Что за глобальные проблемы с центрированием по вертикали?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 01.02.19 07:33
Оценка:
Здравствуйте, c-smile, Вы писали:

CS>У этого кадра какое-то болезное самомнение.


Судя по тому, что имеем, они там все больны на голову — как минимум верхушка, которая принимает решения. Двадцать лет непрерывных извращений кодеров для того, чтобы выполнить элементарную, интуитивно понятную и встречающуюся почти на каждом сайте операцию — это клиника.
Re[9]: Что за глобальные проблемы с центрированием по вертикали?
От: Евгений Музыченко Франция https://software.muzychenko.net/ru
Дата: 01.02.19 10:03
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>они там все больны на голову


Еще больше укрепился в этом мнении, поставив в виртуалке свежий хром, и открыв в нем восемь вкладок без видео и анимации — почти 670 Мб. Я плохо представляю, за счет чего FF на том же комплекте вкладок жрет 220 Мб, но это ж тоже ад и израиль, минимум тысячи процентов оверхеда. Сколько десятков слоев абстракции нужно навесить друг на друга, чтобы получить такое?
Re[9]: Что за глобальные проблемы с центрированием по вертикали?
От: c-smile Канада http://terrainformatica.com
Дата: 02.02.19 19:05
Оценка:
Здравствуйте, Евгений Музыченко, Вы писали:

ЕМ>это клиника.



Согласен.

Вот может как-то поможет:
https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.htm
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.