Browserweichen: Unterschied zwischen den Versionen

Aus Linupedia.org
Wechseln zu: Navigation, Suche
(Stern-html-Hack: einer zu viel)
(Baustein entfernt, Autoren, Nav)
 
(14 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{UnderConstruction}}--[[Benutzer:Yehudi|Yehudi]] 17:13, 31. Okt 2006 (CET)
+
Autoren: [http://www.linux-club.de/faq/Benutzer:Yehudi Yehudi], [http://www.linux-club.de/faq/Benutzer:Djh2 Djh2]
 +
 
 +
 
 +
== Browserabhängige externe Stylsheets ==
 +
Um mit dem dem Netscape Communicator ein anderes Steelsheet zuzuweisen eignet sich folgender Code:
 +
 
 +
<pre><nowiki><title>Stylesheet für NN 4</title>
 +
<link rel="stylesheet" typ="text/css"
 +
href="standard.css">
 +
<style typ="text/css"><!-
 +
@import url ("ohne_nn4.css");
 +
--></style></nowiki></pre>
 +
 
 +
-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)
  
 
== Conditional Comments ==
 
== Conditional Comments ==
Zeile 9: Zeile 22:
 
  </nowiki>
 
  </nowiki>
  
 +
 +
-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)
  
 
== Boxmodell-Hack ==
 
== Boxmodell-Hack ==
Der Boxmodell Hack ist auch nur dafür da, um fehlerhafte Darstellungen im Internetexplorer zu umgehen.
+
 +
Der Boxmodell Hack ist auch nur dafür da, um fehlerhafte Darstellungen im Internet-Explorer bis Version 5.5 zu umgehen.
 +
 
 +
<pre><nowiki>.content {
 +
  CSS-Anweisung;
 +
  voice-family: "\"}\"";
 +
  voice-family: inherit;
 +
  CSS-Anweisung;
 +
}</nowiki></pre>
 +
 
 +
Bis zum IE 5.5 wird die untere Anweisung nicht gelesen, ursprünglich wurde er erfunden, um unkorrekte Darstellung der Weite im IE bis 5.5 zu korrigieren, der Hack ist aber auch für andere Anweisungen brauchbar.
 +
 
 +
-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)
 +
 
* http://meiert.com/de/publications/translations/tantek.com/boxmodelhack/
 
* http://meiert.com/de/publications/translations/tantek.com/boxmodelhack/
 
Deutsche Version
 
Deutsche Version
Zeile 19: Zeile 47:
 
== Möglichkeiten mit Java-Script ==
 
== Möglichkeiten mit Java-Script ==
  
 +
 +
-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)
 +
 +
== Möglichkeiten mit PHP ==
 +
 +
function browsercheck() {
 +
$browser = $_SERVER['HTTP_USER_AGENT']; #liest den Browser des Users aus
 +
if(preg_match("/^(mozilla)(.*)(firefox|ie|Opera|netscape)/i",$browser)) {
 +
 +
/*Kontrolle darauf ob nach Mozilla(was immer am anfang steht)
 +
noch Firefox Internetexplorer Opera oder Netscape steht,
 +
damit man später auch den Mozilla herausfiltern kann,
 +
da dieser Browser keine spezifischen strings hat.*/
 +
 +
if(preg_match("/(ie)(.*)(\))$/i",$browser))
 +
return 1;
 +
else
 +
return 2;
 +
} else
 +
return 0;
 +
}
 +
 +
switch(browsercheck()) {
 +
case 1:
 +
#Internet Explorer
 +
echo '<link rel="stylesheet" typ="text/css" href="internetexplorer.css">';
 +
break;
 +
case 2:
 +
#Mozilla, Mozilla Firefox, Opera, etc.
 +
echo '<link rel="stylesheet" typ="text/css" href="mozilla.css">';
 +
break;
 +
default:
 +
#Sonstige Browser
 +
echo '<link rel="stylesheet" typ="text/css" href="default.css">';
 +
}
 +
 +
