Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   [решено] Разукрашивание сайтов по-своему, подменой CSS и Классов (http://forum.oszone.net/showthread.php?t=73156)

hasherfrog 19-10-2006 09:43 499925
Разукрашивание сайтов по-своему, подменой CSS и Классов
 
Здравствуйте. Речь пойдёт о Firefox и её возможностях.
Требуется помощь специалиста по классам и стилям.

Вот такой я букмарклет когда-то написал:
Код:
javascript:(function(){var i,x,o,r,nw;nw=window.open('','css','');nw.document.open();nw.document.writeln('@-moz-document url-prefix(%22http://'+document.location.host+'/%22) {<br>');for(i=0;i<document.styleSheets.length;i++){try{x=document.styleSheets[ i];r=x.cssRules;}catch(e){r=null;alert('Oops. Access denied.');}if(!r)continue;for(j=0;j<r.length;j++){o=r[j].cssText;if(o.indexOf('rgb')==-1)continue;nw.document.writeln(o.replace(/\);/g,') !important;')+'<br>');}}nw.document.writeln('}<br>');nw.document.close();})()
UPD: Это уже поправленный букмарклет со второй страницы, в конце темы

Он выводит в окошко список стилей CSS для текущего открытого сайта (точнее, страницы, но как правило, на форумах и сайтах используются общие CSS) и для каждого стиля помечает цвет специальным словом "!important". Зачем это всё?

Открываете файл C:\Documents and Settings\ИмяПользователя\Application Data\Mozilla\Firefox\Profiles\ВашПрофиль\chrome\userContent.css
Копируете текст из открытого окна со стилями в конец файла, удаляете ненужное, правите цвета, как Вам хочется - и сайт открываться будет в приятной для Вас расцветке.

На самом деле, этот букмарклет - лишь вторая часть из более серьёзного проекта :] "раскрась свой форум по своему вкусу". И использовать его с толком смогут только продвинутые пользователи :] К ним у меня как раз вопрос.

Как видно, затрагивается только CSS. Но есть куча сайтов, где используются какие-то классы. Например, берём осзоновскую головную страницу.
HTML код:
<td class="alt1Active" id="f39" align="left" width="47%">
                <div>
                        <a href="forum-39.html"><strong>Новости железа</strong></a>                </div>
                <div class="smallfont">Новости из мира аппаратного обеспечения</div>
        </td>
Видим нечто вида /div class="smallfont"/
Вот это класс через подмену CSS не изменяется.
Или изменяется всё-таки? Как быть?
Можно ли заменить что-то в таблице стилей, чтобы повлиять на класс?

Prisoner 19-10-2006 12:56 500010
Цитата:
Вот это класс через подмену CSS не изменяется.
Имеется ввиду редактированием userContent.css? У меня :) получилось изменить следующим образом
Код:
td.alt1Active
{
 background-color: red !important;
}
Класс это некий набор стилевых описаний который применяется к тому или иному элементу. Существуют несколько способов записи классов. Самые распространенные:
Цитата:
.className - к любому элементу при записи в его теле class="className" будут применены стили описанные внутри класса.
element.className - только к элементу element при записи в его теле class="className" будут применены стили описанные внутри класса.
В вышеприведенном примере класс alt1Active окажет влияние только на элементы ячеек. Даже если класс будет применен к таблице или же к div, то при такой записи его стилевые описания будут проигнорированы.

hasherfrog 19-10-2006 13:05 500020
А как тогда его достать? CSS я вытягиваю через document.styleSheets, а классы?

