Переключатель стилей CSS отключен в Safari 5.1

Question

На моей веб-странице есть переключатель стиля CSS на основе jQuery.Когда я обновил браузер до Safari 5.1, этот скрипт перестал работать.Я оглянулся и увидел эту яблочную страницу обсуждения, и причина была в том, что в Safari 5.1 были отключены альтернативные таблицы стилей.Может ли кто-нибудь помочь мне обойти эту проблему?Я не программист, поэтому я не могу понять это.

Страница автора http://www.kelvinluck.com/assets/jquery/styleswitch/toggle.html

(function($)
{
    $(document).ready(function() {
        $('.styleswitch').click(function()
        {
            switchStylestyle(this.getAttribute("rel"));
            return false;
        });
        var c = readCookie('style');
        if (c) switchStylestyle(c);
    });

    function switchStylestyle(styleName)
    {
        $('link[rel*=style][title]').each(function(i) 
        {
            this.disabled = true;
            if (this.getAttribute('title') == styleName) this.disabled = false;
        });
        createCookie('style', styleName, 365);
    }
})(jQuery);

Answer 1

Найдена ссылка на скрипт jQuery, который работает с Safari 5.

http://electrokami.com/coding/jquery-style-sheet-switcher-with-preview/

Answer 2

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

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

(function($)
{
  $(document).ready(function() {
    $('.styleswitch').click(function() {
      switchStylestyle(this.getAttribute("rel"));
      return false;
    });
    var c = readCookie('style');
    if (c) switchStylestyle(c);
  });

  function switchStylestyle(styleName)
  {
    linktag = $('link[rel*=style][title=theme]');
    linktag.attr('href', styleName);
    createCookie('style', styleName, 365);
  }
})(jQuery);

Чтобы использовать его сейчас, вам нужно вставить тег с заголовком «theme», который указывает на вашу тему по умолчанию:

<link rel="stylesheet" type="text/css" title="theme" href="light.css"/>

Когда вы щелкаете ссылку с классом "styleswitch", он устанавливает атрибут href для "theme" равным атрибуту "rel" тега , по которому щелкнули:

<a href="#" rel="dark.css" class="styleswitch">Switch to dark stylesheet</a>

Answer 3

После поиска в SO и в Интернете меня не порадовало ни одно из решений.Поэтому я предложил новое решение, которое работает в chrome, ff, т.е. и safari и safari на старом ipad:

Первые стили набора:

<link rel="stylesheet"              href="./codebase/touchui.css"       data-title="default"        type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/ios.css"           data-title="ios"                type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/jq.css"            data-title="jq"                 type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/sky.css"           data-title="sky"                type="text/css" media="screen" charset="utf-8">
<link rel="alternate stylesheet"    href="./codebase/green.css"         data-title="green"          type="text/css" media="screen" charset="utf-8">

Обратите внимание на атрибут "data"-title "это пользовательский атрибут.

Затем используйте эту функцию для изменения таблицы стилей (обратите внимание, что она установлена ​​в области приложения, вы можете сделать ее стандартной функцией:

app = {}

app.styleSet=function(title) {
  var i, a
  var o;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) 
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute('data-title') ) {
      if (a.getAttribute('data-title') == title) 
        o = a

      a.setAttribute("rel", "alternate stylesheet");          // the order here is important
      a.disabled = true
      a.setAttribute("title", a.getAttribute('data-title'));
  }

  o.setAttribute("title", undefined);                         // the order here is important
  o.disabled = false
  o.setAttribute("rel", "stylesheet"); 
  //app.cookieCreate("style", title, 365);
}