Все тесты я делал на Chrome Canary (20.0.1093.0), поэтому вполне могут быть несоответствия, но все похоже на правду.

Html во всех примерах:

<section>
	<div>A</div>
	<div>B</div>
	<div>C</div>
</section>

display

Flexbox модель начинает работать с того что мы определяем элемент контейнер как flexbox. Дальше флексбокс-элементами считаются элементы которые являются прямыми предками флексбокс контейнера.

section {
	display: flexbox;
}

Значением display может быть flexbox или inline-flexbox.

Поскольку flexbox это новая модель построения блоков некоторые css свойства, которые предполагают поведение блоков по блочной (старой) модели, не будут работать. А именно:

• column-*
• float и clear
• vertical-align

Абсолютно позиционированный элемент-предок не будет вести себя как флексбокс-элемент и не будет влиять компоновку.

flex-direction

Оопределяет направление оси по которой выстравиваются блоки.
Присваивается элементу контейнеру.
Значения говорят сами за себя:

section {
	flex-direction: row | row-reverse | column | column-reverse;
}

row - означает что блоки будут выстраивается по горизонтальной линии
column - по вертикальной, как обычные блоки.

flex-wrap

section {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Очень нужная штука, определяет будет ли наш лайоут в одну строку или многострочный. wrap - многострочный, nowrap - однострочный. Применяется к элементу контейнеру. То есть это счастье для решения таких задач как например выстраивание блочков, типа обложек фильмов, в ряды, когда вы не знаете сколько их будет и надо чтобы они были одинаковые. Сейчас это можно делать инлайн-блоками но выравнивание высот по прежнему не очень решаемая проблема средствами CSS.

Примеры будут ниже.

flex-flow

section {
	flex-flow: <'flex-direction'> || <'flex-wrap'>;
}

Cокращенная запись двух свойств, видно из синтаксиса.

flex-order

section div{
	flex-order: <number>;
}

С этим все прозрачно, применяется к флексбокс элементу.

flex

section div{
	flex: [ [ <pos-flex> <neg-flex>? ] || <preferred-size> ] | none;
}

Свойство которое отвечает за ширину элемента. Применяется к флекбокс элементу. Первые два свойства это положительные числа, действуют как "сила пружины", или как доля элемента от общей доступной области. pos-flex - максимальное значение, neg-flex - минимальное, дефолтные значения - 1 и 0.
preferred-size - предпочитаемый размер, который должен иметь элемент.

Если вы хотите указать предпочитаемый размер - 0 то надо указывать размерность, чтобы не было конфликта с значением "веса".

На примере видно что значение auto для предпочитаемого размера начинает учитывать количество контента в блоке.

flex-pack

section {
	flex-pack: start | end | center | justify | distribute;
}

Свойство которое выравнивает блоки относительно главной оси, то есть той по которой выстраиваются блоки.

Все примеры здесь для горизонтального потока (flex-flow: row), но все то же самое будет для вертикального. Примеры будут ниже.

flex-align & flex-item-align

section {
	flex-align: start | end | center | justify | distribute | stretch;
}

section div{
	flex-item-align: start | end | center | justify | distribute | stretch;
}

Выравнивание элементов относительно перпендикуляру главной оси. flex-align - применяется к контейнеру, а flex-item-align для элемента на случай когда надо перекрыть общее значение.

Стоит запомнить что дефолтное значение flex-align - stretch, поэтому в случае flex-flow: row блоки будут высотой контейнера, что мне было странно )

А вот это полный П. Не могу поверить что такое вообще возможно )

Многострочный flexbox

Пример для понимания как работает flex-wrap

Интересная деталь - я указал размеры боксов в пикселах, хотя изначально пытался в процентах - 50%. И блоки не хотели выстраиваться по два в строку. Флексбокс-элемент ведет себя подобно инлайн-блоку, то есть блоки не стыкуются без зазора. Хотя это может быть реализацией в Canary.

flex-line-pack

section {
	flex-line-pack: start | end | center | justify | distribute | stretch;
}

Эта штука служит для выравнивания осей флексбокс элементов когда их несколько, то есть это свойство работает только для flex-wrap: wrap

Немного едет крыша от количества свойств для выравнивания, но вроде все логично, выравнивать мы можем:

• боксы по оси "выстраивания"
• боксы по перпендикуляру к ней же
• строки боксов по вертикали когда их несколько

пример

Пример работает только в Chrome Canary (8 апреля 2012)

По теме:

Chrome Canary
Flexible Box Layout Module

Работает в:

Не от одной знакомой девушки уже слышал что она не хочет жить долго. До 60 максимум.
Только пока красивая. И чтобы секса побольше. А потом бац и красиво умереть.

Впечатление как будто слушал сценарий голивудского кина.

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

Потом стал взрослым. И уже особо не помню что мне так хотелось сюда попасть. Ну так себе, ниче особенного. В 30 с чем то, так вдруг – оппа, в один день вдруг заметил что – а попойка то как то сложно пошла, не так как обычно. Все, приехали )

Серьезно, как то это неожиданно происходит, мне кажется если бы кто нибудь извне не говорил то трудно было бы понять что тебе уже огого. Ну вообще здоровье конечно подсказывает )

Но все таки, есть ощущение какой то несвязанности самоощущения с реальным возрастом. То есть ты живешь, живешь, и вдруг тебе говорят – ты ж старый хрен, куда тебя несет, уже не положено по возрасту. Она ж тебе в дочки годится. Да? ну ладно. Че ж вы раньше не сказали.