Prisoner 19-10-2006 13:48 500033
Чую какое-то непонимание или в терминах, или более общего порядка :).
Букмарклет по сути выдает содержимое прикрепляемого css файла (в случае осзоны это что-то вроде http://forum.oszone.net/clientscript...13f6-00006.css). Т.о. список классов есть. Что же требуется?

hasherfrog 19-10-2006 13:52 500036
>> по сути выдает содержимое прикрепляемого css файла
Не совсем так, по-моему. Это "пожёваный браузером" .css-файл, причём там некоторых стилей нет почему-то.
Но дело не в этом.

Стиля "td.alt1Active" нет ни там, ни в листинге, выводимом моём букмарклете! Он-то откуда? Из css-файла? Нет. Как этот класс подцепить из javascript'а?

ivank 19-10-2006 14:07 500047
hasherfrog
можно привязаться к мозиле (хотя, может, это и стандартная функция. не знаю). Тогда можно будет с помощью XPath/XQuery через document.evaluate получить все теги, у которых установлен атрибут class. Если уж привязываться к мозиле (и опере), то можно офорсить перераскраску в виде greasemonkey/user.js скрипта, что бы она автоматически срабатывала. Да и не только раскраску так можно реализовать.

hasherfrog 19-10-2006 14:31 500058
ivank
>> о можно офорсить перераскраску в виде greasemonkey/user.js скрипта
Да, но через userContent.css получается вроде как ближе и правильнее, потому что не надо устанавливать greasemonkey.

>> XPath/XQuery через document.evaluate получить все теги
Круто. Я так не умею. Это в смысле перебрать все-все теги внутри html на наличие атрибута class?
А где всё-таки эти class определены-то? Например, на этом вот форуме? Я их не вижу чего-то, но они вовсю используются :-/

ivank 19-10-2006 14:54 500068
hasherfrog
Может они вообще не определены. У нас такое вполне может быть :)

Prisoner 19-10-2006 15:09 500074
На этом форуме классы, в частном случае alt1Active, определены в css файле:
Код:
.alt1, .alt1Active
{
background-color: #F5F9FE;
color: #000000;
}
Данная запись читается следующим образом: для любых элементов с class="alt1Active" или class="alt1" установить такие-то и такие-то свойства. По сути это описание создает два одинаковых класса с разными именами. Однако потом один из них может расширен, чего в случае нашего форума, правда, на первый взгляд, не делается :).

Обойти все элементы можно и иначе: elements = (document.all) ? document.all : document.getElementsByTagName("*"); Здесь elements - коллекция всех элементов документа. Циклом по ним и смотрим в свойство className - значение атрибута class элемента.

hasherfrog 19-10-2006 16:27 500123
Кое-что прояснилось, спасибо.

Тогда такой вопрос. Почему на некоторых сайтах получить список CSS не получается? Например, букмарклет глохнет на mail.ru

/* Кстати, инфа из userContent.css перебивает изменённые букмарклетами цвета.
То есть, ВИДИМО, стили, применённые greasemonkey, окажутся "слабее" userContent.css */

Что прояснилось-то, забыл сказать
1. некоторые стили могут быть попросту не определены (даже у нас) - спасибо ivank, я чего-то не допёр :-)
2. стили для классов применяются не один раз, а сложносочинённо - спасибо Prisoner
2. введение специального стиля в userContent.css позволит контролировать составные (перебивать п.2) - спасибо Prisoner еще раз :-)

vadimiron 19-10-2006 19:14 500183
Цитата:
Почему на некоторых сайтах получить список CSS не получается? Например, букмарклет глохнет на mail.ru
Я не уверен, но возможно, потому что там путь до файла полный адрес с http://....
В ЯвеСкрипте не было ограничений по этому поводу??? Или возможно я чтото путую....

hasherfrog 19-10-2006 23:15 500276
Обнаружил у себяя пару неувязок в скрипте, сейчас пробую по-другому. Правда, результаты всё теже...

Вот что интересно, если записать страницу на диск, всё нормально работает...
Не понимаю.

>> В ЯвеСкрипте не было ограничений по этому поводу???

Можетбыть; правда, там вроде с XHttpRequest какие-то проблемы, а не с css...

Код:
Style sheets in http://win.mail.ru/cgi-bin/login?noclear=1&page=start
Inline style sheet

#superbest {
position: absolute;
left: 15;
top: 150;
width: 125;
visibility: visible;
z-index: 10;
}

