Научите, меня, пожалуйста, правильно использовать EM :)
Наконец-то я созрел до того, чтобы начать при верстке использовать относительные единицы измерения em вместо пикселей.
Однако для меня это пока не очень удобно, потому что непривычно. Если при пиксельных размерах шрифта достаточно было указать его для родительского элемента, то при использовании em размеры приходится прописывать к конкретным дочерним html-элементам и постоянно учитывать их вложенность.
Поскольку практического опыта с em у меня еще нет, хотелось бы обратиться за помощью к бывалым:
- Есть ли где-то в сети рекомендационные статьи о переходе с пикселей на em и о правильном их использовании?
- К чему рекомендуется применять единицы измерения em кроме размера шрифта и высоты строки? Например, для создания отступа между двумя блочным элементами лучше использовать em или px?
- uggallery как-то писал в комментарии, что можно сначала все в пикселях сделать, а затем перевести их в em. Хотелось бы поподробнее о данном процессе. Насколько я понимаю, это не просто замена цифер и единицы измерения для тех же самых классов, селекторов и идентификаторов.
Коллеги, выручайте! ;) Буду очень рад за все ваши подсказки.
* * *
В интернет-магазине компании “Номус” предлагаются качественные канцтовары для офиса в большом ассортименте по доступным ценам от российских производителей. Возможна продажа как оптом, так и в розницу.
Да, Опера - полное говно, особенно по части соблюдения (а точнее несоблюдения) стандартов CSS
ЯВНЫЙ бред!
Гавно не Опера, а все браузеры вместе взятые.
Когда все пользователи планеты начнут пользовать один (не важно какой) браузер, его гавнистость сразу станет незаметным.
А если говорить про отображаемость - самое “говнистое” отображение у IE. И менее всего - у Оперы.
Я использую проценты и, честно сказать, не очень понимаю их отличие от em, но интересуюсь вопросом и где-то видела пару советов… Если вы знаете английский, то полезная статья была на smashingmagazine.com - 70 идей экспертов для огранизации вашего css.
Ага! Вот, как раз оттуда. To work with EMs like with pxs, set font-size on the body-tag with 62.5%:
Чтобы работать с em как с пикселями, установите в body размер шрифта 62.5%. Размер шрифта по умолчанию - 16px. Применяя указанное правило, вы заставите 1 em работать почти как 10 пикселей (16 x 62.5% = 10)
Еще полезный совет нашла: используете 1.4em - 1.6em для line-height. Дальше долго объясняется, почему. :) Суть в том, что такой текст легче воспринимается глазом.
В принципе, не знаю, как с em, а с процентами работать - дело привычки. Я по прошествии какого-то времени запомнила, как выглядит шрифт с тем или иным процентным значением. Скорее всего, у вас с em-ами будет так же.
Еще у меня есть книжка “Философия CSS дизайна”, которая посвящена сайту zen garden. Я помнила, что там было что-то про em - и, действительно, нашла. Тоже любопытная информация: “Хотя в большинстве браузеров и действует соглашение о 16 пикселях, но в разных операционных системах и старых браузерах различия ошеломляющие”. Дейв Ши пишет, что несколько лет назад относительными единицами типа em вообще было пользоваться нельзя, потому что 1 em могло равняться “чему угодно в диапазоне от 12 до 16 пикселей”. Дальше авторы рассказывают про какого-то Оуэна Биггса, который нашел решение проблемы: “Если в элементе body указать процентное значение, а в остальных местах единицу em, то размер вычислится примерно одинаково во всех браузерах”. Код:
2
p {font-size:1em;}
Коэффициент ниже 1 em упореблять не рекомендуется. “В результате, шрифт элемента p будет иметь высоту примерно 12 пикселей”. В конце-концов, как пишет Дейв Ши, идеальных вариантов не существует. :) Даже с обычными пикселями не все гладко. Не знаю уж, насколько актуальны его советы: книга не первой свежести, как и сам zen garden.
deerstop, спасибо за Ваши комментарии! У меня как раз есть книга “Философия CSS дизайна”, но я, похоже не дошел еще до момента, а котором Вы рассказали :).
После 2-х версток с использованием em я пришел к выводу, что мне проще верстать последним способом, который Вы указали: для body - проценты, а дальще везде em.
книжку только начал читать. вообще я за проценты
Это вам спасибо за блог. Надеюсь, я не слишком опоздала со своими речами и хоть кому-то сведения пригодятся…)
>> для body - проценты, а дальще везде em.
Эта техника используется в обоих примерах. :) Во втором мне лично не нравится то, что используется тэг p. В условиях живого сайта тяжело точно расставлять абзацы, если только вы не помешаны на валидном коде, как я. :) Особенно Водпресс, который сам расставляет абзацы - и не всегда правильно.
Знаете, я тут настрочила многабукаф, а потом нашла ссылку, где вся информация есть. В общем, в Яндексе можно поискать по запросу “проценты em”, потому что эти слова обычно идут вместе.
mixalы4, я тоже за проценты, потому что с em’ами не разобралась.) Книжка мне понравилась, только я потом зашла на сам сайт zen garden и искусала локти от зависти.
На всякий случай статья по теме - http://cssing.org.ua/2006/10/16/font-size-em/ Там изложен интересны подход, который мне, однако, не близок. Еще там есть пара интересных ссылок.
По поводу собственных слов. Уже не знаю, то ли я тогда приукрасил, то ли мой подход слишком прост. Во-первых, я сторонник крупных шрифтов, которые нет особой нужды масштабировать. Во-вторых, я сомневаюсь, что шрифты в пикселях это безусловное зло. Потому, я делаю масштабируемым только некоторые вида текста: абзацы основного текста, мелкие надписи, навигацию. А заголовки основного текста, которые и так крупные, я делаю фиксированного размера, например. Все это сильно упрощает мне работу, никак, на мой взгляд, не ухудшая юзабилити текста.
Когда-то было проблемой добиться кроссбраузерности. Потом люди нашли решение: задать font-size: 100.01% для элемента HTML, и базовый размер в em-ах для BODY. Вот фрагмент из моего CSS-шаблона.
2
3
4
5
6
font-size: 100.01%;
}
BODY {
font: normal .812em/1.384em Verdana, sans-serif; /* =13px/18px */
}
Дальше я свободно комбинирую пиксельные и em-овые размеры.
uggallery, благодарю за комментарий! Очень ждал его.
Мне понравился твой подход, поэтому обязательно возьму на вооружение. Помню, я уже когда-то читал указанную статью с cssing.org.ua, но тогда я не вникал в ее суть, поскольку em не использовал, теперь она для меня актуальна и очень кстати. Да еще в ней и ссылки дополнительные по теме. Так что, получается, я нашел, что хотел.
Еще раз спасибо!
deerstop, тоже спасибо за эту ссылку, Вы раньше успели :).
Где-то у типографов читал, что оптимальная длина строки должна составлять 33em. Значит em используют не только для указания высоты шрифта или строки.
em — типографская мера измерения. Естественно она применяется и для ширины и для высоты.
Наверное уже разобрались, но я все-таки дам линк - все конкретно и ясно, на примере:
http://pokrovskii.com/2008/01/20/perehodim-na-em/
ASh, я уже читал эту статью. Но, тем не менее, спасибо :)
Еще немного про 76% :)
http://www.thenoodleincident.com/tutorials/box_lesson/font/ (на английском)
Согласно этой статье, наилучший вариант - именно указание размера в 76% для body.
Автор не поленился, и сравнил отображение шрифтов с разными параметрами в разных браузерах. Вот, например, одна из таблиц, приведенных там: http://www.thenoodleincident.com/tutorials/box_lesson/font/browser.html
Странно… мне всегда казалось что px это абсолютная величина.
А в спецификации написано (http://www.w3.org/TR/REC-CSS2/syndata.html#length-units) что px - относительная величина. Непонятно как-то…
Cake_Seller, не знаю, почему там так написано, но px - это все-таки абсолютная величина.
Читаем внимательнее:
“Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display”
Px относительны к разрешению экрана устройства отображения, чаще всего им является компьютерный монитор.
Читал комментарии некоторых пользователей о том что Опера гавно. Абсолютно с этим не согласен!!! Сам уже продолжительное время пользуюсь Оперой. Мне её друг посоветовал, правда он потом на Firefox перешёл (говорит изза множества полезных плагинов). А я так и остался на Опере и менять пока не собираюсь. И по поводу соблюдения Оперой стандартов - на сколько я могу судить она их соблюдает не хуже чем Лис.
В ыговорите что по статистика Яндекса на ИЕ6 сидят 46% пользователей. Я увверен, что половина из этих людей и не знает вовсе о том что размеры текста на странице можно изменять. А те кто и знает, думаю, пользуются этой функцией крайне редко.
>И по поводу соблюдения Оперой стандартов - на сколько я могу судить она их соблюдает не хуже чем Лис.
Вы на глаз определяете соответствие стандартам?
>Я увверен, что половина из этих людей и не знает вовсе о том что размеры текста на странице можно изменять.
Половина этих людей составляет 23% пользователей интернета, даже если не брать в расчет, что ваша цифра с потолка придумана. Неужели мало?
Да и по закону подлости заказчик обязательно окажется среди них :-)
К тому же, в em можно указывать не только размер текста. Вам придется работать с этими единицами, если вы хотите делать полностью резиновую верстку, независимо от браузера конечного пользователя.
[quote comment=”2812″]
Вы на глаз определяете соответствие стандартам?
[/quote]
Отвечаю на этот вопрос: да, я по большому счёту сужу “на глаз” :). Я, как веб-разработчик и верстальщик, на своём опыте (возможно не сильно большом) не сталкивался с ситуациями когда был недоволен соблюдению стандартов в Опере (впрочем как и в Лисе).
Я так понимаю, ответив на мой комментарий, вы высказали несогласие с моей точкой зрения, и хотелось бы услышать чем вызвано ваше несогласие. Вы считаете у Оперы есть какие-то проблемы с соответствием стандартам?
[quote comment=”2812″]
Половина этих людей составляет 23% пользователей интернета, даже если не брать в расчет, что ваша цифра с потолка придумана. Неужели мало?
Да и по закону подлости заказчик обязательно окажется среди них :-)
[/quote]
Отвечу и на этот вопрос :).
Да, цифра, если так можно выразиться взята “с потолка”. А точнее это мое предположение (впрочем, по моему, предположение довольно точное). И мне кажется что процент людей, которые регулярно пользуются масштабированием текста, не на столько велик. Поэтому не будет смертным грехом если размеры указать в пикселях.
А уж если заказчик окажется из списка тех людей, которым необходимо масштабирование страницы в ИЕ, то возможно тогда и воспользуюсь em’ами.
>Я так понимаю, ответив на мой комментарий, вы высказали несогласие с моей точкой зрения, и хотелось бы услышать чем вызвано ваше несогласие. Вы считаете у Оперы есть какие-то проблемы с соответствием стандартам?
C соответствием стандартам есть проблемы у абсолютно всех существующих браузеров. За примером можно обратиться к небезызвестным Acid тестам: http://www.acidtests.org/
Основная проблема Оперы - первый тест (например, есть проблемы с обработкой дробных величин).
Сам с проблемами сталкивался, но, в основном, когда только начинал заниматься версткой. Со временем начинаешь избегать приемов, спорных для разных браузеров. Что, конечно, самих их разработчиков не оправдывает.
>И мне кажется что процент людей, которые регулярно пользуются масштабированием текста, не на столько велик. Поэтому не будет смертным грехом если размеры указать в пикселях.
Приучиться использовать em можно быстро, так почему бы не позаботиться о людях? И волки сыты, и овцы целы будут :)
Плюс ко всему, как я уже писал, это помогает при “резиновой” верстке.
Вместо того чтобы ругаться. Лучше бы придумали как избавиться от IE6.
Сначало требуется обнулить стиль агента :)
Спасибо большое за эту тему! За отзывы которые оставили!
Благодаря вам я переделал свой сайт http://www.pressaru.de с расчетом на то, что теперь можно увеличить страницы газет для чтения в любом браузере.
В кратце, исходя из выше изложенного:
2
3
font-size:62.5%;
}
все шрифты в стилях
.stil2 {
font-size: 1.3em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
}
Все картинки
Теперь все прекрасно!
Большое спасибо!
Самый огромный плюс от em, это то, что при изменении размера шрифта родительского контейнера изменяются размер шрифта всех дочерних элементов. При таком подходе можно повесить всякие модные кнопочки, чтобы увеличить/уменьшить шрифт.
Про font-size:62.5% в body: категорически не советую так делать! Это конечно упрощает расчет, НО из-за этого в ксс появится куча font-size, лучше поставить 87.5%=14px или 75%=12px, но не как не 62.5% - это слишком мелкий шрифт, который пользователь никогда не станет читать или ему придется увеличивать масштаб страницы, а увеличивать размер для каждого блока отдельно это бред, на сайте обычно используется небольшое количество вариаций и размеров шрифтов.
Еще стоит обратить внимание на то, что в Safari моноширинный (типа Courier New, Lucida Console, Consolas и т.д.) шрифт по умолчанию меньше обычного шрифта, даже если для body задан размер шрифта и при сглаживании становится намного тоньше чем в остальных браузерах, поэтому при задании относительных размеров к таким шрифтам надо быть особенно внимательным.
Что-не не совсем понял по поводу acid.
Первым браузером, прошедшим acid2, была именно Опера (под win, естесссно).
ff3 наконец-то тоже прошёл вторую версию теста. Но обломался с версией 3.
Опера третью версию тоже не проходит (82 из 100), но у FF3 результат ещё меньше (71 из 100). Про ie7 вообще промолчу, ибо дохнет он на этом тесте.
ЗЫ: а как кричали, что в FF3 проблема с памятью решена… Не фига подобного! На тестовом сайте 50+ метров жрёт (Опера, для сравнения, меньше 35). В общем, поторопились лису 3 выпустить. видимо, очень хотели “порвать” Оперу 9.5…
Если для вас решающим аргументом при выборе является ACID, то лучше всего использовать браузер на движке Webkit.
http://habrahabr.ru/blog/browsers/38474.html
Про использование памяти на /. как раз дали ссылку на свежее сравнение:
http://dotnetperls.com/Content/Browser-Memory.aspx
Результаты 3го фокса по использованию памяти лучше, чем у конкурентов.
Оперу «рвать» никто и не думает. Ее доля на западе гораздо ниже, чем в России (1-2 процента, против российских 15).
http://cssmake.ru/-layout/4–layout/81-tablepxtoem.html
таблица перевода px в em, а также правило для перевода