MyMans

На фоне того как все с нетерпением ждут HTML2, разработчики XHTML2 тоже не дремлют. В своей новой версии они вводят еще одно замечательное свойство, это навигационные цепочки, ставшие теперь очень популярными. Сейчас как правило их делают из спискаul, а потом извращают с помощью css. Новый список nl позволит избежать многих проблем но все ровно будет под настраиваться через css.

<nl>
 <label>Вы находитесь:</label>
 <li href="/magazine">Магазин</li>
 <li href="/magazine/homeuse/">бытовая техника</li>
 <li href="/magazine/products/tv/">телевизоры</li>
 <li>Модели</li>
</nl>

Все мы ждем мультиколоночность. Для этого в CSS3 введено много вкусного,

column-count:  <int>
column-gap:  <length> | auto
column-width:  <length> | auto

но, не дожидаясь принятие CSS3, мозильци поддержу мультиколоночнисти в Firefox используя спец префикс -moz- в стилях,

-moz-column-count:  <int>
-moz-column-gap:  <length> | auto
-moz-column-width:  <length> | auto

и как водится дурной пример оказался заразителен для ребят из Apple

-webkit-column-width: <length>;
-webkit-column-gap: <length>;

Это, как вы уже наверно поняли, были стили под Safari.

Как бы быстро все браузеры не поддержали css3 или используя теги FF и Safari, надо обратить внимание на одну штуку. Разделять на колонки не всегда обязательно через column-count, конечно вы можете обозначить числом нужные вам колонки, но можно делать и по другому. Если указать только параметры column-width и column-gap то браузер сам поделит пространство на колонки. Например, если div шириной 400px и ты ставим column-width:100px и column-gap:20px то колонок будет 3. Уменьшите ширину в column-width и количество колонок увеличится

Новая версия Safari по своему но уже поддерживает тень от блока.

-webkit-box-shadow: Apx Bpx Cpx D;

Apx - отступ по вертикали, отрицательные и положительное целое число
Bpx - отступ по горизонтали, отрицательные и положительное целое число
Cpx - степень растушевки, от 0 и выше
В сочетании с круглыми краями можно получить вот такое

К сожалению css3 стандарт box-shadow пока не поддерживает никто (

Браузер Safari не только стал лучше в третьей версии но и добавил некоторую поддержку css3.
textarea{
resize: both;
}

resize: horizontal | vertical | both | none ;

после этого в правом нижнем углу появляется маркер за который можно потащить, меняя размер окна. К сожалению этим не может похвастаться ни Opera или новая бета Firefox3

В дополнении ко всем прелестям грядущего HTML5 можно добавить CSS3 и тогда точно можно забыть про многие мучения. В CSS2 появился селекторы :first-child и :last-child, которые возможно и успешно зарекомендовали бы себя, если бы поддерживались всеми браузерами кроме MSIE. Но ребята из консорциума, не дожидаясь, пока неповоротливый Франкенштейн решит наконец жить по правилам, решили внести еще несколько новшеств.
Помниться, в нете было много рецептов того как сделать тигровую таблицу. Так вот, забудьте и выбросьте все извращения, встречайте селектор :nth-child(n), где n может быть любое целое чесли а так же принимать 2 дополнительных значения odd и even.
Не догадались что это дает? Смотрите пример.

<style type="text/css">
	#list, #list td{
		border: 1px solid #bbb;
		border-collapse:collapse;
		padding: 3px;
	}
	#list tr:nth-child(odd) td {
		background-color: #ccc;
	}
	#list tr:first-child td {
		background-color: #3d80df;
		color: white;
		font-weight: bold;
		text-align: center;
	}
	#list tr td:nth-child(2) {
		text-align: right;
	}
	#list tr:nth-child(4) td {
		background-color: red;
		color: white;
	}
</style>
<table id="list">
			<tr>
....
</table>

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