link rel="stylesheet" href="http://img.mail.ru/mail/ru/css/mail-main1.css"
тут погнали CSS
link rel="stylesheet" href="http://img.mail.ru/mail/ru/css/mail-second.css"
тут погнали CSS
наш:
Код:
Style sheets in http://www.forum.oszone.net/post-500276.html#post500276
link rel="stylesheet" href="http://www.forum.oszone.net/clientscript/vbulletin_css/style-b9b713f6-00006.css"
это можно посмотреть другим букмарклетом, я где-то когда-то взял.
Код:
javascript:s=document.getElementsByTagName('STYLE'); ex=document.getElementsByTagName('LINK'); d=window.open().document; /*set base href*/d.open();d.close(); b=d.body; function trim(s){return s.replace(/^\s*\n/, '').replace(/\s*$/, ''); }; function iff(a,b,c){return b?a+b+c:'';}function add(h){b.appendChild(h);} function makeTag(t){return document.createElement(t);} function makeText(tag,text){t=makeTag(tag);t.appendChild(document.createTextNode(text)); return t;} add(makeText('style', 'iframe{width:100%;height:18em;border:1px solid;')); add(makeText('h3', d.title='Style sheets in ' + location.href)); for(i=0; i<s.length; ++i) { add(makeText('h4','Inline style sheet'  + iff(' title=%22',s[i].title,'%22'))); add(makeText('pre', trim(s[i].innerHTML))); } for (i=0; i<ex.length; ++i) { rs=ex[i].rel.split(' '); for(j=0;j<rs.length;++j) if (rs[j].toLowerCase()=='stylesheet') { add(makeText('h4','link rel=%22' + ex[i].rel + '%22 href=%22' + ex[i].href + '%22' + iff(' title=%22',ex[i].title,'%22'))); iframe=makeTag('iframe'); iframe.src=ex[i].href; add(iframe); break; } } void 0

hasherfrog 19-10-2006 23:30 500282
B DOMInspector'е все стили видны (Document->Stylesheet).

Может ли дело быть в том, что страница hххp://win.mail.ru, а стили - с hххp://img.mail.ru?

hasherfrog 20-10-2006 00:43 500304
*грустно*
Цитата:
For security reasons, Opera and Mozilla will not allow you to access the cssRules collection of a stylesheet from another domain or protocol. Attempting to access it will throw a security violation error. If your script is likely to encounter a stylesheet like this, you should use a try...catch structure to prevent your script from halting.
Вот так.
Ч.Т.Д.

Ok, проблема снята.

Поправленный букмарклет из головной поста
Код:
javascript:(function(){var i,x,o,r,nw;nw=window.open('','css','');nw.document.open();nw.document.writeln('@-moz-document url-prefix(%22http://'+document.location.host+'/%22) {<br>');for(i=0;i<document.styleSheets.length;i++){try{x=document.styleSheets[i];r=x.cssRules;}catch(e){r=null;alert('Oops. Access denied.');}if(!r)continue;for(j=0;j<r.length;j++){o=r[j].cssText;if(o.indexOf('rgb')==-1)continue;nw.document.writeln(o.replace(/\);/g,') !important;')+'<br>');}}nw.document.writeln('}<br>');nw.document.close();})()

Prisoner 20-10-2006 00:51 500307
Извиняюсь, а зачем алерт? Не проще просто текстом, выделяя подчеркиванием, к примеру. Алерты они вредные очень просто - требуют не только внимания, но и действий :).

hasherfrog 20-10-2006 01:01 500310
Чтобы было видно, что "не прокатило". Тогда пользователь будет знать, что делать. А делать ему придётся следующее: записывать файл (страницу) на диск и оттуда уже выгребать цвета, останется только сменить имя hxxp:// в начале правил. Кстати, ещё неизвестно, как это всё сработает...

Напоследок, гм, примечание (замеченные типа недостатки).
1. Букмарклет выписывает не все CSS-правила, а только те, что так или иначе определяют цвета. Но вот body - не выписывает.
2. Если в html-тексте (например, для <div class="моёчёто">) будут употреблены собственные стили, которых нет, их скрипт не вытащит (это описано выше, но я повторяю)
3. Если в html-тексте (например, для <div style="color=#123456 !important">) будут определены собственные стили, их скрипт тоже не вытащит.

Ну и трабла с доменами. Теоретически можно наваять вытягивание стилей и оттуда, парсинг и т.п. - но на фиг :] Проще сохранить и переоткрыть...

hasherfrog 20-10-2006 01:21 500314
4. Аналогично п.3, не вытаскиваются данные из <font color="red">


Время: 04:52.

Время: 04:52.
© OSzone.net 2001-