Добавяне на CSS само за Internet Explorer

Square

Има поне два варианта да се справим с различното интерпретиране на стиловете(CSS) от страна на все още най-разпространения браузър – Internet Explorer. Единият е да се използват хакове, които да водят до приемането на различни стойности в стиловете за различните браузъри или техни версии. За целта се използва похват, при който се въвеждат 2 или 3  стойности за едно и също свойство:

div {
margin: 10px;
*margin: 9px; /* for IE 7 */
_margin: 8px; /* for IE6 or less*/
}

Този начин на изписване ще доведе до следния резултат: в по-добрите браузъри(Firefox, Opera, Safari) свойството „MARGIN“ на тагът „DIV“ ще приеме стойност 10px и ще игнорира следващите стойности, тъй като те не са изписани правилно. Версия 7 на IE ще приеме стойност 9px, тъй като по неведоми причини приема символа „*“ преди свойството на HTML елемента за коректно изписване, а същия елемент за верия 6 и по-ниска на IE ще присвои стойност 8px, поради това, че приема изписването със „_“ за правилно.

В следващия пост ще опиша и по-доброто решение – употребата на така наречените условни коментари (conditional comments) за зареждане на алтернативни стилове за проблемните браузъри.

Comment

3 Replies to “Добавяне на CSS само за Internet Explorer”

  1. Хмм, това не мисля, че е точно най-правилния начин за дефиниране на атрибути конкретно за IE6 или за IE7.

    Най-малкото поради това, че по този начин CSS ти не е валидиран 😉

    По-правилния начин е следния:

    * html div#… { /* IE6 */

    }

    *+html div#… { /* IE7 */

    }

    Добавяш * html (IE6) или *+html (IE7) пред класа, id-то на елемента или тага, за който искаш да добавиш дадени атрибути или да промениш стойностите на вече такива.
    Хубавото е, че и css ти остава валиден.

    Колкото до условните коментари за зареждане на допълнителни стилове – в общия случай рядко се налага да се пишат чак напълно отделни стилови-файлове за IE-тата, та да се налага да се използват условни коментари за добавянето на алтернативни стилове.
    Най-малкото не е толкова удобно за работа, когато се налагат промени да си отворил 3 CSS файла и да непрестанно да местиш между тях за да извършваш необходимите действия, отколкото нещата да си ти в един файл и всичко да следва дадената структура и подредба.

    Но разбира се всичко е променливо относно конкретния сайт 😉

  2. Благодарности за споделеното, Миро. Определено ще ми влезе в употреба този начин на писане.
    Всъщност не се бях запитвал дали има подобно решение, а една от основните причини, поради които използвам добавянето на стилове с условни коментари е точно валидацията на CSS-а. А относно удобството да работиш само върху един файл вместо върху 2 или 3, то е налице до момента, в който не стане въпрос за някой голям проект и кода във файла набъбне до над 1000 реда. Тогава вече ми е по-прегледно и лесно за ориентиране ако си го разцепя на отделни блокове (например – nav.css за навигацията) и ги импортна в основния CSS файл, а фиксовете за IE да са ми изнесени в отделен файл.

    Така, че както каза и ти „всичко е според конкретния сайт“ 🙂

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *