<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Ксдыщь! &#187; max-width</title>
	<atom:link href="http://flack.ru/tag/max-width/feed/" rel="self" type="application/rss+xml" />
	<link>http://flack.ru</link>
	<description>Вебдев и всякая фигня</description>
	<lastBuildDate>Mon, 06 Apr 2009 16:47:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Семантическая верстка — советы и решения. Часть VIII. Минимальные и максимальные размеры</title>
		<link>http://flack.ru/2008/08/26/semantic-coding-howto-8/</link>
		<comments>http://flack.ru/2008/08/26/semantic-coding-howto-8/#comments</comments>
		<pubDate>Tue, 26 Aug 2008 11:33:22 +0000</pubDate>
		<dc:creator>Flack</dc:creator>
				<category><![CDATA[Веб-разработка]]></category>
		<category><![CDATA[Рецептарий]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[max-width]]></category>
		<category><![CDATA[min-width]]></category>

		<guid isPermaLink="false">http://flack.ru/2008/08/26/semantic-coding-howto-8/</guid>
		<description><![CDATA[min-height В спецификации CSS предусмотрены правила min-width/min-height и max-width/max-height. К сожалению, Internet Explorer поддерживает эти правила только начиная с седьмой версии. Однако, это ограничение можно обойти. Свойство min-height позволяет указать минимальную высоту для элемента. Если высота содержимого элемента окажется меньше его высоты, заданной правилом min-height, то высота элемента будет установлена на основании значения правила min-height. [...]]]></description>
			<content:encoded><![CDATA[<h4>min-height</h4>
<p>В спецификации CSS предусмотрены правила min-width/min-height и max-width/max-height. К сожалению, Internet Explorer поддерживает эти правила только начиная с седьмой версии. Однако, это ограничение можно обойти.<span id="more-127"></span></p>
<p>Свойство min-height позволяет указать минимальную высоту для элемента. Если высота содержимого элемента окажется меньше его высоты, заданной правилом min-height, то высота элемента будет установлена на основании значения правила min-height. В противном случае блок растянется по своему содержимому.</p>
<p><strong>style.css:</strong></p>
<pre><code>#element {
    min-height:300px;
    }</code></pre>
<p>Как говорилось выше, В IE это будет работать только в седьмой версии. К счастью, в IE есть баг в обработке правила height. По сути, height ведет себя так же как и min-height, именно на этом основан наш workaround. Обратите внимание, что мы используем «star html hack», чтобы не задавать значение height для IE 7.</p>
<p><strong>ie.css:</strong></p>
<pre><code>* HTML #element {
    height:300px;
    }</code></pre>
<p>Обращу ваше внимание, что при использовании height для эмуляции min-height, overflow:hidden использовать нельзя, иначе в IE height начнет работать так же, как и в нормальных браузерах.</p>
<h4>min-width, max-width</h4>
<p>С эмуляцией минимальной и максимальной ширины все несколько сложнее. Для этого понадобится использовать IE-only правило expression (NB: это свойство не является валидным по текущему стандарту CSS и должно использоваться через conditional comments).</p>
<p>Хитрость в том, что внутри expression мы можем выполнять JavaScript.</p>
<pre><code>#element {
    width:expression(some javascript goes here);
    }</code></pre>
<p>Для задания минимальной ширины используем следующий expression:</p>
<p><strong>ie.css:</strong></p>
<pre><code>* HTML #element {
    width:expression((document.body.clientWidth||document.documentElement.clientWidth)  &gt; 760 ? 'auto' : '760px');
    }</code></pre>
<p>Для минимальной и максимальной ширины одновременно:</p>
<p><strong>ie.css:</strong></p>
<pre><code>* HTML #element {
    width:expression(document.body.clientWidth&lt;=760?'760px':(document.body.clientWidth&gt;1100?'1100px':'100%'));
    }</code></pre>
<p>Данные правила, естественно, не будут работать у пользователей с отключенным JavaScript.</p>
<p><strong>Материалы к изучению:</strong></p>
<ul>
<li><a href="http://cssing.org.ua/2005/09/02/min-width-for-ie/">min-width для IE</a></li>
<li><a href="http://xhtml.ru/2005/06/11/max-width/">max-width в Internet Explorer</a></li>
<li><a href="http://cssplay.co.uk/boxes/minwidth.html">min-width for Internet Explorer without Java Script?</a></li>
<li><a href="http://lusever.livejournal.com/15868.html">Тонкий CSS для Internet Explorer (expression)</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://flack.ru/2008/08/26/semantic-coding-howto-8/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
