Эластичные шаблоны

[Dyomich]

Спасибо! Очень полезная статья.

[Pilot34]

К счастью, данную функцию поддерживает большинство современных браузеров, за исключением IE6 и FireFox

:) это какое-такое тогда большинство?)

[habratchanka]

Так и знала, что кто-нибудь спросит :)
Если вы ограничиваете кол-во браузеров до 4х (IE6, IE7, Opera, FireFox), то я еще имела ввиду NetScape и Safari (если не ошибаюсь в их возможностях). Итого 4 против 2.

[Pilot34]

тогда надо было сказать, что lynx тоже не поддерживает)

ладно, это все просто флуд...

[gryzzly]

вообще 3й фаерфокс поддерживает именно подобного плана масшатабирование. вопрос в том, насколько это хорошо. ну а про ie7 говорить про поддержку в этой ситуации не очень правильно (с его разъезжающимся скроллбаром)

[zealous]

а как же FireFox3 - он откололся от 2-го, и увеличивает теперь как и наметившееся "большинство"

даж и не знаю что делать :( или :)

[halawin]

Если учесть что большенство "простых смертных" пользователей интернета пользуются по умолчанию IE6, интерес к такой верстке пропадает...
Придется подождать еще пару лет.
Чем-то вы напомнили мне Хакомаду и ее пенсионную программу. =))

[zealous]

в статье сказано как раз наоборот - что это работает ТОЛЬКО в ИЕ6 и FireFox (кроме 3 - поправочка)

так что именно для этих браузеров и интересна "такая" верстка

[payalnik]

Речь в статье, наоборот, про то, что ем-ная верстка выручает в случае старых браузеров.

[proxor]

NetScape скончался намедни. А еще есть Konqueror и Epiphany. Правда это все равно что Safari и Firefox :)

[paz0r]

и? лезем на w3 schools и смотрим в процентном отношении а не в численном разyицу. и тогда Ваше 4 против 2 не такое уж и приятное.

идея на самом деле довольно стара. ее давно в западных сообществах по 100 раз обсосали и пришли к разным выводам. как всегда и везде - все остались при своих мнениях.

Я бы назвал данный подход весьма приятным и прогрессивным ввиду развития ветки html5 и параллельно css3.
поживем - увидим. удачи =)

[lahmatiy]

Safari ведет себя как FireFox, то есть масштабирует только текст (там так же работает ctrl+"+"/"-")

[svolot4]

"эластичные" картинки - это жесть!!!
Не делайте так!

[habratchanka]

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

[habratchanka]

Если фоновый рисунок повторяющийся, то еще ладно, а если фиксированный? Представьте, что вы увеличиваете масштаб блока у которого фоновый рисунок соответсвует величине блока. При увеличении шрифта такой блок будет выглядеть некорректно.
К примеру теже графические кнопки в меню..
Вообще конечно, понятно, что ни к каждому шаблону можно применить этот способ. Эластичные шаблоны больше подходят для простых дизайнов, блогов.

[dolotov]

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

[Stepanow]

Или используйте flash - он хотя-бы растягивает/сжимает качественно - с ресамплингом.

[paz0r]

я ваще глядя на кртинку подумал, что это svg =)))

[Hitryi_Pryanik]

Во-первых очень ждём, когда все браузеры без плагинов будух хотя бы в вёрстку в SVG нормально держать.
Во-вторых на какой икс нужно сидеть под таким невзъестественным разрешением на маленьком экране? Я понимаю, когда 14 дюймов и 800х600 и вёрстка в экран не вмещается.

[habratchanka]

1400х800 "невзъестественное разрешение" ? Не совсем поняла о чем речь.
Я вроде говорю про ситуацию, когда большой экран и большое разрешение.

[minixan]

у меня разрешении 1680х1050, но вот сижу я в окне браузера под разрешением 1280х768. Просто удобнее.

[Hitryi_Pryanik]