Wird derzeit beim mir benutzt auf [http://www.criminal-career.com/ www.criminal-career.com].
 +
Eine ziemlich gute Methode, da das ganze Serverseitig geschieht, also auch mit deaktiviertem JavaScript, etc. funktioniert.
 +
Hinzugefügt von [[Benutzer:Djh2|Djh2]] 19:30, 9. Apr 2007 (CEST)
  
 
== Browserweichen mit Selektoren ==
 
== Browserweichen mit Selektoren ==
Zeile 24: Zeile 91:
 
=== Universalselektor ===
 
=== Universalselektor ===
  
 +
Im Internet-Explorer 4 wird das Hintergrund-Image auf http://www.yehudi.de nicht geladen, aber die Farbe, die für die Seite verantwortlich ist, dadurch wird die ganze Seite grau, und der Seitenrand rechts hebt sich nicht mehr ab.
 +
Hier hilft folgender Hack: 
 +
 +
<pre><nowiki>html, body {
 +
        height: auto;
 +
background: url(images/snap_ground.png) top center repeat-y #e8e8e8;
 +
text-align: center; }
 +
 +
* html, body {
 +
background:  #ffffff; }
 +
 +
* html html, body {
 +
background:  #e8e8e8; }</nowiki></pre>
 +
 +
Die Darstellung (als Vergleich) des Internet-Explorer 4 ist hier zu finden: http://www.yehudi.de/internet-explorer-4-os-9.htm
  
 +
=== Attributselektor ===
 +
Der Internet-Explorer (bis 6 zumindest) und Netscape 4 können die zweite CSS-Anweisung nicht lesen.
 +
<pre><nowiki>a[href]{
 +
      css-Anweisung}
 +
      a[href]{
 +
      css-Anweisung}
 +
</nowiki></pre>
  
  
 +
-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)
  
 
=== Stern-html-Hack ===
 
=== Stern-html-Hack ===
  
Dieses kann eingestzt werden, um Werte für den Internet-Explorer ab Version 5 anders darzustellen. Auf meiner Seite http://www.engefuerst.de tritt das Problem auf, das im Internet-Explorer 5-6 der Header um zwei Pixel nach links verrutscht war. Da der IE ab Version 5-6 die flasche Aussage * html nicht wie die anderen Browser interpretiert, und die Werte liest, werden die vorrangegangenen Werte überschrieben.
+
Dieses kann eingesetzt werden, um Werte für den Internet-Explorer ab Version 5 anders darzustellen. Auf meiner Seite http://www.engefuerst.de tritt das Problem auf, das im Internet-Explorer 5-6 der Header um zwei Pixel nach links verrutscht war. Da der IE ab Version 5-6 die falsche Aussage * html nicht wie die anderen Browser interpretiert, und die Werte liest, werden die vorrangegangenen Werte überschrieben.
  
 
Das sieht dann an der Stelle so aus:
 
Das sieht dann an der Stelle so aus:
Zeile 37: Zeile 127:
  
 
<pre><nowiki>#header {
 
<pre><nowiki>#header {
 
 
background: url('images/header.jpg') no-repeat;
 
background: url('images/header.jpg') no-repeat;
 
 
padding: 0px;
 
padding: 0px;
 
margin-left: 2px;
 
margin-left: 2px;
 
width: 804px;
 
width: 804px;
 
height: 176px;
 
height: 176px;
 
 
}
 
}
 
 
 
*html #header {
 
*html #header {
 
margin-left: 4px;
 
margin-left: 4px;
 
 
}</nowiki></pre>
 
}</nowiki></pre>
  
Zeile 55: Zeile 141:
  
  
=== Komentar-Hacks ===
+
-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)
 +
 
 +
== Komentar-Hacks ==
 +
 
 +
=== CSS-Anweisung für den Internet-Explorer 5 am Mac ===
 +
 
 +
<pre><nowiki>* html, body {
 +
background:  #ffffff;
 +
        /*\*//*/
 +
background:  #e8e8e8;
 +
        /**/
 +
}</nowiki></pre>
 +
 
 +
Im oben benannten ''Universalselektor''ergab sich das Problem, dass der IE auf dem Mac die Seite das Weiß an den Rändern zeigt. Durch die gleich danach folgende Anweisung, wurde die Problematik dort auch behoben.
 +
 
 +
