Decor CSS ELO-скилл

[sonyx]

Может кому то из разрабов пригодится, готовая таблица стилей, для генерации значков скилла.
Особенности: никаких фоновых картинок, минимальное кол-во тегов в документе (для вывода в МОТД это критично же).
Заливку можно заменить градиентом при желании, просто не стал делать.
В HTML скил заключаем просто в тег с нужным классом.
Пример:

<div class="skill skill-130">137</div>

skill-*** - минимальный порог скила (0, 60, 75 и т.д.)
на выходе имеем:

если уровень скилла не задан, или задан не верно:


Пример использования: TOP игроков проекта TeamWork

 

[d3m37r4]

Попробовал прикрутить к плагину статистики, в стиме нормально отображается, а на пиратках т.к. там юзается ие6.0 наверно, то псевдоэлементы не работают.

 

[sonyx]

d3m37r4, к сожалению да, псевдо поддерживается с 8 IE

 

[d3m37r4]

sonyx, альтернатив свойствам content, и псевдоэлементу :before нет? чтобы старые ei поддерживали их.

 

[sonyx]

d3m37r4, подумаю как сделать получше)
[doublepost=1497330247,1497327586][/doublepost]

sonyx, альтернатив свойствам content, и псевдоэлементу :before нет? чтобы старые ei поддерживали их.

попробуйте в конец css добавить следующий код, на IE 7 точно завелся, на 6 надо проверять)

/* псевдоэлемент :before Для ИЕ 7 */
     before: expression(function(t,e,c){
       if(!e||!('__content'in e)||!t._before)
       e=t[e?'insertBefore':'appendChild'](t._before=t._before||document.createElement('before'),e);
       if(!('__content'in e)||e.currentStyle.content!==e.__content){
         c=(e.__content=e.currentStyle.content)||'';
         e.innerHTML=c.replace(/^(?:["'](.*)['"]|attr\\((.*)\\)|(.*))$/,
         function(a,b,c){return b||c&&t.getAttribute(c)||''})
       }
     }(this,this.firstChild));

     /* псевдоэлемент :after Для ИЕ 7 */
     after: expression(function(t,e,c){
       if(!e||!('__content'in e)||!t._after)
       t.appendChild(e=t._after=t._after||document.createElement('after'));
       if(!('__content'in e)||e.currentStyle.content!==e.__content){
         c=(e.__content=e.currentStyle.content)||'';
         e.innerHTML=c.replace(/^(?:["'](.*)['"]|attr\\((.*)\\)|(.*))$/,
         function(a,b,c){return b||c&&t.getAttribute(c)||''})
       }
     }(this,this.lastChild));
   }

 

[d3m37r4]

sonyx, попозже проверю, а со свойствами border-radius и content что делать?

 

[sonyx]

sonyx, попозже проверю, а со свойствами border-radius и content что делать?

content поддерживает код, который я скинул последним. С Бордюрами бяда) будет все квадратным)

 

[d3m37r4]

sonyx, подключаемой библиотекой типа PIE не реализовать, ну или код оттуда дернуть, там вроде было что-то со скруглением связанное)

 

[sonyx]

d3m37r4, можно попробовать, но я не уверен, т.к. в пират-КС ослик "кастрированный"
[doublepost=1497331661,1497331389][/doublepost]точно не пройдет вариант, т.к. JS выключен(

 

[d3m37r4]

sonyx,

     before: expression(function(t,e,c){
       if(!e||!('__content'in e)||!t._before)
       e=t[e?'insertBefore':'appendChild'](t._before=t._before||document.createElement('before'),e);
       if(!('__content'in e)||e.currentStyle.content!==e.__content){
         c=(e.__content=e.currentStyle.content)||'';
         e.innerHTML=c.replace(/^(?:["'](.*)['"]|attr\\((.*)\\)|(.*))$/,
         function(a,b,c){return b||c&&t.getAttribute(c)||''})
       }
     }(this,this.firstChild));

Здесь в конце } не хватает по-моему.
[doublepost=1497332506,1497332468][/doublepost]И да, не захотело заводиться оно с этим костыльчиком) осталось без изменений

 

[sonyx]

d3m37r4, уфф, значит CSS expression тоже вырезаны((( бяда(((

 

[fantom]

на пиратках JS не работает. Здесь нужно старым хардкордным методом идти

 

[d3m37r4]

fantom, можно этот самый старый хардкорный метод узреть? Подключение сторонних библиотек и обучение IE распознаванию новых плюшек css ни к чему не привели.

 

[sonyx]

наверное он про картинки бекграундом)

 

[fantom]

fantom, можно этот самый старый хардкорный метод узреть? Подключение сторонних библиотек и обучение IE распознаванию новых плюшек css ни к чему не привели.

стили котрые работали в ишаке 6 (том самом галимом где все лезло) без всевдо-элементов

 

[d3m37r4]

Кстати, вопрос, нет никакого костыля для ие 6, чтобы заменить свойство content? либо его работающий аналог, посмотрел ничего путного не нашел.

 

[sonyx]

d3m37r4, есть костыли через expression, но они будут работать только в полноценном браузере - в КС интегрирован кастрат в полном смысле этого слова)

 

[d3m37r4]

sonyx, ой как с пираточниками сложнааа, приходится от норм решений отказываться)

 

[d3m37r4]

Получилось, что то такое сделать:
Буковку скилла из-за того, что нонстимовский браузер не переваривает псевдоэлементы, пришлось выводить текстом :C

 

[Izmayl7]

Получилось, что то такое сделать: Посмотреть вложение 1332
Буковку скилла из-за того, что нонстимовский браузер не переваривает псевдоэлементы, пришлось выводить текстом :C

WinkDrinks