Поясняю. Диагонали экранов растут, но вместе с ними и разрешение. Если просто увеличивать диагональ, то квадратик 10х10px будет линейно (реально) увеличиваться, т.е. увеличиваься размер пикселя. Остаётся сохранить размер пикселя или даже чуть уменьшить его (повышая качество). В результате сменив экран получаем те же самые линейные размеры элементов на экране (но их может поместиться больше конечно).
Вашему экрану 1280 по ширине, не более. Можно даже посчитать во сколько сторона 17"-вого экрана шире 14"-вого и соответственно вычислить на сколько нужно умножить 800 точек :)
А ещё есть зум.

Резиновый же дизайн делается всегда в рассчёте на небольшой диапазон ширин + разъезд картинок.

[ugnich]

> на какой икс нужно сидеть под таким невзъестественным разрешением на маленьком экране
у меня 15", 1680x1050, 120dpi. Вы себе даже представить не можете, какой офигенный антиалиасинг получается при таком физическом размере точки.
Кстати, стандартные шрифты в винде - полное говно.

[proxor]

Я себе монитора такого не представляю.

[Hitryi_Pryanik]

Я в курсе, какой естественный антиалиас получается. Однако зрение у меня хорошее и в играх я всё равно вижу лесенки из пикселей, поэтому предпочитаю подключить сглаживание 2х--4х.

Большое dpi для игр можно, где вектор. А для растра не извращайтесь. К тому же если видюха тянет на качественном 3D такое разрешение (на нём 100 Гц вдобавок), то почему бы не раскошелиться на приличный экран? Или это ноутбук? Так ноутбук для других целей и не надо жаловаться что ваш любимый микроскоп не очень ровно гвзди вбивает.

[hemantic]

Вообще, для такого типа верстки есть очень полезный инструмент - Em Calculator, частенько его использую. Это чтобы сократить количество рутинной работы и сконцентрироваться на творчестве=)

[habratchanka]

за ссылочку большое спасибо! :)

[Hitryi_Pryanik]

А как em соответсвуют px? Что-то я не понимаю. Это же по ширине буквы m, значит зависит от шрифта, который назначен для body и есть у пользователя. Имхо бред. В em/ex имеет смысл обозначать отступы в абзацах например. Я чаще пользуюсь ex, т.к. буква x "квадратная" и соответствует большему количеству букв в русском алфавите по ширине и высоте.

[besisland]

em по ширине M, а не m.

[Hitryi_Pryanik]

верю. Но ответ на вопрос хотелось бы узнать, а то боюсь так неграмотным и помру.

[besisland]

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

То есть сперва вы делаете все размеры под себя (скажем, у вас базовый размер шрифта 16px), а у пользователей с другими размерами шрифтами всё пропорционально растянется или сузится.

[Hitryi_Pryanik]

А если написано
body {font-size:12pt;}, то что можно подстроить? Мерка задана. И em будет переменной только там, где не обозначен явный размер шрифта. А тут уже для всего документа заранее пробито.

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

Со второй проблемой призвана справится CSS и @media. А с первой пока решения и подходящей единицы нет.

[besisland]

А не надо задавать body {font-size:12pt;}. Должно быть: body {font-size:100%;}.

[Hitryi_Pryanik]

1) EM не модет увеличиваться за счёт выносных элементов, так как у M их нет, иначе было бы какое-нибудь Eбу (верхний и нижний выносной элементы присутствуют).
2) Всё правильно понимаете. Ввиду инертности производителей и человечества вцелом мы пользуемся очень старыми единицами, пытаясь по-тихоньку их смещать. На деле же надо или брать исконный вариант (ширну М шрифта) иил вводить новое понятие, закладывающее в себе отношения линейного размера и пиксельного.

[hlomzik]

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

img{width:...;height:...;} улыбнуло ;)

[habratchanka]

ну в примере же одна картинка :) поэтому лишних классов не вешала

[ISpy]

Давно собираюсь переходить на em, но все руки не доходят :) Времени постоянно нет... Хотя это наверно просто отмазы для себя, ведь так уже привык верстать в px, и пробовать новое страшновато, да и на некотрое время производительность упадет, пока еще опыт наберется :)
Но всетаки надо, конечно :)

[Hitryi_Pryanik]

