• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fallback: Für Internet Explorer ein anderes css Stylesheet laden

SirROG

SirROG

Mitglied
Guten Tag, da ich grade dran bin meine alte Website (die ich leider noch ned mit css aufgebaut habe) mit css auszurüsten, hab ich nun ne kleine Frage (:
Und zwar würde ich gerne nen Fallback css-stylesheet für den Internet Explorer machen, da einige Darstellungsfunktionen ja leider nicht unterstützt werden, oder halt erst ab ie9 oder ie10.
Hab heute Nachmittag im grossen Web via Google recherchiert und mir viele Informationen zusammen getragen. Und logischerweise hab ich mein neu angeeignetes Wissen gleich ausprobieren wollen ;)

Als erstes meine Vorstellung:
Ich würde gerne erst nen generelles Stylesheet laden wo alle generellen Styleangaben sind, welche für jeden Browser gleich sind
HTML: 
 <!-- Kommentar: CSS Basic für alle Browser -->
    <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/mrogfrog_style.css">

z.B. mit folgenden Angaben:
mrogfrog_style.css
Code: 
body {
    width: 100%;     
    margin:0;
    padding:0;    
    font-family: Arial;
    font-size: 1.5em;    
    color: #000000;
    background-color: #ffffff;
    text-align: left;
}

