Gibts das eigentlich schon: CSS-Erklärer

[Sven Rautenberg]

Moin!

Ich hatte unlängst folgendes Problem, zu dem mir leider keine passende Softwareunterstützung eingefallen ist:

Gegeben sein eine HTML-Seite, in der unter Verwendung von verschachtelten HTML-Elementen, Klassen und IDs Inhalte an den Mann gebracht werden, welche mit CSS unter Verwendung von Element-, Klassen- und ID-Selektoren formatiert werden.

Mein Problem ist: Wie kann ich feststellen, welche der diversen CSS-Definitionen nun tatsächlich für ein ganz konkretes HTML-Element wirksam sind?

Im Prinzip ist das recht einfach: Einfach alle CSS-Selektoren nehmen, die auf das gewünschte Element zutreffen, nach Spezifität sortieren und dann die resultierenden Formatierungen ermitteln.

Das Problem, auf das ich (mit Quelltexteditor) gestoßen bin: Wie finde ich in einer umfangreichen CSS-Datei, die im Laufe der Zeit noch gewachsen ist, denn überhaupt alle zutreffenden Selektoren heraus?

Gibts für sowas schon Software? Also irgendeinen Mechanismus, dem ich sage: Das ist mein HTML und CSS, und ich suche alle Formatierungen, die auf DIESES Element wirken. Bzw. genauer: Alle CSS-Selektoren im CSS, die auf das Element zutreffen.

Wenn jemand Software kennt, egal ob offline oder online (ähnlich z.B. dem Validator), möge das doch mal mitteilen.

Wenn's sowas nämlich noch nicht gibt, müßte das doch mal dringend geschrieben werden, oder?

- Sven Rautenberg

[Jonathan]

Nimm doch z.B. den DOM-Inspector vom Mozilla Firefox.

Jonathan

[Alexander Brock]

Hallo Freunde des gehobenen Forumsgenusses,

Nimm doch z.B. den DOM-Inspector vom Mozilla Firefox.

Hat der irgendwas mit CSS am Hut?

Gruß
Alexander Brock

[Sven Rautenberg]

Moin!

Hallo Freunde des gehobenen Forumsgenusses,

Nimm doch z.B. den DOM-Inspector vom Mozilla Firefox.

Hat der irgendwas mit CSS am Hut?

In der Tat: Ja, hat er.

Die Anzeige heißt "CSS Style Rules". Und da werden dann alle CSS-Ressourcen (Browservoreinstellung, CSS-Dateien, <style>-Blöcke etc.) aufgelistet, die Wirkung auf ein ausgewähltes Element haben.

Sich im Baum zurechtzufinden entspricht zwar nicht so ganz meinem Geschmack, aber da ich das auch nicht jeden Tag vorhabe, ist das Tool als brauchbar einzuschätzen. :)

- Sven Rautenberg

[Alexander Brock]

Hallo Freunde des gehobenen Forumsgenusses,

Die Anzeige heißt "CSS Style Rules". Und da werden dann alle CSS-Ressourcen (Browservoreinstellung, CSS-Dateien, <style>-Blöcke etc.) aufgelistet, die Wirkung auf ein ausgewähltes Element haben.

Das ist mir völlig neu (und ich nutze FF seit 0.7), danke.
Leider zeigt er nicht an, welche Eigenschaften letzendlich gelten (oder habe ich das auch übersehen?).

AFAIR habe ich mal in der ct von einer kommerziellen Software nur für Macs gelesen, die genau das kann, was du beschrieben hast.

Gruß
Alexander Brock

[Jonathan]

Leider zeigt er nicht an, welche Eigenschaften letzendlich gelten (oder habe ich das auch übersehen?).

Jein. Du kannst nur auf 'Computed Style' gehen um das sehen, welche Eigenschaften das Element hat, aber du kannst nicht sehen, woher diese kommt.

[Thomas J.S.]

Hallo,

Leider zeigt er nicht an, welche Eigenschaften letzendlich gelten (oder habe ich das auch übersehen?).

Jein. Du kannst nur auf 'Computed Style' gehen um das sehen, welche Eigenschaften das Element hat, aber du kannst nicht sehen, woher diese kommt.

Kann man schon, muss du nur einstellen bzw. auswählen:

Allerdings ist die Webdeveloper-Toolbar mit der Komination: "Outline Current Elemente" + "View Style Information" etwas besser.

Grüße
Thomas

[Cheatah]

Hi,

Sich im Baum zurechtzufinden entspricht zwar nicht so ganz meinem Geschmack,

die Funktion, über die man einfach auf ein Element der Seite klappt und sich der entsprechende Ast aufklappt, hast Du gefunden?

aber da ich das auch nicht jeden Tag vorhabe, ist das Tool als brauchbar einzuschätzen. :)

s/brauchbar/absolut unverzichtbar/ ;-)

Cheatah

[Der Martin]

Hi Cheatah,

die Funktion, über die man einfach auf ein Element der Seite klappt ...

wie klappt man denn auf ein Element der Seite? Oder was klappt man da drauf?