Тебе начинают говорить Вы, думаешь, ни хрена себе позорище какое ) Есть один такой, все время подходит и говорит – “у вас апач не запущен”. Я озираюсь по сторонам, потом отвечаю – мы щас запустим. Просил его не раз чтобы на “ты”, не работает. Что ж за человек такой. Главное он думает что он ко мне уважение проявляет, а мне хочется ему по морде заехать )

Но если оценивать других людей то кажется что молодые совсем или старые совсем как то интереснее. Человек среднего возраста он и сам какой то средний. Все у него среднее, доход, ум, резвость, жена средняя. Запросы средние. Молодые например хотят все, старые ничего ) Одна знакомая 15 летняя девушка сказала что скоро выйдет замуж за Бреда Пита и убьет мужа сестры. Он обижает сестру.

Очень впечатляет когда узнаешь что нибудь о каком нибудь старом человеке который в свои 70-80-90 интересен. Ну и жив ) Тем более это поражает потому что это что то отличное от молодых задниц которые только и видишь в кино и … где угодно.

Вот например – Grace Hopper

Все эти методы появлялись и каждый отменял предыдущый. Я считаю, тем не менее, что правильный метод заключается в использовании всех единиц.

Проценты

Забудем на секунду об отзывчивом?(responsive) дизайне. Responsive design это довольно сложная штука но сейчас нас интересует только плавающая компоновка. Плавающая компоновка (fluid layout) ведет себя как жидкость которая заполняет пропорционально доступную область.

Резиновая сетка (fluid grids) это немного более хитрая штука потому что она основана на полной системе сеток (не понял:)). Я сделал калькулятор который может в этом немного помочь.

К примеру дизайнер присылает вам макет двухколончатого сайта, ваша задача как верстальщика определить соотношение колонок между собой, а не их размеры. Скажем, область содержания занимает 600px и боковая панель 300px, значит содержание в два раза больше боковой панели. Проценты будут работать в этом случае идеально вне зависимости собираетесь ли вы делать responsive design или нет.

Дизайн вообще то строится вокруг пропорций а не абсолютных значений, поэтому игнорирование пикселов в размерах является адекватной практикой.

Может вообще без?

Самый лучший способ “отзывчивого” дизайна это не присваивать размеры совсем. Они должны быть ограничены всегда областью которую отдает им родитель. Поэтому везде где возможно надо стараться не использовать ширины для элементов.

Ems

Em это наш старый друг. Это лучшая размерность для шрифтов. Но я не использую em, почему – немного позже, я использую вместо них – rem, собрат em но слегка улучшенный. Em стоит использовать как размерность для элементов зависящих от размера шрифта, к примеру – отступы и маржины параграфов, заголовков, списков и тп.

Цель – чтобы вид этих элементов оставался достойным когда пользователь масштабирует размер шрифта.
Попробуйте масштабировать этот пример

Обратите внимание, когда я говорю о масштабировании я не имею в виду использование браузерного зума Ctrl+/-, я имею в виду пользовательские стили или какие то возможные изменения дизайна в будущем.

Межстрочное расстояние

Есть несколько способов задать их, но главное правило тут – не использовать пикселов, потому что в этом случае межстрочное не будет меняться в ответ на изменение размера шрифта.

Межстрочное логичнее задавать в процентных единицах, но как выяснялось еще лучше оставлять line-height совсем без размерности. Eric Meyer обьсянил это в своей статье.

Rem

Несмотря на то что раньше я думал по другому, я начал использовать rem для шрифтов, с обратной совместимостью конечно.

Rem дает надежность пиксела и масштабируемость em. Это очень здорово. Rem избавляет от нудных расчетов текущего наследуемого размера для каждого элемента. Вместо этого вы просто наследуете от одного размера, размера шрифта для html элемента.

Пример

Rem удобен для того чтобы выдерживать вертикальный ритм, если назначать маржинам значения в rem.

Пикселы

Пикселы не так уж мертвы как может показаться. Да, их потеснили другие единицы измерения, но тем не менее есть место и для них. Пикселы необходимы там где присутствуют обьекты с изначальной пиксельной размерностью, типа картинки, аватары, иконки и тп. Если вам надо сделать отступ для ссылки чтобы поместить иконку фоном, то пикселы это единственная правильная размерность.

Пример

Примером обсуждаемого тут подхода может быть мой сайт – hry.rbrts.me. Если вы откроете сайт и проанализируете инспектором то вы увидите что я использую:

Проценты

Для body и article, для структуры страницы.

Ничего

Компонент с социальными иконками, всегда будет занимать отведенное место.

Em

Отступы для ul, ol, dd и отступы между секциями

Межстрочные

Все межстрочные расстояния определены без размерности, за исключением заголовка сайта.

Rem

Все шрифтовые стили

Пиксели

Социальные иконки и логотип.

Если есть желание поанализировать глубже можно посмотреть стили с подробными комментариями.

Итог

• Для структуры использовать проценты. Область с содержанием, боковая панель и тд
• Для шрифтов использовать Rem с добавлением совместимости со старыми браузерами. Это дает хороший контроль над шрифтом плюс масштабируемость.
• Свойства шрифто-зависимых элементов определять в em и отступы, маржины будут меняться в зависимости от размера шрифта.
• Межстрочные в относительных единицах или без них вообще – line-height: 1.4
• По возможности модульные элементы не фиксировать в размерах совсем

