Приклади html і css - css хакі для ie

На цій сторінці описані CSS хакі для IE. використовуючи які можна призначити HTML-елементу якісь властивості, що розуміються тільки цим браузером, але ігноровані іншими.

CSS хакі для IE6

Браузер IE6 має найбільше багів і проблем з розумінням стандартів W3C, хоча для свого часу він був дуже непоганий.

Хак із застосуванням правила CSS! Important

IE6 ігнорує правило CSS! Important. коли всередині селектора присутній один і той же властивість більш ніж один раз. У цьому випадку він надходить просто і використовує значення того властивості, яке знаходиться в коді нижче інших, незалежно від того зазначений для нього пріоритет чи ні. Відповідно, якщо спочатку вказати властивість з пріоритетом, а нижче написати його ж, але без пріоритету, то всі браузери виберуть перший варіант, а IE6 - другий. У підсумку маємо валідний, відповідний синтаксису CSS хак для IE6.

Добре, але як же бути, якщо треба застосувати до елементу якесь властивість, яке має спрацювати тільки в IE6, а в інших браузерах воно взагалі не потрібно? Все дуже просто. Спочатку, як зазвичай, пишете це властивість с! Important. але вказуєте у нього значення, яке воно має за замовчуванням, а нижче пишете його ж, але з необхідним вам значенням. От і все. До речі можна вчинити і навпаки, задавши для всіх браузерів потрібне значення властивості, а для IE6 встановити за замовчуванням. Все залежить від того, що вам треба.

Приклад HTML і CSS: хак для IE6 і правило! Important

Хак із застосуванням селектора * html

Приклад HTML і CSS: хак для IE6 і універсальний селектор

Хак із застосуванням дочірнього селектора

IE6 не розуміє дочірні селектори. що є відмінним приводом для створення хака, якщо ми хочемо, щоб він «не бачив» якісь селектори з певними властивостями.

html> body селектор <стили CSS>

Приклад HTML і CSS: хак для IE6 і дочірній селектор

Хак із застосуванням підкреслення або дефіса

Цей CSS хак для IE6, використовує особливість даного браузера розпізнавати властивості CSS, перед якими ставиться знак підкреслення (_) або дефіса (-).

Приклад HTML і CSS: хак для IE6 і властивості з підкресленням або дефісом

CSS хакі для IE6 та IE7

Як і інші браузери, сімейство IE розуміє деякі хакі, відразу декількома версіями. Тут ми розглянемо ті, які підтримують шостий і сьомий Internet Explorer.

Хак із застосуванням CSS expression

Приклад HTML і CSS: CSS expression в IE

Як ви знаєте, IE6 не розуміє властивість CSS min-width. тому в даному прикладі скрипт всередині expression вираховує необхідне значення і підставляє його в властивість width.

Хак із застосуванням символів слеша і зірочки

Якщо перед CSS-властивість поставити слеш (/) або зірочку (*), то зрозуміють його тільки IE6 та IE7, на чому і заснований даний хак.

Приклад HTML і CSS: хак для IE6 та IE7 з слешем і зірочкою

Хак із застосуванням символу!

Якщо через пробіл після значення властивості CSS поставити знак оклику (!), То його не знехтують тільки браузери IE6 та IE7. Ця особливість і послужила для створення хака.

Приклад HTML і CSS: хак для IE6 та IE7 зі знаком!

CSS хакі для IE7

Тут поговоримо про CSS хаках, які розуміє тільки IE7.

Хак із застосуванням універсального і сусіднього селектор

Internet Explorer почав підтримувати сусідні селектори з версії 7.0, проте з цією підтримкою в Microsoft трохи переборщили. Справа в тому, що якщо для створення сусіднього селектора використовувати універсальний селектор і селектор тегів html. то він не повинен працювати, адже у тега не може бути сусідів ( не зараховується). Однак в IE7 таке поєднання працює, що і було використано для чергового хака.

Приклад HTML і CSS: хак для IE7 з універсальним і сусіднім селекторами

Хак із застосуванням універсального і сусіднього селектор +: first-child

Цей хак схожий на попередній, тільки в селектор додався псевдоклас CSS: first-child.

*: First-child + html селектор <стили CSS>

Приклад HTML і CSS: хак для IE7 з псевдоклас CSS: first-child і універсальним і сосоеднім селекторами

CSS хакі для IE8

IE8 вже досить добре підтримує стандарти W3C, проте і в ньому іноді доводиться використовувати хакі, щоб усунути деякі похибки.

Хак із застосуванням ідентифікаторів

Якщо в таблиці стилів поставити поруч (без пробілів) два ідентифікатора. то згідно синтаксису CSS це буде означати, що ми хочемо застосувати стилі до HTML-елементу, який містить обидва цих ідентифікатора одночасно. Але синтаксис HTML не передбачає наявність у одного елемента відразу двох ідентифікаторів (на відміну від класів), тому за логікою речей таке вказівку браузерам треба ігнорувати. І IE8 з цим згоден, тобто він сприймає таку вказівку, як помилку, а ось інші браузери - немає.

А тепер про сам хаке. Якщо в CSS вказати потрібний селектор, а через кому від нього разом написати два ідентифікатора, то IE8 не сприйме подібні стилі і пропустить все, що знаходиться в дужках. Таким чином можна створювати CSS, який зрозуміють всі браузери крім восьмого Експлорера.

Приклад HTML і CSS: хак для IE8 з ідентифікаторами

CSS хакі для IE8 і IE9

Хакі, які одночасно розуміють браузери IE8 і IE9.

Хак із застосуванням символів \ 0 /

Якщо в кінці значення властивості поставити знаки \ 0 /. то всі браузери його пропустять, крім IE8 і IE9.