miZine » Browser

Safari Only CSS Styles

Viktor Dite — Tue, 13 Jul 2010 09:56:30 +0000

Styles, auf die ausschließlich der Safari (Webkit) hört kann man mit:

@media screen
   and (-webkit-min-device-pixel-ratio:0)
{
	#id1 {margin: xx px;}
	.class1 {margin-bottom: xx px;}
}

definieren.

Element Transparenz für alle Browser

Viktor Dite — Tue, 22 Jun 2010 14:36:43 +0000

Element Transparenz für alle Browser:

/* ie8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

/* ie  5/7*/
filter:alpha(opacity=60);    

/* old mozilla browser like netscape  */
-moz-opacity:0.6; 

 /* for really really old safari */
-khtml-opacity: 0.6;    

/* css standard, currently it works in most modern browsers like firefox,  */
opacity: 0.8;

Falls jQuery bereits eingebunden ist, schauen die Transparenzübergänge mittels jQuery aber besser aus.

$('#clickme').click(function() {
    $('#book').fadeTo('slow', 0.5, function() {
      // Animation complete.
    });
  });

[jQuery API]

Den Browser per jQuery erkennen

Viktor Dite — Fri, 19 Mar 2010 10:01:12 +0000

Per CSS lässt sich nur der IE erkennen, alle anderen bleiben nur “alle Anderen”. Mit Hilfe von jQuery lassen sich jedoch alle Browserfamilien separat erkennen:

für den Quellcode / Source gehts hier lang

CSS browser-size selection mit JavaScript

Viktor Dite — Tue, 09 Feb 2010 12:51:38 +0000

Ich habe nach einer Lösung gesucht, das Design einer Webseite abhängig von der Größe des Browserfensters zu gestalten. Das Design sollte bei kleinen Browserfenstern nicht abgeschnitten aussehen und der Inhalt — meist Bilder — jeweils skaliert werden.

Zur Lösung des Problems gibt es leider keine Conditional Comments, oder CSS Selektoren aber einen einfachen Trick mit JavaScript. Mittels $(window).width() kann man nämlich die Fenstergröße abfragen und daraufhin das CSS passend bspw. mit $("#wrapper").css("width", "820px"); manipulieren.

Also einfach im ein Skript bspw. wie folgt hinzufügen, und fertig:

Dolphin Browser für das Motorola Milestone (Android 2.0)

Viktor Dite — Tue, 22 Dec 2009 09:27:56 +0000

Der Dolphin Browser ist eine echte Alternative für den Android eigenen Browser — der bspw. leider keine Multitouch Gestures Unterstützt. Zudem ist er wesentlich schneller und fixer als der Android Browser. Im Test lagen bis zu 10s zwischen dem Dolphin und dem Android browser — bis die Webseite lesbar war.

Die folgenden beiden Videos zeigen deutlich, wo die Funktionellen Unterschiede zum Android eigenen Browser liegen:

min-height für den IE

Viktor Dite — Wed, 28 Oct 2009 13:18:56 +0000

Wie bekommt man ohne hack die nicht vorhandene min-height CSS- Eigenschaft im IE6?
Ganz einfach:

.minheight-500 {
   min-height: 500px;
   height: auto !important; /* für moderne Browser */
   height:500px;  /*für den IE */
}

Browserswitch — zwischen IE und FF unterscheiden

Viktor Dite — Tue, 31 Mar 2009 12:55:34 +0000

Die Lösung heißt: conditional comments

Normal comment:
Conditional comment: expression]> HTML

Für den einfachsten Switch bedeutet dies:
HTML
Hier wird jeder IE (ab v5) den eingeklammerten HTML code ausführen

Die umgekehrte Richtung geht leider nur mit einem nicht XHTML validen code, nämlich:
HTML

Das Ganze geht auch komplexer:

! (negation)
Use the negation to select all versions except the one specified, e.g.
[If !IE 6] will select IE 5, 5.5 and 7.
lt (less than)
Select any versions less than the one specified, e.g. [If lt IE 6] will select IE 5 and 5.5.
lte (less than or equal)
e.g. [If lte IE 6] will select IE 5, 5.5 and 6.
gt (greater than)
Select any versions greater than the one specified, e.g. [If gt IE 6] will select IE 7 (and any later versions that may appear).
gte (greater than or equal)
e.g. [If gte IE 6] will select IE 6 and 7 (and later).

Für weitere Informationen [Quelle]