Neue HTLM5 Elemente wie z.B. main und alte Browser

  • Hi.

    Ich habe auf meiner Webseite nun die neuen HTML5 Elemente wie z.B. <header> <main> <footer> verwendet.

    Damit es in älteren Browsern funktioniert, habe ich die Elemente mit CSS als Blockelement deklariert. (Display: Block)

    Zusammen mit dem Body Element dienen sie auch zur Erzeugung des Flexbox Grundgerüst bei den neueren Browsern.

    Ich habe aber darauf verzichtet, weitere CSS Formatierungen wie z.B. Größenangaben, Hintergrundfarbe, etc, direkt auf dem Element durchzuführen, weil ältere Browser diese Styles dort nicht zuweisen und die Seite dann beschissen aussieht. Dafür habe ich dann nochmal extra einen inneren DIV eingebaut, auf dem die Styles dann angewendet werden. Das klappt auch bei alten Browsern.
    Auf den HTML5Shiv habe ich verzichtet, da dieser JS benötigt.

    Nun habe ich es so weit geschafft, dass die Seite sogar noch auf dem IE 6 ganz passabel aussieht und lesbar bleibt.

    Was haltet ihr davon, die neuen HTML5 Elemente zu nutzen, für die Strukturierung, dann aber nochmals extra DIV Container für das Design zu nutzen, um eine größere Kompatibilität zu erreichen?
    Oder würdet ihr darauf heutzutage ehr verzichten?

    Ich dachte, die Startseite, Info-Seite und FAQ sollte auf jeden Fall immer lesbar bleiben.
    Für den internen Bereich wird hingegen etwas eingebaut, so dass man mit alten Browsern gar nicht erst einloggen kann wenn sie Mindestanforderungen nicht erfüllen.

  • Hallo

    Du machst dir viel Arbeit für nichts.

    Zum einen unterstützt du Browser die heute nicht mehr verwendet werden. Zum anderen kannst du aktuelles CSS so nur bedingt einsetzen. Und du erschwerst dir selbst die Arbeit, da die unnötigen Container immer mit gestaltet werden müssen.

    Außerdem widerspricht dein Vorgehen den aktuellen HTML5-Regeln, nach denen Inhalt und Aussehen getrennt werden sollen. Dazu gehört so weit wie möglich keine Container zu verwenden, die nur dem Aussehen dienen.

    Ich rate von dem Vorgehen ab.

    Zitat

    Für den internen Bereich wird hingegen etwas eingebaut, so dass man mit alten Browsern gar nicht erst einloggen kann wenn sie Mindestanforderungen nicht erfüllen.

    Die Logik kann ich nicht nachvollziehen. Einerseits willst du die Seite mit (untauglichen) Mitteln möglichst abwärtskompatibel machen, andererseits willst du genau solche alten Browser blockieren?

    Gruss

    MrMurphy

  • Hi.

    Der Gedankengang war folgender:
    Die Startseite / FAQ sollte relativ abwärtskompatibel sein, damit die Leute in der FAQ wenigstens noch lesen können, was technisch benötigt wird.

    Ich habe das Problem, dass das Layout in sich zusammenfällt und die Elemente sich gegenseitig überdecken, wenn man mit einem alten Browser kommt, weil die Browser weder Flexbox können noch die "Fallback" Höhenangaben auf den neuen HTML5 Elementen verwenden. Dies läßt sich nur durch HTML5Shiv oder zusätzliche DIVs beheben.

    Das Problem tritt aber auch nur bei IE auf. Alte Versionen von Firefox (z.B. die 3.6) zeigen zumindest noch den Text.
    Ich kann höchstens noch hingehen und mit Conditional Comments und meta http-equiv="refresh" die alten IEs auf eine Fehlerseite umleiten.
    Den IE10 erwische ich damit aber schon nicht mehr. Da müsste man dann zumindest dafür sorgen, dass die Leute die FAQ noch lesen können.

    Beim internen Bereich hat Internet Explorer sowieso verloren weil da ES6 verlangt wird. Aber da meckert dann schon die Software ansich mit Einblendung einer Fehlerseite.