Почему em?

[nazarpc]

Тоже об этом задумываюсь, никак руки не дойдут поменять. При наличии огромного количества мобильных устройств с самыми разными разрешениями и плотностью пикселей это весьма актуально

[gibson_dev]

Мобильные устройства и пиксели прожуют и отмаштабируют, проблему с этим у ие 6-8

[DenisZ]

Я. А что?

[nick4fake]

Кто-то еще не использует em?

[nick4fake]

Человек ниже бросил ссылку на пост, которому четыре года. Уже тогда всем рекомендовали переходить на em/проценты.

Сейчас есть такие вещи как fullhd и retina, html5 шагает по планете, а люди еще задают кегль в пикселях?

[witdex]

хабрахабр?

[nick4fake]

Хабр — проект старый. Возможно, не хотят переписывать (я не знаю, может причина и другая). Я говорил о новых проектах, которые делают с нуля.

[witdex]

ну twitter bootstrap 2 тоже старый, по вашему, я так понимаю

[nick4fake]

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

[Bo0oM]

Кодеры старой школы

[konfuze]

Забавно что сам сайт css-tricks.com сверстан с помощью px, хотя релиз последнего дизайна был в сентябре.

Есть ли хорошие примеры сайтов с более-менее сложным дизайном, где отступы и шрифты заданы в em? Было бы любопытно посмотреть.

[nick4fake]

the-pastry-box-project.net (первое, что пришло в голову).

Вообще, мы используем отступы в em'ах, более того, размеры блоков, картинок и т.д. тоже в процентах/em'ах.

[konfuze]

Я не зря указал «более-менее сложным дизайном»: когда это пара колонок текста «выражаться» в em-ах достаточно просто.

А когда дизайн, где мы не можем масштабировать графику? Или интерфейс? Может быть, проект уровня zvooq.ru?
Или хотя бы проект с кастомными контролами, нестандартными тенями / градиентами вот этим всем, без чего современный сайт уже не может существовать?

[shebanoff]

Сбегал на mediaqueri.es/popular/ за www.regent-college.edu/

Кстати, мне стало интересно, почему ничего сразу не пришло на ум. В большие проекты боятся внедрять необкатанные приемы? Хотя в то же время у меня уже давно сложилось представление об RWD как о стандарте де-факто в индустрии.

[shebanoff]

Да, и mediaqueri.es — отличный шоукейс.

[nick4fake]

С em можно масштабировать элементы, не переписывая стили целиком. Я не о зуме.

[nick4fake]

Не, вы не правы. Они не заменяют друг друга, а дополняют.

[nick4fake]

Пожалуй, в течение недели напишу статью, и приведу, как пример, один из наших проектов. Там адаптивная сетка, почти все в em'ах (даже размеры блоков). И ничего, живем. IE 8 не поддерживаем принципиально, да. Других проблем нет. :)

[Dr_Death]

Я!

[lifestar]

Фейсбук например)

[ferasinka]

Давненько был интересный пост на эту тему: habrahabr.ru/post/42151/

[Alexufo]

Если технология что-то упрощает — она приживается быстро.

C em я такого не наблюдаю. Сколько про них не пишут.

[DenisZ]

Меня зачастую останавливает от использования em проблематичность сброса font-size: 0; для родителя inline-block элементов.
Я знаю, что есть альтернативы, но как-то привык к такому шаблону.

[DenisZ]

Есть такое. А как лучше?

[DenisZ]

(значение в разных шрифтах может менятся)

Вот это меня как раз и смущало.

[leshaogonkov]

Это при создании шрифта ширина пробела задается?

[shebanoff]

em не может упростить верстку фиксированного PSD-макета. Но если макет изначально проектируется независимым от пикселей — необходимость использования пикселей исчезает.

Подход с фиксированным макетом пока еще не вымер и повсеместно применяется, отсюда и отсутствие популярности (востребованности) относительных величин при верстке.

[shebanoff]

Но сама по себе техника проста как два пальца. Мантра звучит так: target ÷ context = result

[blaq]

Обращал внимание, что шаг, к примеру, 9px, 11px, 13px, 15px значительно лучше влияет на четкость (да и красивость) текста с Clear Type у некоторых шрифтов.

[torbasow]

Непонятно, в чём проблема, изложенная в последнем абзаце. Почему не задать размер шрифта у ul вместо li?

[DenisZ]

ul в ul тоже вкладывается.

Но можно конечно изловчиться указывая прямого наследника ">" но это и для li сработает

[torbasow]

ul в ul, положим, не вкладывается, но я понимаю, что Вы имеете в виду. В любом случае, проблема в топике кажется либо раздутой, либо недоразъяснённой.

[happyproff]