в px например очень нужно ставить размер шрифта в меню, если оно оформлено графикой и не должно менять размеров. А вообще в тексте размер шрифта надо указывать в pt

[ISpy]

Ну в тексте всегда pt юзаю, с самого начала :)

[Hitryi_Pryanik]

Em и pt одного поля ягоды. Em даже производная от pt. Да, это зло. В идеале надо задавать pt в стилевой таблице на печать, а для экрана всё формировать относительно размера и формата экрана. Ну хотя бы физической ширины. Более того сайт не должен спрашивать "Юзер, юзер, а какой у тебя экран", потому как это дело личное. Браузер должен формировать некую единицу, пропорциональную физическому размеру экрана плюс отвечать на вопрос, что за девайс или хотя бы исправно повиноваться тому, что написано под @media. Человеку важнее какого размера вообще символ, а во вторую очередь уже качество его. На практике площадки 6х10 точек для читабельности строчного знака достаточно.

[besisland]

Производная? И сколько же pt в em'е?

[Hitryi_Pryanik]

Зависит от каждого конкретного шрифта и кегля. Берём например Таймс 16 кегля, мерим отношение ширины M к её высоте, получаем числовое значение отношения em/16pt

[Hitryi_Pryanik]

1) Ссылок выше надавали
2) Если EM есть ширина буквы в шрифте, а размер шрифта определяется в pt, то вывод очевиден
3) Так как и та и другая мера для одного объекта предназначена (размеры шрифта и элементов), слоедовательно можно привести к единому знаменателю и другой мере (пиксели, миллиметры)
4) если вышесказанное для вас не является очевидным, то никакая ссылка уже не поможет к сожалению, поможет только повторное прохождение школьного курса и системы мер в частности. Вы узнаете например, что F=ma (Ньютон = кг*м/с^2) и вообще проникнетесь взаимозависимостью разных физических величин.

[besisland]

Производные единицы выражаются через другие единицы исключительно постоянными соотношениями. К примеру, в СИ 1 джоуль — производная единица, равная 1 килограмму, умноженному на 1 квадратный метр и делённому на 1 квадратную секунду.

В CSS 1 пика всегда равна 12 поинтам. Поэтому pc — производная единица от pt. 1 поинт, в свою очередь, всегда равен 1/72 дюйма, и поэтому pt — производная единица от in (а можно и наоборот считать — смотря что выбрать за основную единицу). Дюйм связан константным соотношением с сантиметром и миллиметром. Если возьмём pt за основную единицу — можно сказать, что pc, in, cm и mm — единицы производные.

А вот между em и pt константного соотношения нет. Более того, его нет и между em и ex. И между pt и px. И между em и px.

Поэтому то, что вы говорите, — что em — производная единица от pt, — неверно. Именно потому, что зависит от каждого конкретного кегля.

[Hitryi_Pryanik]

Ещё раз: EM является производной, то есть проистекает и зависит от величины шрифта (в pt). Для каждого шрифта есть константа. Значит функцией (ведущей от pt к em) является шрифт, его вид и пропорции. То же для em/ex: определяется шрифтом. Однако в шрифте это соотношение задаётся автором в соответствии с его вкусом и чёвством меры, соответственно отношение em/ex в таком смысле никак нельзя назвать чётким. Пропорциональным — да, зачастую.

[besisland]

Более того, если у вас font-size: 16pt, то здесь ничего мерить и делить не надо, а сразу можно сказать, что в данном конкретном случае 1em = 16pt.

1em = font-size. По определению.

[Hitryi_Pryanik]

Не совсем. Особенно для декоративных шрифтов. Да и вообще. Размер шрифта — это H (буква, занимающая всю кегельную площадку). И не забывайте, что em — это ширина M, а размер шрифта — высота.

Так вот если у M острые верхние концы, то они выходят чуть за пределы высоты H (это нужно, чтобы иллюзорно, оптически, сравнять по высоте букву).

О том, какие меры у шрифта, читайте у Гордона "Про буквы" или у Паратайповцев в статье "Как делают шрифты"

[besisland]

О том, какие единицы измерения есть в CSS, читайте в спецификации CSS.

