CSS - returning various values ​​from different browsers

Question

When I use jQuery to capture CSS values ​​for objects, each of the browsers (IE, Mozilla, Chrome, etc.) returns different values.

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

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

Where in Mozilla returns:

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

I have the same problem in other aspects, for example, in the size of the background.

In chrome, it returns:

 50% 50% 

But Mozilla returns:

 50%+50% 

My problem is that I have functions that share CSS (background size), for example based on .split ("") space, but this cannot work on Mozilla because + is used instead.

Is there a way to fix this problem and force browsers to use the same standard?

Is there any function I could write that captures and shares values ​​based on the type of browser the user is using?

Answer 1

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

The workaround is that you should separate or use CSS values ​​based on different browser standards. Like the CSS problem (background-size), you can solve this problem:

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

For CSS (background-image), the solution can be replaced with inverted commas before using it:

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

Try making splits generic for all browsers. Hope this helps.

Answer 2

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

Try adding \+ to RegExp to .split

.split(/\s|\+/)

---

 var res = ["50%+50%", "50% 50%"]; var re = /\s+|\+/; console.log(res[0].split(re), res[1].split(re)); 

Answer 3

This is probably not the cleanest method, but you can run the parser for the background image source and remove any quotes. This would be the most efficient method for parsing the URL of the background image. It should work without damage to the data, since the URL usually cannot contain quotation marks, since they are encoded as %22

As for the background size, you can analyze the results for the + signs and change them to spaces, since the + signs are usually not available as values ​​for any CSS properties, so you should be relatively safe in their output.

In addition, you can check your browser type to make sure that you even have to run these showdowns first. As a precaution, you should also see how Opera and Safari return results, and if they do not differ from each other, you can create branch instructions for parsers that handle different types of CSS values ​​returned by different browsers.

Note. . The analysis methods that I described try to transfer Firefox results to Chrome-style results.

Answer 4

Thanks for the help.

I will share the code I used using!

 cssCommas: function(text) { return text.replace(new RegExp("\"", "g"),""); }, cssPlus: function(text) { return text.replace(new RegExp("\\+", "g"),""); }, cssSplit: function(text,removePercent) { var removeParent = removeParent || false; if(removePercent == true) { text = text.replace(new RegExp("%", "g"),""); } return text.split(new RegExp("\\s|\\+","g")); }, css: function(text) { return this.cssCommas(this.cssPlus(text)); } 

Now works fine in all browsers. Thank you very much.