Блог

В презентации ‘Поддерживаемый CSS’ Натали Даун я видел рекомендацию, которая гласит:

«бойтесь высоты, головокружение полезно в Интернете. НИКОГДА не используйте высоту в пикселях для чего-либо с текстом внутри»

Почему это?

Я предполагаю, что это связано с двумя причинами:

1. Веб-документы должны быть гибкими. Что произойдет, если у вас фиксированная высота и вам нужно добавить или удалить текст позже?
2. Размер шрифта может быть изменен пользователем. Что касается того, почему докладчик выделил пиксели конкретно: высоты в px не масштабируются с размером шрифта, в то время как, по крайней мере, высоты в em соответствуют.

1. По умолчанию формат HTML-элементов должен быть таким высоким, какой требуется для их содержимого, и это здорово, потому что это означает, что люди могут размещать столько контента, сколько им нужно. Работайте с зернистостью.

2. Браузеры позволяют пользователям увеличивать размер шрифта просматриваемых веб-страниц, и это здорово, потому что это означает, что они действительно могут удобно читать страницу без необходимости масштабирования и панорамирования. Это может привести к тому, что даже небольшие объемы текста будут занимать больше строк и, следовательно, больше пикселей, чем вы ожидали.

Потому что вы никогда не узнаете, сколько текста там будет. Если вы установите высоту в пикселях для div, такую как height: 200px, вы всегда можете добавить к нему дополнительный текст позже, который выйдет за пределы div с фиксированной высотой. Или пользователи могут изменять размер текста, или разные шрифты имеют разную высоту. Просто любая важная причина, по которой содержимое может увеличиться больше, чем фиксированный heiht div.

Еще одна небольшая причина заключается в том, что разные браузеры и операционные системы по-разному отображают шрифты (что влияет на размер), что затрудняет пользователю предсказать, насколько большим должен быть текстовый контейнер.