Не знаю как его назвать, пусть будет метод float.

<div class="grid">
	<div class="col"></div>
	<div class="col"></div>
</div>

grid – контейнер колонок, одновременно это решение проблемы схлопывания, contain float
col – колонка.

*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.grid {zoom: 1;margin:0 0 0 -2.083%;list-style:none;}
.grid:before,.grid:after {content: "";display: table;}
.grid:after {clear: both;}

.grid>[class^="col-"]{
	float: left;
	margin:0 0 0 2.083%;
	padding: 0 10px;
}

.ie7 .grid>[class^="col-"]{
	margin:0 0 0 2.079%;
	display: inline;
        padding: 0;
}

Хорошо известный способ, единственное о чем стоит сказать это о способе избавления от класса last в последней колонке.

У grid есть левый отрицательный маржин: – 2.083%, такое значение не важно, в данном случае это 20px от ширины грида в 960px. Отрицательный маржин приводит к тому что сумма ширин вложенных элементов будет 102.083% и плюс колонка будет выступать слева на эту величину. Значит можно просто каждой колонке присвоить отступ такой же слева без всяких last, и маржин у первой колонки утопиться в этот наружный выступ.

пример

Колонки инлайновыми блоками

<div class="grid-inline">
	<div class="col"></div>
	<div class="col"></div>
</div>

.grid-inline {
	letter-spacing: -.31em;
	word-spacing: -.43em;
	position: relative; }

	.grid-inline .col {
		display: inline-block;
		letter-spacing: normal;
		word-spacing: normal;
		vertical-align: top;}

.ie7 .grid-inline .col { display: inline; }

пример

Проблема с инлайновыми блоками в том что между ними есть зазор величиной с пробел текущего шрифта, аналогично пробелу между словами, поэтому при помощи letter-spacing: -.31em; этот пробел обнуляется. Возможным минусом этого метода может быть то, что у какого-то шрифта этот пробел не будет равным 0.31em, но в любом случае можно либо подобрать нужное значение либо для грида использовать какой то другой шрифт.

word-spacing: -.43em; – это тоже лечение только для Opera.

Плюс этого метода в том что не надо бороться с обрыванием float.

Минус в том что обнуление зазора выглядит как то не надежно, ну что это за цифра “магическая” -0,31.

И преджде чем применять этот метод стоит почитать вот это.

На мой взгляд метод все равно интересный, я пока применяю его без использования отрицательных letter-spacing и letter-spacing, а просто делаю сумму ширин блоков меньше 100% и с запасом. Уж больно мне не нравится гемор с обрыванием float.

Метод Чикуенка

Не знаю насколько этот метод правомочно называть методом Чикуенка ), но впервые я прочел о нем в его статье Вёрстка растягивающихся сайтов. Понял я его не сразу и пришлось какое то время чесать репу и экспериментировать, и хотя я его не использую часто но он очень интересный и решает кое какие проблемы. Обьяснять его я не буду, лучше всего для этого почитать его в оригинале, тем более что в нем есть важные детали которые надо понять прежде чем использовать. Приведу только кратко пример.

<div class="page grid">
	<div class="col content"></div>
	<div class="col leftbar"></div>
	<div class="col rightbar"</div>
</div>

.col {
	float: left;
	position: relative;
	margin-right: -100%; }

.page {
	width: 50%;
	margin: auto; }

.content { width: 100%; }

.leftbar {
	width: 40%;
	left: -40%; }

.rightbar {
	width: 40%;
	left: 100%; }

.ie7 .content,
.ie7 .leftbar,
.ie7 .rightbar {
	padding: 0px;
	border: 0; }

пример

Главное тут, на что надо обратить внимание для того чтобы понять, это стили col.
float: left – “вынимает” блок из потока.
margin-right: -100% – “затягивает” соседний блок так что он оказывается в “нуле” относительно родительского блока. А дальше из этой точки блоки расставляются в нужное место свойством left.

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

Это не все прелести метода, остальное стоит почитать в оригинальной статье.

Имитация абсолютного позиционирования

Нечто похожее на предыдущий метод но с той разницей что изначально блоки ставятся в правый верхний угол а потом возвращаются на свои места. Этот метод подробно описан в статье Faux Absolute Positioning.

<div class="grid">
	<div class="content col"></div>
	<div class="leftbar col"></div>
	<div class="rightbar col"></div>
</div>

.col {
	float: left;
	position: relative;
	left: 100%; }

.content {
	margin-left: -80%;
	width: 56%;
	padding: 2%; }

.leftbar {
	width: 16%;
	padding: 2%;
	margin-left: -100%; }

.rightbar {
	width: 16%;
	padding: 2%;
	margin-left: -20%; }

примерпримерпримерпример

Проблема с этим способом та же что и с предыдущим – зазоры между колонками которые появляются из за округления процентных значений. Зазоров нет только в Firefox.

Решается это созданием дополнительной обертки для контейнера колонок

Задача

Общую конструкцию форм условно можно разделить на две группы – вертикальные и горизонтальные, или лучше – блочные и строчные.
Пример блочной формы:

То есть имя и поле расположены каждый на своей строке.

Пример строчной формы:

Еще:

Задача раз – часто формы рисуются выровненные по ширине, justified, подобно табличной верстке, и строка может содержать не один label+input а несколько, например:

Задача два – как можно видеть на рисунке 3 поле поле может иметь подпись, поэтому надо для этого случая иметь соотвествующую html структуру, иначе говоря колонку, в которую можно положить инпут и подпись.

