socki: CSS Eigenschaften auf Verdacht überschreiben?

Hallo,

ich frage mich, ob ich bei meinem aktuellen Vorhaben nicht viel zu umständlich vorgehe.

Und zwar habe ich ein Formular, bestehend aus einem Textfeld, einem Absendebutton und etwas CSS. Auf derselben Website würde ich gerne den Code für das Formular für andere Webmaster zum rauskopieren bereitstellen. D.h. jeder, der sich den html Code einbaut, bekommt ein Formular, was den Besucher nach absenden auf meine Webseite schickt (wo er dann aus ein paar Berechnungen die Antwort auf seine Eingabe bekommt).

Jetzt will ich aber, dass das Formular auf anderen Webseiten genauso ansprechend aussieht wie bei mir. Da aber die meisten Websites für Tags wie form, input, p, a,... verschiedene CSS Eigenschaften definiert haben, zerschießt es mir das Layout. Inzwischen habe ich versucht alle etwaigen Eigenschaften in den html Tags zu überschreiben und das ganze bei 3 verschiedenen Websites getestet. Zwar habe ich jetzt ein hübsches und einheitliches Design. Dafür ist der Code wegen den ganzen Styles aber 3 mal so lang wie vorher. Außerdem weiß ich natürlich nicht, welche Eigenschaften ich vielleicht übersehen habe.

Gibt es noch einen einfacheren Weg? CSS für den ganzen Container zu deaktivieren geht soweit ich weiß nicht. Javascript würde ich wenn's geht gerne weglassen.

Achso, eine separate CSS Datei zur Verfügung zu stellen, ist leider auch keine Option. Es soll möglichst jeder den Code einfügen können. Also via CMS Editor.

