CSS hack voor Opera, Safari, Chrome en IE7

Ingediend door Donny op za, 13/11/2010 - 13:08

In een eerdere post liet ik zien hoe je een CSS-hack kan schrijven die enkel van toepassing is voor Google Chrome, Safari of Firefox.
Onlangs had ik er eentje nodig voor Opera, na een tijdje te zoeken lukte het me niet om een werkende te vinden die enkel van toepassing was voor Opera. Moest er iemand een werkende weten mag je hem altijd doorgeven.

Wel vond ik er eentje die je kan gebruiken voor Opera, Safari en Chrome, in de eerdere post 'CSS hack voor Google Chrome, Safari of Firefox nodig?' kan je er één terugvinden die enkel van toepassing is voor Chrome en Safari.

Dus door beide te combineren kan je toch enkel Opera beïnvloeden.
Zie onderstaand voorbeeld, in onze CSS hebben we voor alle browsers bv de padding op 14px gezet, maar voor Opera zou dit 13px moeten zijn:

/* Eerste hack is voor Chrome, Safari en Opera */
body:nth-of-type(1) #primaryMenu ul.sf-menu li a {
  padding-bottom: 13px;
}

/* Nu bovenstaande CSS ook van toepassing is voor Opera, kunnen we Chrome en Safari terug op hun originele waardes zetten. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #primaryMenu ul.sf-menu li a {
    padding-bottom: 14px !important;
  }
}
 

Indien je een CSS hack voor IE7 moest zoeken geef ik je deze ook nog graag even mee. Indien je wenst dat je CSS enkel maar leesbaar is door IE7 (of lager) kan je dit realiseren door een asterisk (*) voor de regel te plaatsen, zie onderstaand voorbeeld:

#block li {
  padding: 5px;
  *padding: 6px; /* Enkel voor IE7 */
}

Labels