zoom

Игорь Ермаков · October 21, 2009

Здравствуйте друзья.

Часто вижу использование этого свойства, но совершенно не понимаю для чего оно?

Его же только IE понимает, да и вообще это какая-то тупость, и на htmlbook не описано. :lol:

Как так вообще? Или это такой понт перед "ни ч0ткими", типа мы то юзаем никому не нужное CSS свойство и только мы понимаем зачем это :unsure:

Не в обиду, просто правда совершенно не понимаю, для чего этот zoom нужен.

psywalker · October 21, 2009

Я уже говорил не раз, поэтому можно просто подитожить.

1) zoom:1; - это запатентованное свойство "Микрософт"

2) zoom:1; служит для того, что-бы починить или исправить баг в ИЕ6-7

3) zoom:1; Не понимает ИЕ8 и другие браузеры, но последнее время я читал, что его вроде понимает и Сафари 4.

4) zoom:1; невалидное средство, поэтому его лучше выносить в стили для ИЕ

5) zoom:1; Может что-то починить в ИЕ6, но также напротив сломать этот же элемент в ИЕ7, так что лучше перестраховываться и писать это свойство именно для элемента браузера, в котором этот элемент сломан

6) Вот так писать не рекомендую: *{zoom:1;} - опятьже из-за вышесказанных соображений

Игорь Ермаков · October 21, 2009

psywalker, огромное тебе спасибо, но это всё теория. Я вот теперь всё это знаю, но не понимаю как это всё применить, можно пример, где этот zoom реально помогает?

psywalker · October 21, 2009

Не за что друг, вот тебе пример самый обычный. Если не поставить zoom:1; для ИЕ6, то div#content в этом браузере будет расползаться на всю страницу. Скопируй код и сравни

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 700px;}
	#left_bg { float: left; width: 300px; background: red;}
	#right_bg { float: right; width: 300px; background: red;}
	#content { 
		overflow: hidden; 
		background: blue;
		zoom:1; 
	}
</style>
</head>

<body>
<div id="main">
<div id="left_bg">Left</div>
<div id="right_bg">Right</div>
<div id="content">Тут какой-то контент</div>
</body>
</html>

SelenIT · October 22, 2009

Чаще всего zoom:1 используется лишь как более-менее безопасный способ включить в IE6/7 hasLayout (это такое труднообъяснимое логически "лекарство" от множества багов типа пропадающих фонов и прочего, но с побочными эффектами типа сбивающейся нумерации у списков). Еще комбинация этого hasLayout c display:inline дает в старых IE поведение display:inline-block для изначально блочных элементов (для которых там настоящий display:inline-block не работает), это модно и удобно в "резиновых" галереях и т.п.

На данный момент мне известны буквально пара примеров использования этого свойства по прямому назначению: коррекция дизайна при нестандартном размере шрифта и обход 100-пиксельного ограничения на высоту элемента hr... ну еще могу нескромно попиарить финт, позволяющий использовать в IE6 шрифты в px (для всего, кроме body) и масштабировать их .

psywalker · October 23, 2009

Чаще всего zoom:1 используется лишь как более-менее безопасный способ включить в IE6/7 hasLayout (это такое труднообъяснимое логически "лекарство" от множества багов типа пропадающих фонов и прочего, но с побочными эффектами типа сбивающейся нумерации у списков). Еще комбинация этого hasLayout c display:inline дает в старых IE поведение display:inline-block для изначально блочных элементов (для которых там настоящий display:inline-block не работает), это модно и удобно в "резиновых" галереях и т.п.
На данный момент мне известны буквально пара примеров использования этого свойства по прямому назначению: коррекция дизайна при нестандартном размере шрифта и обход 100-пиксельного ограничения на высоту элемента hr... ну еще могу нескромно попиарить финт, позволяющий использовать в IE6 шрифты в px (для всего, кроме body) и масштабировать их .

Кстати всегда старался отойти от понятия hasLayout, так как после прочтения статей и пользования долгого времени свойства zoom; понял, что это лишняя информация для забивание головы. Я просто воспринимаю zoom;, как лекарство, которое может помочь мне при отладке вёрстки в ИЕ. Темболее я уже перевидал и знаю много ситуаций, когда он помогает, а когда нет, уже хорошо изучил слабые места ИЕ6 например, поэтому для меня zoom:1; - это лишь помощник в моей работе :angry:

Justnewone · October 23, 2009

Кстати всегда старался отойти от понятия hasLayout, так как после прочтения статей и пользования долгого времени свойства zoom; понял, что это лишняя информация для забивание головы. Я просто воспринимаю zoom;, как лекарство, которое может помочь мне при отладке вёрстки в ИЕ. Темболее я уже перевидал и знаю много ситуаций, когда он помогает, а когда нет, уже хорошо изучил слабые места ИЕ6 например, поэтому для меня zoom:1; - это лишь помощник в моей работе