== einzelne Browserabhängige CSS-Anweisungen ==
 +
 
 +
 
 +
===  Trick mit dem Unterstrich ===
 +
 
 +
 
 +
=== !important als Browserweiche ===
 +
 
 +
Auf http://www.engelfuerst.de setze ich rechts auf der Sidebar runde Ecken ein, diese werden aber von dem Internet Explorer bis Version 6 völlig falsch dargestellt. !important verhindert das überschreiben einer darauffolgenden CSS-Anweisung. Der Internet-Explorer und  Netscape  4 kennen diese Regel nicht, und überschreiben mit der nachfolgenden Anweisung den bisherigen Wert. Der Wert none schaltet dann mit einem Schlag die runden Ecken ab, so, dass nun ein vertretbares Aussehen mit eckigen Ecken statt mit runden Ecken zustande kommt. Ab Internet-Explorer 7  werden die runden Ecken korrekt dargestellt, und auch die important-Regel gelesen.
 +
<pre><nowiki>.rtop *, .rbottom *{
 +
        display: block !important;
 +
        display: none; 
 +
        height: 1px;
 +
        overflow: hidden,
 +
        background:#e7e7e7;
 +
padding-left: 22px;
 +
margin-left: 521px;
 +
width: 240px;
 +
}</nowiki></pre>
  
 
== Links ==
 
== Links ==
Zeile 64: Zeile 183:
 
* http://www.webkrauts.de/2004/12/18/conditional-comments-fuer-den-internet-explorer/
 
* http://www.webkrauts.de/2004/12/18/conditional-comments-fuer-den-internet-explorer/
 
* http://www.aboutwebdesign.de/awd/content/1004214286.shtml
 
* http://www.aboutwebdesign.de/awd/content/1004214286.shtml
 +
 +
----
 +
 +
[[Webdesign|zum Webdesign]]
  
 
[[Category:Webdesign]]
 
[[Category:Webdesign]]

Aktuelle Version vom 9. April 2007, 18:15 Uhr

Autoren: Yehudi, Djh2


Browserabhängige externe Stylsheets

Um mit dem dem Netscape Communicator ein anderes Steelsheet zuzuweisen eignet sich folgender Code:

<title>Stylesheet für NN 4</title>
<link rel="stylesheet" typ="text/css"
href="standard.css">
<style typ="text/css"><!-
@import url ("ohne_nn4.css");
--></style>

-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)

Conditional Comments

Conditional Comments werden nur vom Internetexplorer in verschiedenen Versionen erkannt:

 <!--[if IE 5]>
 Dort gehört der code für den IE rein
 <![endif]-->
 


-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)

Boxmodell-Hack

Der Boxmodell Hack ist auch nur dafür da, um fehlerhafte Darstellungen im Internet-Explorer bis Version 5.5 zu umgehen.

.content {
  CSS-Anweisung;
  voice-family: "\"}\"";
  voice-family: inherit;
  CSS-Anweisung;
}

Bis zum IE 5.5 wird die untere Anweisung nicht gelesen, ursprünglich wurde er erfunden, um unkorrekte Darstellung der Weite im IE bis 5.5 zu korrigieren, der Hack ist aber auch für andere Anweisungen brauchbar.

-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)

Deutsche Version

Original Version

Möglichkeiten mit Java-Script

-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)

Möglichkeiten mit PHP

function browsercheck() {
	$browser = $_SERVER['HTTP_USER_AGENT']; #liest den Browser des Users aus 
	if(preg_match("/^(mozilla)(.*)(firefox|ie|Opera|netscape)/i",$browser)) {

		/*Kontrolle darauf ob nach Mozilla(was immer am anfang steht)
		noch Firefox Internetexplorer Opera oder Netscape steht,
		damit man später auch den Mozilla herausfiltern kann,
		da dieser Browser keine spezifischen strings hat.*/

		if(preg_match("/(ie)(.*)(\))$/i",$browser))
			return 1;
		else
			return 2;
	} else
		return 0;
}

