<?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>Skylord&#039;s notebook &#187; верстка</title>
	<atom:link href="http://skylord.ru/tag/verstka/feed/" rel="self" type="application/rss+xml" />
	<link>http://skylord.ru</link>
	<description>Записная книжка</description>
	<lastBuildDate>Sat, 04 Sep 2010 08:13:40 +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>Браузеры &#8211; покой нам только снится&#8230;</title>
		<link>http://skylord.ru/2010/09/02/brauzery-pokoj-nam-tolko-snitsya/</link>
		<comments>http://skylord.ru/2010/09/02/brauzery-pokoj-nam-tolko-snitsya/#comments</comments>
		<pubDate>Thu, 02 Sep 2010 14:00:32 +0000</pubDate>
		<dc:creator>Skylord</dc:creator>
				<category><![CDATA[Посты]]></category>
		<category><![CDATA[ie6]]></category>
		<category><![CDATA[верстка]]></category>
		<category><![CDATA[онлайн]]></category>
		<category><![CDATA[сайты]]></category>

		<guid isPermaLink="false">http://skylord.ru/?p=229</guid>
		<description><![CDATA[Веб-разработчики спят и видят, когда можно будет не адаптировать сайты под старые браузеры, типа IE6, Opera 9 или FF2 (в меньше степени, но все же &#8211; отсутствие &#171;display: inline-block;&#187; это печально). Бодрые отчеты говорят нам о том, что доля шестого эксплорера уже сильно меньше 10% и когда она наконец станет меньше 5% &#8211; можно будет [...]]]></description>
			<content:encoded><![CDATA[<p>Веб-разработчики спят и видят, когда можно будет не адаптировать сайты под старые браузеры, типа IE6, Opera 9 или FF2 (в меньше степени, но все же &#8211; отсутствие &laquo;display: inline-block;&raquo; это печально). <a href="http://www.liveinternet.ru/stat/ru/browsers.html?period=month" target="_blank">Бодрые отчеты</a> говорят нам о том, что доля шестого эксплорера уже сильно меньше 10% и когда она наконец станет меньше 5% &#8211; можно будет смело на него забивать и вешать на своем сайте плашку &laquo;Обновите браузер&raquo;.</p>
<p>Однако, реальная практика показывает совсем другие цифры. Смотрю на примере двух своих сайтов &#8211; оба не имеют яркой ориентации на столичных пользователей, имеют много посетителей из регионов, только один собирает трафик с уклоном на гос.учреждения и органы власти, а другой &#8211; с уклоном на бизнес/корпоратив. И что же мы имеем по обоим? А имеем мы примерно одинаковую структуру:</p>
<p><a href="http://skylord.ru/wp-content/uploads/2010/09/counter_1246981_stat_tech_browsers_pie.png" rel="lightbox[229]"><img class="size-full wp-image-233 alignnone" title="Популярность браузеров (август 2010)" src="http://skylord.ru/wp-content/uploads/2010/09/counter_1246981_stat_tech_browsers_pie.png" alt="" width="690" height="351" /></a></p>
<p>И вид сей навевает (по сравнению с бодрыми отчетами, демонстрирующими &laquo;среднюю температуру по больнице&raquo;) печаль и уныние. Ибо домашние пользователи &#8211; это конечно прекрасно, но если сайт ориентирован на корпоративную аудиторию и/или людей в гос.учреждениях/органах власти, то IE6 еще долго нужно будет брать в расчет, т.к. он вместе с Windows XP живее всех живых и спокойно поплевывает с высоты на всяких там конкурентов, включая свои же новые версии&#8230;</p>
<p>Одно утешение &#8211; эти самые новые версии все-таки суммарно его опережают. И девятую Оперу вместе со вторым Файрфоксом в расчет можно не принимать, что тоже неплохо.</p>
]]></content:encoded>
			<wfw:commentRss>http://skylord.ru/2010/09/02/brauzery-pokoj-nam-tolko-snitsya/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Причуды прогресса</title>
		<link>http://skylord.ru/2010/06/20/prichudy-progressa/</link>
		<comments>http://skylord.ru/2010/06/20/prichudy-progressa/#comments</comments>
		<pubDate>Sun, 20 Jun 2010 17:34:00 +0000</pubDate>
		<dc:creator>Skylord</dc:creator>
				<category><![CDATA[Посты]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[www]]></category>
		<category><![CDATA[верстка]]></category>

		<guid isPermaLink="false">http://skylord.ru/?p=208</guid>
		<description><![CDATA[В HTML-элементе LI есть простое как два пальца свойство &#171;value&#187;, которое просто и ненавязчиво позволяет установить номер элемента в нумерованном списке. Работает с любыми типами нумераций (например, с римскими числами тоже), ненапряжно устанавливается через JavaScript ( &#60;элемент&#62;.value=&#187;10&#8243; без каких-либо ухищрений), не создавая большого overhead&#8217;а и не сильно загрязняя код позволяет легко оперировать нумерацией, так как [...]]]></description>
			<content:encoded><![CDATA[<p>В HTML-элементе LI есть простое как два пальца <a href="http://htmlbook.ru/html/li/value.html" target="_blank">свойство &laquo;value&raquo;</a>, которое просто и ненавязчиво позволяет установить номер элемента в нумерованном списке. Работает с любыми типами нумераций (например, с римскими числами тоже), ненапряжно устанавливается через JavaScript ( &lt;элемент&gt;.value=&raquo;10&#8243; без каких-либо ухищрений), не создавая большого overhead&#8217;а и не сильно загрязняя код позволяет легко оперировать нумерацией, так как следующий элемент после того, которому мы установили value продолжает нумерацию от него (т.е. если в value поставили &laquo;5&#8243;, то у следующего LI даже без установленного value сразу будет номер &laquo;6&#8243; и не важно, что было у предыдущих)&#8230; Одним словом &#8211; хорошее и полезное свойство, не вызывающее никаких спорных вопросов и, с моей точки зрения, не создающее проблем с точки зрения семантики.</p>
<p>Однако де, W3C решил несколько иначе и с HTML 4, а также во всех XHTML это свойство осуждается и валидный код можно получить только установив DOCTYPE в Transitional. Казалось бы &#8211; ну по любому, умные дяди решили так не зря и нам предлагают что-то более удобное, простое или хотя бы &#8211; более функциональное. Однако же, нам предлагают концепцию &laquo;<a href="https://developer.mozilla.org/En/CSS_Counters" target="_blank">CSS Counters</a>&laquo;, которая, если в тезисах, состоит в следующем:</p>
<ul>
<li>Для хранения нумераций используются специальные переменные &#8211; их нужно обнулять перед использованием, одновременно декларируя, например:<br />
<blockquote><p><code>ol {<br />
counter-reset: section;           /* Set the section counter to 0 */<br />
list-style-type: none;<br />
}<br />
</code></p></blockquote>
</li>
<li>Значения этих переменных локальны для каждого списка (!!!).</li>
<li>Изменять значения этих переменных можно опять же либо через CSS-команду counter-reset, указывая конкретное значение, либо через counter-increment, чтобы увеличить его (например, на каждом пункте списка):<br />
<blockquote><p><code>li {<br />
counter-increment: section;            /* Increments only this instance of the section counter */<br />
}
</li>
<li>Вставка непосредственно номеров элементов осуществляется через генерацию контента процедурами counters() и counter() в свойстве content в псевдоклассах :before и :after, например:<br />
<blockquote><p><code>li:before {<br />
content: counters(section, ".") " ";   /* Adds the value of all instances of the section counter separated by a ".". */<br />
}<br />
</code></p></blockquote>
</li>
</ul>
<p>Я как со всем этим ознакомился - даже пробовать не стал и тут же, плюнув, поставил Transitional. Потому что даже в минимальном варианте при настроенных соответствующим образом стилях мне нужно будет писать</p>
<p>&lt;li style="<code>counter-reset: my-counter 5;</code>"&gt;</p>
<p>вместо</p>
<p>&lt;li value="<code>5</code>"&gt;</p>
<p>При этом простое и семантичное свойство заменяется набором из костылей - каких-то процедур, вставкой контента, переменных, - которые добавили в CSS, предназначенный изначально тупо для оформления! И черт с ними с несовместимостями и т.п. - мне вполне достаточно, что созданный в :after и :before контент пользователь не сможет выделить и скопировать. И дело не в недостатках before/after - если на них делать то, для чего они и предназначены (например, уголки круглые навешивать на блоки), то таких проблем и не возникает. А вот если пытаться чесать ухо рукой пропущенной под коленкой...</p>
<p>В общем, я для себя приобрел отличный пример того, как не надо перебарщивать в попытках создать обще-большое-красивое-универсальное-замечательное решение для замены всего-на-свете. Иногда лучше оставить в покое имеющиеся  мелочи, которые нормально работают и успешно справляются со своей задачей.</p>
]]></content:encoded>
			<wfw:commentRss>http://skylord.ru/2010/06/20/prichudy-progressa/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Internet Explorer убивает</title>
		<link>http://skylord.ru/2009/11/09/internet-explorer-ubivaet/</link>
		<comments>http://skylord.ru/2009/11/09/internet-explorer-ubivaet/#comments</comments>
		<pubDate>Sun, 08 Nov 2009 22:17:10 +0000</pubDate>
		<dc:creator>Skylord</dc:creator>
				<category><![CDATA[Посты]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[ie6]]></category>
		<category><![CDATA[ie7]]></category>
		<category><![CDATA[баги]]></category>
		<category><![CDATA[верстка]]></category>
		<category><![CDATA[глюки]]></category>

		<guid isPermaLink="false">http://skylord.ru/?p=96</guid>
		<description><![CDATA[В буквальном смысле &#8211; тем что тратит время жизни тем, что вынуждает бороться с его багами. В данном конкретном случае столкнулся с багом, о котором до этого ни разу нигде не читал и не слышал. Более того, уже после решения проблемы поиском в Гугле так найти почти ничего и не смог. Хотя, возможно, плохо искал, [...]]]></description>
			<content:encoded><![CDATA[<p>В буквальном смысле &#8211; тем что тратит время жизни тем, что вынуждает бороться с его багами.</p>
<p>В данном конкретном случае столкнулся с багом, о котором до этого ни разу нигде не читал и не слышал. Более того, уже после решения проблемы поиском в Гугле так найти почти ничего и не смог. Хотя, возможно, плохо искал, так как ситуация достаточно неочевидная и нечастая&#8230; Примеры кода есть по ссылке приведенной ниже, а в тезисах суть следующая. Имеем div с содержимым, которому изначально присвоен некий скрывающий его со страницы класс, типа такого:<br />
<code><br />
.ui-tabs-hide {<br />
left:-15000px;<br />
position:absolute;<br />
top:-15000px;<br />
visibility:hidden;<br />
}<br />
</code><br />
Потом посредством JavaScript этот класс с блока убирается, но содержащиеся внутри div&#8217;а таблицы остаются невидимыми (иногда частично &#8211; границы есть, а содержимого &#8211; нет, что уж совсем футуристично).</p>
<p>Описание проблемы с примерами дается тут &#8211; <a href="http://wiki.orbeon.com/forms/doc/contributor-guide/ie-bugs" target="_blank">http://wiki.orbeon.com/forms/doc/contributor-guide/ie-bugs</a> (пункты 2.1.4, 2.1.5). Сам столкнулся с этим багом при работе с модулем <a href="http://drupal.org/project/tabs" target="_blank">Tabs</a> для Drupal, в котором все реализовано посредством <a href="http://docs.jquery.com/UI/Tabs" target="_blank">JQuery UI Tabs</a>. По приведенной ссылке предлагается вносить изменения в код JavaScript, но мне лезть во внутренности JQuery не хотелось (возможно, проблема решения в новых версиях<a href="http://docs.jquery.com/UI/Tabs" target="_blank"> JQuery UI Tabs</a>, т.к. в комплекте модуля идет 1.6, но обновляться не хотелось, так как могли вылезти какие-нибудь новые грабли, связанные с несовместимостями самого Drupal&#8217;а, а мне срочно надо было решить вопрос), поэтому подумал и добавил в вышеприведенный класс для скрывания блока строчку &laquo;<strong>display: none;</strong>&laquo;, что полностью решило проблему и IE6/7 стали нормально отображать таблицу внутри div&#8217;а.</p>
]]></content:encoded>
			<wfw:commentRss>http://skylord.ru/2009/11/09/internet-explorer-ubivaet/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
