sIFR3: управление стилями a и a: hover внутри заменено с помощью CSS, а не JS

Для изящной деградации и минимального кодирования для функции sIFR на моих веб-сайтах я хотел бы как можно больше определять стили в CSS. Вот что я делаю:

• Определите тег H3, который нужно заменить на sIFR3.

• H3 поставляется в разных цветах с помощью CSS в зависимости от контейнера, например:

body.blue-txt h3{ color: #009CDA; }
body.white-txt h3{ color: #FFFFFF; }
body.yellow-txt h3{ color: #FFFF00; }
body.etc....

• H3 может содержать якорь (я осведомлен о семантических проблемах, но в данный момент все обстоит именно так ... извините)

С настройкой:

sIFR.useStyleCheck = true;

Я думал, что sIFR3 покажет замененный нормальный текст H3 с правильным цветом из моей таблицы стилей CSS. Пока все хорошо: я могу настроить, например, синий текст в sifr-config.js с помощью параметра css для sIFR.replace ():

sIFR.replace(futura, {
  selector: 'body.blue-txt h3',
  css: 'a {color: #009CDA; }, a:hover { color: #009CDA; text-decoration: underline; }'
});

Но это нужно было бы закодировать для каждого цвета текста в моих заменах sIFR как в JS, так и в CSS. Поэтому я бы хотел, чтобы параметр sIFR.useStyleCheck просто уважал CSS в sifr-config.css, например:

body.blue-txt h3{ color: #009CDA; }
body.blue-txt h3 a{ color: #009CDA; }
body.blue-txt h3 a:hover{ color: #009CDA; text-decoration: underline; }

Только это, похоже, не работает ... текст ссылки продолжает появляться как # 0000FF, а курсор не подчеркивается. Это просто Not A Feature (Yet), или я что-то не так делаю?


javascript html css sifr
person Community    schedule 18.03.2010    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Похоже, что эта ветка v2.0 - то, что вам нужно.

http://webdesign.maratz.com/lab/multi_color_sifr/

Другая возможность - FLIR - замена изображения

http://facelift.mawhorter.net/example-pages/facelift/facelift-links.html

person Zac    schedule 18.03.2010
comment
sIFR 2 ужасно устарел. Не подходи к нему. - person Mark Wubben; 19.03.2010

arrow_upward
0
arrow_downward

Если я могу предложить, почему бы не использовать @ font-face? Большинство людей к настоящему времени обновилось до Firefox 3+, и в браузерах WebKit (Safari, Chrome и т. Д.) Он реализован уже некоторое время, и даже IE5.5 + поддерживает @ font-face. Это решит вашу проблему: hover и будет более семантическим и логичным, а также намного быстрее, но еще лучше без Flash! ;)

Но, честно говоря, @ font-face будет лучшим вариантом, если вы специально не нацеливаетесь на ‹IE 5.5, Firefox 2-1 или более ранний WebKit. По всей вероятности, вы должны привлечь более 90% посетителей вашего настольного браузера с помощью ваших пользовательских шрифтов.

person Oscar Godson    schedule 18.03.2010
comment
хороший момент, но нам придется подождать, чтобы провести рефакторинг этого CSS с помощью @ font-face; это существующий веб-сайт, на котором были небольшие проблемы с реализацией sIFR. Но для новых сайтов это, безусловно, подходящее решение. - person ; 19.03.2010

arrow_upward
0
arrow_downward

useStyleCheck не влияет на цвет во Flash-ролике. Вам нужно указать все стили (кроме размера шрифта) в sIFR.replace() аргументах.

Теперь вы можете использовать обратный вызов modifyCss для обновления применил CSS на основе текущего стиля заменяемого элемента. Однако вам нужно запрограммировать это самостоятельно.

person Mark Wubben    schedule 18.03.2010
comment
да, я вижу, что в моем приведенном выше коде есть неработающий пример, рекламируемый как рабочий, я изменю текст. Я не уверен, что modifyCss () делает то, что мне хотелось бы. Нельзя ли использовать атрибут CSS color из моей таблицы стилей автоматически (например, размер шрифта IS) вместо того, чтобы принудительно использовать его через аргумент css в sIFR.replace ()? - person ; 19.03.2010
comment
Конечно, может, но есть и другие свойства CSS, которые вы можете указать там, которые нельзя поднять из CSS браузера. Отсюда и решение ничего не поднимать. - person Mark Wubben; 19.03.2010