Все посты с тегом CSS
ie6 и проблемы с :hover

Как всем известно ie6 не поддерживает в полной мере псевдокласс :hover. Для решения этой проблемы есть массивный скрипт под названием Whatever:hover. Суть скрипта такова подключаем 1 раз в стилях и забываем о проблеме. Но как выяснилось не все так гладко, в некоторых случаях (закономерность я так и не уловил) у элементов при наведении в ie6 менялись некоторые стили, хотя :hover для них вообще никак не был прописан. Во всем виноват оказался как раз тот самый Whatever:hover. Так что я не советую использовать данный скрипт для решения проблемы в 6 ослике.
Opera на маке и проблема с прозрачностью файл-инпутов
Недавно нужно было стилизовать формы, воспользовался нехитрым методом, сверстал блок нижним слоем оформил кнопку, верхним наложил инпут и задал ему прозрачность 0 (подробнее можете прочитать тут). Все отлично заработало на всех браузерах, кроме оперы под мак, на него прозрачность почему то никак не действовало. Решение оказалось довольно простым для input'а нужно было просто обнулить значение border'а.
Webkit 3D Transforms
В то время как разработчики IE утверждают, что CSS3 еще не вышел, так зачем его внедрять в движок, разработчики Webkit не перестают удивлять. В последней сборке Webkit была реализована поддержка CSS 3D transforms. Качаем последнюю версию отсюда и наслаждаемся: пример номер один, пример номер два.
Opera и CSS3
С выходом Firefox 3.5, Opera остается единственным браузером (я подчеркиваю браузером!), который не поддерживает border-radius, box-shadow и border-image. А ведь стыдно должно быть!

PS.: Новая версия Firefox стала быстрее, но до Safari 4 ей еще далеко. Еще у меня приглючил приватныи режим просмотра, запуститься запустился, а вот выключаться не захотел. В итоге удалось выключить только через config. Из всех расширении, только YSlow оказался не совместим. В остальном полет нормальный.
Учим CSS, псевдо-класс first-child
Просматривая работы отечественных верстальщиков заметил, что мало кто использует в css псевдо-класс first-child. Хотя это очень полезная штука, которая может хоть немножко, но облегчить работу программистам и упростить html код. С помощью данного псевдо-класса можно задавать стили для первого дочернего элемента.
Рассмотрим пример. Требуется реализовать подобную навигацию:

Навигация реализуется в виде списка и для каждого элемента меню задается css свойство border-left. Но как видим выше у 1-го элемента не должно быть левого border'а. Первое, что приходит в голову добавить для 1-го элемента класс, но тогда на стороне сервера программисту вместо того чтобы просто сгенерировать меню, придеться искать еще и 1ый элемент и проставлять ему класс. Не будем мучить программиста
Все легко реализуемо через псевдо-класс first-child.
- ul li:first-child {border: 0;}
Все работает во всех актуальных браузерах, кроме ie6. В нем это легко реализуется с помощью expression.
- *html ul li {border-left-width: expression(this.previousSibling==null?'0':'1px');}


