FOUC-Problem beim IE

[Tunarus]

Guten Morgen,

ich stehe vor dem Problem des FOUC und keine der Lösungen will bei mir funktionieren.

Was ist "FOUC"? Der FOUC (="Flash Of Unstyled Content") ist das kurze Aufblitzen der ungestylten Seite. Vor dem Einlesen der eingebetteten CSS-Dateien wird die die nackte Seite aufgerufen. Dies ist ein reines InternetExplorer Problem. Üblicherweise wird der FOUC durch Einbinden der CSS mittels @import verursacht. Wenn statt dessen (korrekterweise) die CSS mittels LINK / href eingebettet werden, sollte der Effekt nicht auftreten.

Ich verzweifel´ langsam am IE. Hier die Seite, um die es geht (...ist noch im Designstudie-Status, nur die Links "Willkommen" und "Über uns" sind aktiv):
->Chor Recklinghausen<-

Der besseren Übersichtlichkeit und Lesbarkeit wegen habe ich vier verschiedene aufgabengebundene CSS eingebunden:
styles.css - die Styles
formate.css - die Formatierungen
boxen.css - die div-Boxen
navi.css - die Navigation

Ich habe bereits die Java-Script Löung wie auch die Lösungen von ->Bluerobot<- erfolglos probiert. Und natürlich lade ich die CSS im Head wie gesagt über LINK (mache ich immer so).

Kann mir einer von euch Experten bitte verraten, warum ich diesen elenden FOUC im IE nicht loswerde?

Hier noch die Links zu den CSS:
->styles.css<-
->formate.css<-
->boxen.css<-
->navi.css<-

Danke im Voraus
Tunarus

[Bassboy]

Hast du schonmal probiert, die Inhalte der Stylesheet-Dateien direkt in den Head einzubinden? Das sollte den FOUC bisschen minimieren.

<style type="text/css">
/* CSS-Direktiven */
</style>

FOUC ist leider ein altes Problem vom IE (und ich glaub auch teilweise von Opera). Man könnte es fast als Bug bezeichnen

[Tunarus]

Zitat von Bassboy

Man könnte es fast als Bug bezeichnen

...das "fast" kannst du streichen. Ich hasse diesen versch... Möchtegern-Browser.

Wie du schon sagst wird der FOUC-Effekt nur etwas gemildert, aber nicht beseitigt. Außer dem müsste ich dann Änderungen am Style in allen Seiten anpassen und nicht nur ein mal zentral in der separaten CSS.

Danke trotztem für deine Antwort.

Herzlichen Gruß,
Tunarus

[Bassboy]

Du könntest sie auch mit PHP in jede Seite einbinden, dann bearbeitest du sie 1x und ist auf allen Seiten gleich verfügbar.

[Tunarus]

PHP... hmmmm... hab´ ich schon mal gehört.
Da müsste ich mich etwas näher in PHP einarbeiten.
Ich guck´ mal.

[Bassboy]

Gar nicht schwierig

1. Erstelle eine Datei für das Stylesheet (zum Beispiel stylesheet.php).
2. In jeder Datei, wo sie eingebunden werden soll, schreibst du folgendes in den Head-Bereich:
   
   PHP-Code:

   <script type="text/css">
<?php
include("stylesheet.php");
?>
</script>

Das kannst du auch mit mehreren Dateien machen. Einfach für jede weitere Stylesheet-PHP-Datei ein weiteres include.

Beispiel:

PHP-Code:

<script type="text/css">
<?php
include("stylesheet01.php");
include("stylesheet02.php");
include("stylesheet03.php");
?>
</script>

Noch eine kleine Anmerkung: Natürlich muss jede Seite, die PHP-Code enthält, auch die Dateiendung .php besitzen.

[Tunarus]

...tja, feine Idee, aber ich habe leider gerade fest gestellt,
dass der Webserver des Hostingpaketes nicht PHP-fähig ist.

Wennichkönnetwieichwolltewürdichjetztfluchenwieeinseebär!

Mist! (...hiermit geoutet als Bernd-Fan )

Gruß,
Tunarus

[Bassboy]

Webspace ohne PHP - no go

[Tunarus]

