Safari Only CSS Styles
Kategorie: web-development
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
Kategorie: web-development
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.
});
});
Den Browser per jQuery erkennen
Kategorie: web-development
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:
CSS browser-size selection mit JavaScript
Kategorie: web-development
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 <head></head> ein Skript bspw. wie folgt hinzufügen, und fertig:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
if($(window).width() < 1024)
{
$("#wrapper").css("width", "820px");
$("div#content").css("width", "600px");
$("div#content img").css("max-width", "575px");
}
elseif ($(window).width() < 800)
{
$("#wrapper").css("width", "520px");
$("div#content").css("width", "300px");
$("div#content img").css("max-width", "275px");
}
});
</script>
</script>Dolphin Browser für das Motorola Milestone (Android 2.0)
Kategorie: milestone
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
Kategorie: web-development
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
Kategorie: web-development
Die Lösung heißt: conditional comments
Normal comment: <!-- Comment text -->
Conditional comment: <!--[If expression]> HTML <![endif]-->
Für den einfachsten Switch bedeutet dies:
<!--[If IE]> HTML <![endif]-->
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:
<!--[if !IE]>
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]
Weiterlesen: Browserswitch — zwischen IE und FF unterscheiden »
