CSS - returning different values from different browsers

Question

When I am using jQuery to grab CSS values for objects, each of the browsers (IE, Mozilla, Chrome, etc) returns different values.

For example, in Chrome, a background image (.css("background-image")) returns:

url(http://i41.tinypic.com/f01zsy.jpg)

Where in Mozilla, it returns:

url("http://i41.tinypic.com/f01zsy.jpg")

I am having the same problem on other aspects, such as background-size.

In chrome it returns:

50% 50%

But Mozilla returns:

50%+50%

My problem with this is, I have functions that split the CSS (background-size), for example based on a space .split(" "), but this could not work on Mozilla because it uses a + instead.

Is there any way that I can fix this problem and make the browsers to use one standard?

Is there any function that I could write which grabs and splits values, based on the type of browser the user is using?

Answer 1

My problem with this is, I have functions that split the CSS (background-size), for example based on a space .split(" "), but this could not work on Mozilla because it uses a + instead.

Try adding \+ to RegExp passed to .split

.split(/\s|\+/)

---

var res = ["50%+50%", "50% 50%"];

var re = /\s+|\+/;

console.log(res[0].split(re), res[1].split(re));

Answer 2

Different browsers use different CSS standards and you may have to write a full-blown parser to make them one standard.

Workaround is that you should split or use CSS values taking into account the different browsers standards. Like the CSS(background-size) problem can be solved using this:

space.split("\\s|\\+"); //split my string where it either has a space 'or' a plus sign

For CSS(background-image), the solution may be to replace the inverted commas before using it:

space.replace("\"", "");

Try to make the splits generallized for all browsers. Hope that helps.

Answer 3

This probably isn't the cleanest method, but you could run a string parser for the background image source and delete any quotation marks. This would be the most efficient method for parsing the background image URL. It should work without harming the data because URL's typically can't contain quotation marks, as they are encoded as %22

As for the background-size, you could parse the results for + signs and change those to spaces, as + signs typically aren't present as the values for any CSS properties, so you should be relatively safe in taking those out.

In addition, you could check the browser type to see if you'd even have to run these parsings in the first place. As a precaution, you should also see how Opera and Safari return results, and if those are any different, you could create branch statements for the parsers that handle the different types of CSS values returned by the different browsers.

Note: The parsing methods I have described attempt the goal of converting the Firefox results to the Chrome-style results.