Um keine Komplikationen mit noch nicht verabschiedeten CSS3-Standards zu haben, verwenden die großen Browserhersteller eigene Präfixe (sog. vendor prefixes) um die kommenden Standards bereits jetzt zu implementieren. Dadurch wird aus dem einfachen CSS-Attribut transform: scaleX(-1) mal eben ein ganzer Codeblock:
jQuery 1.8 fügt Vendor-Prefixes automatisch hinzu weiterlesen
Schlagwort: HTML5
Pinch-Zooming auf Android-Geräten deaktivieren
Auf Android-Geräten kann mit einem Tap auf einer Webseite herangezoomt werden. Genau so ist es möglich, aus einer Webseite heraus zu zoomen (Pinch-Zoom). Um das zu verhindern, kann folgendes Meta-Tag eingesetzt werden:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
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
Windows 8 App View States kontrollieren
Eine Windows 8-App kann unterschiedliche Gestalten annehmen. Besonders beliebt beim Benutzer ist die Funktion, eine Windows 8-App an die Seitenleiste zu heften. Diese Aktion (auch „snapping“ genannt) führt dazu, dass der App nur noch 320 Pixel Breite zur Verfügung stehen (siehe Guidelines for snapped and fill views). Als Programmierer muss man darauf reagieren, damit die App auch im Snap View sinnvolle Informationen anzeigt oder in einen pausierten Zustand übergeht. Ein Möglichkeit zur Erkennung, möchte ich mit JavaScript vorstellen. Ein sehr gutes Code-Beispiel gibt es auch im Microsoft Entwicklungscenter.
Windows 8 App View States kontrollieren 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