MichelM: Das ist der Hammer schlechthin.

Hallo,

eigentlich hatte ich was Anderes vor. Aber beim Testen mit dem IE entdeckte ich eine gute Möglichkeit CSS zu testen:
Einfach den Code mit Copy&Paste übernehmen - ich habs nicht hochgeladen.

Die Möglichkeit, nur noch eine CSS zu erstellen und zu parsen bietet sich hier an.
Da CSS nur sehr wenige Syntaxregeln enthält und diese leicht zu parsen sind, bietet sich CSS als Template an.
Für Fälle wo XML/XSLT die Kanone auf Spatzen ist oder wo DHTML-Funktionen zur umständliche Fingerhakelei werden
(im jeden Tag onmouseover oder umständliche Micosoft-Syntax für das Abfangen von events)

Bevor ich also so einen Parser progge möchte ich mal erst Eure Meinung dazu hören.

Hier das Testscript mit einm Hover-Effekt für MSIE ab 4.0 und Opera 4, der später aus dem Parser erzeugt werden kann (Netscape 6 macht das locker mit :focus und :hover):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta name="generator" content="HTML Tidy, see www.w3.org">

<title>Newsletter Formular WAI AAA</title>
<script  language="JScript" type="text/jscript"><!--
var myLayer=new Object();
function ieShowYellow(){
myLayer=window.event.toElement;
if(myLayer.tagName=="LABEL"||myLayer.tagName=="INPUT"||myLayer.tagName=="TEXTAREA"){
myLayer.style.backgroundColor="threedhighlight";}
else{

myLayer.cancelBubble=true;

}

myLayer=window.event.fromElement;
if(myLayer.tagName=="LABEL"){
myLayer.style.backgroundColor="Transparent";}
else if( myLayer.tagName=="INPUT"||myLayer.tagName=="TEXTAREA"){
myLayer.style.backgroundColor="infobackground";
}

else{myLayer.cancelBubble=true; }

}

function checkCSS(){
aussen=window.open("","","width=400;height=600,scrollbars=1");
if(document.all){
for(i=0;i<=document.styleSheets.length-1;i++){
alleRules=document.styleSheets[i].cssText.split("}"); }

}
for(i=1;i<=alleRules.length-1;i++){

if(alleRules[i].indexOf("hover")!=-1||alleRules[i].indexOf("unknown")!=-1||alleRules[i].indexOf("LEGEND")!=-1){aussen.document.write(alleRules[i]+";}<BR>");}
 }
}
// -->
</script>

<style type="text/css">
 :focus{background-color:threedhighlight;}
 body.c42 {font-family:tahoma,verdana;font-size:11px;background-color:window;scrollbar-base-color:threedhighlight;}
 input:hover,input:focus, td.cl1:hover,td.cl1:focus{background-color:threedhighlight;}
:hover {background-color:threedhighlight;}
 fieldset.c41 {width:360px;background-color:infobackground}

table.c40 {font-size:12px;font-weight:bold;}

button.c39 {width:100%;height:20px;cursor:pointer;}
button.c39:focus{border-color:maroon;}
button.c39:hover{background-color:maroon;color:gold;}

span.c38 {background-color:wheat}

input.c37 {width:100%;height:35px;overflow:auto;font-weight:bolder;}

td.c36 {text-align:center}

small.c35 {color:brown}

input.c34 {width:100%;height:35px;overflow:auto;font-weight:bolder;}

label.c33 {cursor:pointer;font-size:12px;background-color:transparent;}