<ul>
    <li>li_1</li>
    <li>li_2
        <ul>
            <li>li_2_1</li>
            <li>li_2_2</li>
        </ul>
    </li>
    <li>li_3</li>
</ul>

<style>
    ul { font-size:2em; }
</style>

В топике говорится про то, что li_2_1 и li_2_2 будут иметь font-size 4em.

Решается заданием font-size для родителя ul. А размер вложенных списков можно задавать через селектор ">". Так что да, это, конечно, это не проблема и не ложка дёгтя. Такое поведение свойственно не только em, а всем относительным размерам. И сложности может вызывать только у начинающих.

[skey]

А как же макет, по которому размер шрифта «вот здесь» должен быть 12px?

[DenisZ]

font-size: 62.5%; для html? Вы это имеете ввиду?

[skey]

Я про требования дизайнера, чтобы шрифт в какой-либо строке был именно такого размера.
Так по многим пунктам, шрифт лишь один из примеров.

[leshaogonkov]

Пересчитать в em

[turbo_exe]

body {
font-size: 12px;
}
.vot-zdes {
font-size: 1em;
}

[turbo_exe]

согласен) надо юзать rem'ы :)

[Metaller]

> В этом случае, используя media queries для масштабирования, придется настраивать каждый из этих 50 font-size

Хорошо что уже давно есть LESS/SASS

[DenisZ]

На стороне клиента пересобирать css? Не совсем понял как это поможет.

[Metaller]

Вы правы, не тот случай. Погорячился.

[theillarionov]

Зачем на стороне клиента? LESS существует и на бэкнде. Заводите переменную fontSize и все размеры указываете от него ( fontSize / 2 и т.д.)

[DenisZ]

Так тут весь смысл в том, что б при изменениях размера экрана (ресайзе) менять параметры в css. Зачем тут серверная сторона?

[theillarionov]

Так ведь и я говорю ) Прошу прощения за возможный неверный синтаксис.

@fontSize = 14;

body {
font-size: @fontSize; }

@media (max-width: 600px) {
body {
font-size: @fontSize / 2;
}
}

Это LESS-файл ) Все те же плюшки, что и с em, но с пикселями )

[Metaller]

И все равно в 50 местах придется написать @fontSize / 2. Почти тоже самое что 50 раз написать font-size: 14px; (мы не говорим сейчас о пользе препроцессоров).

Другое дело если бы можно было написать один раз

@media (max-width: 600px) {
    @fontSize = 7;
}

[theillarionov]

Так ведь и в em вам нужно будет писать font-size: .5em, в чем разница-то )

Все, я понял свою ошибку, приношу извинения )

[MCBumf]

Вот из-за последней ложки дегктя, относительные единицы измерения очень трудно использовать на больших проектах и это перекрывает все их достоинства. Большим поклонником em-ов был Яндекс, но и они постепенно переходят на px, например, тут: habrahabr.ru/company/yandex/blog/149327/:

Практически на всех наших сервисах сейчас используется указание размеров в относительных процентах или тегах em, но в новом проекте мы решили отказаться от них в пользу пикселей. Аргументов у этого решения несколько. Во-первых, доля браузеров, которые не умеют масштабировать шрифты в пикселях, исчезающе мала. Во-вторых, размеры в абсолютных единицах исключают влияние контекста, а вёрстка абсолютно независимыми блоками — один из основных принципов БЭМ-методологии. Ну и в-третьих, страница результатов поиска должна нормально работать на тач-устройствах. Разрешение экрана на них часто заранее известно и строго фиксировано, а меняться может только его ориентация.

Относительные единицы измерения создают сильную связанность между блоками, а от сильной связанности, как известно, лучше избавляться.

[TiGR]

Мне почему-то казалось, что em — идеальная единица для определения ширины в первую очередь. Чем не угодил pt, не понимаю.

[TiGR]

Но ведь он даёт то, чего хочет автор — отрыв от физических пикселей и учёт только угловых пунктов. Но измерять высоту шрифта в ширине буквы М — это как-то очень странно. Это понятно, когда вы хотите ограничить ширину текстового блока визуально легко воспринимаемым, и ставите ширину что-то вроде 40em (например). Там вне зависимости от размера шрифта блок будет восприниматься комфортно. Но тут-то?

Каскадность, как единственное отличие em от pt автору не нужно и мешает. Я вообще не понимаю, зачем ему em.

[TiGR]

Ваш комментарий ценнее самой статьи :)

[Aux]

Каскадность em вызывает больше проблем, чем решает их. Для мелких страниц оок, для больших и сложных — нет. Поэтому есть rem, а про em-ы надо знать и использовать только там, где каскадность действительно нужна. А статье из каменного века а-ля «ура! емы! всем юзать!» уже давно устарели.

[asvechkar]

А чем плохо использовать pt для установки размера шрифта?