Функции в css 3 и немного о возможностях для резиновых сайтов

[torbasow]

когда мне например нужно отцентровать элемент

А почему не margin-left: auto; margin-right: auto?

[delch]

Виноват, плохой пример. Лучше будет так:

.box {
    position: absolute;
    width: 400px;
    left: calc( 50% - 200px);
}

[GreatRash]

И чем это лучше такого?

.box {
    position: absolute;
    width: 400px;
    left: 50%;
    margin-left: -200px;
}

[delch]

Никто не говорит, что это лучше. На мой взгляд это компактней в данном случае в 2 раза.

[delch]

Не очень понимаю смысл написанного? Left: 0 и right: 0 при условии, что ширина указана не имеет на мой взгляд никакого смысла.

[delch]

Хм, интересно. Для меня такое поведение — шок. Спасибо, пошел разбираться почему это работает именно так.

[delch]

Спасибо, видимо мне стоит получше ознакомиться с документацией по абсолютным элементам.

[ArtRoman]

В том-то и проблема, что такое поведение не совсем очевидно по написанному коду, к тому же может зависеть от условий. Когда видишь margin-left: -200px, и тем более left: calc( 50% — 200px), сразу можно понять, что именно происходит.

[aTei]

Чтобы справится с магическими числами можно использовать комментарии или переменные в SASS (или другом любимом препроцессоре).

[aTei]

чистый css
margin-left: -200px; // половина ширины модального окна

или SASS
margin-left: -( $modal_width / 2 );

[tigrenok]

.box {
    margin: auto;
    width: 400px;
}

так, кстати, тоже работает. ;)
но только по горизонтали. зато не выбивается из потока (не абсолютное).

[yermolaev]

Функция calc — очень полезна, жаль что нет полной поддержки браузерами.

[delch]

Лично я надеюсь, что к моменту выхода новой версии opera на движке blink позиции internet explorer 8 сильно спадут, и тогда можно будет смело использовать. Хотя тут уже зависит от проекта. У меня на работе допустим поддержка internet explorer от 9 версии, остается только opera.

[josser]

calc ето просто обалденно, нада попробовать заэмулировать для IE8

[alt_r]

Opera не поддерживает

За оперу можно не бояться — скоро на хромиум поставять. Так что все ништяк

[delch]

Ну как мне кажется, это произойдет ближе к осени.

[alt_r]

Ну, а раньше не жду)
За статью спасибо, была бы возможность поставил б +

[Apathetic]

Counter позволяет делать шикарные нумерованные списки
Такие, например:

[delch]

Тогда вам может понравится этот драфт.

[aTei]

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

[sapphiriq]

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