danke!

  1. Hi

    Ohne relevanten Beispielcode ist das nicht leicht, da ich nicht ganz verstehe wie du dein Vorhaben genau versuchst umzusetzen, aber ich versuche es mal:

    Gibt es noch einen einfacheren Weg?

    Beschäftige dich mit der Spezifität von Selektoren. Wenn die Spezifität deiner Selektoren hoch genug und deine Deklaration ausführlich genug ist, werden andere Stylsheets diese auch nicht sofort überschreiben.

    Gruß
    Ole

    1. Beschäftige dich mit der Spezifität von Selektoren. Wenn die Spezifität deiner Selektoren hoch genug und deine Deklaration ausführlich genug ist, werden andere Stylsheets diese auch nicht sofort überschreiben.

      Ja, da hatte ich mich blöd ausgedrückt. Da ich Inline-Styles verwendet hatte, war nichts mit Selektoren und Kaskadierung. Aber ich werd Klassen und IDs und dazu ein Style-Element im body anlegen. Schätze, damit kann ich den Code auf das nötigste reduzieren

  2. Mahlzeit,

    ich frage mich, ob ich bei meinem aktuellen Vorhaben nicht viel zu umständlich vorgehe.

    Und was hast du dir geantwortet?

    Wieso selektierst du deine Elemente nicht direkt? Überschreiben von Eigenschaften zerschiesst evtl. das Layout der anderen Seite.

    Achso, eine separate CSS Datei zur Verfügung zu stellen, ist leider auch keine Option. Es soll möglichst jeder den Code einfügen können. Also via CMS Editor.

    Und wo ist das Problem? Entweder inline-Styles oder ein style-Element innerhalb von body. Nicht valide aber funktioniert in aktuellen B>rowsern. Das CSS kann auf deinem Server liegen und wird per http eingebunden.
    Alternativ hängst du das Stylesheet per Javascript in den head ein, da gehörts ja auch hin ;)

    --
    42
    1. Om nah hoo pez nyeetz, M.!

      … oder ein style-Element innerhalb von body. Nicht valide aber funktioniert in aktuellen Browsern

      doch valide - mit scoped-Attribut.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen schwer und Schwerin.

      1. Mahlzeit,

        doch valide - mit scoped-Attribut.

        Verdammt, ich hänge sowas von hinterher in Punkto HTML5 & Co.
        Danke für die Info, wieder was gelernt. Vorallem gut, weil ich das selbst einsetze, weil Ebay ja noch immer verweigert, dass man eigene Styles im Head einbinden kann ;)

        --
        42
      2. doch valide - mit scoped-Attribut.

        genau das isses. Kannte ich noch nicht. Danke!

      3. … oder ein style-Element innerhalb von body. Nicht valide aber funktioniert in aktuellen Browsern

        doch valide - mit scoped-Attribut.

        Naja, aber die Browserunterstützung sieht nicht so rosig aus. Einzig der Firefox scheint sich da zu bemühen.

        1. Mahlzeit,

          Naja, aber die Browserunterstützung sieht nicht so rosig aus. Einzig der Firefox scheint sich da zu bemühen.

          Chrome bindet das Style-Sheet aber trotzdem ein, auch ohne scoped.

          --
          42
          1. @@M.:

            nuqneH

            Naja, aber die Browserunterstützung sieht nicht so rosig aus. Einzig der Firefox scheint sich da zu bemühen.

            Chrome bindet das Style-Sheet aber trotzdem ein, auch ohne scoped.

            Eben, ohne scoped. Er wendet das Stylesheet auf das gesamte Element an, was aber nicht sein soll.

            <p>Sollte nicht rot sein</p>  
            <div>  
            	<style scoped="scoped">[code lang=css]p { color: red }
            ~~~</style>  
            	<p>Sollte rot sein.<p>  
            </div>[/code]  
              
            In Chrome ist auch der erste Absatz außerhalb des div rot.  
              
            Qapla'
            
            -- 
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            
            1. Eben, ohne scoped. Er wendet das Stylesheet auf das gesamte Element an, was aber nicht sein soll.

              In Chrome ist auch der erste Absatz außerhalb des div rot.

              Hab' mich eben gefragt: Wo stehen per <style scoped> definierte Werte eigentlich in der Kaskade bezüglich ihrer Spezifität?
              Der Firefox scheint sie so zu Werten, wie inline-Styles (also 1-0-0-0), was sie in gewisser Weise ja auch sind.

              Ob sich irgendwas an der Bedeutung des :root-Selektors innerhalb eines scoped-Styles ändert?

              1. @@TSO:

                nuqneH

                Eben, ohne scoped. Er wendet das Stylesheet auf das gesamte Element an, was aber nicht sein soll.

                Chrome missachtet damit [CSS-SCOPING]: “The selector of the scoped style rule is restricted to match only elements within scope. See Scoped Selectors in [SELECTORS4].”

                Hab' mich eben gefragt: Wo stehen per <style scoped> definierte Werte eigentlich in der Kaskade bezüglich ihrer Spezifität?

                ibid.: “The cascade prioritizes scoped rules over unscoped ones, regardless of specificity. See Cascading by Scope in [CSS3CASCADE].”

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      4. Hallo,

        doch valide - mit scoped-Attribut.

        Firefox ist der einzige Browser, der das implementiert hat:
        http://caniuse.com/style-scoped

        Blink hatte es implementiert, aber es wurde nie aktiviert, und kürzlich wurde es komplett entfernt:
        http://src.chromium.org/viewvc/blink?view=revision&revision=175720

        Mathias

    2. Ok, vielleicht habe ich mich etwas unglücklich ausgedrückt. Ich will nicht die Eigenschaften von Elementen überschreiben (Bsp: a{color:blue;}) sondern mittels Inline-Styles dafür sorgen, dass sie nicht greifen (Bsp: <a href="" style="color:blue;">). Hierbei wird aber der Code ziemlich lang, da es erstaunlich viele Formatierungen gibt, die ich beachten muss.

      Und wo ist das Problem? Entweder inline-Styles oder ein style-Element innerhalb von body. Nicht valide aber funktioniert in aktuellen B>rowsern.

      Style-Element innerhalb von body? Meinst du damit sowas? <script type="text/css">#link{color:blue;}</script> ...das könnte klappen. Danke!

      Das CSS kann auf deinem Server liegen und wird per http eingebunden.

      Also sowas? ~~~html <link rel="stylesheet" href="http://xxx.css" type="text/css"/>

        
      
      > Alternativ hängst du das Stylesheet per Javascript in den head ein, da gehörts ja auch hin ;)  
        
      Meinst du, das ist dem Webmaster/Blogger/Redakteur, der den Code einbinden soll lieber, als (nicht ganz valide) etwas CSS im body?
      
      1. Mahlzeit,

        Style-Element innerhalb von body? Meinst du damit sowas? <script type="text/css">#link{color:blue;}</script> ...das könnte klappen. Danke!

        Nicht ganz. script ist hier definitiv falsch ;)

        --
        42
        1. Nicht ganz. script ist hier definitiv falsch ;)

          Oh, hab ich wohl was verdreht :D  ...so müsste es aber klappen:
          <style type="text/css" scoped="scoped">...</style>
          ...oder?

  3. Hi,

    Gibt es noch einen einfacheren Weg?

    Ja – platziere dein Formular in einem eigenständigen Dokument, das auf den Zielseiten per Iframe eingebunden werden kann. Damit hast du die Formatierung komplett unter Kontrolle¹, die Stylesheets der einbindenen Seite können dir nicht dazwischen pfuschen.

    Um sich beim Absenden aus dem Iframe zu „befreien“, stattest du das Formular einfach mit einem target aus – _parent oder _blank bieten sich an, je nachdem ob die einbindende Seite verlassen werden, oder im Hintergrund geöffnet bleiben soll.

    Einziger Haken an der Sache  – wenn der Platzbedarf deines Formulars „dynamisch“ ist, führt das bei zu klein dimensioniertem Iframe zu Scrollbalken. Wenn dein Formular von der Größe her „statisch“ ist, kein Problem – aber andernfalls müsstest du erhöhten Aufwand betreiben, um die Iframe-Größe dynamisch anzupassen (und das würde dann auch wieder die Einbindung von JavaScript auf der Zielseite erfordern.)

    Es soll möglichst jeder den Code einfügen können. Also via CMS Editor.

    Wenn ein CMS das Einfügen von HTML-Code erlaubt, sollte ein Iframe auch kein größeres Problem darstellen, als der direkte Code des Formulars.

    ¹ abgesehen vom Style des Iframe-Elements selber – wenn dem jemand in seiner Seite dicke Rahmen verpassen will o.ä., ist dein Iframe davon natürlich auch betroffen. Aber dem könntest du mit einem style-Attribut in deinem zum Kopieren vorgegebenen Iframe-Code entgegenwirken.

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. Ja – platziere dein Formular in einem eigenständigen Dokument, das auf den Zielseiten per Iframe eingebunden werden kann. Damit hast du die Formatierung komplett unter Kontrolle¹, die Stylesheets der einbindenen Seite können dir nicht dazwischen pfuschen.

      Das ist sicher die professionellste Lösung. Soweit ich weiß komm ich dann aber nicht drum rum, das Dokument auf meinem Server zu haben und für den Traffic aufzukommen. Oder gibt es evtl auch eine Möglichkeit, ein html Dokument direkt in einem anderen html Dokument einzubetten (ohne src Attribut)? ...also so, dass jedes seine eigenen unabhängigen Styles hat.