Напрасно. Это тоже самое, что знать, что у P сверху и снизу волшебная сила отталкивает, а не маргин = в нужный момент не суметь справиться.

psywalker · October 23, 2009

Напрасно. Это тоже самое, что знать, что у P сверху и снизу волшебная сила отталкивает, а не маргин = в нужный момент не суметь справиться.

Нее, ну я так утрирую конеш, прочитал я несколько раз, понял, что за штука такая, а так мне главное ведь, что я разобрался для чего и как применять zoom:1;

Great Rash · October 23, 2009

А ващет, если макет делает стоящий дизайнер, а не падкий на круглые углы идиот, то никакие зумы, высоты в 1% и прочая лабуда не нужны, да и в ИЕ6 все магическим образом отображаться как надо начинает.

psywalker · October 23, 2009

А ващет, если макет делает стоящий дизайнер, а не падкий на круглые углы идиот, то никакие зумы, высоты в 1% и прочая лабуда не нужны, да и в ИЕ6 все магическим образом отображаться как надо начинает.

Ну так тоже рассуждать прям неправильно, получается ради говна мы должны отказываться от красивых, и сложных макетов :angry:

Justnewone · October 23, 2009

Во главе угла всегда задача. И если она ясно и четко поставлена, реализация уже дело второе. Особенно, присутствует ли там zoom или нет. Если сайт будет целиком о, например, верстке скругленных уголков, то вопрос сам по себе отпадает.

Great Rash · October 23, 2009

Про круглые углы я утрировал. Но идея моя понятна. К слову не все красивые макеты сложны. Красота в простоте.

psywalker · October 23, 2009

Про круглые углы я утрировал. Но идея моя понятна. К слову не все красивые макеты сложны. Красота в простоте.

Если бы было всё просто, то и опыт набирался бы у нас намного медленнее :angry:

Justnewone · October 23, 2009

Если бы было всё просто, то и опыт набирался бы у нас намного медленнее

Простота скорее всего не будет таковой без опыта. Так что не переживай.

psywalker · October 23, 2009

Простота скорее всего не будет таковой без опыта. Так что не переживай.

тоже верно :angry:

Razor · October 23, 2009

Немного оффтопик, но по приведенному выше тут примеру с выравниваниями

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 700px;}
	#left_bg { float: left; width: 300px; background: red;}
	#right_bg { float: right; width: 300px; background: red;}
	#content { 
		margin: 0 30px;
		overflow: hidden; 
		background: blue;
		zoom:1; 
	}
</style>
</head>

<body>
<div id="main">
<div id="left_bg">Left</div>
<div id="right_bg">Right</div>
<div id="content">Тут какой-то контент</div>
</body>
</html>

Если так, то в опере работает, а в ФФ - нет, в ФФ нужно отступы для левой и правой колонки добавлять...

а кто из браузеров более прав и правильно обрабатывает ситуацию??

s0rr0w · October 23, 2009

а кто из браузеров более прав и правильно обрабатывает ситуацию??

FF. Флоаты не принадлежат контенту, на них не должен распространяться overflow: hidden;

Хотя, подыму сейчас спеку, посмотрю.

s0rr0w · October 23, 2009

Мда, там непонятка со спекой. Буду спрашивать у народа уже, почему так получается.

SelenIT · October 23, 2009

Насколько я понял, главного ограничения не нарушили оба, и вообще в этой ситуации многое оставлено на откуп разработчикам браузера... Но интуитивно Опера более права, горизонтальные маргины-то схлопываться не должны. И IE8, хвастающийся полным прохождением OVER 7000 официальных тестов по спеке, ведет себя так же.

P.S. А Хром(ой) ведет себя забавнее их всех :angry:

Razor · October 23, 2009

Глянул - у Хрома явно баг...

psywalker · October 23, 2009

вот поэтому я что-бы как вы не париться, часто делаю трёхколоночный именно таким способом, и без всяких маргинов и т. д. Код маленьки, проблем никогда нигде не было, и везде работает как часы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 700px;}
	#left_bg { float: left; width: 300px; background: red;}
	#right_bg { float: right; width: 300px; background: red;}
	#content {
		overflow: hidden;
		background: blue;
		zoom:1;
	}
</style>
</head>

<body>

<div id="left_bg">Left</div>
<div id="right_bg">Right</div>
<div id="content">Тут какой-то контент</div>

</body>
</html>

Кстати если уж мне потребуются отступы, я их делаю как в спеке написано, от флоатовых блоков и всё отлично! :angry:

Edited October 23, 2009 by psywalker

Игорь Ермаков · October 25, 2009

Всем спасибо, узнал очень много нового

Sign In

zoom

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information