Задача три – label и input не могут иметь заданной раз и навсегда ширины, во первых потому что они могут быть разной ширины в одной форме (Рис. 4), во-вторых дизайнер может запросто нарисовать в одном сайте несколько форм с разной шириной и пропорцией этих элементов. Это неприятно но приходится для каждой формы делать разные конструкции колонок.

HTML

Для верстки строки формы я выбрал такую HTML конструкцию:

Блочная форма

<ul class="field">
	<li><label for="name"></label></li>
	<li><input type="text" id="name" /></li>
</ul>

Строчная форма

<ul class="field grid">
	<li class="col-4 field-name"><label for="pass">Password</label></li>
	<li><input type="text" placeholder="" id="pass" value="" /></li>
</ul>

Класс grid означает что мы начинаем рисовать колонки. col-4 – определяет ширину колонки.

Строчная форма “упакованная”

<ul class="field grid packed">
	<li class="col-4 field-name"><label for="pass">Password</label></li>
	<li class="col-8"><input type="text" placeholder="" id="pass" value="" /></li>
</ul>

packed – этот стиль означает что инпуты, селекты и прочее в колонке растягивается на 100%.

CSS

.grid {zoom: 1;margin:0 0 0 -2.083%;list-style:none;}
.grid:before,.grid:after {content: "";display: table;}
.grid:after {clear: both;}

.grid>[class^="col-"]{
	float: left;
	margin:0 0 0 2.083%;
}

.ie7 .grid>[class^="col-"]{
	margin:0 0 0 2.079%;
	display: inline;
}

*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

.col-1{ width:6.25% }
.col-2{ width:14.583% }
.col-3{ width:22.917% }
.col-4{ width:31.25% }
...

.field.packed input[type=text],
.field.packed input[type=password],
.field.packed select,
.field.packed textarea {
	width: 100%;
}
.ie7 .field.packed input[type=text],
.ie7 .field.packed input[type=password],
.ie7.field.packed select,
.ie7 .field.packed textarea {
	width: auto;
}

Я привел только стили принципиальные для построения сетки, остальное в примере.

Все плохо

1. очень много разметки и много классов в конечном HTML
2. плохо поддается передизайну
3. не соответствует точно дизайну

Много разметки, много классов, и часто можно слышать критику вот таких классов – col-4.
Да, конечно, если вдруг надо этот элемент сделать другой ширины то не очень это будет удобно и легко. Но тут вся проблема в адекватном дизайне, если все формы на сайте строго вписываются в сетку то размеры сетки можно перенести в смысловые стили, field-name, field-input например. Но если формы все разные, то есть два варианта – либо так как поступил я, либо надо для каждой формы, отталкиваясь например от названия данной формы строить размеры сетки. Не знаю что лучше, оба варианта не фонтан.

Дело в том что неинтересно каждую форму на сайте лепить заново новыми размерами, лучше иметь некую абстрактную систему, может слегка перегруженную но в которой любая форма верстается однообразно.

Другая сложность это выравнивание элементов по вертикали. Ну то есть скажем инпута с именем, чекбокса с именем. Проблема сожалению упирается в багу Firefox, в котором не работает line-height для инпутов. Получается что высоту инпута приходится задавать отступами, а имени высотой строки. Можно было бы все задавать отступами, но тогда не получится добиться выравнивания если имя нужно сделать большим размером шрифта чем инпута.

Пример

пример

Работает в:

Twitter Bootstrap

Для сравнения решил посмотреть как верстают формы в твиттеровском фреймворке.

Html фрагмент одной строки:

<div class="control-group">
	<label class="control-label" for="prependedInput">Prepended text</label>
	<div class="controls">
		<div class="input-prepend">
			<input class="span2" id="prependedInput" size="16" type="text"></div>
	</div>
</div>

.form-horizontal .control-group {
	margin-bottom: 18px;
}

.form-horizontal .control-label {
	float: left;
	width: 140px;
	padding-top: 5px;
	text-align: right;
}

.form-horizontal .controls {
	margin-left: 160px;
}

input.span2{
	width: 130px;
}

.form-horizontal – определение типа формы, у них их существует несколько.
Они рисуют двухколончатую структуру, первая колонка это control-label, вторая controls.

Не нашел примеров как верстать компоновку типа рис.4

Верстка:

• Общий шаблон задач
• Виртуальный Репетитор
• Виртуальный репетитор, кнопка Skip
• Виртуальный репетитор, другая панель кнопок
• Виртуальный репетитор, Логин
• Виртуальный репетитор, Спасибо
• Виртуальный репетитор, формулы умножения вычитания
• Виртуальный репетитор, разбор задачи
• Виртуальный репетитор, связки
• Виртуальный репетитор, перевод единиц измерения
• Виртуальный репетитор, скобка под цифрами
• Виртуальный репетитор, размерности
• Перевод в разряды и слова
• Перевод в число
• Размерности
• Движение запятой
• Кнопка Show the Lesson
• Панель текстовой версии
• Деление в столбик
• Деление

• Начальная страница
• Fractions with your virtual Maths teacher
• Математика CM1
• Задача, Умножение

• Homepage
• About
• Login
• Article
• Full Width
• News and events
• News & Events Archive
• Search Result
• Reports
• Reports Economic
• Self Sufficiency
• Team Page
• Board of Directors
• Glossary
• Glossary Popup
• Generic Form
• County
• County Map
• Indicator: County Population

ryanfait.com

