CSS3 в приложении Facebook

Question

это не работает в приложении facebook?

q:before { content: '\00AB';   color: #FF0000; }
q:after { content: '\00BB';  color: #FF0000; } 

Answer 1

Если вы создаете приложение FBML, то да, ваш CSS будет фильтроваться через серверы рендеринга контента Facebook. Они делают это со всеми страницами FBML и ссылочными ресурсами, чтобы префиксировать все ваши элементы HTML / CSS / JS «пространством имен», созданным с использованием идентификатора вашего приложения. Это гарантирует, что ваш CSS не сможет связываться с основными макетами Facebook.

К сожалению, их CSS-фильтры, похоже, запрещают некоторые CSS. Например, я обнаружил, что все специфичные для Firefox правила CSS, такие как -moz-border-radius: 3px, работают нормально, но соответствующие -webkit-border-radius: 3px не работают . Очень раздражает.

Мое предложение - найти переписанный файл CSS и посмотреть, что они с ним сделали. Вам нужно просмотреть исходный текст на своей странице FBML и найти файлы CSS, обычно они поступают из http://external.ak.fbcdn.net/fbml_static_get.php со строкой запроса, которая будет выглядеть как фактический источник. Проверьте свой CSS-файл, и вы увидите, как он был переписан ... Я думаю, что раньше я использовал правило content:, так что, возможно, он каким-то образом очищается.

Answer 2

Если вместо кавычек отображаются вопросительные знаки, это обычно означает, что у вас проблема с кодировкой. Упомянутое мной шестнадцатеричное содержимое является частью \ 00AB. Это шестнадцатеричный эквивалент угловой кавычки, иначе называемой & laquo; или «... показывает«

»

Попробуйте это:

q:before { content: 'test';   color: #FF0000; }

Чтобы убедиться, что нормальное текстовое содержимое работает нормально, следует вставить слово «тест».

Я немного поиграл с этим, и у меня, похоже, были проблемы с шрифтом, который я использовал, когда я переключился на arial, он вдруг начал работать, так что вы можете попробовать это. Если это работает, вам не нужно менять шрифт для всего, просто q: before и q: after