switch(browsercheck()) {
	case 1:
		#Internet Explorer
		echo '<link rel="stylesheet" typ="text/css" href="internetexplorer.css">';
	break;
	case 2:
		#Mozilla, Mozilla Firefox, Opera, etc.
		echo '<link rel="stylesheet" typ="text/css" href="mozilla.css">';
	break;
	default:
		#Sonstige Browser
		echo '<link rel="stylesheet" typ="text/css" href="default.css">';
}

Wird derzeit beim mir benutzt auf www.criminal-career.com. Eine ziemlich gute Methode, da das ganze Serverseitig geschieht, also auch mit deaktiviertem JavaScript, etc. funktioniert. Hinzugefügt von Djh2 19:30, 9. Apr 2007 (CEST)

Browserweichen mit Selektoren

Universalselektor

Im Internet-Explorer 4 wird das Hintergrund-Image auf http://www.yehudi.de nicht geladen, aber die Farbe, die für die Seite verantwortlich ist, dadurch wird die ganze Seite grau, und der Seitenrand rechts hebt sich nicht mehr ab. Hier hilft folgender Hack:

html, body { 
        height: auto;
	background: url(images/snap_ground.png) top center repeat-y #e8e8e8;
	text-align: center; }
	
* html, body { 
	background:  #ffffff; }

* html html, body { 
	background:  #e8e8e8; }

Die Darstellung (als Vergleich) des Internet-Explorer 4 ist hier zu finden: http://www.yehudi.de/internet-explorer-4-os-9.htm

Attributselektor

Der Internet-Explorer (bis 6 zumindest) und Netscape 4 können die zweite CSS-Anweisung nicht lesen.

a[href]{ 
       css-Anweisung}
       a[href]{ 
       css-Anweisung}


-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)

Stern-html-Hack

Dieses kann eingesetzt werden, um Werte für den Internet-Explorer ab Version 5 anders darzustellen. Auf meiner Seite http://www.engefuerst.de tritt das Problem auf, das im Internet-Explorer 5-6 der Header um zwei Pixel nach links verrutscht war. Da der IE ab Version 5-6 die falsche Aussage * html nicht wie die anderen Browser interpretiert, und die Werte liest, werden die vorrangegangenen Werte überschrieben.

Das sieht dann an der Stelle so aus:


#header {
	background: url('images/header.jpg') no-repeat;
	padding: 0px;
	margin-left: 2px;
	width: 804px;
	height: 176px;
	}
	
*html #header {
	margin-left: 4px;
	}

Stern-Kind-Selektor-html-Hack

-(Dieser Hack befindet sich derzeit bei mir nicht im praktischen Einsatz, und ist von mir nicht getestet)

Komentar-Hacks

CSS-Anweisung für den Internet-Explorer 5 am Mac

* html, body { 
	background:  #ffffff; 
        /*\*//*/
	background:  #e8e8e8; 
        /**/
}

Im oben benannten Universalselektorergab sich das Problem, dass der IE auf dem Mac die Seite das Weiß an den Rändern zeigt. Durch die gleich danach folgende Anweisung, wurde die Problematik dort auch behoben.

einzelne Browserabhängige CSS-Anweisungen

Trick mit dem Unterstrich

!important als Browserweiche

Auf http://www.engelfuerst.de setze ich rechts auf der Sidebar runde Ecken ein, diese werden aber von dem Internet Explorer bis Version 6 völlig falsch dargestellt. !important verhindert das überschreiben einer darauffolgenden CSS-Anweisung. Der Internet-Explorer und Netscape 4 kennen diese Regel nicht, und überschreiben mit der nachfolgenden Anweisung den bisherigen Wert. Der Wert none schaltet dann mit einem Schlag die runden Ecken ab, so, dass nun ein vertretbares Aussehen mit eckigen Ecken statt mit runden Ecken zustande kommt. Ab Internet-Explorer 7 werden die runden Ecken korrekt dargestellt, und auch die important-Regel gelesen.

.rtop *, .rbottom *{
        display: block !important; 
        display: none;   
        height: 1px; 
        overflow: hidden,
        background:#e7e7e7;
	padding-left: 22px;
	margin-left: 521px;
	width: 240px;
	}

Links


zum Webdesign