Суббота, 02.11.2024, 07:18
Кодинг.Страничка начинаюшего програмиста.
Приветствую Вас Гость | RSS
Главная Регистрация Вход Карта Сайта
Меню сайта

Наш опрос
Оцените мой сайт
Всего ответов: 13

На развитие.
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Статистика

Проверить ТИЦ


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Форма входа

Главная » 2011 » Май » 27 » CSS хаки. Особенности кроссбраузерной верстки.
12:11
CSS хаки. Особенности кроссбраузерной верстки.
Кроссбраузерность кода – основное требование для верстальщика практически в любой web-студии. Для достижения этой задачи есть масса способов. Главный из которых – тщательно продуманная структура документа. Однако, если структура html страницы сложна, или придумать структуру так, чтобы она одинаково отображалась во всех браузерах, не удалось, на помощь верстальщику приходят всевозможные css-хаки. Не претендую на оригинальность или уникальность подборки трюков в этой статье, но постараюсь описать как можно больше способов и инструкций по достижению кроссбраузерности. Основная головная боль верстальщика в 99,99% связана с браузерами от Microsoft, т.е. с Internet Explorer. Сайт, одинаково хорошо интерпретируемый Opera, Mozilla, Safari и Chrome, может выглядеть совершенно по-разному в Internet Explorer 8, Internet Explorer 7,  не говоря уже о более ранних версиях. Наиболее красивое решение для обеспечения кроссбраузерности с Internet Explorer – использовать условные комментарии в HTML коде. Суть в том, что для каждой версии браузера создается свой CSS файл, в котором проблемные свойства определенным образом перезаписываются: Будет работать только в IE6 и ниже:
<!–[if lt IE 6]> <link rel=»stylesheet» type=»text/css» href=»ie6.css» /> <![endif]–>
Условие может быть таким: IE – для любой версии IE lt IE v – (less than) для всех браузеров IE, версия которых меньше чем v lte IE v – (less than or equal) для всех браузеров IE, версия которых меньше чем v, или такая же gte IE v – (greater than or equal) – для IE, версия которых больше или равна v gt IE v – (greater than) – для IE, версия которых больше v. Иногда ради того, чтобы переписать одно свойство, подключать новый CSS файл слишком громоздко. Для этого есть специальные CSS-хаки.

CSS хаки для Internet Explorer

01* html .class{background:red/* В случае если у html-страницы есть доктайп,
02этот хак работает только для IE6. В случае quirks-mode, хак работает в IE6 и IE7 */
03 
04*+html .class{background:red} /*В случае, если у html-страницы есть доктайп,
05этот хак работает в IE7, может понять Opera 9 и ниже */
06 
07*:first-child+html .class{background:red} /*В случае, если у html-страницы есть доктайп,
08этот хак работает в IE7: */
09 
10html>body {} /*Все кроме IE6 */
11 
12div, #ie#fix  /* все кроме IE8 */
13 
14div+span {&#8230;}   /* IE6 и ниже проигнорирует это правило */
15 
16div>span {&#8230;} /* IE6 и ниже проигнорирует это правило */
17 
18.myClass  {
19color:red\0/; /* только IE8*/
20}
21 
22.myClass  {
23color:red\9; /* только IE9*/
24}
25 
26*:lang(ru) #lightMOD { display: block }
27/* Хитрый селектор — все современные браузеры — не IE6 или IE7 */
28 
29html>/**/body #lightMOD { display: block }
30/* Вживленный комментарий — все современные браузеры — не IE6 или IE7 */
31 
32c\olor red; /* IE 6 не работает перед буквами a, b, c, d, e, f */
33 
34.ie7b {#color:#00FF00;} /* Хак только для IE7,6 */
Если перед свойством в css поставить подчеркивание "_”, или дефис "-", то эти свойства будут восприниматься только IE версии 6 и ниже. Если перед свойством в css поставить звездочку ”*”, то эти свойства будут восприниматься только IE версии 7 и ниже. >body {} выбирает элемент body только в IE7. html* {} выделяет все элементы внутри элемента html. Только для IE7 и ниже а также Chrome и Safari. Если после значения свойства поставить !ie, то свойство применится только в браузерах IE.

CSS хаки для Mozilla Firefox

С Mozilla Firefox проблем обычно не бывает. Но тем не менее хаки и для этого браузера могут оказаться полезными:
1html:root ваш_элемент {&#8230;}  /* этот работает ещё и для Safari и chrome*/
2 
3ваш_элемент, x:-moz-any-link {&#8230;}
4 
5ваш_элемент, x:-moz-any-link, x:default { display: block } /* только FF 3.0 */

CSS хаки для Opera

1@media all and (min-width: 0) {
2.class { color: #368EF1; } /* для Opera */
3}
4 
5html:first-child .class { color: #368EF1; } /* для Opera */

CSS хаки для Safari

1html[xmlns*=""] body:last-child .class { color: #368EF1; }
2/*  для Safari < 4.0 */
3 
4body:last-child:not(:root:root) .style { background: #F00; }
5/* для Safari < 4.0  */
6 
7@media screen and (-webkit-min-device-pixel-ratio:0) {.myClass {...}}
8/* для Safari < 4.0 и Chrome */

CSS хаки для Chrome

1body:nth-of-type(1) .style{
2 
3}
Просмотров: 3346 | Добавил: -=T$t=- | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Календарь
«  Май 2011  »
ПнВтСрЧтПтСбВс
      1
2345678
9101112131415
16171819202122
23242526272829
3031

Архив записей

Друзья сайта
Учебник HTML
Учебник PHP


Создатель сайта:Паша Бережной © 2024 Конструктор сайтов - uCoz