Safari 4 Beta CSS Hacks

Tom — Wed, 25 Feb 2009 14:34:53 +0000

It is innevitable that sooner or later you will have some display issue in Safari that you just can’t seem to fix without weirding out the other browsers. This, for me, is not very common at all but it does occasionally happen so previously with Safari 3 the way I commonly used to target Safari only was to do this.

	/*\*/
	html*div.focusdiv div#tcontent div.subdiv{
		position: relative;
		left: -3px;
	}
	/**/

Well in the newest Safari release, version 4, this doesn’t work anymore. So what if we need to target something now? Well luckily enough there is still a way to target Safari only and as an added bonus it actually looks a lot nicer than the current method.

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    div.focusdiv  {
		width: 400px;
	}
    div.focusdiv div#tcontent div.subdiv {
		position: relative;
		left: -3px;
	}
  }

That is pretty much it, to provide credit to the authors, the first method was called the Stokely Hack and the second method is from this site.

Ashevile Web Design and Computer Networking :: Applied Solutions Group » safari 3

Safari 4 Beta CSS Hacks