Проблема с расширением Safari: приоритет CSS - PullRequest
Новая
       26

Проблема с расширением Safari: приоритет CSS

0 голосов
/ 16 апреля 2019

Я обнаружил проблему с тем, как Safari отдает приоритет CSS между CSS, включенным в HTML-страницу, и CSS с внедренным содержимым.Я создал минимально воспроизводимую витрину и загрузил ее на GitHub.

Проблема заключается в следующем: CSS с внедрением расширений отменяется правилами CSS более низкой иерархии самого веб-сайта.На этом скриншоте правило div{} находится в CSS веб-сайта, а правило div.hello{} объявлено в CSS содержимого расширения Safari и внедрено Safari.

Результат: Элемент div в HTML красный, а не синий. На снимке экрана показано, что Safari использует div{} с более высоким приоритетом над div.hello{}.Обратите внимание, что initial правила добавляются Safari автоматически.Контент CSS не содержит такого объявления.

enter image description here

Пожалуйста, посмотрите минимальный пример здесь или репозиторий GitHub, который я создал для минимального воспроизводимого примера: https://github.com/MikeSpock/safari-extension-css-bug

Как создать стабильный CSS для разметки, которую я добавляю на веб-сайты через свое расширение Safari, видя, что каждый CSS на веб-сайте отвергает CSS из расширения? Это не так, как в ChromeНапример, расширение работает, как и следовало ожидать, правильно обрабатывая приоритеты CSS.

Пример минимального жизнеспособности:

showcase.safari.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <base href="./">
    <link rel="stylesheet" href="./showcase.safari.css">
</head>
<body>
<div>
    This should have a red background.
</div>
<div class="hello">
    This should have a green background.
</div>
</body>
</html>

showcase.safari.css

div{
    background:red;
}

showcase.safariextension/content.css

Это CSS, введенный через расширение Safari 

div.hello {
    background:green;
}

showcase.safariextension/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Builder Version</key>
    <string>13607.1.40.1.5</string>
    <key>CFBundleDisplayName</key>
    <string>safari-extension-css-bug</string>
    <key>CFBundleIdentifier</key>
    <string>com.yourcompany.safari-extension-css-bug</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>Content</key>
    <dict>
        <key>Stylesheets</key>
        <array>
            <string>content.css</string>
        </array>
    </dict>
    <key>ExtensionInfoDictionaryVersion</key>
    <string>1.0</string>
    <key>Permissions</key>
    <dict>
        <key>Website Access</key>
        <dict>
            <key>Include Secure Pages</key>
            <true/>
            <key>Level</key>
            <string>All</string>
        </dict>
    </dict>
</dict>
</plist>

Добавьте папку showcase.safariextension в качестве расширения Safari через Safari Extension Builder и откройте showcase.safari.html для минимального примера.

1 Ответ

0 голосов
/ 25 апреля 2019

Я нашел обходной путь, который был достаточно хорош для меня, и, возможно, хороший общий подход при разработке расширений.

Измените все свои HTML-теги , которые вы генерируете в своем скрипте контента, например

  • DIV
  • a

и другие для пользовательских тегов , чтобы они никогда не вступали в противоречие с собственными определениями стиля сайта:

  • Adiv
  • аа

Тогда вы можете убедиться, что запускаете свои стили с нуля, и ничто не будет переопределено.

...