1

I have a basic website design and for the logo I have created a simple SVG image. This image is very basic and just contains some text, a polyline and a dropshadow effect using feOffset as described in the answer to this question SVG drop shadow using css3 .

The image looks fine when viewed in Chrome and IE10 but I get really rough looking pixelation when viewed in Firefox. I basically want to know if it is possible to add a background image that is dependent on the browser type such that I can create an acceptable image for each browser. i.e. 

if (browser == X)
{ 
   use image Y
}
else
{
   use image Z
}

but only using CSS and/or HTML (I have no knowledge of javascript or jQuery).

Given how basic my image is I cannot believe that I am the only person to have had this problem, so I am wondering how web designers cope with this problem as the only solution I can think of is to create a raster image instead of the SVG but this is something that I really want to avoid if at all possible.

Community
  • 1
  • 1
mathematician1975
  • 21,161
  • 6
  • 59
  • 101

2 Answers2

1

Yes you can, but it's quite hacky. You have to create and target the element in a manner that it can only be read by the specific browser.

Copied and modified from css-tricks.com

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { 
background-image: url(blabla.jpg) }

/* IE7 */
*:first-child+html #dos { background-image: url(blabla.jpg) } 

/* IE7, FF, Saf, Opera  */
html>body #tres { background-image: url(blabla.jpg) }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { background-image: url(blabla.jpg) }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { background-image: url(blabla.jpg) }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { background-image: url(blabla.jpg) }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { background-image: url(blabla.jpg) }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  background-image: url(blabla.jpg) }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background-image: url(blabla.jpg)  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { background-image: url(blabla.jpg)  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { background-image: url(blabla.jpg)  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { background-image: url(blabla.jpg)  }

/* Everything but IE6-8 */
:root *> #quince { background-image: url(blabla.jpg)  }

/* IE7 */
*+html #dieciocho {  background-image: url(blabla.jpg) }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { background-image: url(blabla.jpg) }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { background-image: url(blabla.jpg)  }

Are you not open to doing this through jQuery at all? It'd be much easier that way.

Michelle
  • 2,702
  • 2
  • 23
  • 35
  • Thanks for your answer. I was looking for a CSS / HTML solution, as I don't currently know any jQuery, but if learning it will make this easier then I will start learning. – mathematician1975 Nov 17 '13 at 10:17
0

The window.navigator object contains information about the visitor's browser and using navigator object can set the css using javaScript.

Shailesh
  • 133
  • 1
  • 3