span.c32 {border-bottom:ridge 1px gray;color:#336699;font-weight:bolder;font-size:14px;}

span.c31 {position:relative;top:-8px;left:10px;font-family:tahoma,verdana,arial,helvetica,sans-serif;font-size:16px;color:#336699;font-weight:bolder;}

span.c30 {font-size:26px;font-family:Tahoma,Verdana,helvetica,sans-serif;font-weight:bolder;color:gray}

legend.c29 {background-color:activeborder;border:ridge 2px scrollbar;width:336px;text-align:center;color:activecolor;font-size:14px;font-weight:bold}

</style>

</head>

<body class="c42"  onload="checkCSS()">

<fieldset class="c41" onfocus="(navigator.appName.indexOf('Internet Explorer')!=-1)?ieShowYellow():void(0);" onmouseover="(navigator.appName.indexOf('Internet Explorer')!=-1)?ieShowYellow():void(0);"><legend class="c29">Quick&Easy

Offline-Informationen</legend>

<form action="" method="post"><span class="c30">JA</span>,<br>

<span class="c31">ich will Artikel und Neuheiten bestellen</span>

<table summary="text" class="c40">

<tbody>

<tr>

<td class="cl1"><label for="Home.Email" class="c33" tabindex="1" accesskey=

"e"><span class="c32">e</span>Mail<br>

Adresse</label> </td>

<td class="c36 "><input type="textarea" id="Home.Email" name="HomeEmail" class="c34" onfocus="this.style.borderColor='brown'"

onblur="this.style.borderColor='transparent';" style="-moz-border-radius:10px;"><br>

<small class="c35">[eMail-Adresse ist erforderlich]</small></td>

</tr>

<tr>

<td class="cl1"><label for="pdf" class="c33" tabindex="2" accesskey="P">als

<span class="c32">P</span>DF-File</label> </td>

<td class="cl1"><input type="checkbox" id="pdf" name="pdf" onfocus=

"this.style.borderColor='brown'" onblur=

"this.style.borderColor='transparent';"><label for="pdf" class="c33" tabindex="2" accesskey="P">PDF-File (Acrobat

Reader)</label></td>

</tr>

<tr>

<td class="cl1"><label for="zip" class="c33" tabindex="3" accesskey="Z">als

<span class="c32">Z</span>IP-File</label> </td>

<td class="cl1"><input type="checkbox" id="zip" name="zip" onfocus=

"this.style.borderColor='brown'" onblur=

"this.style.borderColor='transparent';"><label for="zip" class="c33" tabindex="3" accesskey="Z">ZIP-File für Windows

und Linux</label></td>

</tr>

<tr>

<td class="cl1"><label for="xml" class="c33" tabindex="4" accesskey="X">als

<span class="c32">X</span>ML-File</label> </td>

<td class="cl1"><input type="checkbox" id="xml" name="xml" onfocus=

"this.style.borderColor='brown'" onblur=

"this.style.borderColor='transparent';"><label for="xml" class="c33" tabindex="4" accesskey="X">XML-File f

  1. Moin!

    eigentlich hatte ich was Anderes vor. Aber beim Testen mit dem IE entdeckte ich eine gute Möglichkeit CSS zu testen:
    [...]

    Sorry - ich hab deinen Text bestimmt dreimal gelesen, aber außer einer Begeisterung für eine leider nicht näher spezifizierte Funktion, die nur teilweise angehängt ist, habe ich nicht verstanden, was du uns eigentlich mitteilen willst.

    Was macht dein Skript?

    Sofern richtig ist, dass es für uralte, nicht mehr anzutreffende Browser wie Opera 4 oder IE 4 irgendwelche optischen Zusatzeffekte herstellt, die man besser mit CSS definiert (und deren Abwesenheit einfach nur weniger schön sind), habe ich so meine Zweifel, ob du da nicht Energie in etwas gesteckt hast, was niemand sonst braucht.

    - Sven Rautenberg

    1. Hi Sven,

      Sorry - ich hab deinen Text bestimmt dreimal gelesen, aber außer einer Begeisterung für eine leider nicht näher spezifizierte Funktion, die nur teilweise angehängt ist, habe ich nicht verstanden, was du uns eigentlich mitteilen willst.

      ...da bist du nicht der einzige!

      Schöne Grüsse,
      Dave

    2. Hallo,
      ein Beispiel:
      input:focus{Anweisungen;} ist doch prima.
      Doch nur ein Browser ist IMHO in der Lage diese simple CSS-Anweisung zu lesen und richtig (!) darzustellen.
      Wie bringe ich also den mangelhaften Browsern richtiges CSS ohne umständliche JavaScripts oder DHTML bei ?

      Ich lese die Stylesheets ein (=parse) und erstelle mittels PHP und JavaScript die notwendigen Anweisungen für den
      jeweiligen Browser.

      Der Vorteil:
      Bei einer design-Änderung brauche ich nur noch die CSS-Datei zu editieren.
      Die Ladezeit erhöht sich aufgrund von kürzerem Code.
      DHTML-Funktionen arbeiten schneller (= ruckelfrei ).

      Ausserdem ist für die Fehlersuche hilfreich, wenn ich erkenne, wie mein Browser input:focus einliest :
      IE 6.0 input:unknown focus kennt er nicht
      IE 6.0 input:hover hover wird erkannt, aber nicht ausgeführt.

      Der CSS-Validator kann nur Standarddefinitionen testen.
      Ich kann prüfen, ob CSS-Standard von allen Browser richtig verarbeitet wird.

      Scheinbar braucht niemand so ein Tool - ich werde es auf jeden Fall zu einem CSS-Tester ausbauen.
      Langes Suchen im Netz nach Browser-Bugs und browserspezifischen CSS erspare ich mir dann.

      Danke vielmal ;-)

      Michael

      --
      Hier bin ich Mensch, hier schreib ich rein
      1. Moin!

        Hallo,
        ein Beispiel:
        input:focus{Anweisungen;} ist doch prima.
        Doch nur ein Browser ist IMHO in der Lage diese simple CSS-Anweisung zu lesen und richtig (!) darzustellen.

        Tja, das nennt man Künstlerpech - oder so. :)

        Wie bringe ich also den mangelhaften Browsern richtiges CSS ohne umständliche JavaScripts oder DHTML bei ?

        Gar nicht. Warte auf die nächste Browserversion.

        Ich lese die Stylesheets ein (=parse) und erstelle mittels PHP und JavaScript die notwendigen Anweisungen für den
        jeweiligen Browser.

        Problem: Wie erkennst du den korrekten Browser serverseitig? Da ist in meinen Augen (und auch nach Ansicht aller Experten) noch kein Kraut gegen Veränderungen des User-Agents gewachsen.

        Und selbst dann mußt du konkrete Implementierungen für alle derzeitigen und künftigen Browser bereithalten.

        Der Vorteil:
        Bei einer design-Änderung brauche ich nur noch die CSS-Datei zu editieren.
        Die Ladezeit erhöht sich aufgrund von kürzerem Code.
        DHTML-Funktionen arbeiten schneller (= ruckelfrei ).

        Diesen Vorteil (bei gleichzeitigem Nachteil, dass unwesentliche CSS-Features durch einige Browser nicht unterstützt werden) hast du auch bei der herkömmlichen Vorgehensweise.

        Der CSS-Validator kann nur Standarddefinitionen testen.
        Ich kann prüfen, ob CSS-Standard von allen Browser richtig verarbeitet wird.

        Hä?

        Scheinbar braucht niemand so ein Tool - ich werde es auf jeden Fall zu einem CSS-Tester ausbauen.

        Richtig. Scheinbar haben alle informierten Programmierer vor der Problematik des zweifelsfreien Erkennens von Browserversionen schon kapituliert - bzw. die weise Entscheidung getroffen, entweder in den Stylesheets nicht alles auszunutzen bzw. zwar alles auszunutzen, aber die Abwesenheit der Effekte einfach zu tolerieren.

        Langes Suchen im Netz nach Browser-Bugs und browserspezifischen CSS erspare ich mir dann.

        Das glaubst du. Im Gegenteil wirst du dich damit erst recht auseinandersetzen müssen, weil du natürlich für alle möglichen CSS-Definitionen für alle möglichen Browsertypen Ersatzvarianten bereithalten mußt.

        Danke vielmal ;-)

        Ach ja: Von deinem serverseitigen Ansatz war im Ausgangsposting übrigens absolut nichts zu lesen.  Da hast du uns nur irgendwie viel Javascript um die Ohren gehauen.

        - Sven Rautenberg

        --
        Diese Signatur gilt nur am Freitag.
        1. Hallo.

          Ach ja: Von deinem serverseitigen Ansatz war im Ausgangsposting übrigens absolut nichts zu lesen.  Da hast du uns nur irgendwie viel Javascript um die Ohren gehauen.

          Stimmt. Die eigene Denkweise setzt manchmal Dinge voraus, die andere vielleicht nicht wissen.
          Ein Parser kann nur serverseitig realisiert werden, hätte der Anwender JavaScript nützte mir ein JS-Parser relativ wenig.

          Sicher bin ich auch in der Gefahr, gedanklich mein Wissen dem von anderen gleichzustellen, vorauszusetzen dass sie meine Denkweise nachvollziehen können.
          Ein schwerer Fall von Fachidiotie *ggg*

          Schätze ich brauch mal Urlaub.

          Michael

          --
          Hier bin ich Mensch, hier schreib ich rein
      2. Hallo, Michael,

        Ausserdem ist für die Fehlersuche hilfreich, wenn ich erkenne, wie mein Browser input:focus einliest :
        IE 6.0 input:unknown focus kennt er nicht

        Was meintest du mit »input:unknown focus«, handelt es sich dabei um einen Selektor und »unknown« steht als Platzhalter...?

        IE 6.0 input:hover hover wird erkannt, aber nicht ausgeführt.

        Erklärst du mir, wie du das (beides) überprüfst? Außer dass du natürlich keinen Effekt siehst, aber diese Methode kannst du in dem Programm selbstverständlich nicht anwenden. Was bedeutet, »wird erkannt, aber nicht ausgeführt«, woran machst du das fest?

        Achja - das nächste Mal *bitte* einen aussagekräftigeren Threadtitel. »Das ist der Hammer schlechthin« ist nämlich der Hammer schlechthin, wenn es um den schlechtmöglichsten Betreff geht.

        Grüße,
        Mathias

        --
        Geschwisterzwist zwischen Slivovic schlürfenden, spitzen, twistenden und schwitzenden Zwitscherschwestern.
        Zwanzig Zwerge zeigen Handstand, zehn im Wandschrank, zehn am Sandstrand.
        Kalle Kahlekatzenglatzenkratzer kratzt kahle Katzenglatzen.
        Bietet Brunhilde berauschende Brüste, buhlt Bodo brünstig beim Balle.
        1. Hallo,

          Ausserdem ist für die Fehlersuche hilfreich, wenn ich erkenne, wie mein Browser input:focus einliest :
          IE 6.0 input:unknown focus kennt er nicht

          Die Ausgabe meine Testscripts zeigt unknown an, d.h. Der Internet Explorer 6 kennt den Platzhalter focus nicht und der CSS-Parser
          gibt anstatt focus unknown zurück.

          Was meintest du mit »input:unknown focus«, handelt es sich dabei um einen Selektor und »unknown« steht als Platzhalter...?

          IE 6.0 input:hover hover wird erkannt, aber nicht ausgeführt.

          Erklärst du mir, wie du das (beides) überprüfst? Außer dass du natürlich keinen Effekt siehst, aber diese Methode kannst du in dem Programm selbstverständlich nicht anwenden. Was bedeutet, »wird erkannt, aber nicht ausgeführt«, woran machst du das fest?

          Einfach den Code im Internet Explorer 6 starten - es öffnet sich ein neues Fenster mit window.open und zeigt an, wie der IE das CSS liest.

          Achja - das nächste Mal *bitte* einen aussagekräftigeren Threadtitel. »Das ist der Hammer schlechthin« ist nämlich der Hammer schlechthin, wenn es um den schlechtmöglichsten Betreff geht.

          Stimmt *g*
          Das fehlerhafte CSS-Gebaren bzw. die magelhafte Standardinterpretierung des IE 6 ist der Hammer schlechthin.
          Ebenso fehlen bei der Entwicklung vernünftige Unterstützung seitens des IE.

          Mozilla hat da wesentlich mehr Features und Tools, z.B. DOM-Inspektor, JavaScript-Console etc. und unterstützt als einiger Browser
          standardconformes DHTML nach DOM2 und CSS.

          Danke vielmal ;-)

          Michael

          --
          Hier bin ich Mensch, hier schreib ich rein
          1. Hallo, Michael,

            irgendwie reden wir aneinander vorbei...

            Ausserdem ist für die Fehlersuche hilfreich, wenn ich erkenne, wie mein Browser input:focus einliest :
            IE 6.0 input:unknown focus kennt er nicht

            Die Ausgabe meine Testscripts zeigt unknown an, d.h. Der Internet Explorer 6 kennt den Platzhalter focus nicht und der CSS-Parser gibt anstatt focus unknown zurück.

            *Wie*, mit welchen JavaScript(?)-Methoden findest du das heraus? Über document.styleSheets und selectorText?
            *Dass* es dein Script kann, ist mir schon beim Ursprungsposting klar gewesen.

            Was meintest du mit »input:unknown focus«, handelt es sich dabei um einen Selektor und »unknown« steht als Platzhalter...?

            IE 6.0 input:hover hover wird erkannt, aber nicht ausgeführt.

            *argh* Definiere doch endlich, was du mit »wird erkannt« meinst...!

            Erklärst du mir, wie du das (beides) überprüfst?

            Diese Frage hast du immer noch nicht beantwortet...

            Außer dass du natürlich keinen Effekt siehst, aber diese Methode kannst du in dem Programm selbstverständlich nicht anwenden. Was bedeutet, »wird erkannt, aber nicht ausgeführt«, woran machst du das fest?

            Einfach den Code im Internet Explorer 6 starten

            Ja welchen Code denn, himmelherrgottsakramentnochmal[tm]!
            Dass die Pseudoklasse focus dem MSIE komplett unbekannt ist, war abzusehen, dass er hover kennen muss, auch, aber er wendet es eben nur bei a[href] an.

            Grüße,
            Mathias

            --
            Mein Leben, ein Leben ist es kaum, / Ich gehe dahin als wie im Traum.
            Wie Schatten huschen die Mensch hin, / Ein Schatten dazwischen ich selber bin.
            Und im Herzen tiefe Müdigkeit - / Alles sagt mir: Es ist Zeit ...
            (Theodor Fontane, Mein Leben)
  2. Hallo,

    eigentlich hatte ich was Anderes vor. Aber beim Testen mit dem IE entdeckte ich eine gute Möglichkeit CSS zu testen:

    CSS testen? Was bedeutet das für dich? Was kann man an CSS testen?

    Die Möglichkeit, nur noch eine CSS zu erstellen und zu parsen bietet sich hier an.
    Da CSS nur sehr wenige Syntaxregeln enthält und diese leicht zu parsen sind, bietet sich CSS als Template an.
    Für Fälle wo XML/XSLT die Kanone auf Spatzen ist oder wo DHTML-Funktionen zur umständliche Fingerhakelei werden
    (im jeden Tag onmouseover oder umständliche Micosoft-Syntax für das Abfangen von events)

    Bevor ich also so einen Parser progge möchte ich mal erst Eure Meinung dazu hören.

    Eigentlich verstehe ich kein Wort von dem was du schreibst, aber dass heisst nicht, dass ich es könnte, wenn du etwas genauer erklärst warum du CSS überhaupt parsen möchtest.
    Parsen impliziert hier, dass du fehler im CSS-Syntax erwartest bzw. dass du die Syntax von CSS überprüfen möchtest um die CSS-Datei/Anweisung im Memory zu laden.

    Sicher kann man eine CSS-Datei erstellen die man als Template bezeichnen und in viele HTML/XML-Seiten einbinden kann.

    Also wozu möchtest du einen CSS-Parser schreiben?
    (Den gibt es übrigens beim W3C um sonst)
    Ich sehe auch nicht was an deinem Code so anders sein könnte, was ich sehen kann ist aben jede Menge JavaScript-Events für Inputfelder.

    Vielleicht magst du es etwas besser erklären, was du gemeint hast?

    Grüße
    Thomas