Browserweiche für verschiedene Browser

[Carrear]

Hi Leute,

da ich einige CSS3 Elemente nutze, die nicht von allen FF und IE Versionen unterstützt werden möchte ich unterscheiden zwischen 2 CSS Dateien. Eine für Die FF und IE Versionen, die bestimmte CSS3 Module noch nicht unterstützen und eine für die FF IE Versionen die es unterstützen und für Chrome, Opera und Safari.

Ich nehm an, dass es ein einfaches Snippet ist (hoffe ich ) aber in der Vielzahl der Vorschläge im Netz blicke ich nicht durch, welcher Vorschlag wie funktioniert.

Ich wäre also dankbar für einen möglichst unkomplizierten Lösungsansatz.

Ich nutze folgende CSS3 Elemente: Border-Radius, Gardients, Keyframe-Animation
Ich würde da einfach alternativ eine CSS Datei erstellen, in der diese Eigenschaften mit Workarounds, wie Bildern und alternativen Hovereffekten "nachgestaltet" werden.

 

[CPoly]

Ich würde es lassen.

border-radius: Funktioniert fast überall. Nur die alten IEs (< 9) bekommen halt keine runden Ecken. Und da würde dir eine CSS Datei nicht viel helfen. Du bräuchtest ein anderes Markup, um die runden Ecken mit Grafiken zu erzeugen

gradients: Da kannst du das Fallback einfach direkt integrieren

#foo {
    background-image:url(fallback.png);
    background-image:linear-gradient(#fff, #000);
}

keyframe-animationen: Werden von den anderen Browsern einfach ignoriert. Wenn du diese mit JavaScript simulieren willst, brauchst du trotzdem keine zweite CSS Datei dafür.

 

[Carrear]

Okay, das hört sich ja schonmal gut an.

Allerdings hast du 100% der nötigen Info - du kannst ja schlecht wissen, dass ich in manchen fällen (Navigation) :first-child und :last-child nutze um Attribute für border-radius festzulegen. Und da könnte man dann alternativ ein Hintergrundbild angeben. Da wäre dann schon ein Browserweiche nötig oder? Im ganzen haben die :first-child und :last-child Elemente einen background-gardient und einen border-radius, wenn ich da ein background-image festlege, wird das gar nicht zu sehen sein oder?

Fehlt nur noch mein Border-Image. Was würde damit passieren?

Viele Grüße und meinen Dank

EDIT: Achso und was mir grad einfällt ist, dass ich mein Layout ja auch Responsive gestalte über Media Queries ^^

 

[CPoly]

du kannst ja schlecht wissen, dass ich in manchen fällen (Navigation) :first-child und :last-child nutze um Attribute für border-radius festzulegen. Und da könnte man dann alternativ ein Hintergrundbild angeben.

Nur das IE < 9 kein :last-child kennt, also kannst du auch kein Hintergrundbild angeben. Wie würdest du das Element dann in deinem alternativen Stylesheet ansprechen?

Im ganzen haben die :first-child und :last-child Elemente einen background-gardient und einen border-radius, wenn ich da ein background-image festlege, wird das gar nicht zu sehen sein oder?

