Posts Tagged css
CSS расширения браузеров
CSS расширения или CSS Extensions содержатся во всех популярных браузерах. Они содержат те свойства, которых нету в утвержденных редакциях CSS, но по мнению создателей браузеров пригодятся web-разработчикам. Среди огромного списка наиболее важными являются свойства из будущего CSS3, которые доступны через индивидуальные префиксы.
Префиксы свойств у всех разные:
-ms-свойство (IE8)
-moz-свойство (FireFox)
-o-свойство (Opera)
-webkit-свойство (Safari, Chrome)
Префикс указывает какому браузеру обрабатывать свойство.
Для примера можно взять полезное свойство закругления углов блока:
-
.block {
-
border-radius: 10px; /* CSS3 свойство */
-
-moz-border-radius: 10px; /* Для FireFox */
-
-webkit-border-radius: 10px; /* Для Safari и Chrome */
-
}
Подробная документация, справочники c примерами по CSS3 свойствам и расширениям:
Следим за новинками
Очень важно следить за новыми технологиями.
И так скоро на экранах:
HTML5 - наиболее подробное описание, таблица поддержки браузерами. Как пример - верстка сайтов
CSS3 - таблица совместимости с современными браузерами.
Web slices - описание и примеры реализации.
Центрирование сайта
Есть много способов центрирования сайта по вертикали и горизонтали.
Наиболее популярный это способ с отрицательными маргинами:
-
.site {
-
position:absolute;
-
left:50%;
-
top:50%;
-
width:600px;
-
height:400px;
-
margin:-200px 0 0 -300px;
-
}
Но на практике такой способ не всегда подходит. Например когда нужно, чтобы был вертикальный скроллинг на сайте.
Тогда на помощь приходит старый способ центрирования в ячейке таблицы:
Но этот способ наиболее кроссбраузерный без указания DOCTYPE
Справочник по CSS 3
http://zapomni.ru/css/ - хороший справочник по CSS 3