Наконец-то я созрел до того, чтобы начать при верстке использовать относительные единицы измерения em вместо пикселей. Однако для меня это пока не очень удобно, потому что непривычно. Если при пиксельных размерах шрифта достаточно было указать его для родительского элемента, то при использовании em размеры приходится ...
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить ...
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. ...
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3. Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю ...
Предлагаю один из возможных вариантов верстки поисковой формы для сайта, которая будет выглядеть вот так: Ее особенность заключается в том, что вся видимая часть формы — это поле ввода текста и нужно учесть, что его ...
Комментарии (58)
AucklandSeo, em — не лучше. Это относительная величина (пиксели — абсолютная), которая используется, чтобы можно было масштабировать страницы в IE6, который не умеет это делать с пикселями.
Так получается…
Nikita, судя по статистике Яндекса IE6 — 46%, IE7 — 19%, поэтому на 6-й рано еще забивать.
Я бы из принципа забил.
Я не дизайнер, я больше по программной части и менеджменту, но приходилось как-то корректировать дизайн, где размеры шрифта em’ами задавались. Непривычно, чёрт побери :(Долго матюгался.
А насчет IE7. Уж насколько я ярый сторонник Microsoft и современных технологий, но даже я не был бы столь категоричным :) Да, Опера — полное говно, особенно по части соблюдения (а точнее несоблюдения) стандартов CSS (долго пришлось однажды париться из-за кривой поддержки стиля overflow) и JavaScript. И рендерит бог знает как, смотреть противно. Firefox — уважаю, работает чётко как надо. Не сильно юзера уважает, но и косяков не допускает. IE — самое оно. 6 или 7. 7 меня вкладочками радует. А так и 6 нормально.
>Я бы из принципа забил.
Очень дорого однако такой забив будет стоить в деньгах. Я бы не рискнул забивать на половину пользвателей :)
>Во вы Павел, отожгли насчёт Оперы!
Если это вы об overflow, то это был баг, признанный Оперой. Возможно в последних версиях его исправили. Конкретно суть была в том, что overflow: auto не работал в случае, если размеры элемента не заданы фиксированно.
Если в целом про мое отношение к опере — то тут вы не правы. Я дизайны не верстаю. О том как она рендерит сайты сужу как пользователь. Например my.begun.ru рендерит отвратно.
Полный бред.
Во вы Павел, отожгли насчёт Оперы! :)
Если вы с вёрсткой не знакомы, то не стоит себя так глупо выставлять.))
насчет оперы согласен, отстает она по стандартам цэ-эс-эс, причем прилично
люди пытаются плагинами ее вылечить, но что-то не сильно получается…
Ага, Павел. Это не Опера рендерит, это многие «веб-дизайнеры» забывают о том, что в мире есть браузеры кроме того, который стоит на их компе или компе конечного заказчика.
Кстати, в универе попробовал открыть Drive.ru на линуксе в Konqueror — мне показали просто бэкграунд 8)
Павел, радовой пользователь вообще не значет разницы между IE и интернетом в целом. Ему кажется что Internet Explorer — это и есть тот самый великий Интернет.
Насчёт бага — возможно вы и правы. Но я никогда не сталкивался с такой проблемой, возможно потому, что на вашу проблему действовали какие-то другие побочные эффекты. Вообще overflow: auto — значение по-умолчанию. А вообще само свойство overflow не имеет никакого значения если не установлены точные размеры.
А вот насчёт бегуна — нет. Это проблема не Оперы, а разработчиков, которые создали систему так, чтобы она работала в IE, а потом удивляются почему она не работает в Opera и других браузерах. Это как весы: пишем код для IE6 — не работает в Opera, пишем для Opera, работает в FF, но криво, пишем для FF — не работает для IE7. А насчёт стандартов, Опера — самый лучший бразуер, который максимально следует стандартам. Хотя в принципе, на ровне с ней могу поставить Safari.
Я пишу от лица, разработчика и пользователя. А вы — только как пользователь.
Да, Опера — полное говно, особенно по части соблюдения (а точнее несоблюдения) стандартов 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×62.5% = 10)
Еще полезный совет нашла: используете 1.4em — 1.6em для line-height. Дальше долго объясняется, почему. :) Суть в том, что такой текст легче воспринимается глазом.
В принципе, не знаю, как с em, а с процентами работать — дело привычки. Я по прошествии какого-то времени запомнила, как выглядит шрифт с тем или иным процентным значением. Скорее всего, у вас с em-ами будет так же.
Еще у меня есть книжка «Философия CSS дизайна», которая посвящена сайту zen garden. Я помнила, что там было что-то про em — и, действительно, нашла. Тоже любопытная информация: «Хотя в большинстве браузеров и действует соглашение о 16 пикселях, но в разных операционных системах и старых браузерах различия ошеломляющие». Дейв Ши пишет, что несколько лет назад относительными единицами типа em вообще было пользоваться нельзя, потому что 1 em могло равняться «чему угодно в диапазоне от 12 до 16 пикселей». Дальше авторы рассказывают про какого-то Оуэна Биггса, который нашел решение проблемы: «Если в элементе body указать процентное значение, а в остальных местах единицу em, то размер вычислится примерно одинаково во всех браузерах». Код:
body {font-size: 76%;)
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 и искусала локти от зависти.
На всякий случай статья по теме — cssing.org.ua/2006/10/16/font-size-em/ Там изложен интересны подход, который мне, однако, не близок. Еще там есть пара интересных ссылок.
По поводу собственных слов. Уже не знаю, то ли я тогда приукрасил, то ли мой подход слишком прост. Во-первых, я сторонник крупных шрифтов, которые нет особой нужды масштабировать. Во-вторых, я сомневаюсь, что шрифты в пикселях это безусловное зло. Потому, я делаю масштабируемым только некоторые вида текста: абзацы основного текста, мелкие надписи, навигацию. А заголовки основного текста, которые и так крупные, я делаю фиксированного размера, например. Все это сильно упрощает мне работу, никак, на мой взгляд, не ухудшая юзабилити текста.
Когда-то было проблемой добиться кроссбраузерности. Потом люди нашли решение: задать font-size: 100.01% для элемента HTML, и базовый размер в em-ах для BODY. Вот фрагмент из моего CSS-шаблона.
Дальше я свободно комбинирую пиксельные и em-овые размеры.
uggallery, благодарю за комментарий! Очень ждал его.
Мне понравился твой подход, поэтому обязательно возьму на вооружение. Помню, я уже когда-то читал указанную статью с cssing.org.ua, но тогда я не вникал в ее суть, поскольку em не использовал, теперь она для меня актуальна и очень кстати. Да еще в ней и ссылки дополнительные по теме. Так что, получается, я нашел, что хотел.
Еще раз спасибо!
deerstop, тоже спасибо за эту ссылку, Вы раньше успели :).
Где-то у типографов читал, что оптимальная длина строки должна составлять 33em. Значит em используют не только для указания высоты шрифта или строки.