<ol class="code">
	<li>&lt;input type="radio" name="radio" class="styled" /&gt; Yes</li>
	<li>&lt;input type="radio" name="radio" class="styled" /&gt; No</li>
</ol>

ol.code {
	margin: 0 0 3em;
	padding: 6px 6px 6px 30px;
	border: 2px solid #c00;
}
ol.code li {
	margin: 0 0 1px 12px;
	padding: 0.5em;
	color: #000;
	font: 1.1em monospace;
	background: #fff5f5;
	list-style-type: decimal;
}

Отступы автор делает при помощи неразрывных пробелов. Любопытно что он не использует привычный в таком случае тег pre.

chikuyonok.ru

Такой себе минимализм. Код генерится похоже плагином syntaxhighlighter.

Весь код приводить страшо, уж очень его много, приведу только структуру строки:

<div class="line alt2">
	<span class="content">
		<code class="spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code>
		<span class="block" style="margin-left: 20px;">
			<code class="plain">.wrap, .h, .f {</code>
		</span>
	</span>
</div>

Мне казалось что при оформлении кода логично использовать тег pre и white-space: pre;, но оказывается что это не так уж очевидно ) В дейсвительности проблема в том что если использовать для отступов табы то рано или поздно вы столкнетесь с тем что какой-то код не влезает в отведенную область. Получается что надо контролировать размер отступа. Это можно сделать либо пробелами либо фиксированным css отступом.
Вот в плагине syntaxhighlighter сделано оступом – style=’margin-left: 20px;’>

.content {
	background-color: white;
}
.spaces {
	display: none;
}
.block {
	display: block;
	padding-left: 1.5em;
	text-indent: -1.5em;
}
.plain{
	color: black;
}

habrahabr.ru

Полный минимализм и в дизайне и в коде.

<code><pre>
&lt;div id="page"&gt;
    &lt;header&gt;&lt;/header&gt;
    &lt;article&gt;
        &lt;section id="main"&gt;&lt;/section&gt;
        &lt;aside&gt;&lt;/aside&gt;
    &lt;/article&gt;
    &lt;footer&gt;&lt;/footer&gt;
&lt;/div&gt;
</pre></code>

pre, code {
	font-size: 1em;
}
pre {
	white-space: pre-wrap;
	white-space: -o-pre-wrap;
}

html5doctor.com

<pre>
	<span class="tag">&lt;blockquote&gt;&lt;h1&gt;</span>
	<span class="pln">OMG a heading!</span>
	<span class="tag">&lt;/h1&gt;</span>
	<span class="pln"><br>&nbsp; </span>
	<span class="tag">&lt;ul&gt;&lt;li&gt;</span>
	<span class="pln">Block quotes can contain more than just paragraphsâ¦</span>
	<span class="tag">&lt;/li&gt;&lt;/ul&gt;</span>
	<span class="pln"><br></span>
	<span class="tag">&lt;/blockquote&gt;</span>
</pre>

pre, code, tt, kbd {
	font: .9375em 'andale mono','lucida console',monospace;
	line-height: 1.6;
}
pre {
	margin: 1.5em 0;
	white-space: pre;
	word-wrap: break-word;
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -pre-wrap;
	white-space: -hp-pre-wrap;
	white-space: pre-wrap;
	white-space: pre-line;
}
.tag {
	color: #008;
}
.pln {
	color: black;
}
...

Длинные сложносделанные стили для pre обьясняются совместимостью с разными старыми браузерами, статья об этом.

24ways.org

<pre><code>div {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
</code></pre>

pre {
    display: block;
    margin-bottom: 18px;
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, .75);
    padding: 10px;
    overflow: auto;
}
code {
    color: rgb(179, 45, 71);
    color: rgba(179, 45, 71, .75);
    background-color: rgb(255, 255, 255);
    background-color: rgba(255, 255, 255, .75);
    padding: 3px 5px;
    font: bold 13px/18px "Courier New", Courier, mono;
}

24ways подзабили на старые ИЕ, об этом говорит цвет в rgb, и в IE блок с кодом симпатично деградирует до:

Snook.ca

<pre><code>.element-invisible {
  height: 0;
  overflow: hidden;
  position: absolute;
}
</code></pre>

pre {
	margin-left: -20px;
	background: url(/img/code-bookmark.png) no-repeat 0 0;
}
	pre code {
		display: block;
		margin-left: 20px;
		padding: 10px;
		font-size: 90%;
		background-color: rgba(255,255,255,.5);
		overflow: auto;
	}

Часто встречается overflow: auto;, насколько я понял это для случая если код оказывается больше контейнера, появятся скроллеры.

css-tricks.com

<pre rel="CSS" class="prettyprint">
	<code>
		<span class="pln">li</span>
		<span class="pun">:</span>
		<span class="pln">nth</span>
		<span class="pun">-</span>
		<span class="pln">child</span>
		<span class="pun">(</span>
		<span class="lit">5</span>
		<span class="pun">)</span>
		<span class="pln"></span>
		<span class="pun">{</span>
		<span class="pln"><br>&nbsp; &nbsp; color</span>
		<span class="pun">:</span>
		<span class="pln"> green</span>
		<span class="pun">;</span>
		<span class="pln"><br>	</span>
		<span class="pun">}</span>
	</code>
</pre>

Я так подозреваю что есть какой то способ конвертации HTML кода в такую вот бодягу, вряд ли это делается руками.

