Listings template for on-line auctions

Question

I am working on an HTML / JavaScript listings template for online auctions. There are two sets of tabbed navigation features in the listing that are driven by JavaScript as well as a dynamic image gallery. Everything appears to be functioning very nicely. The template is fiddled here. (complete project repository here). However, I have one BIG issue I need help resolving and a couple of smaller items I'd like feedback on.

BIG Issue:

This is the showstopper. I am NOT a JavaScript programmer yet, so I don't know how involved of a question this is. Because the template will be used on Ebay, I am restricted to what can be done with JavaScript. The tabs module that I am using (which I forked from here) uses the replace() function in two places:

removeClass: function (element, className) {
    element.className = element.className.replace(new RegExp("(^|\\s)" + className + "(\\s|$)"), "$1");
    if (element.className === " ") {
        element.className = "";
    }
},

and here:

getStyle: function (element, property) {
    if (element.style[property]) {
        return element.style[property];
    }
    if (element.currentStyle) {    // IE.
        return element.currentStyle[property];
    }
    property = property.replace(/([A-Z])/g, "-$1").toLowerCase();    // Turns propertyName into property-name.
    var style = document.defaultView.getComputedStyle(element, "");
    if (style) {
        return style.getPropertyValue(property);
    }
},

Unfortunately, the replace() function is one of the Ebay BANNED JavaScript functions. Is there a replacement or work-around for the replace()? I did find a couple of ideas over on SO here, but I am not sure how to implement them.

Questions:

1. I feel like the CSS is a mess. Is there a tool available that could help streamline CSS and help identify redundant, useless or otherwise inefficient CSS (besides good old fashioned experience, which I am working on)? For instance, I find myself putting a margin:0; or padding:0 quite often.

2. Cross browser compatibility. I am making use of the border-radius style in a couple of places. In the CSS, I have added the prefixes -moz and -webkit for these features. However, looking over at caniuse.com, it looks like support for this feature is pretty high (over 90%). Is it necessary to include these prefixes in the CSS?

3. The image gallery is using the onclick() function to pass name attributess to the preview area whenever a thumbnail is clicked. Because the name attribute is obsolete, this method is preventing the file from validating to HTML 5. Is there a different way this could be done using id attributes instead? I tried simply replacing name with id but that didn't work. Alternatively, I do have a script I can use, but it also requires solving the BIG issue above.

Answer 1

• Big issue: you can create your own replace function as something like a recursive array iterator. It should be quite easy, but there might be some performance drawbacks if used on long strings, but the code above is not the case. Also you probably better off drop the regexp, unless search() function is allowed.
• As of css there are reset stylesheets/boilerplates to start with and there are also preprocessors like sass or less, to help you create a more structured stylesheet.
• Cross browser compatibility is always depending on your target audience, but generally speaking it's enough if you support the last 2 version of all major browsers and try to keep it at least "minimally functional" for the rest if possible.