*scnr*
 Martin

[Alexander Brock]

Hallo Freunde des gehobenen Forumsgenusses,

Gibts für sowas schon Software? Also irgendeinen Mechanismus, dem ich sage: Das ist mein HTML und CSS, und ich suche alle Formatierungen, die auf DIESES Element wirken. Bzw. genauer: Alle CSS-Selektoren im CSS, die auf das Element zutreffen.

Du suchst einen Browser (SCNR). Aber im Enst, ein Browser muss so etwas implementiert haben, man könnte also einfach bei Firefox abkupfern.

Wenn's sowas nämlich noch nicht gibt, müßte das doch mal dringend geschrieben werden, oder?

Willst du eine Software mit GUI schreiben, in die man CSS und HTML-Dateien laden kann (oder URLs angeben) und die einem sagt welche Selektoren welche Elemente selektieren und welche Eigenschaften sich am Ende ergeben?

Gruß
Alexander Brock

[as]

Hallo, Sven.

Gibts für sowas schon Software? Also irgendeinen Mechanismus, dem ich sage: Das ist mein HTML und CSS, und ich suche alle Formatierungen, die auf DIESES Element wirken. Bzw. genauer: Alle CSS-Selektoren im CSS, die auf das Element zutreffen.

Meinst Du etwas wie die Funktion CSS >> View Style Information in der Web Developer Extension? http://chrispederick.com/work/webdeveloper/.

Hab sie gerade nicht da, aber soweit ich mich erinnere verwandelt die Funktion den Cursor in ein Fadenkreuz; zeigt man damit auf ein Element, zeigt die Statuszeile in CSS-Syntax, welches HTML-Element das ist (z.B. "body > ul#nav > li"); klickt man darauf sieht man in einem neuen Tab, welche Style-Regeln wo definiert wurden. Ob sie dann auch Wirksam sind, muß man glaube ich selbst herausfinden. Trotzdem sehr praktisch.

Gruß
as

[Dennis]

Hi Sven,

Wenn's sowas nämlich noch nicht gibt, müßte das doch mal dringend geschrieben werden, oder?

Wenn ich dich richtig verstanden habe, dann gibt es so etwas in der Art schon - der Web Developper im Firefox bietet unter CSS die Option View Syle Informationen, nach Auswählen selbiger kannst du auf ein Element klicken und dir werden alle darauf wirkenden Formatierungen angezeigt, sogar inklusive Quelle.

MfG, Dennis.

[Orlando]

Hallo Dennis,

Wenn ich dich richtig verstanden habe, dann gibt es so etwas in der Art schon - der Web Developper im Firefox bietet unter CSS die Option View Syle Informationen, nach Auswählen selbiger kannst du auf ein Element klicken und dir werden alle darauf wirkenden Formatierungen angezeigt, sogar inklusive Quelle.

Das funktioniert in FF auch per Bookmarklet:

javascript:(function(){function A(n,g){var p=n.parentNode,t=n.tagName;if(!p)return "";if(!t)return A(p,g);var T=t.toUpperCase(),b=(T!="TABLE"&&T!="TBODY"&&T!="THEAD"&&T!="TR"),c=n.className,i=n.id;return A(p,' > ')+(b?T:T.toLowerCase())+(c?"."+c:"")+(i?"#"+i:"")+(b?g:' ');}document.onmouseover=function(e){e=e?e:event;var s,g=e.target;g=g?g:e.srcElement;try{s=A(g,'')+" (click for computed styles)";}catch(err){s=err.message;}window.status=s;return true;};window.status=A(document.documentElement,'');var newSS,styles='* { cursor: crosshair; }';newSS=document.createElement('link');newSS.rel='stylesheet';newSS.type='text/css';newSS.href='data:text/css,'+escape(styles);document.getElementsByTagName("head")[0].appendChild(newSS);document.onclick=function(e){e=e?e:event;var s,g=e.target;g=g?g:e.srcElement;var x=window.open('','computedStyles');x.document.open();x.document.close();var d=x.document;x.onunload=function(){document.onclick=null;document.onmouseover=null;window.status=null;newSS.href='data:text/css,';};function sp(n,t,col){var r=d.createElement(n);r.appendChild(d.createTextNode(t));if(col)r.style.color=col;return r;}var typeIndex={'top':1,'bottom':1,'height':1,'width':1,'left':1,'right':1,'position':0,'display':0,'-moz-appearance':0,'-moz-box-sizing':0};var colors=["red","green","black"];function undirect(v){return v.replace(/\-(left|top|bottom|right)/,"-*");}function diff(n,p){pcs=p.ownerDocument.defaultView.getComputedStyle(p,"");ncs=n.ownerDocument.defaultView.getComputedStyle(n,"");var A=[];var B={};var C={};for(var i=0;i<ncs.length;++i){var e=ncs.item(i),v=ncs.getPropertyValue(e),pv=pcs.getPropertyValue(e);if(v!=pv){var u=undirect(e);if(u.indexOf("-*")!=-1){if(!B[u])B[u]=[0,v];if(B[u][1]==v)++(B[u][0]);}A.push([typeIndex[e]!=null?typeIndex[e]:2,e,v]);}}A=A.sort();for(var u in B)if(B[u][0]==4)C[u]=true;for(var i in A){var t=A[i],e=t[1],v=t[2],u=undirect(e);if(C[u]){if(t[1].indexOf("-left")!=-1)d.body.appendChild(sp("div",u+": "+v,colors[t[0]]));}else d.body.appendChild(sp("div",e+": "+v,colors[t[0]]));}}function info(n){if(!n)return;if(n.tagName){d.body.appendChild(sp("h4",A(n,'')));diff(n,n.parentNode.nodeType!='9'?n.parentNode:d.documentElement);}info(n.parentNode);}d.body.appendChild(sp("p","This shows how the computed style of each node differs from the computed style of its parent. The root element, which has no parent, is instead compared against the root of a blank HTML document."));info(g);x.focus();e.preventDefault();}})()