Danach würde ich gerne nen extra Stylesheet laden, welches für "moderne " Browser ist (sprich ohne ie < 8)
HTML: 
<!-- Kommentar: CSS für alle Browser ausser Internet Explorer < 8-->
    <style type="text/css">@import url(http://m.rogfrog.com/modern_mrogfrog_style.css) all;</style>

z.B. mit folgenden Angaben:
modern_mrogfrog_style.css
Code: 
#bannertitel_background {
width: 100%;
vertical-align: middle;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ5NGY0ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzNiM2YzZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzBhMGUwYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwYTA4MDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(73,79,78,1) 0%, rgba(59,63,62,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,79,78,1)), color-stop(50%,rgba(59,63,62,1)), color-stop(51%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(73,79,78,1) 0%,rgba(59,63,62,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(73,79,78,1) 0%,rgba(59,63,62,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(73,79,78,1) 0%,rgba(59,63,62,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(73,79,78,1) 0%,rgba(59,63,62,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494f4e', endColorstr='#0a0809',GradientType=0 ); /* IE6-8 */
    }


Und dann noch ein Stylesheet für die zickigen Internet Explorer < 8
HTML: 
 <!-- Kommentar: CSS nur für alte Internet Explorer <8 -->
    <!--[if lt IE 8]>   <style type="text/css">@import url(http://m.rogfrog.com/ie_mrogfrog_style.css);</style>
  <![endif]-->

z.B. mit folgenden Angaben:
ie_mrogfrog_style.css
Code: 
#bannertitel_background {
width: 100%;
vertical-align: middle;
background-color: #000000;
}

Leider wird meine Seite nun aber nur mit den Stylesheets vom Generellen-Stylesheet und das für moderne Browser angezeigt und das für die älteren Internet Explorer unter 8 wird leider nie geladen.
Habs logischerweise auch im Internet Explorer getestet und hab das lt auch mal durch nen gt ersetzt um zu schauen ob das Stylesheet für die alten Internet Explorer immerhin dann im Internet Explorer 10 geladen wird, aber hat auch dann ned funktioniert.
Denke irgendwie wird es von den vorherigen Stylesheets überschrieben.

Und ja ich weiss man könnte auch ne Abfrage via JavaScript machen mit
Code: 
<![if !IE]>

Aber würde eben sehr gerne möglichst auf JavaScript verzichten da der Besucher es dann nicht unbedingt aktiviert habe muss, halt eben ausser für die alten Internet Explorer, (dort ist das JavaScript ja im Kommentar versteckt und wird nur aktiviert wenn mit einem alten Internet Explorer zugegriffen wird).

Freundliche Grüsse
Euer SirROG
 
Werbung:
Grundlegend ist zu sagen, dass gleicher Gewichtung der Selektoren spätere angelegte Eigenschaften die früheren überschreiben.

Hier ist die Textfarbe grün
Code: 
#bar {color: red};
#bar {color: blue};
#bar {color: green};

Und hier sollte sie wegen der größeren Ausdifferenzierung des ersten Selektors rot bleiben
Code: 
body #foo #bar {color: red};
#bar {color: blue};
#bar {color: green};

Von dieser Logik ausgehend, kannst du die drei Selektoren auf drei Stylesheets verteilen. Erst das generelle, dann das für den IE8+ und zum Schluss das für den IE7. Alternativ dazu ist es auch möglich, alles in ein Stylesheet zu packen und für die unterschiedlichen IEs Browserhacks hinzuzufügen.
 
Also das heisst so müsste es eigentlich funktionieren.
Zuerst lade ich das generelle Stylesheet, dann das für die modernen Browsern und zuletzt das für die Internet Explorer kleiner 8 um damit Überschreibe ich das Stylesheet für die modernen Browsern.
HTML: 
<!DOCTYPE html>
<html lang="de-ch">
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>ROGFROG - mVorlage</title>
    <meta content="ROGFROG" name="author">
    <meta content="ROGFROG mVorlage" name="keywords">
    <!-- Kommentar: CSS Basic für alle Browser -->
    <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/mrogfrog_style.css">
    <!-- Kommentar: CSS für alle Browser ausser alte Internet Explorer kleiner 8 -->
   <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/modern_mrogfrog_style.css">
    <!-- Kommentar: CSS nur für alte Internet Explorer kleiner 8 -->
    <!--[if lt IE 8]>   <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/ie_mrogfrog_style.css">
  <![endif]-->
  </head>

Nur leider wird auch im Firefox das Stylesheet für die alten Internet Explorer geladen:
Also diesen Kommentar sollte ja nur von Internet Explorern kleiner 8 geladen werden:
Code: 
<!--[if lt IE 8]>   <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/ie_mrogfrog_style.css">
  <![endif]-->
 
Werbung:
Grob überblickt sieht der HTML-Code eigentlich ok aus. Warum auch der Firefox diese CSS-Angaben mitliest, könnte man sicher mit einem Link auf die betroffene Seite besser und schneller nachvollziehen.
 
So habs mal noch bisschen vereinfacht, damit man sich mehr auf das Wesentliche konzentrieren kann.
Dies wäre die betroffene Seite:
ROGFROG - mVorlage

Also für alle Browser ausser dem Internet Explorer soll nun dieses Stylesheet geladen:
http://m.rogfrog.com/modern_mrogfrog_style.css
Code: 
/* --------für alle Browser ausser ie grüner Hintergund--------------------------------- */
body {
    width: 100%;     
    margin:0; 
    padding:0;    
    background-color: #1fff27;
}

Und sobald ein Internet Explorer erkannt wird soll dieses Stylesheet geladen werden:
http://m.rogfrog.com/ie_mrogfrog_style.css
Code: 
/* --------für ie Explorer blauer Hintergrund--------------------------------- */
body {
    width: 100%;     
    margin:0; 
    padding:0;    
    background-color: #1f82ff;
}

Sobald ich JavaScript als Kommentar schreibe, wird das Stylesheet für den Internet Explorer nie geladen und sobald ich das JavaScript direkt schreibe wird nur noch das Stylesheet für den Internet Explorer geladen und das für die anderen Explorer ignoriert.
JavaScript via Kommentar:
HTML: 
 <!--[if IE]>    
    <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/ie_mrogfrog_style.css">
    <![endif]-->

Und hier direkt:
Code: 
<![if IE]>

    <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/ie_mrogfrog_style.css">
    <![endif]>
 
Das ist kein JavaScript sondern ein Conditional Comment. Wie die korrekte Schreibweise ist kannst Du z.B. hier nachlesen:
CSS - Conditional comments

Also:
HTML: 
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Bei deiner Seite stimmt außerdem der HTML-Code so überhaupt nicht:
[Invalid] Markup Validation of http://m.rogfrog.com/mblogvorlage.html - W3C Markup Validator
Es ist ein Wunder, wenn ein Browser hier überhaupt das macht was Du erwartest.

In meinem Firefox wird btw. kein IE-Stylesheet geladen.

Und da Du von Internet Explorer schreibst und selbst ein HTML5-Dokument entwirfst, wäre es vlt. noch von Vorteil, wenn Du dem IE<=8 noch die HTML5-Elemente beibringen würdest. Momentan würde die Seite dort vermutlich total kaputt aussehen.
 
Werbung:
Hey threadi,
Vielen Dank fürs Reinschauen.

Ja, das ist mir klar - Habs nur mal mit JavaScript Versucht, also halt die "Kommentare" weggelassen und da wird dann auch für den FireFox das Stylesheet für den Internet Explorer geladen.
threadi schrieb:
Das ist kein JavaScript sondern ein Conditional Comment. Wie die korrekte Schreibweise ist kannst Du z.B. hier nachlesen:
CSS - Conditional comments
Zum Vergrößern anklicken....

Hmm also der meiste Fehler ist ja "Duplicate ID". Aber ne ID darf man doch mehrfach verwenden? Ich will ja, das jeder Banner die gleiche Schriftart und Schriftfarbe hat. Also verwend ich die ID logischerweise auch bei jedem Banner.
threadi schrieb:
Bei deiner Seite stimmt außerdem der HTML-Code so überhaupt nicht:
[Invalid] Markup Validation of ROGFROG - mVorlage - W3C Markup Validator
Es ist ein Wunder, wenn ein Browser hier überhaupt das macht was Du erwartest.
Zum Vergrößern anklicken....

Und danke für den Hinweis wegen dem HTML5 und den älteren Browsern, dies war mir garnicht bewusst. Uff glückgehabt, gibt es noch Dich (:
Da hab ich mal bischen gegoogelt und diese Lösung gefunden:
HTML: 
<!-- Das JavaScript zum Erzeugen der HTML5 Tags für den Internet Explorer --> <!--[if lt IE 9]> <script type="text/javascript">         document.createElement("nav");         document.createElement("header");         document.createElement("footer");         document.createElement("section");         document.createElement("aside");         document.createElement("article");         document.createElement("hgroup");         document.createElement("figure");         document.createElement("figcaption");         document.createElement("time");     </script> <![endif]-->

und das CSS dazu:
Code: 
/* Einheitlichkeit: Definiert die neuen Tags für alle Browser als Blog-Elemente => wird vor allem für den IE < 9 benötigt! */ header, nav, article, footer, address, section, figure, figcaption {     display: block; }
Quelle: HTML5: Neue Elemente beim Internet Explorer anmelden

Sprich ich muss einfach jedes Elemet, welches ich verwende für die älteren Browser im Conditional Comment und im CSS mit block versehen erzeugen?
 
Nein, eine ID darf man pro HTML-Dokument nur 1 Mal verwenden. Wenn Du wiederholt die selben Eigenschaften verschiedenen Elementen zuordnen willst, verwende eine Klasse.

Und nein, man muss die Elemente nicht einfach nur mit "display: block;" versehen damit ältere IE-Versionen sie erkennen. Du musst vor allem das JavaScript einfügen.
 
Vielen Dank threadi, für die nette Hilfe und für die Zeit, die du für mich nimmst.
Das mit der ID war mir leider nicht bewusst, hab da mal nen Internet Turtorial durchgearbeitet um bisschen CSS zu lernen und dort wurde Class anscheinend leider nicht behandelt.

Habs nun angepasst und die Fehler haben sich nun auch schön reduziert (:

Nun hab ich eig. nurnoch diese Fehlermeldungen:
Code: 
[I]Line 61,         Column 73[/I]:     Bad value go to for attribute longdesc on element img: Whitespace in path component. Use %20 in place of spaces.     
                src="http://m.rogfrog.com/images/go_to_buttonbanner.png"[B]>[/B] </td>      Syntax of IRI reference:
Any URL. For example: /hello, #canvas, or http://example.org/. Characters should be represented in [URL="http://www.macchiato.com/unicode/nfc-faq"]NFC[/URL] and spaces should be escaped as %20.
Code: 
[I]Line 186,         Column 55[/I]:     Attribute preserveaspectratio not allowed on element img at this point.     
padding-bottom:5%;padding-right:10%;padding-left:10%;"[B]>[/B] </a></td>

Quelle: [Invalid] Markup Validation of [url]http://m.rogfrog.com/mblogvorlage.html - W3C Markup Validator[/URL]

Kann damit aber ned wirklich viel anfangen.

Und das CSS-Stylesheet wird leider immer noch nicht für den Internet Explorer geladen, aber denke vielleicht sollte ich auch erst alle Fehlermeldungen beheben.
 
Werbung:
So hatte nun wieder mal bisschen Zeit xD.
Nun sind alle Fehler behoben und die Style-Sheet Umschaltung funktioniert auch nun soweit mit der Ausnahme vom Internet Explorer 10, da wird nicht das Style-Sheet für den Internet Explorer geladen sondern das für alle anderen Browser.
Habs mit dem Internet Explorer 10 und 9 Probiert, bim 9er funktioniert es prima, da wird auch das Style-Sheet für den Internet Explorer geladen, aber beim 10ner aus irgendwelchen Gründen nicht.
 
Der IE10 unterstützt keine Conditional Comments mehr. Solche Hacks funktionieren bei dem Browser nicht mehr, sind imho auch seltenst notwendig.

Dein Header enthält aktuell aber einige Kommentare die ich gerne mal noch klarstellen würde:

HTML: 
<!-- Kommentar: CSS Basic für alle Browser -->
    <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/mrogfrog_style.css">

Stimmt.

HTML: 
<!-- Kommentar: CSS für alle Browser ausser  Internet Explorer -->
    <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/modern_mrogfrog_style.css">

Falsch, bzw. ungenau. Auch diese CSS-Datei wird vom Internet Explorer geladen, also eigentlich ebenfalls von jedem Browser.

HTML: 
<!-- Kommentar: CSS  für  Internet Explorer -->
    <!--[if IE]>    
    <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/ie_mrogfrog_style.css"><![endif]-->

Auch ungenau. Dieser Style wird für alle IE bis einschließlich 9 geladen. IE10 (und der kommende IE11) unterstützen das wie gesagt nicht.
 
Werbung:
Ahhhh na dann ist ja alles klar :)
Vielen Dank wusste nicht, dass Conditional Comments nicht mehr unterstützt werden.

Ja, ich weiss dass diese Beschreibungen nicht genau sind, aber ich will ja auch das nur JavaScript für die Internet Explorer aktiviert sein muss und wenn ich dies genauer beschreiben will müsste in den anderen Browsern auch JavaScript aktiviert sein ;)

HTML-Code:

<!-- Kommentar: CSS für alle Browser ausser Internet Explorer --> <link rel="stylesheet" type="text/css" href="http://m.rogfrog.com/modern_mrogfrog_style.css">
Falsch, bzw. ungenau. Auch diese CSS-Datei wird vom Internet Explorer geladen, also eigentlich ebenfalls von jedem Browser.
Zum Vergrößern anklicken....
Ja, dies ist mir auch klar, aber dieses Style-Sheet wird dann mit dem nachfolgenden Style-Sheet für den Internet Explorer überschriben.£
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben