Как предотвратить столкновение моего CSS с CSS Facebook? - PullRequest
Новая
       2

Как предотвратить столкновение моего CSS с CSS Facebook?

1 голос
/ 01 сентября 2010

У меня есть следующий HTML-код на моей странице: 

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

Вы можете видеть там, у меня есть некоторый язык разметки Facebook (FBML) для кнопки входа в систему.

, который отображается как:

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

Теперь Facebook имеет следующий CSS-селектор в своем CSS: «.FBConnectButton_Text» для стилизации кнопки подключения FB.Хорошо.

Но моя проблема в том, что я пытаюсь стилизовать другие элементы (мои элементы) вокруг этого, что приводит к неправильному стилю элементов управления Facebook.

В приведенном выше примере (которыйконечно, значительно упрощен), я хочу стилизовать все элементы <span> в <div>, называемые «mypanel», поэтому я пишу следующий код CSS: 

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

И что происходит?Ну, кнопка Facebook Connect также применяет эти стили (плохо).

Я бы подумал , что у них будет лист CSS в стиле "сброс", который будет специально устанавливать эти шрифты в соответствии с их потребностями (как мы делаем на нашем сайте).

Поэтому я вынужден применять классы ко всем своим пролетам, чтобы избежать путаницы с элементами управления Facebook.Учитывая то, что у меня есть эти элементы управления FB по всему сайту, довольно сложно «обойти» Facebook.

Можете ли вы, ребята, придумать лучший способ справиться с этим?

Ответы [ 4 ]

1 голос
/ 01 сентября 2010

Попробуйте переопределить оригинальные стили, добавив больше специфичности или оператор !important: 

#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;
}

Или, если вы можете жить без поддержки просмотра, используйте псевдоселектор :not. 

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

Это просто даст вам все не-Facebook span s. Если вы можете использовать Javascript, такие скрипты, как IE9.js также предоставят вам :not поддержку IE 6+.

0 голосов
/ 01 сентября 2010

Существует простой, но не элегантный способ сделать это.

1) Сохраните CSS из FB в локальном файле, загрузите таблицу стилей и, как ПОСЛЕДНЮ, загрузите сохраненную вами FB CSS.

ИЛИ

2) Кроме того, вы можете просто переместить элементы сброса, которые будут применены, используя jquery и избегая элементов FB, используя селектор: not 

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

Я не говорю, что вы должны показать его вокруг, но это может сработать.

0 голосов
/ 01 сентября 2010

Добавление уникального пространства имен в тег body или любой из родительских тегов верхнего уровня, к которым у вас есть доступ. Например 

<body id="__someAppname">

или 

<div id="__someAppname">

во всех ваших CSS добавьте это id, например, __someAppname

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

от .product{} до #__someAppename .product{}

0 голосов
/ 01 сентября 2010

Не стилизуйте сами теги, классы стилей, примененные к вашим тегам (пролетам и т. Д.) 

<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>

, тогда ваш CSS станет: 

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

Вам не нужно создавать отдельные классыпросто что-то, чтобы отделить ваши классы от фейсбука.Например, вы можете добавить трехбуквенный идентификатор (инициалы вашей компании или ваши собственные инициалы) и использовать их для каждого стиля.

Если вы добавляете правила для исключения / включения чего-либо, то вы полагаетесь на Facebook, не внося никаких изменений в ихстили или разметка.Как только они добавят новые классы / таблицы стилей, вам придется пересмотреть свои.

Последняя альтернатива - добавить вторичный div вокруг содержимого, который исключает FBML, а затем стилизовать все элементы в нем.

<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>

тогда ваш css станет: 

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