CSS Browserweiche innerhalb .css Datei möglich?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anweisung
ausgeben
bedingung
bestimmen
browser
code
datei
dokument
funktionieren
header
http
import
klasse
laden
liste
regel
regeln
standard
verstehen
vorteil
-
Hallo
ich kenne Browserweichen in HTML (head-Bereich)
<link rel="stylesheet" href="style1.css" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Homepage-Name</title> <meta http-equiv="content-style-type" content="text/css" /> <link rel="stylesheet" href="mystyle.css" type="text/css" /> <!--[if lt IE 7]> <style type="text/css"> body{behavior:url(csshover3-source.htc); font-size:100%;} </style> <![endif]--> </head>
kann ich solche Browser-Weichen auch direkt in die mystyle.css Datei schreiben ?
wenn ja, wie ... genauso? ... oder muss die (IF Bedingung) m HTML stehen ???
PS: für funktionieren der CSS3 hover Klassen ... ist Bedingung: kleiner als IE 7 genug,
also kann der IE 8 das mit li:hover schon ?
Oder: .... die csshover3-source.htc ist ja JavaScript
kann ich die einfach immer 'laden' und dann darin erst die Browser-Weiche machen,
also aussenrum um den ganzen JS-Code noch eine Bedingung,
für welche Browser das JS ausfegührt werden soll ???
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Nein, conditional comments (also IF...) gibts nur im HTML. Du könntest CSS Hacks einsetzen, das macht man aber kaum noch.
"Industrie-Standard" sind mittlerweile aber CC die einen passenden html tag schrieben, so wie das zB HTML5Boileerplate nutzt:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
Dann kannst du CSS Klassen als "Weiche" einsetzten.
-
ja das ist schon interessant,
aber mir geht es hauptsächlich darum, dass
in allen Browsern funktioniertli:hover
für Drop-Down-Menü mit CSS
und dieses
funktioniert ja in mehreren (alten) Browsern nicht, daher will ich dieli:hover
csshover3-source.htc jeweils dann "laden", wenn es sich um so einen (alten) Browser handelt
es ist ja nicht nur IE < 8 ... sondern bestimmt auch andere (alte FF, etc)
daher die Idee, es direkt in der csshover3-source.htc zu machen
also mit JS prüfen, ob der Browser die .htc "braucht" oder nicht
aber woher bekomme ich eine "Liste" für Browser, die
nicht können,li:hover
um dann dafür die Funktion in der .htc auzurufen (oder eben nicht)
... also die Browserweiche mit JS machen
OK, Problem könnten dann noch Browser sein, die es nicht können und JS deaktiviert haben
aber dafür bräuchte ich dann eben eine ganz andere Version für mein Drop-Down-Menü
... habe mal was mit Tabellen-Kontruktionen gesehen, die angeblich immer funktionieren
aber das finde ich nicht mehr, bzw. weiss ich nicht ob das "gut" ist, mein HTML sollte auch Valide bleiben
-
Keine Ahnung was csshover3-source.htc sein soll. ME kannst du dann auch gleich per JS hingehen und auf die normalen li:hover ganz verzichten. Non JS muss man dann natürlich konzenptionell abfangen, ergo Unterseiten anlegen.
Unterstützung kannst du evtl. hier überprüfen: http://caniuse.com
Ja, es gibt Flyout Menus die mithilfe von CC dem IE beibringen das hover zu verstehen. Das bleibt auch valide. -
Man könnte die wie mein Vorredner schon sagte, das ganze mit einer PHP-Browser Weiche lösen. Und sogar die komplette CSS Datei als PHP datei erstellen und mittels der header Anweisung als CSS ausgeben lassen.
Ich habe so etwas bereits schon mal realisiert, zwar nicht mit Browserweiche, sondern für individuelle Benutzermenüs.
-
In diesem Fall bietet sich die "@import"-Regel von CSS an. Damit bindet man in CSS ein weiteres CSS-Dokument ein. Der Trick der Sache besteht darin, dass ältere Browser diese Regel nicht verstehen und schlichtweg ignorieren. In dem ersten CSS-Dokument schreibst du die Regeln für die älteren Browser. Am ende dieses CSS-Dokuments bindest du dann via @import das zweite CSS-Dokument ein, in dem die Regeln für die neueren Browser drinstehen. Da diese Regeln nach den Regeln für die alten Browsern geladen werden überschreiben sie diese (nur für Browser die etwas mit der @import-Regel anzufangen wissen, versteht sich). Der Vorteil ist, dass man mit dieser Version anders als mit CC oder PHP-CSS-Seiten 100% Valide bleibt.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
