Question

Im writing Userscript for one page. It is working under chrome.
On that page are same elements that have rounded corners in firefox. I want to fix it so that those element will have rounded edges in google chrome.

I just want to replace Firefox syntax with chrome syntax in all linked CSS style sheets.
What is the best way to do it?

I’m using jquery.

Answer 1

This is not a trivial thing to do with a userscript.

The smartest thing to do would be to install something like Stylish and use it to override the styles you really want.

---

The difficulties with trying to do this with a userscript are:

1. You can’t use getComputedStyle(), because this only returns parsed, applicable styles. You won’t see “-moz” styles in Chrome nor “-webkit” styles in Firefox.

2. Likewise, document.styleSheets also only shows parsed style rules with alien-browser-specific rules filtered out.

3. You would have to parse the raw, CSS source-text. That is the textContent of every <style> and the AJAXed-in text obtained by following the href of every "text/css" <link>.

   This can get tricky and don’t even think about using RegEx if you want the solution to be robust at all.

4. Cross-domain restrictions will also hamper fetching the <link> text, but this can be reduced by using GM_xmlhttpRequest().

5. Once the raw CSS is parsed, then and only then can you go about overriding select CSS rules like so:

   Change Mozilla                      To CSS3                        
   ------------------------------      --------------------------
   -moz-border-radius-topright         border-top-right-radius     
   -moz-border-radius-bottomright      border-bottom-right-radius  
   -moz-border-radius-bottomleft       border-bottom-left-radius   
   -moz-border-radius-topleft          border-top-left-radius      
   -moz-border-radius                  border-radius