[pepelsbey]

Em'ы для всего плохи тем, что как только увеличиваешь размер шрифта на одну ступень, всё содержимое сайта прячется далеко вниз. Это проблема в том случае, если я всего лишь хочу текст чуть покрупнее, чтобы удобнее было читать — а это наиболее распространённая ситуация.

По этой причине я отказался от повсеместного использования em'ов. Это конечно классно, красиво… но зачастую просто неудобно.

В итоге — все размеры шрифтов конечно же в em'ах, а горизонтальные и вертикальные размеры в пикселах — и не нужны никакие калькуляторы.

Сайты должны быть доступными. Аминь.

[Denys]

Идея не нова...
Кстати недавно видел интересную реализацию масштабирования страниц сайта вместе с дизайном, стилями и т.д. А еще есть реализация верстки размещения одной и той же страницы как на больших мониторах, так и вплоть до КПК. Без применения разного рода определений браузера или мобильных устройств.
Вот это уже идея новая...

[x1am]

подскажите ссылочку?

[Denys]

да вот сам ищу...
видел совсем недавно :(

[proxor]

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

[dyakov]

Вернули?
фух... :)

[Devgru]

Уж действительно «фух» =)

[proxor]

Ну да, здесь на хабре об этом и писали. Вернули в одном из февральских Nightly-билдов.

[pratavetra]

Как видите, преимущества эластичной верстки на лицо
Поправьте, пожалуйста. Пишется "налицо" слитно. А за статью спасибо, только хотелось бы упомянуть, что иногда выходом из положения является применение JS-скрипта, определяющего разрешение экрана у клиента и форвардящего клиента на соответствующий CSS файл. Ага, неудобно, но зачастую спасает. Равно как и CSS-файлы для того же IE и FF у меня в разных местах, ибо. :)

[habratchanka]

поправила, спасибо. Ворд подвел :)

[devilmaydie]

всю вёрстку на em думаю не стоит. Лишь специфические блоки.

[zakon]

Полностью согласен - жестоко в em верстать

[pratavetra]

зато всё прекрасно масштабируется по размеру фонта.

[shafto]

Что-то речь тут пошла в таком ключе - использовать px или em?.. Их надо совмещать, используя em только там, где это действительно жизненно необходимо. В целом-то, верстка в px валидна и удобна, но вот некоторым контейнерам действительно удобнее проставлять em. Но только некоторым.
В общем, совмещать надо.

[speed]

странно, у меня ИЕ6, а показанный пример работает :);)

[habratchanka]

в IE6 и должен работать :)

[speed]

ок) просто я значит не понял автора во втором топике сверху.

[jcd]

Если броузеры движутся в сторону масштабирования всей страницы (как пример — Firefox 3), а не только шрифтов, есть ли необходимость в эластичной верстке?
Вдобавок, как уже писали — нет нормальной поддержки векторной графики.

[jcd]

Про оперу все уже давно знают (привет капитан Очевидность!), под броузерами я подразумевал Internet Explorer и Firefox =)

[Fade]

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

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

[Lenochka]

Согласна на все 100%

[Kuzzy]

Всё хорошо, только как быть с кросбраузерностью? Округление дробных значений меняется от браузера к браузеру и добится точной подгонки будет не так-то просто

[habratchanka]

ну тут естественно без хаков (валидных) не обойтись..

[Fade]

Хаки - зло, для верстальщика. Да, с их помощью можно сделать многое. Однако, каких трудов это стоит...

[habratchanka]

Почему зло, если они валидны? Не верстальщик виноват и не дизайнер, в том что стандарты воспринимаются браузерами по разному.
Да и не особо много трудов, если рука набита. Я за пару версток наизусть их запомнила.

[Fade]

Остается только позавидовать. Я пока не перешел полностью на DIV-верстку именно из-за того, что работает она более-менее нормально только на хаках. При этом, 100% того, что ве не развалиться нет.

Я в основном пользую Firefox. Однако, все проверяю и в IE. Так вот, одна и та-же верстка в IE6 (проверяю на двух работах и дома) может себя по разному вести. Особенно это характерно при использовании DHTML в связке с CSS.

