Научите меня, пожалуйста, правильно использовать EM :)
Наконец-то я созрел до того, чтобы начать при верстке использовать относительные единицы измерения em вместо пикселей.
Однако для меня это пока не очень удобно, потому что непривычно. Если при пиксельных размерах шрифта достаточно было указать его для родительского элемента, то при использовании em размеры приходится прописывать к конкретным дочерним html-элементам и постоянно учитывать их вложенность.
Поскольку практического опыта с em у меня еще нет, хотелось бы обратиться за помощью к бывалым:
- Есть ли где-то в сети рекомендационные статьи о переходе с пикселей на
emи о правильном их использовании? - К чему рекомендуется применять единицы измерения
emкроме размера шрифта и высоты строки? Например, для создания отступа между двумя блочным элементами лучше использоватьemилиpx? - uggallery как-то писал в комментарии, что можно сначала все в пикселях сделать, а затем перевести их в
em. Хотелось бы поподробнее о данном процессе. Насколько я понимаю, это не просто замена цифер и единицы измерения для тех же самых классов, селекторов и идентификаторов.
Коллеги, выручайте! ;) Буду очень рад за все ваши подсказки.
* * *
В интернет-магазине компании “Номус” предлагаются качественные канцтовары для офиса в большом ассортименте по доступным ценам от российских производителей. Возможна продажа как оптом, так и в розницу.
Смотрите также
Верстка красивых тегов для сайта + бонус
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Пример верстки поисковой формы для сайта на HTML5 и CSS3
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3. Я, конечно, понимаю, последние стандарты это круто и все такое. Но ...
Пример верстки поисковой формы для сайта
Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так: Ее особенность заключается в том, что вся видимая часть формы – это поле ввода текста ...
Комментарии (58)
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.
Сначало требуется обнулить стиль агента :)
Спасибо большое за эту тему! За отзывы которые оставили!
Благодаря вам я переделал свой сайт www.pressaru.de с расчетом на то, что теперь можно увеличить страницы газет для чтения в любом браузере.
В кратце, исходя из выше изложенного:
все шрифты в стилях
.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, а также правило для перевода