Stylesheets und Bug-Beseitigung mit Javascript
Mit modernerem Javascript lässt sich dank weniger Code Zeit und Platz sparen. Wir zeigen Ihnen wie Sie mit Stylesheets arbeiten und einen mobilen Bug beseitigen.
Um einen Klickereignis-Auswerter an alle Anchor-Tags anzuhängen, ist in altmodischem Javascript etwa dieser Code erforderlich:...
Um einen Klickereignis-Auswerter an alle Anchor-Tags anzuhängen, ist in altmodischem Javascript etwa dieser Code erforderlich:
var addEvent = (function () {
var filter = function(el, type, fn) {
for ( var i = 0, len = el.length; i < len; i++ ) {
addEvent(el[i], type, fn);
}
};
if ( document.addEventListener ) {
return function (el, type, fn) {
if ( el && el.nodeName || el === window ) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
filter(el, type, fn);
}
};
}
return function (el, type, fn) {
if ( el && el.nodeName || el === window ) {
el.attachEvent('on' + type, function () { return fn.call
(el, window.event); });
} else if ( el && el.length ) {
filter(el, type, fn);
}
};
})();
var anchors = document.getElementsbyTagName('a');
addEvent(anchors, 'click', fn);In der Zwischenzeit können Sie sich neuere Javascript-APIs zu Nutze machen. Aus dem obigen Code wird dann Folgendes:
[].forEach.call( document.querySelectorAll('a'),
function(el) {
el.addEventListener('click', function() {
// Anker wurde angeklickt
}, false);
});Allerdings müssen Sie beachten, dass querySelectorAll nicht ein Feld, sondern eine statische Node List zurückgibt, was die direkte Nutzung von Methoden wie forEach verhindert. Um das Problem zu umgehen, ruft der obige Code die Methode forEach auf dem Array-Objekt auf und übergibt die Resultate von query-SelectorAll als den Wert des Javascript-Schlüsselwortes this (des Objektes, dessen Methode diese Funktion darstellt).
CSS, iOS: Ausrichtungsoptimierte Stylesheets
Mobiles Safari auf iOS-Geräten wie dem iPad folgt (zusätzlich zu CSS3-Medienabfragen) auch der Anweisung, ein ausrichtungsoptimiertes Stylesheet zu nutzen, welches sich tatsächlich aus der aktuellen Ausrichtung ergibt. Um diese Möglichkeit der Kontrolle über das Aussehen der Website zu nutzen, verwenden Sie diesen Code:
<link rel="Stylesheet" media="all and (orientation:
portrait)" href="portrait.css"><link rel="Stylesheet" media="all and (orientation:
landscape)" href="landscape.css">
CSS: Seitenbeschneidungs-Bug
Wechselt der Benutzer eines mobilen Safari-Browsers auf einem iOS-Gerät von der vertikalen in die horizontale Ausrichtung, tritt beim iOS gelegentlich ein Fehler auf, der dazu führt, dass die resultierende Seite beschnitten wird. Dieser Fehler tritt unter anderem mit solchen Websites auf, welche dieses Tag beinhalten:
<meta name="viewport"
content="width=device-width,initial-scale=1">und das Skalieren der Seite durch den Benutzer unterstützen. Ein oft genutzter Workaround besteht im Deaktivieren der Unterstützung für das Hinein- und Hinauszoomen der Seite durch den Benutzer, doch in vielen Fällen ist diese Lösung auf Grund der reduzierten Usability inakzeptabel. Zum Glück geht es auch anders. Mit Hilfe der winzigen Javascript-Bibliothek können Sie das Problem wirksam unterdrücken. Das Skript hört auf die Ausgabe des Accelerometers, um einen bevorstehenden Wechsel der Ausrichtung frühzeitig zu erkennen und das Zoomen durch den Benutzer temporär zu deaktivieren, damit der Fehler erst gar nicht auftreten kann. Nach Abschluss des Ausrichtungswechsels schaltet das Skript benutzerdefiniertes Zoomen mit Gesten wieder frei. Der Besucher der Seite kann also wieder darin zoomen, als ob nichts geschehen sei.
CSS: Dezente 3D- und Glanzeffekte
Die Umsetzung abgerundeter Ecken in allen gängigen Browsern mit reinem CSS war eine Zeit lang spannend genug. Nun ist es an der Zeit, die Messlatte höher anzusetzen: Wer abgerundete Ecken mit einem Schatten-nach-innen-Effekt zu kombinieren vermag, hat die Nase vorne.Die meisten Browser versagen kläglich beim Rendern abgerundeter Ecken mit Schatten nach innen, sodass der Effekt einer glänzenden Prägung erst einmal noch Zukunftsmusik bleibt. Es sei denn, Sie wissen genau, wie es geht.Eine Möglichkeit besteht, so könnte man denken, darin, das betreffende Bild als ein Hintergrundbild einzusetzen:
<span style="background:url(image.jpg) no-repeat"><img src="image.jpg" style="opacity: 0" /></span>und anschließend mittels CSS zum Beispiel wie folgt zu stilisieren:
.rounded-img2 {
display: inline-block;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0
rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}
Leider ist diese Lösung für mobile Geräte denkbar ungeeignet. Ein Hintergrundbild lässt sich nämlich nicht dynamisch skalieren und somit kann die Website auf die Anforderungen mobiler Kleingeräte mit optimiertem Layout nicht antworten.
Um responsives Design zu ermöglichen, ist daher ein anderer Ansatz vonnöten: Das Anwenden der benötigten CSS3-Eigenschaften auf ein Pseudoelement. Das Bild bleibt von dieser Vorgehensweise unberührt und lässt sich problemlos skalieren.Um den Effekt auf alle gewünschten Bilder dynamisch anzuwenden, können Sie sich jQuery bedienen:
<script type="text/Javascript" src="https://ajax.
googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><script type="text/Javascript">
$(document).ready(function(){
$('#magnus img').each(function() {
var imgClass = $(this).attr('class');
$(this).wrap('<span class="magnus-schatten ' + imgClass +
'" style="width: auto; height: auto;"/>');
$(this).removeAttr('class');
});
});</script>Diese jQuery-Funktion sucht nach Bildern innerhalb des #magnus-Containers (um den Effekt gezielter anzuwenden) und schließt diese in einem <span>-Tag ein. Das resultierende Markup sieht nun etwa so aus:
<span class=" magnus-schatten " style="width: auto;
height: auto;"><img src="image.jpg"></span>Nun kommt CSS ins Spiel. Die gewünschten Schatteneffekte werden nur dem Pseudoelement .image-wrap:after zugewiesen. Damit das betreffende Bild tatsächlich abgerundete Ecken aufweist, wird die CSS-Eigenschaft border-radius sowohl darauf als auch auf das Pseudoelement angewendet. Das resultierende CSS-Stylesheet beinhaltet nun Folgendes:
.magnus-schatten {
position: relative;
display: inline-block;
max-width: 100%;
vertical-align: bottom;
}
.magnus-schatten:after {
content: ' ';
width: 100%;
height: 100%;
position: absolute;
top: -1px;
left: -1px;
border: solid 1px #1b1b1b;
-wekbit-box-shadow: inset 0 0 1px rgba(255,255,255,.4),
inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 1px rgba(255,255,255,.4),
inset 0 1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 0 1px rgba(255,255,255,.4), inset 0
1px 0 rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
.magnus-schatten img {
vertical-align: bottom;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
box-shadow: 0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}Der Code funktioniert in allen aktuellen Browsern einschließlich dem Internet Explorer 9.