Доходит до смешного: IE все показывает нормально а в Firefox все валиться (было такое пару раз).

[Over]

всё придет с опытом. я обхожусь по возможности без хаков.

[petka_vaska]

На своем опыте узнал, что Opera 9.21 НЕ дружит с десятичными EM в связке с JavaScript :(

[Hitryi_Pryanik]

И не обязана. EM — ширина одной широкой буквы шрифта (m как эталон, вдобавок w, ы, ж, ш, щ...), EX — ширина одной квадратной буквы шрифта (эталонно x, вдобавок н, л, к, и, ч, в...)

А что такое десятичные em? одна десятая ширины буквы m? А если буква сама короче 5 px, то при округлении 0,1em=0px, вот и весь сказ.

[Hitryi_Pryanik]

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

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

[petka_vaska]

Я это написал вот к чему
Цитата: "Особенность верстки эластичного шаблона в том, что все величины должны быть указаны не в пикселях (px) и не в процентах, а в em.
Почему неэффективно использование значений в процентах? Потому что, использование десятых и сотых долей в значении воспринимается не всеми браузерами. В то время как для em величин можно указывать 3 знака после запятой и каждая цифра будет учитываться."

[Hitryi_Pryanik]

тогда вопросов нет, я просто невнимательно прочёл.

[besisland]

Приведите пример, пожалуйста.

Подружилась ли в более поздних версиях?

[petka_vaska]

Пример:
---Начало кода---
<script language="JavaScript" type="text/javascript">
function Hide(xxx)
{
var on = document.getElementById(xxx).style.height;
if(on == '1.5em') {
document.getElementById(xxx).style.height = 'auto';
} else {
document.getElementById(xxx).style.height = '1.5em';
}

}
</script>

<div class="c_sm" onclick="javascript:Hide('d01')">Link</div>

<div id="d01" style="width: 100%; height: 1.5em; overflow: hidden">
Рыба
</div>
---Конец кода---
Пример не работает только в Опере, причем если убрать десятичную величину, то сразу начинает работать.

PS
Зачем, спрашивается, внизу надпись "(между прочим, можно использовать html-теги)", если их невозможно использовать >:-/?

[besisland]

Всё в Опере правильно работает. Это код у вас неправильный. Браузер имеет право (спецификация CSS это оговаривает) пересчитывать указанные в CSS величины удобным для себя образом (хоть в пиксели em'ы переводить). Если вы поставите после первой строки функции alert(on), вы увидите, что выводится значение 1.50em . Естественно, "1.50em" != "1.5em".

Замените on == "1.5em" на on != "auto".

[petka_vaska]

Получилось, спасибо :)

[antonrr]

вака вака вака!

[kuzmi4]

Большое спасибо, не раз сталкивался с подобной проблемой.

[Snart]

Теперь бы еще статью, как разные браузеры сглаживают картинки при растягивании )

[Snart]

Теперь бы еще статью, как разные браузеры сглаживают картинки при растягивании )

Да, кстати, искренне надеюсь, что все понимают, что делать так как написано в статье не стоит.

Автору нужно было хотя-бы упомянуть о недостатках даного метода, ну особенно что касается картинок.

[Over]

резина + ограничения по ширине (max[min]-width) - мой выбор.

[tihobrazov]

Лично меня не устраивает ни один из CSS-способов управления размером контента. По-моему идеальный вариант с точки зрения использования (не разработчика) - это собственные css-файлы для определенных диапазонов размера окна броузера/экрана

Например, вот статья на эту тему
http://particletree.com/features/dynamic…

[klierik]

>Если величина шрифта не задана, то большинство браузеров автоматически устанавливают размер 16px
ну в таком случае что б контролировать исходный размер шрифта, ведь можно просто сделать так:

html {font-size: 12px;}
body {font-size: 1em;}

в таком случае по умолчанию стоит 12px
и облегчает наши вычисления.

я правильно рассуждаю, или гдето ошибся?
зы: в FF2/IE7 работает номаль.

[klierik]

ам... непонял ... 8)