Nach dem Ausführen werden bei einem Klick auf ein Element alle zutreffenden Regeln angezeigt. Siehe Quelle, Button „computed styles“.

Auch toll und vor allem funktioniert es auch mit Opera:

javascript:(function() { var writedest;newwin = window.open('','','width=250,height=450');newwin.document.write('<html><body><pre>(Waiting for mouseover)');writedest = newwin.document.getElementsByTagName('pre')[0];function B(t) {return !(t=='TBODY'||t=='TD'||t=='THEAD'||t=='TR'||t=='TH');}function A(n) {var t=n.tagName?n.tagName.toUpperCase():'#text';if(t=='BODY') return t;return A(n.parentNode) + ( B(t) ? ' > '+t : ' '+t.toLowerCase() ) + (n.className?'.'+n.className:'') + (n.id?'#'+n.id:'');}document.body.onmouseover = function(e) {e=e?e:event;var s,g = e.target;g=g?g:e.srcElement; try {s = A(g);}catch(err){s = err.message;} if (writedest && writedest.firstChild) {s+='\n';if (g.currentStyle) {cs = g.currentStyle;} else if (document.defaultView && document.defaultView.getComputedStyle) {cs = document.defaultView.getComputedStyle(g,'');}for (prop in cs) {try {if (typeof cs[prop] != 'function')s+=prop+' = '+cs[prop]+'\n';}catch(e){}}writedest.firstChild.nodeValue = s;}return true;};})()

Siehe Quelle.

Grüße
 Roland

[Ashura]

Hallo Orlando.

Auch toll und vor allem funktioniert es auch mit Opera:

Klasse. Daraus mache ich mir einen neuen Button.

Danke.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Felix Riesterer]

Lieber Orlando,

Nach dem Ausführen werden bei einem Klick auf ein Element alle zutreffenden Regeln angezeigt. Siehe Quelle, Button „computed styles“.

einfach nur goil! Mein Favorit: "edit styles". Das muss ich mir genauer ansehen, denn es haut mich vom Hocker! *wiederhochkrabbel*

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Tim Tepaße]

Hallo Sven,

Gibts für sowas schon Software? Also irgendeinen Mechanismus, dem ich sage: Das ist mein HTML und CSS, und ich suche alle Formatierungen, die auf DIESES Element wirken. Bzw. genauer: Alle CSS-Selektoren im CSS, die auf das Element zutreffen.

Die üblichen Verdächtigen (DOM Inspector) wurden ja schon genannt, hier noch zwei, die ich kenne und nutze, die Dir aber nicht helfen werden, weil Apfelware:

• Xyle Scope basiert auf WebKit und ist sozusagen ein Röntgenblick in den Aufbau der Seite. Leider auf meinem Monitor etwas zu klein, um gut damit arbeiten zu können. Und kostet Geld. Patrioten können sich freuen; stammt aus deutschen Landen. Beispielscreenshot

• In aktuellen Nightlies von Safari/WebKit befindet sich der Web Inspector, sozusagen der DOM Inspector aus dem Hause Apfel: Beispielscreenshot. Sehr nett: Der Web Inspector ist in HTML, CSS und vor allem JS programmiert. Konsequenterweise hat er bislang auch nichts dagegen einzuwenden, sich selbst zu inspizieren.

(Eigentlich wollte ich vor einiger Zeit mal einen Weblog-Eintrag darüber schreiben)

Tim

[Der Martin]

Hallo Tim,

[...] Konsequenterweise hat er bislang auch nichts dagegen einzuwenden, sich selbst zu inspizieren.

so ein konsequentes Verhalten gefällt mir. Ebenso wie der serverseitige Spamfilter von GMX nichts dagegen hat, den Spam aus dem eigenen Hause (will heißen: den regelmäßigen Nervletter bei GMX-Freemail-Accounts) als Spam auszusortieren.
Schwierig dürfte es allerdings werden, wenn du von einem Debugger verlangst, sich selbst im Single-Step zu debuggen... ;-)

Schönen Abend ncoh,
 Martin