Es gibt kein background-gradient, sondern man legt als background-image einen gradient fest. Von daher wird dann das vorher zugewiesene Bild überschrieben (siehe mein Code in #2). Wenn der Browser kein gradient kennt, sieht er das als ungültigen Wert an und nimmt stattdessen das Bild.

Fehlt nur noch mein Border-Image. Was würde damit passieren?

Ich habe bisher den Nutzen von border-image noch nicht erkannt. Aber wenn du border-image:foo; angibst, und der Browser kennt border-image nicht, dann wird es eben ignoriert.

EDIT: Achso und was mir grad einfällt ist, dass ich mein Layout ja auch Responsive gestalte über Media Queries ^^

Ab dem Punkt kommst du um alternative Stylesheets nicht mehr herum, zumindest wenn du es richtig machst und mobile first designst. Hier ein Artikel den ich vor kurzem entdeckt habe: http://nicolasgallagher.com/mobile-first-css-sass-and-ie/ Ich denke da findest du alles wichtige.

 

[Carrear]

Naja, ich habe eine Border, welche oben einen horizontalen Farbverlauf von links nach rechts hat und links einen vertikalen farbverlauf von oben nach unten. Das wäre alternativ nur mit einzelnen Bildern möglich - mit border-image ist es doch bequemer oder? Zumal ich das Markup dann nicht verkomplizieren muss.

Okay, sonst klappt das alles soweit und die Quelle zum Thema Responsive design und zum Mobile first Ansatz sind gut. Danke sehr.

Aktuell stellt sich somit nur noch ein Problem für mich da, dass ich erst erkannt habe, nachdem du mich darauf aufmerksam gemacht hast, dass IE :last-child nicht kennt. Meine Navigation hat jetzt rechts außen keine Border weil ich die border-right ausschließlich für das letzte Element der Navigation nutze

 

[CPoly]

Vielleicht solltest du dein Markup etwas überdenken. Vielleicht kannst du es ja hier mal posten. Eventuell mit dem passenden CSS.

 

[Carrear]

Hier einmal das Markup für die Navigation - ich muss dazu sagen, dass der Inhalt, also die a-Tags automatisch vom CMS generiert werden, deswegen kann ich nicht einfach so ohne weiteres dem letzten Tag eine andere Klasse zuweisen:

<nav id="main">
<a href="/"> Start </a>
<a href="/und/"> und  </a>
<a href="/leistungen/"> Leistungen </a>
<a href="/projekte/"> Projekte </a>
<a class="active" href="/kontakt/"> Kontakt </a>
</nav>

und hier das passende CSS:

nav#main {
	position: relative;
	float: right;
	z-index: 5;
	max-width: 750px;
	width: 75%;
	text-align: right;
	top: -100px;
	border-radius: 0 0 4px 4px;
}
nav#main a {
	display: inline-block;
	width: 125px;
	padding: 9px;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	background: -ms-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	background-image: url('../img/background_main_navigation.png');
	border-color: #E5E5E5;
	border-style: solid;
	border-width: 0 0 1px 1px;
	outline: 0;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
	text-align: center;
}
nav#main a:hover {
}
nav#main a:first-child {
	border-radius: 0 0 0 4px;
}
nav#main a:last-child {
	border-width: 0 1px 1px 1px;
	border-radius: 0 0 4px 0;
}

EDIT: Die Hover Klasse ist noch nicht drin, weil ich mir noch nicht sicher bin wie ich Highlighten soll Also nicht wundern, dass sie leer ist.

 

[djheke]

Lege deine Navi in einer ungeordneten Liste UL

<nav id="main">
 <ul>
<li><a href="/"> Start </a></li>
<li><a href="/smit-und-partner/"> smit und partner </a></li>
<li><a href="/leistungen/"> Leistungen </a></li>
<li><a href="/projekte/"> Projekte </a></li>
<li><a class="active" href="/kontakt/"> Kontakt </a></li>
</ul>
</nav>

Übrigens, nav ist HTML5 und wird nicht von jedem Browser unterstützt.

 

[Carrear]

Um die Unterstützung für ältere Browser habe ich mich schon gekümmert mittels JavaScript ^^ Danke sehr

 

[chrisbergr]

Wenn du dazu sagen wir mal Modernizr (http://www.modernizr.com/) verwendest, machst du die ganzen schönen neuen Tags in den alten Browsern nutzbar. Und du hast folgenden Vorteil:
Modernizr macht einen Funktionscheck anstelle eines Browserchecks. Bedeutet also, du versperrst nicht einem bestimmten Browser die Funktion, sondern jedem, der die Funktion gar nicht nutzen kann.

Dazu werden ganz praktisch alle funktionierenden und nicht funktionierenden Funktionalitäten als Klasse in den HTML-Tag geschrieben. Bei einem aktuellen Beispiel von mir sieht das so aus:

<html class=" js flexbox canvas canvastext webgl
no-touch geolocation postmessage websqldatabase indexeddb
hashchange history draganddrop websockets rgba hsla
multiplebgs backgroundsize borderimage borderradius
boxshadow textshadow opacity cssanimations csscolumns
cssgradients cssreflections csstransforms no-csstransforms3d
csstransitions fontface generatedcontent video audio
localstorage sessionstorage webworkers applicationcache
svg inlinesvg smil svgclippaths bgsizecover">

So kann ich z.B. via ".cssgradients #meincontainer{" einen Hintergrund mit verlauf definieren, welcher den vorher gesetzten "normalen" Hintergrund ersetzt.

Sieh dir einfach mal deren Seite an, da steht alles wissenswerte (Es geht noch viel mehr)

Ciao