Internet Explorer

Eigene Fonts in Webseiten einbinden

Mit HTML5 und der CSS3-Regel @font-face ist das Einbinden von eigenen Schritarten (engl. fonts) zum Kinderspiel geworden. Das Einzige was man beachten muss, ist das Format der Schriftart. Internet Explorer 9 und aufwärts unterstützten nur das von Microsoft und Adobe entwickelte OpenType-Format. Alle anderen HTML5-Browser kommen mit TrueType Fonts (TTF) zurecht. Zum Glück gibt es einen TTF to EOT Font Converter, der einem aus einer TTF-Datei eine EOT-Datei erzeugen kann. Hat man beide Formate vorliegen, kann man die Schriftarten deklarieren und verwenden.
Eigene Fonts in Webseiten einbinden weiterlesen

Pinch-Zooming in Internet Explorer 10 deaktivieren

Doppelklicks auf einem Touchscreen-Monitor bewirken im IE10, dass die Webseite herangezoomt wird (Stichwörter: Pinch-Zooming oder auch Pinch-To-Zoom). Möchte man das verhindern, so muss man die -ms-touch-action property verwenden:

1
2
3

<style>
* { -ms-touch-action: none; }
</style>

Alle Elemente an einem Punkt mit JavaScript abfragen

Mit JavaScript ist es möglich, ein Element an einer gegebenen Position (Koordinate) abzufragen. Die linke obere Ecke des Browser entspricht dabei der Koordinate (0/0). Leider gibt es im DOM-Standard nur die Methode document.elementFromPoint, welche nur das oberste Element einer Koordinate liefert. Wenn zwei Elemente an einer Position übereinander liegen wird nur das Element, was oben liegt, erkannt.

Im Windows Internet Explorer ist es aber möglich, alle Elemente an einem Punkt zu bestimmen. Dafür wurde die Methode document.msElementsFromRect (siehe Erweiterte Treffererkennung) eingeführt.
Alle Elemente an einem Punkt mit JavaScript abfragen weiterlesen

Auf Touch und Click-Events reagieren mit jQuery

Im modernen Web tummeln sich nicht nur Desktops und Laptops sondern auch Smartphones, Tablets und viele andere Geräte. Entsprechend vielfältig sind die Eingabemethoden. Einen Desktop-PC bedient man am Liebsten mit der Maus und bei einem Smartphone wischt man gerne mit dem Finger drüber. Diese beiden Bedienkonzepte (Click und Touch) müssen berücksichtigt werden. In jQuery kann man dazu verschiedene Event-Typen benutzen, an die man sich im Code bindet.
Auf Touch und Click-Events reagieren mit jQuery weiterlesen

Abweichende Browser-Implementierungen der Eigenschaft pointer-events

Ein neues Feature in der HTML5-Spezifikation ist die Eigenschaft pointer-events. Das W3C definiert die pointer-events Eigenschaft im Rahmen des SVG-Standards und beschreibt, dass das Setzen der Eigenschaft Auswirkungen darauf hat, ob eine skalierbare Vektorgrafik das Ziel eines Click-Events (z.B. Mausklick) werden kann oder nicht.

Leider ist HTML5 noch kein verabschiedeter Standard sondern ein in der Entwicklung befindlicher Standard (work-in-progress proposal). Browserhersteller müssen daher diese Vorschläge nicht strikt implementieren, sondern haben einen gewissen Handlungsspielraum. Schaut man in die pointer-events Beschreibung von WebKit, so findet man dort die Angabe, dass es Bugs in der Implementierung bei Mozilla (Bug 380573) und WebKit (Bug 11395) selbst gibt.

Die Gecko Rendering Engine (verwendet im Mozilla Firefox) als auch die WebKit HTML-Rendering-Engine implementieren die pointer-events, entgegen dem W3C-Vorschlag, nicht nur für Vektorgrafiken (SVG), sondern für alle HTML-Elemente. Praktisch führt dieses unterschiedliche Verhalten zu einem Problem, das ich kurz vorstellen möchte.
Abweichende Browser-Implementierungen der Eigenschaft pointer-events weiterlesen

console.log() für Produktivumgebungen in JavaScript überschreiben

Wer viele console.log() Einträge in seinem JavaScript-Code hat, sollte diese Einträge beim Live-Schalten der Webseite unbedingt entfernen. Um auf Nummer sicher zu gehen, dass beim Endanwender keine Log-Einträge zu sehen sind, empfiehlt es sich, die console.log()-Funktion zu überschreiben und somit unbrauchbar zu machen:

var console = {};
console.log = function(){};

Ein Problem ist, dass Internet Explorer 8 und älter nicht mit console.log umgehen können. Stattdessen erscheint eine Fehlermeldung: 'console' is undefined. Daher empfiehlt es sich immer, auf console.log in der Produktivumgebung zu verzichten.

Man kann über einen Conditional Comment aber auch gezielt für IE8 und älter die Konsolenausgabe überschreiben (um die Fehleranzeige zu vermeiden):

<body>
  <!--[if lte IE 8]>
  <script type="text/javascript">
    var console = {};
    console.log = function(){};
  </script>
  <![endif]-->
  <script type="text/javascript">
    console.log('Hello World.'); // will not be shown in IE8 and lower
  </script>
</body>

Hinweis zu Conditional Comments:
gte steht für „greater than or equal“
gt steht für „greater than“
lte steht für „less than or equal“
lt steht für „less than“

Conditional Comments sollten außerdem möglichst früh (zum Beispiel im head-Bereich) einer HTML-Seite eingesetzt werden.

Mehr Infos siehe: Detecting Windows Internet Explorer More Effectively

Noch allgemeingültiger (und nicht ausschließlich auf den IE bezogen) ist folgender Patch:

<script type="text/javascript">
  if(typeof(console) == 'undefined'){
    var console = {};
    console.log = function(){};
  }
  console.log('Hello World.');
</script>

Wer auf das Logging nicht verzichten will, der kann für ältere Browser (z.B. Internet Explorer 5 und Firefox 1.0) die Bibliothek log4javascript einbinden, um console.log verfügbar zu machen:

<script type="text/javascript" src="./js/log4javascript_lite.js"></script>
<script type="text/javascript">
  if (!window.console) this.console = { log: function(){} };
  console.log('Hello World'); // will not be shown in IE5 and greater
</script>