pre {
	position: relative;
	background: #333;
	color: white;
	font-family: Courier, MonoSpace;
	line-height: 1.8;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	font-size: 16px;
	width: 730px;
	padding: 10px;
	margin: 0 0 20px 0;
	overflow: auto;
}
pre::after {
	content: attr(rel);
	position: absolute;
	font-size: 24px;
	top: 22px;
	line-height: 0;
	right: 12px;
	color: orangeRed;
	font-family: "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, Sans-Serif;
	font-weight: bold;
}
pre code {
	padding: 0;
	color: white;
	background: #333;
}
code {
	background: #EEE;
	color: black;
	font-family: Courier, MonoSpace;
	border-radius: 4px;
	font-size: 16px;
	padding: 0px 5px 1px 5px;
	white-space: nowrap;
}
.pln {
	color: #DFC484;
}
.pun {
	color: #EEE;
}
.lit {
	color: #C9783E;
}

Интересно и логично сделан вывод языка кода из атрибута rel.

alistapart.com

<pre><code>
.block {
  width: 200px;
  height: 200px;
}
</code></pre>

pre {
	line-height: 1.5em;
}
pre, code {
	font: 100.1% Monaco, "Andale Mono","Lucida Console","Bitstream Vera Sans Mono","Courier New", monospace, serif;
}
blockquote, pre {
	padding: 0.25em 40px;
}
pre code {
	font-size: 1em;
	line-height: 1.5em;
}

Полезные инструменты

Сконвертировать HTML код в специальные символы можно с помощью Zen Coding, а именно фильтрами. Работает это так,

div#content>p.title|e

преобразуется в

<div id="content">
        <p class="title"></p>
</div>

Вот еще несколько инструментов:
Convert Special Characters into HTML Entities
Tabifier

По теме:

Wrapping Long URLs and Text Content with CSS

Математическая уникальность

Золотая пропорция уникальна тем что если удалить из нее квадратную область то оставшийся прямоугольник опять будет иметь золотую пропорцию. Соответственно это можно продолжать дальше с оставшимся прямоугольником, а это значит что золотой прямоугольник можно использовать для создания рекурсивных фигур. В этой статье мы покажем как построить золотую спираль только на HTML и CSS.

HTML

<div id="container">
   <div class="cicle">
      <div>
         <div>
            <div>
               <div class="cicle">
                  <div>
                     <div>
                        <div>
                           <div class="cicle">
                              <div>
                                 <div>
                                    <div></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Каждый четвертый div имеет класс cycle, то есть спираль будет замыкаться каждые четыре цикла.

Золотая пропорция

Начнем с того что сделаем прямоугольник с золотой пропорцией, 288 × 1.618 = 466

#container > div {
	width: 932px;
	height: 576px;
}

Дальше нужно для всех вложенных блоков повторить пропорцию но при этом уменьшая. Логично это сделать процентами.

Приблизительное значение, 38.2%, получается из формулы – (100 × 1 − phi) ÷ phi.
Итого, имеем:

.cycle,
.cycle > div > div {
	height: 38.2%;
	width: 100%;
}

.cycle > div,
.cycle > div > div > div {
	width: 38.2%;
	height: 100%;
}

То есть — каждый второй и каждый четвертый блок после первого .cycle мы делаем вертикальным, сам .cycle и каждый третий просто масштабируем.

Теперь покрасим как то блоки чтобы их можно было различать.

#container div {
	background-color: rgba(255,255,255,0.15);
}

На данный момент вот что получилось

пример раз

Уже выглядит довольно прикольно, но теперь, чтобы создать спираль, надо выровнять прямоугольники правильным образом. А именно так, что каждый следущий прямоугольник «закручивался» относительно предыдущего. Для это, при помощи абсолютного позиционирования прилепим их к определенной стороне родителя.

.cycle {
	position: absolute;
	top: 0;
}
	.cycle > div {
		position: absolute;
		right: 0;
	}
		.cycle > div > div {
			position: absolute;
			bottom: 0;
		}
			.cycle > div > div > div {
				position: absolute;
				left: 0;
			}

пример два

Скругление углов

Спиральная форма уже начинает прорисовываться, но теперь нужно срезать углы для полного ажура. Нас спасет border-radius.
Но, нам неизвестны точно размеры сторон всех прямоугольников, поскольку мы выставляли их ширину процентами. Спецификация говорит что можно использовать проценты при задании размеров радиуса скругления, но, к сожалению это не работает как положено во всех браузерах. К счастью, оказывается, что если задать радиус скругления намного больше чем высота или ширина, то реальным радиусом станет меньшая сторона прямоугольника.

.cycle {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-border-top-left-radius: 10000px;
	-moz-border-radius-topleft: 10000px;
	border-top-left-radius: 10000px;
}

	.cycle > div {
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		-webkit-border-top-right-radius: 10000px;
		-moz-border-radius-topright: 10000px;
		border-top-right-radius: 10000px;
	}

		.cycle > div > div {
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			border-radius: 0px;
			-webkit-border-bottom-right-radius: 10000px;
			-moz-border-radius-bottomright: 10000px;
			border-bottom-right-radius: 10000px;
		}

			.cycle > div > div > div {
				-webkit-border-radius: 0px;
				-moz-border-radius: 0px;
				border-radius: 0px;
				-webkit-border-bottom-left-radius: 10000px;
				-moz-border-radius-bottomleft: 10000px;
				border-bottom-left-radius: 10000px;
			}

пример три

