Czy znasz ten trick w CSS?
by frycu on Nov.28, 2008, under Cross Browsing, CSS
Jakiś czas temu odkryłem ten malutki trick i uważam że jest bardzo ciekawy (jak i użyteczny), dlatego z chęcią dzielę się nim z wami. Gdy mam do czynienia z crossbrowsing-iem, zazwyczaj używam wyrażenia IF w HTML-u które odwołuje się do odpowiedniego CSS-a, w zależności pod jaką przeglądarką wyświetlana jest strona. I tak znalazłem trick który umożliwia trzymać wszystkie atrybuty w klasach oraz id, wszystko jest łatwo znaleźć i edytować wedle potrzeb.
Trick polega na tym, że możecie użyć hasz-a (#) i podkreślenia dolnego ( _ ), aby wykomentować atrybuty dla IE7, IE6 czy FireFoxa.
FireFox widzi “#” i “_” jako komentarze, Internet Explorer 6 za komentarz uznaje “#”, natomiast Internet Explorer 7 komentuje jak przed atrybutem znajdzie się “_”. Więc jeśli napiszesz swój kod CSS tak jak to jest na przykładzie, “zadowolisz” wszystkie trzy przeglądarki. Jest to świetna metoda, aby pogodzić padding i margin, odkąd FireFox i Internet Explorer definiują je po swojemu.
Przykład:
#div {
padding: 0px 0 10px 20px; /* Wszystkie przeglądarki to widzą */
#padding: 0px; /* FireFox nie zobaczy tego, ale IE7 & IE6 tak */
#margin: 10px 0 0 20px; /* FireFox nie zobaczy tego, ale IE7 & IE6 tak */
_margin: 10px 0 0 30px; /* FireFox & IE7 nie zobaczą tego, ale IE6 tak */
}
Nie testowałem tego jeszcze pod Operą i Safari (wkrótce to zrobię), ale pod FF i IE działa bardzo dobrze. Enjoy! :).