Question

want to add simple facebook “like” module to my site.
im using code generated from facebook developer site
added this right after opening body tag:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

and later inside the page:

<div class="fb-like" data-href="my site url here" data-send="false" data-width="550" data-show-faces="false"></div>

it seems to work fine except this code is giving me many css/js warnings that i see in the firebug like:

unknown property „-moz-border-radius”, unknown property: "moz-outline-style.3",[],function(a,b,c,d,e,f){(function(){var g={}.toString,h,i,j,k=e.exports={},l...

there are many such errors.

Do you know how to fix this? the whole page seems to work fine but i don’t like to have this kind of issues on my page.
im using jquery inside this page also so maybe this cause some problems?

Answer 1

Those errors you’re getting are because there are some CSS properties that need to be defined in more than one form, in order to maximize compatibility with different browsers.

These additions to standard declarations are called vendor prefixes. For more info, you might want to take a look at this article: little link.

For instance, take the following CSS:

.roundcorners {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

-moz-border-radius is for olders version of Firefox, the newer ones support border-radius. -webkit-border-radius is for WebKit-powered browsers (Chrome, Safari).

In other words, there’s no way to avoid having those errors as long as you want the like button to work in most modern browsers.

Note: that when a browser sees an unknown property/rule, it ignores the declaration, so as long as your rules are ordered properly, then this is harmless.