How to Prevent My CSS From Clashing With Facebook's CSS?_问答_开发者

I have the following HTML on my page:

<div id="mypanel">
   <span>SomeText</span>
   <span>SomeText2</span>
   <span>SomeText3</span>
   <span>SomeText4</span>
   <fb:login-button ..snip.. />
</div>

You can see there i have some Facebook Markup Language (FBML) for the Login button.

Which get's rendered as:

<span id="RES_ID_fb_login_text" class="FBConnectButton_Text">Login with Facebook</span>

Now, Facebook have the following CSS Selector in their CSS: ".FBConnectButton_Text" to style the FB Connect Button. Fine.

But, my issue is, im trying to style other items (my elements) around that, which is causing the Facebook Controls to be styled incorrectly.

In the above example (which is greatly simplified of course), i want to style all <span> elements in the <div> called "mypanel", so i write the following CSS:

#mypanel span
{
    font-weight: bold;
    font-size: 14px;
}

And what happens? Well, the Facebook Connect button is getting these styles applied to it also (bad).

I would think they would have a "reset"-style 开发者_如何转开发CSS sheet which would specifically set these font's to their needs (like we do on our site).

So i end up having to apply classes to all my spans to avoid Facebook controls getting messed up. Considering i have these FB controls all over my site, it's quite a pain to "work around" Facebook.

Can you guys think of a better way to handle this?

Try overriding the original styles, with either more specificity or the !important statement:

#mypanel span{
    font-weight: bold;
    font-size: 14px;
}

#mypanel span.facebook { /* Not sure what classes the FB button uses */
    font-size: 12px;
    font-weight: normal;
}

.facebook {
    font-size: 12px !important;
    font-weight: normal !important;
}

Or, if you can live with the lack of browse support, use the :not pseudo-selector.

#mypanel span:not(.facebook) {
    font-weight: bold;
    font-size: 14px;
}

This will simply give you all the non-Facebook spans. If you can use Javascript, scripts like IE9.js will also give you :not support for IE 6+.

Dont style the tags themselves, style classes applied to your tags (spans etc)

<div id="mypanel">
   <span class="spanClass">SomeText</span>
   <span class="spanClass">SomeText2</span>
   <span class="spanClass">SomeText3</span>
   <span class="spanClass">SomeText4</span>
   <fb:login-button ..snip.. />
</div>

then your css would become:

#mypanel .spanClass
{
    font-weight: bold;
    font-size: 14px;
}

You dont have to create individual classes, just something to separate your classes from facebook ones. For example you could add a three letter identifier (your companies initials or your own initials) and style everythign using them.

If you add rules to exclude/include anything then you rely on facebook not making any changes to their styles or markup. As soon as they add new classes/style sheets you're going to have to revisit yours.

A final alternative is add a secondary div around the content, which excludes the FBML and then style all items within that.

<div id="mypanel">
   <div id="myWrapper"> 
       <span class="spanClass">SomeText</span>
       <span class="spanClass">SomeText2</span>
       <span class="spanClass">SomeText3</span>
       <span class="spanClass">SomeText4</span>
   </div>
   <fb:login-button ..snip.. />
</div>

then your css would become:

#myWrapper span
{
    font-weight: bold;
    font-size: 14px;
}

Add unique namespacing to body tag or any of top parent tag that you have access of. For example

<body id="__someAppname">

<div id="__someAppname">

in all your CSS append this id, for example, __someAppname

#__someAppname {
 /* reset all your default css */ 
 padding:0;
 margin:0;
}

from .product{} to #__someAppename .product{}

There is a simple but not-elegant way of doing it.

1) Save the css from FB on a local file, load your stylesheet and as the LAST ONE load the fb css you saved.

OR

2) Also, you can just move the reset elements to be applied using jquery and avoiding the FB elements by using the selector :not

<script language="javascript">
    $("span:not([class^=FB])").css('background-color','#F00');
</script>

Im not saying you should show it arround, but it might do the work.

How to Prevent My CSS From Clashing With Facebook's CSS?

OR

精彩评论

关注公众号

热门标签

图文推荐

How to Prevent My CSS From Clashing With Facebook's CSS?

OR

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：