﻿<?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>CSS Guru &#187; частное мнение</title>
	<atom:link href="http://starhack.ru/tag/chastnoe-mnenie/feed/" rel="self" type="application/rss+xml" />
	<link>http://starhack.ru</link>
	<description>Верстка сайтов, использование CSS, jQuery</description>
	<lastBuildDate>Fri, 27 May 2011 17:33:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>Дизайн превыше всего</title>
		<link>http://starhack.ru/dizajn-prevyshe-vsego/</link>
		<comments>http://starhack.ru/dizajn-prevyshe-vsego/#comments</comments>
		<pubDate>Sun, 18 Apr 2010 19:01:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[дизайн]]></category>
		<category><![CDATA[частное мнение]]></category>

		<guid isPermaLink="false">http://starhack.ru/?p=533</guid>
		<description><![CDATA[В Рунете идёт постоянный спор, какой лучше макет для сайта: фиксированный или тянущийся. Media queries позволяют сверстать макет, приспосабливающийся к устройствам или к ширине экрана. Но зачем все это, если можно общему контейнеру задать ширину в 1240 пикселей, и не думать, что у кого-то экран может быть и уже=) (хотя бы по этой статистике). Зато [...]]]></description>
			<content:encoded><![CDATA[<p>В Рунете идёт постоянный спор, какой лучше макет для сайта: фиксированный или тянущийся. <code>Media queries</code> позволяют сверстать макет, приспосабливающийся к устройствам или к ширине экрана. Но зачем все это, если можно общему контейнеру задать ширину в 1240 пикселей, и не думать, что у кого-то экран может быть и уже=) (хотя бы по этой <a href="http://w3schools.com/browsers/browsers_display.asp" target="_blank">статистике</a>). Зато можно вставить в шапку <a href="http://www.livingdesign.info/" target="_blank">мегакартинку</a>.</p>
<p>Не касаюсь содержания, но статья, на которую я перешел из твиттера, была  по делу, неважно (smashingmagazin похвалил&#8230; хотя скорее smashingmagazin&#8217;у понравилась форма обратной связи  &#8211; <a href="http://www.livingdesign.info/2010/01/27/20-this-and-10-that-5-best-of-this-and-top-100-of-that/" target="_blank">прокрутить почти до дна</a>, а там, кроме красивой формы, еще одна мегакартинка, да еще разрезанная на несколько частей). Не знаю, что вдруг так меня задело, дизайнерский сайт, и ладно. Стало просто интересно, как сверстано=) (так себе, в общем-то (не сравнивайте с версткой стархака=))</p>
<p>Хотя, конечно, надо смотреть на статистику по посетителям сайта. Может быть на указанный сайт не заходят посетители, у которых мониторы с меньшим разрешением. Но для меня такой поход &#8211; хорошая иллюстрация к заголовку этой моей реплики, когда дизайн превыше всего.</p>
<p>Несильно информативная статья, но может быть это растолкает меня на продолжение написательства.</p>
]]></content:encoded>
			<wfw:commentRss>http://starhack.ru/dizajn-prevyshe-vsego/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Я бы сделал лучше)</title>
		<link>http://starhack.ru/ya-by-sdelal-luchshe/</link>
		<comments>http://starhack.ru/ya-by-sdelal-luchshe/#comments</comments>
		<pubDate>Wed, 25 Mar 2009 20:38:08 +0000</pubDate>
		<dc:creator>Сергей Кириченко</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[верстка]]></category>
		<category><![CDATA[частное мнение]]></category>

		<guid isPermaLink="false">http://starhack.ru/?p=56</guid>
		<description><![CDATA[Студия Лебедева порадовала нас новым творением — обновился интернет-магазин Техносилы. Все мило и, как обычно в последнее время у Лебедева, лаконично, но&#8230; Что мы видим на первой же странице: Названия товаров не помещаются и просто обрезаются свойством overflow: hidden Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне [...]]]></description>
			<content:encoded><![CDATA[<p>Студия Лебедева порадовала нас новым творением — обновился <a href="http://www.tehnosila.ru/">интернет-магазин Техносилы</a>. Все мило и, как обычно в последнее время у Лебедева, лаконично, но&#8230;</p>
<p>Что мы видим на первой же странице:</p>
<p><img class="aligncenter size-full wp-image-58" title="technosila1" src="http://starhack.ru/wp-content/uploads/2009/03/technosila1.png" alt="technosila1" width="497" height="292" /></p>
<p>Названия товаров не помещаются и просто обрезаются свойством <code>overflow: hidden</code><br />
Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство <code>text-overflow: ellipsis</code>. Что удивительно, его (это свойство) поддерживает дружное семейство браузеров по имени Internet Explorer. Это свойство имеет два (согласно с <a href="http://msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx">сайтом MS</a>) значения: <code>clip</code> (по умолчанию) и  <code> ellipsis</code>, что в сочетании со свойством  <code>overflow: hidden</code> дает замечательный результат: текст, который не помещается в каком-либо элементе обрезается с заменой последних символов на многоточие!!! Получается очень аккуратно и симпатично.<br />
А вот и примеры:</p>
<h4>Без применения <code>overflow</code> и <code> text-overflow</code></h4>
<div style="border: 1px solid #000; width: 150px; white-space: nowrap; margin: 0 0 10px;" title="Съешь еще этих мягких французских булок">Съешь еще этих мягких французских булок</div>
<h4>Теперь установим <code>overflow: hidden</code> и <code> text-overflow:clip;</code> (поведение по умолчанию)</h4>
<div style="border: 1px solid #000; width: 150px; overflow: hidden; text-overflow: clip; -o-text-overflow: clip; white-space: nowrap; margin: 0 0 10px;" title="Съешь еще этих мягких французских булок">Съешь еще этих мягких французских булок</div>
<h4>И наконец  требуемый результат в результате применения <code>overflow: hidden</code> и <code> text-overflow:ellipsis;</code></h4>
<div style="border: 1px solid #000; width: 150px; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; white-space: nowrap; margin: 0 0 10px;" title="Съешь еще этих мягких французских булок">Съешь еще этих мягких французских булок</div>
<p>Некоторые браузеры, в частности Opera, требуют <a href="/vendor-prefixes/">своего префикса</a> для этого свойства. MSDN рекомендует так же использовать префикс -ms для ИЕ8, но понимает это свойство и без него</p>
<p>Проверил, что Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе</p>
<p>Но если не использовать это свойство, то хотя бы снабдить заголовок соответствующей всплывающей подсказкой, хотя бы в виде <code title="дает дополнительный сведения об элементе">title</code></p>
]]></content:encoded>
			<wfw:commentRss>http://starhack.ru/ya-by-sdelal-luchshe/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