...jupp - wenn man am falschen Ende spart. Ich hab´ das ->Konzeptweb jetzt fertig<-.
Ist dann doch insgesamt 294 Kilobyte groß geworden, und dabei noch ->vollständig valide<-
(...auffekackehau´).

Gruß,
Tunarus

[Bassboy]

Wirklich nett geworden!
Ich würde die Unterseiten vielleicht noch etwas an den Überpunkt beziehen, damit man das auf Anhieb besser erkennt.

[iF_]

Zitat von Tunarus

bitte verraten, warum ich diesen elenden FOUC im IE nicht loswerde?

Immer wieder interessant, was alles fix als "Bug" (hier im Thread) deklariert wird, wenn ein "Verhalten" nicht wunschgemäss ist.

Ähnlich hieß es, Links in Beiträgen beeinflussen das "Ranking" negativ. Lol. Ewig grüßt 1982.

IE hat hierzu aber keinen Bug, und ich mag IE ganz sicher ebenso nicht.

Eigentlich sogar speziell hierbei, macht IE es sogar "richtiger", als andere Browser - man könnte auch sagen "ehrlicher" aber eigentlich ist "schneller" treffend.

Kurz um ist es Prioritätensache der jeweiligen Browser möglichst schnell und fix gleich anzuzeigen, was bereits an "Wissen" vorhanden/ geladen ist. Superbeispiel hierzu sind Bilder, bei denen man z.B. zusehen kann, wenn diese erst geladen werden.

Nicht anders ists bei anderen externen Dateien wie auch bei CSS oder JS. Ein Grund auch, weshalb es z.B. js onload gibt.

FireFox z.B. hat ein ähnliches Problem, wenn CSS im Body angewandt wird. Manchmal (je nach Computer/ Prozess, Threadsync/ Geschwindigkeit) zeigt dieser seither dann erst ohne angewandten im Body vorhandenen CSS und zeichnet dann komplett erst neu, mit im Body angewandten CSS. Zwar gehört CSS nicht unbedingt in den Body, aber diese "Aussage" ließe sich - wenn man konsequent betrachtet - ebenso widerlegen.

Schön ist es nicht aber eben auch kein Bug.

[raser155]

Hallo!

Hab das gerade mit dem IE angeschaut und sehe kein "blitzen". Aber vielleicht wird die Seite bei mir so schnell aufgebaut dass einem das (oder zumindest mir) nicht auffällt.

Aber was anderes, arbeitest du mit Frames? Denn wenn man z.b auf Über uns klickt sind plötzlich die anderen Links in der ersten Menüzeile nicht mehr verlinkt.


mfg raser

[Tunarus]

...ich hatte ja oben gesagt, dass es sich um das Grobkonzept handelt und nur die ersten beiden Links aktiv sind. Mittlerweise bin ich etwas weiter und habe ->hier<- den momentanen Stand.

Frames sind bähbäh. Die Site ist selbstverständlich ->valide<- und die CSS ->sind´s auch<-.

Dass der FOUS-Effekt nun deutlich geringer erscheint liegt daran, dass ich die CSS gnadenlos optimiert habe. Alle Kommentare, überflüssigen Zeilenumbrüche oder Leerzeichen sind entfernt. Die Struktur ist jetzt "gerade noch lesbar" aber dafür auch deutlich schneller, so dass die Dauer der ungestylten Seiten auf ein Minimum reduziert wird. Wenn ich keine andere Lösung finde wird´s dann halt so bleiben (...müssen). Der Chor ist jedenfalls sehr zufrieden und dann bin ich´s auch.

@Bassboy:

Zitat von Bassboy

Wirklich nett geworden!
Ich würde die Unterseiten vielleicht noch etwas an den Überpunkt beziehen, damit man das auf Anhieb besser erkennt.

...keine schlechte Idee, ich werde mal versuchen etwas zu basteln.


@iF_:
Ja, du hast Recht.

...aber ärgerlich isset trotzdem, verdorrich.

Gruß und vielen Dank für euer Feedback,
Tunarus

[Tunarus]

@Bassboy:

Ich habe deine Idee mal umgesetzt und finde es tatsächlich besser - wat sachste?

Gruß,
Tunarus

[Bassboy]

Find ich super! Jetzt weiß man, dass die Punkte genau zu dem Überpunkt gehören. Mehr als 5 würden da dann evtl. aber wieder unübersichtlich wirken.