Добавяне на CSS само за Internet Explorer
Има поне два варианта да се справим с различното интерпретиране на стиловете(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) за зареждане на алтернативни стилове за проблемните браузъри.
March 12th, 2009 at 12:44 pm
Хмм, това не мисля, че е точно най-правилния начин за дефиниране на атрибути конкретно за IE6 или за IE7.
Най-малкото поради това, че по този начин CSS ти не е валидиран
По-правилния начин е следния:
* html div#… { /* IE6 */
…
}
*+html div#… { /* IE7 */
…
}
Добавяш * html (IE6) или *+html (IE7) пред класа, id-то на елемента или тага, за който искаш да добавиш дадени атрибути или да промениш стойностите на вече такива.
Хубавото е, че и css ти остава валиден.
Колкото до условните коментари за зареждане на допълнителни стилове – в общия случай рядко се налага да се пишат чак напълно отделни стилови-файлове за IE-тата, та да се налага да се използват условни коментари за добавянето на алтернативни стилове.
Най-малкото не е толкова удобно за работа, когато се налагат промени да си отворил 3 CSS файла и да непрестанно да местиш между тях за да извършваш необходимите действия, отколкото нещата да си ти в един файл и всичко да следва дадената структура и подредба.
Но разбира се всичко е променливо относно конкретния сайт
March 12th, 2009 at 11:30 pm
Благодарности за споделеното, Миро. Определено ще ми влезе в употреба този начин на писане.
Всъщност не се бях запитвал дали има подобно решение, а една от основните причини, поради които използвам добавянето на стилове с условни коментари е точно валидацията на CSS-а. А относно удобството да работиш само върху един файл вместо върху 2 или 3, то е налице до момента, в който не стане въпрос за някой голям проект и кода във файла набъбне до над 1000 реда. Тогава вече ми е по-прегледно и лесно за ориентиране ако си го разцепя на отделни блокове (например – nav.css за навигацията) и ги импортна в основния CSS файл, а фиксовете за IE да са ми изнесени в отделен файл.
Така, че както каза и ти “всичко е според конкретния сайт”
March 13th, 2009 at 12:23 am
[...] на условните коментари – CSS хаковете (CSS hacks) Още по темата от сайта на Microsoft: [...]