В финальном примере добавлен скрипт для масштабирования в полную доступную ширину браузера, но скрипт не является моим интересом так что оставляю без комментариев.

финал

Работает в:

Столкнулся с дизайном в котором надо было сделать строку элементов разной высоты выровненной вертикально, вроде этого:

На самом деле в общем случае задача дробится на две – случай когда у нас одна строка выравнивается вертикально и случай когда несколько. Второй случай несколько сложнее.
Само собой желательно иметь решение не зависящее от высоты контейнера.

Одна строка

<div class="line">
	<span>Facebook</span>
	<a href=""><img src="facebook.png" ></a>
	<span>Twitter</span>
	<a href=""><img src="twitter.png" ></a>
</div>

Два способа работающих во всех браузерах кроме IE6:

.line{
	display: table-row;
}
	.line span{
		display: table-cell;
		vertical-align: middle;
	}
	.line a{
		display: table-cell;
		vertical-align: middle;
	}

.line{

}
	.line span{
		vertical-align: middle;
	}
	.line a{
		vertical-align: middle;
		display: inline-block;
	}

Второй способ на мой взгляд более здравый, как то странно превращать элементы в таблицы и ячейки только для вертикального выравнивания.

Несколько строк

<div class="line">
	<span> Lorem ipsum dolor sit amet, consectetur adipisicing elit,
	sed do eiusmod... </span>
</div>

Метод в данном случае известный – элемент контейнер имеет межстрочное расстояние равное высоте а вложенный элемент возвращает межстрочное на место:

.line{
	line-height: 7em;
	height: 7em;
}
	.line span{
		display: inline-block;
		vertical-align: middle;
		line-height: 1.2em;
	}
	.ie7 .line span{
		display: block;
		margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" :
		(parentNode.offsetHeight - this.offsetHeight)/2 + "px");
	}

.ie7 .line span – костыль для IE7.

И еще один способ в котором в блок при помощи :before вставляется элемент растянутый по высоте на 100% и выровненный по центру, он создает нужную высоту строки.

.fline{
	height: 10em;
}
	.fline:before {
		content: "";
		height: 100%;
		position: relative;
		width: 0px;
		font-size: 0;
		display: inline-block;
		vertical-align: middle;
	}
	.fline span{
		display: inline-block;
		vertical-align: middle;
		width: 320px;
	}
	.fline  img{
		display: inline-block;
		vertical-align: middle;
		margin-right: 10px;
	}

Этот прием в IE7 работать не будет конечно же поскольку он не понимает псевдоселектор :before

пример

Работает в:

По теме

Vertical centering using CSS

Верстка

• community
• community_albums
• community_city_feed
• community_city_followings
• community_edit
• community_travel
• community_travel_countries
• community_travel_tab_left
• community_trip_notes

Три раза переписывал, все равно отстой )

Этот селектор можно использовать нетипичным способом. Например при обращении к элементу можно его например сдвинуть, спрятать и так далее. Минус в том что если элемент находится внизу страницы документ будет прыгать к нему, все ж таки это так и задумывалось. Но если элемент с которым мы работаем находится вверху страницы то прыгать ничего не будет.

Короче говоря – пример выдвигающейся панели на этом методе.

Теперь подробнее.

HTML

<a class="info_open" href="#info">Open Info< /a>
<div class="info" id="info">
   <div class="panel">
      …
      <a class="info_close" href="#close">Close Info</a>
   </div>   

<div class="content">
…
</div>

Div который скрывается/показывается – это div#info.

CSS

Начальные стили этого блока:

.info {
   width: 600px;
   margin: auto;
   height: 208px;
   position: absolute;
   top: -250px;
   z-index: 1000;
}

Благодаря отрицательному top этот блок не виден изначально. Ссылка a.info_open обращается к этому диву (href=”#info”) и срабатывает псевдоселектор.

.info:target {
   position: relative;
   top: 0px;
}

top: 0px сдвигает блок и он становится видимым, а position: relative нужен чтобы участвовать в потоке и сдвинуть контент.

Ну и чтобы закрыть панель нужно убрать обращение к элементу – ссылка a.close_info. Кнопка a.open_info спозиционирована абсолютно поэтому при появлении div.info она просто перекрывается им.

IE

Для IE это все работает благодаря скрипту target.js от Mark Wubben, который имитирует поведение псевдоселектора.

пример

Работает в:

По теме:

CSSPlay: Pull Down Information Panel
MDN :target
CSS3.info: Making an image gallery with :target

• Главная
• Тарифы
• OpenVZ VPS
• Xen VPS
• О компании
• Страница заказа

Есть у нас в офисе рыбки декоративные. И есть у нас охранники. Тоже хорошие. Ничего вроде особенного, охранник, рыбки, а у меня уже глаз дергается.

Перед тем как уйти на новогодние каникулы я попросил охранника покормить рыб в аквариуме, пока нас не будет. Подвел его к аквариуму, показал сколько насыпать, и это – один раз в день. Да, да, конечно, мне не трудно и все такое.

Прихожу третьего числа, и – е…ть! Одна рыбка на дне вверх пузом, две оставшиеся зеленые как лягушки. Вода желтая, цвета нездоровой мочи. Быстро поменял воду, но в чем суть происшествия еще не понял.

Потом начал распрашивать охранника, но ничего не узнал потому что он утверждал что кормил как было показано. Сюрприз был на следующий день, когда другой охранник сделал удивленную рожу и сказал – та я ж мля всего столовую ложку ) Он вскормил рыбкам в течении недели полторы пачки корма. Где то так две месячные нормы. Если сравнить с человеком то это типа как закидывать ему в трехметровую комнату, где он живет безвылазно, ведра три вкуснятины каждый день.

Потом еще выяснилось что этот герой покормил рыбок на втором этаже в другом аквариуме о котором его никто не просил. Ну душа добрая. В итоге еще одна рыбка не пережила новый год.

Обидно было.

В общем если вы вдруг родитесь рыбой то стоит боятся не старухи с косой а человека в форме с пакетиком корма ) Если бы у рыб были легенды то охранник бы точно там занял роль какого нибудь трехглавого монстра у которого из каждой дырки сочится жратва для рыб.

Так получилось что я наткнулся как раз в это время на статью о путешествующем голубе, и понял что наш охранник еще ничего.

Если серьезно, была такая птица, путешествующий голубь (passenger pigeon), которая считалась самой распространненой птицей на земле. Одна колония или стая, могла насчитывать 150 млн особей, и занимать деревья на территории 2000 км². Но к концу 19 века эта птица считалась уже исчезнувшей по причине острела ee человеком. И вот, какой то доблестный чел, где то в Америке или Канаде, году так в 1906, когда уже их лет 30 как никто не видел, вдруг увидел парочку экземпляров этого голубя. Не, не побежал кормить ) Побежал за ружьем и застрелил, и потом очень гордился и рассказывал что подстрелил последнего такого голубя. На самом деле это был не совсем последний, последний умер в зоопарке в 1914 году, но все равно впечатляет.

Само собой данные в столбцах могут изменится как угодно, поэтому нужно чтобы вся конструкция тянулась в высоту. Множественный фон нужен потому что одна фоновая картинка это разделители столбцов, другая – фон в первом столбце который должен быть в нижнем правом углу.

HTML

<div class="plans">
	<div class="xen">...</div>
	<div class="price_item">...</div>
	<div class="price_item">...</div>
	<div class="price_item">...</div>
	<div class="price_item">...</div>
</div>

CSS

.plans{
       background-image:
       url(“../img/xenplans_xen.png”),
       url(“../img/xenplans.png”) ;
       background-position: left bottom, left top;
       background-repeat: no-repeat, repeat-y;
}

Можно написать иначе:

.plans{
       background:
       url(“../img/xenplans_xen.png”) left bottom no-repeat,
       url(“../img/xenplans.png”) left top repeat-y;
}

А вот так нельзя:

.plans{
       background: url(“../img/xenplans.png”) left top repeat-y;
       background: url(“../img/xenplans_xen.png”) left bottom no-repeat;
}

IE

Для IE множественный фон работает при помощи скрипта PIE.

.plans{
       position: relative;
       -pie-background:
       url(“img/xenplans_xen.png”) -3px bottom no-repeat,
       url(“img/xenplans.png”) left top repeat-y;
       behavior: url(“css/pie.htc”);
}

Firefox 3.5

К сожалению в FF3.5 множественный фон еще не поддерживался, поэтому фон не отработал вообще.
Подправить это можно так:

.no-multiplebgs .plans{
       background-image: url(“../img/xenplans.png”) ;
       background-position: left top;
       background-repeat: repeat-y;
}

.plans:before{
       display: block;
       position: absolute;
       width: 187px;
       height: 100%;
       content: ” “;
       background-image: url(“../img/xenplans_xen.png”);
       background-position: left bottom;
       background-repeat: no-repeat;
}

.no-multiplebgs – селектор который означает что текущий браузер не понимает multiple background, создается джаваскриптовой библиотекой modernizr.

пример

Работает в:

По теме:

MDN: Multiple backgrounds
Multiple Backgrounds and Borders with CSS 2.1

Верстка:

• Home
• About
• Suggest a Shop
• Contact US
• Shop

У меня есть знакомые которые когда видят меня с сигаретой обязательно говорят – курить вредно. Ничего не нахожу как глупо улыбаться в ответ. Пытаюсь иногда понять где тут собака порылась. Неужели они думают что я этого не знаю. Да блин понятно что вредно ) Тогда что еще? Просто напоминают?

Представьте, я вас встречаю и говорю – ты когда нибудь умрешь ) Не, не, все в порядке, проходи, просто напоминаю. Че то мне кажется что вы подумаете что я не в порядке. Странно, но почему то с курением такого не происходит.
Заметьте что такую “фундаментальную” истину говорят только некурящие.

Как вы думаете кто знает как легко бросить курить, и что это вообще элементарно? Конечно – те же самые некурильщики. Спросите любого, желательно конечно того кто курил когда нибудь и бросил. Сначала послушаете доблестную историю про то как он бросил а потом! – замрите, ценнейший совет как бросить. Типа – ты должен очень захотеть. Или – кури каждый день на одну сигарету меньше. А вообще просто это вопрос силы воли, надо волю иметь. Вообщем эти разговоры похожи на то как если бы к вам пришел кто то и сказал, выпучив глаза:
- Я знаю, я понял, я понял как бросить курить!
- Как? говори, говори!
- Просто – не кури!
- Вау! Супер! Бляяя!

Вообщем не могу найти слов чтобы передать чувства благодарности тем кто так хочет, от всей души, помочь курильщику избавиться от этой фигни. Ну правда у них самих куча привычек которые они тоже хотели бы преодолеть, но это совсем другое дело. Все не так просто. Куча ньюансов, а курение – ерунда, раз и готово, просто надо захотеть )