Jnnbo: Inline CSS doch nicht so ganz verkehrt?

Moin,

was ich nicht ganz verstehe ist folgendes:

Wenn ich mir im Forum einige Beiträge zum Thema CSS durchlese dann heißt es immer wieder dass man kein CSS Inline schreiben soll, sondern alles in eine externe Datei. Wenn ich nun auf Google höre, muss der wichtigste CSS Code inline geschrieben werden und alles andere wie gehabt in eine externe Datei, die allerdings am Ende der Seite sich befindet.

  1. Hallo,

    keine Ahnung warum du darum so eine Welle machst. Wie du deine Seiten erstellst und die CSS-Angaben verteilst ist doch ganz und gar deine Entscheidung. Wenn dich die Meinung anderer nicht interessiert hör' doch einfach weg.

    Gruss

    MrMurphy

    1. Eigentlich sollte CSS den Inhalt vom Layout trennen aber google Pagespeed mosert bei externer CSS Datei tatsächlich weshalb ich die Datei jetzt einfach per PHP includiere, dann braucht zum rendern der Seite keine weitere Datei geladen werden und alle sind happy :)

      1. Hi,

        Eigentlich sollte CSS den Inhalt vom Layout trennen aber google Pagespeed mosert bei externer CSS Datei tatsächlich weshalb ich die Datei jetzt einfach per PHP includiere, dann braucht zum rendern der Seite keine weitere Datei geladen werden und alle sind happy :)

        bis auf die Leute, die sich mehrere Seiten bei Dir angucken, und jedesmal wieder das CSS laden müssen, da es ja nicht einzeln gecached werden kann, und weil es jedesmal in der Seite mitgeliefert wird.

        cu, Andreas

        --
        Warum nennt sich Andreas hier MudGuard? O o ostern ... Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
        1. @@MudGuard:

          Eigentlich sollte CSS den Inhalt vom Layout trennen

          Ja, das sollte man. Das tut man auch, wenn man das Stylesheet per serverseitiger Technik ins HTML einfügt.

          aber google Pagespeed mosert bei externer CSS Datei tatsächlich weshalb ich die Datei jetzt einfach per PHP includiere, dann braucht zum rendern der Seite keine weitere Datei geladen werden und alle sind happy :)

          bis auf die Leute, die sich mehrere Seiten bei Dir angucken, und jedesmal wieder das CSS laden müssen, da es ja nicht einzeln gecached werden kann, und weil es jedesmal in der Seite mitgeliefert wird.

          s.a.

          LLAP

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. bis auf die Leute, die sich mehrere Seiten bei Dir angucken, und jedesmal wieder das CSS laden müssen, da es ja nicht einzeln gecached werden kann, und weil es jedesmal in der Seite mitgeliefert wird.

          Stimmt aber heutzutage ist es im Zweifelsfall wichtiger Google zufrieden zu stellen als alle User.

          Hatte einige Useroptimierte Seiten. Die waren super einfach zu bedienen etc aber Google mochte sie nicht, da man bei Mobilgeräten horizontal scrollen musste. Darum hab ich jetzt umgestellt.

          Die User müssen nun umständlich nach unten scrollen, da sich Inhalte nicht mehr direkt daneben sondern schwirig zu finden untereinander finden aber Google gibt grünes Licht und liefert 100 mal so viele Besucher und steigert damit meine Adsense Einahmen.

          Positiver Nebeneffekt: User die nicht mehr sofort finden was sie suchen klicken eher auf Werbung. Die Welt ist böse ;)

          1. @@Googlefan:

            heutzutage ist es im Zweifelsfall wichtiger Google zufrieden zu stellen als alle User.

            Bullshit.

            Hatte einige Useroptimierte Seiten. Die waren super einfach zu bedienen etc aber Google mochte sie nicht, da man bei Mobilgeräten horizontal scrollen musste.

            Quatsch. Ein Bot dürfte sich nicht fürs Layout interessieren.

            Wenn Nutzer horizontal scrollen müssen, dann sind die Seiten nicht „useroptimiert“.

            Die User müssen nun umständlich nach unten scrollen, da sich Inhalte nicht mehr direkt daneben sondern schwirig zu finden untereinander finden

            Lass mich raten: Du hast jetzt erst den Seiteninhalt, dann die Navigation zu anderen Seiten in Quelltext? Das könnte einen Suchmaschinenbot freuen – aber auch menschliche Seitenbesucher. Man muss es nur richtig machen, z.B. einen Link „zum Menü“ am Seitenanfang anbieten.

            aber Google gibt grünes Licht und liefert 100 mal so viele Besucher und steigert damit meine Adsense Einahmen.

            Positiver Nebeneffekt: User die nicht mehr sofort finden was sie suchen klicken eher auf Werbung.

            Wenn dumme Nutzer für dich wichtiger sind als zufriedene Nutzer, dann will ich dein Geschäftsmodell gar nicht wissen.

            LLAP

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. Quatsch. Ein Bot dürfte sich nicht fürs Layout interessieren.

              Tut er aber: https://www.google.com/webmasters/tools/mobile-friendly/?utm_source=psi&utm_medium=referral&utm_campaign=uxresults&url=selfhtml.org

              Wenn Nutzer horizontal scrollen müssen, dann sind die Seiten nicht „useroptimiert“.

              Du meinst du könntest das entscheiden?

              Lass mich raten:

              Falsch mit Menü hat das nix zu tun. Es geht um Fragen. Die passenden Antworten waren bisher ganz einfach rechts mit einem Wisch auf dem Smartphone zu finden. Jetzt sind sie darunter. Echt doof aber Google will es so :(

              1. Hallo

                Falsch mit Menü hat das nix zu tun. Es geht um Fragen. Die passenden Antworten waren bisher ganz einfach rechts mit einem Wisch auf dem Smartphone zu finden. Jetzt sind sie darunter. Echt doof aber Google will es so :(

                Du schreibst deine Seiten für Google und nicht für die sonstigen Besucher deiner Seiten? Du hast ein sehr spezielles Publikum.

                Tschö, Auge

                --
                Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war. Terry Pratchett, "Wachen! Wachen!" ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
                1. Du schreibst deine Seiten für Google und nicht für die sonstigen Besucher deiner Seiten? Du hast ein sehr spezielles Publikum.

                  Immerhin habe ich ein Publikum. Würde ich Googles Wunsch ignorieren, hätte ich viel weniger Besucher.

                2. Du hast ein sehr spezielles Publikum.

                  Das Apple Prizip: Lieber dumme Kunden, die jedes Jahr ein neues Produkt kaufen als kluge, die woanders viel günstigere und haltbarere Geräte einkaufen :)

                  1. @@MrApfel:

                    Das Apple Prizip: Lieber dumme Kunden, die jedes Jahr ein neues Produkt kaufen als kluge, die woanders viel günstigere und haltbarere Geräte einkaufen :)

                    Viel günstiger? Wohl kaum. Überraschung: „Selling you products is how Apple makes money.“ (Aral Balkan) Andere verdienen an den Daten der Nutzer und könnten ihre Geräte eigentlich auch verschenken. (Machen’s aber nicht.)

                    Ja, Apple lässt sich seine Produkte bezahlen. Und nein, Produkte anderer Hersteller mit vergleichbarer Ausstattung sind auch nicht wirklich billiger.

                    Viel haltbarer? LOL. Das Scharnier eines 300-Euro-Laptops klappert schon beim ersten Ankucken.

                    Jedes Jahr ein neues Gerät? Eher nicht. Es mag aber Leute geben, die das machen. Das Gute für die: Apple-Geräte haben nach einem Jahr noch einen hohen Wiederverkaufswert. Das dürfte auch mit der Haltbarkeit der Geräte zusammenhängen.

                    LLAP

                    --
                    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                    1. Apple-Geräte haben nach einem Jahr noch einen hohen Wiederverkaufswert. Das dürfte auch mit der Haltbarkeit der Geräte zusammenhängen.

                      Vielleicht liegts auch am eingelöteten, nicht wechselbaren Akku oder der Kindersicherung, die ohne Jailbreak nicht den vollen Funktionsumfang der iPhones frei gibt? Oder weil man ans iPad so super externe USB Geräte wie Festplatten etc anschliessen kann? Danke...selten so gelacht :D

                    2. Naja Fakt ist dass Safari User sich nicht durch Wissen sondern ihre Geldbörse auszeichnen und uns allen aus diesem Grund eher willkommen sind als Firefox User mit Adblock: http://www.spiegel.de/wirtschaft/service/datenauswertung-bei-orbitz-apple-user-zahlen-mehr-fuer-hotelzimmer-a-840938.html

              2. @@googlefan:

                Quatsch. Ein Bot dürfte sich nicht fürs Layout interessieren.

                Tut er aber: https://www.google.com/webmasters/tools/mobile-friendly/?utm_source=psi&utm_medium=referral&utm_campaign=uxresults&url=selfhtml.org

                Du verwechselst Google-Suche und Google-Devoloer-Tools.

                Falsch mit Menü hat das nix zu tun. Es geht um Fragen. Die passenden Antworten waren bisher ganz einfach rechts mit einem Wisch auf dem Smartphone zu finden. Jetzt sind sie darunter. Echt doof aber Google will es so :(

                Der Suchbot interessiert sich für Inhalte, evtl. auch fürs Markup, aber nicht nicht für das Layout.

                LLAP

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
                1. Der Suchbot interessiert sich für Inhalte, evtl. auch fürs Markup, aber nicht nicht für das Layout.

                  Wie auch immer. Seiten, die nicht als mobilgerätefreundlich eingestuft werden, werden abgewertet.

      2. Eigentlich sollte CSS den Inhalt vom Layout trennen

        Das halte ich für ein Märchen.

        Ich produziere Webseiten mit voneinander unabhängigen Inhalten. Beispiel: Eine Veranstaltung, die ein Bild enthält, einen Titel, Adresse, Beschreibung, Teilnehmer bei Festivals, Hörproben, ein Video, ...

        Jetzt zeige mir bitte jemand, wie ich die HTML-Reihenfolge dieser Teile mit CSS beliebig ändern könnte. Also wie sage ich CSS, stelle div-1 zwischen div-5 und div-6 ?

        Diese Frage steht wirklich an, denn ich würde den Veranstaltern gerne ein "freies Layout" anbieten.

        Ich kann Informationen ausblenden und in verschiedenen Schriftarten darstellen, aber wie vertausche ich die Reihenfolge von 10 Blöcken?

        Linuchs

        1. @@Linuchs:

          Jetzt zeige mir bitte jemand, wie ich die HTML-Reihenfolge dieser Teile mit CSS beliebig ändern könnte. Also wie sage ich CSS, stelle div-1 zwischen div-5 und div-6 ?

          Flexbox, order.

          LLAP

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

          Diese Frage steht wirklich an, denn ich würde den Veranstaltern gerne ein "freies Layout" anbieten.

          Biete doch Deinen Kunden die Veranstaltungskalender als Webservice an. Evnt. gleich mit GEO-Lokations-Option.

          Das Layout können die dann selber bauen von mausgrau bis knallbunt.

          Schöne Grüße.

    2. @@MrMurphy:

      Wenn dich die Meinung anderer nicht interessiert hör' doch einfach weg.

      „Ich wünschte, guter Rat wäre teuer. Dann würde man ihn nicht ständig ungefragt von allen und jedem bekommen.“ (Lea Streisand)

      LLAP

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Wenn ich mir im Forum einige Beiträge zum Thema CSS durchlese dann heißt es immer wieder dass man kein CSS Inline schreiben soll, sondern alles in eine externe Datei.

    … weil sich sauber getrennte Codeteile grundsätzlich leichter bearbeiten lassen.

    Zusammengehörigen Code an mehreren Stellen zu lagern ist arbeitsaufwändig und fehlerträchtig. Denselben Code an verschiedenen Stellen in Kopie einzusetzen ist eine Fehlergarantie (sofern die Kopie nicht automatisiert wird).

    Denselben Code bei jeder Seite erneut laden zu müssen, verzögert zudem den Seitenaufbau.

    Wenn ich nun auf Google höre, muss der wichtigste CSS-Code inline geschrieben werden

    … weil der Browser die Seite dann schon beim Einlesen des HTML-Codes, also der Daten der ersten Anfrage an den Server größtenteils fertig anzeigen kann.

    Es geht dabei allerdings weniger um "das Wichtigste" als vielmehr um jene Bereiche der Seite, die zuerst auf dem Bildschirm erscheinen.

    Von "muss" ist bei Google im Übrigen keine Rede. Es ist eine Empfehlung, mit der man seine Seiten eine halbe Sekunde schneller anzeigen lassen kann.

    und alles andere wie gehabt in eine externe Datei, die sich allerdings am Ende der Seite befindet.

    … weil das Nachladen von CSS (und Javascript) im Seitenkopf den weiteren Seitenaufbau bei manchen Browsern unterbricht.

    Du solltest dich nicht sklavisch an Googles Empfehlungen halten, ebenso wenig an jene anderer Leute. Finde den für dich und dein Projekt günstigsten Mittelweg.

    Googles Empfehlungen sind richtig, was die Ladegeschwindigkeit angeht. Das hilft dir aber nichts, wenn du im Gegenzug in einem Wust aus auf mehrere HTML-Dateien verteilten CSS-Code die Übersicht verlierst, dabei im günstigen Fall nur Zeit fürs Suchen verschwendest, im ungünstigen Falle aber Fehler einbaust, weil dir Abhängigkeiten wegen der Zersplitterung nicht ersichtlich sind oder du schlicht die Änderung in einer der zehn Kopien vergisst.

    Es gibt durchaus die Möglichkeit, beidem gerecht zu werden, CSS zentral zu verwalten und besagte "wichtige Teile" automatisiert in den HTML-Kopf einzubinden. Server-Side Includes wären ein einfaches Beispiel, PHPs include_once() ebenso.

    Und es ist obendrein nicht so, dass man sich um 100 gesparte Millisekunden einen Kopf machen müsste. Google gibt Empfehlungen aufgrund der bloßen Struktur einer Seite, nicht aufgrund der tatsächlichen Ladegeschwindigkeit. Lädt die Seite eh schnell, gibt es keinen Handlungsbedarf – jedenfalls keinen, der die Angelegenheit möglicherweise an anderer Stelle verschlimmert, siehe oben.