Ratgeber: "HTML, CSS, Javascript & PHP"

Stylesheets und Bug-Beseitigung mit Javascript

16.7.2012 von Anna Kobylinska und Filipe Pereira Martins

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.

ca. 4:55 Min
Ratgeber
Stylesheets und Bug-Beseitigung mit Javascript
Stylesheets und Bug-Beseitigung mit Javascript
© Internet Magazin

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

image.jpg
Beim ersten Zugriff mit dem iPad sieht die Seite ordentlich aus (im Beispiel: bahn.de).
© Internet Magazin

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);
}

image.jpg
Schatteneffekte und responsives Webdesign müssen sich nicht ausschließen; dank jQuery und der Verwendung von Pseudoelementen skaliert sowohl das Bild als auch sein Schatten.
© Internet Magazin

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="http://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.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.