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