Mit alten Internet Explorer Versionen testen? Virtuelle Maschinen von Microsoft helfen!

Der Internet Explorer ist tot!

Schon seit längerer Zeit schwindet der Marktanteil vom Internet Explorer.

Der richtige Schrecken begann 2007, als die Version 7 veröffentlicht wurde.

Der IE 7 hielt sich verdammt lange, zu lange. Aber im Corporate-Umfeld war der dennoch noch ein Jahrzehnt später anzutreffen, weil die Uhren halt langsam ticken.

Richtig weh tu auch der Internet Explorer 11 aus dem Jahr 2013. Wir Webentwickler mussten den bis vor nicht allzu langer Zeit immer noch unterstützen.

Für nicht eingeweihte: Der Internet Explorer war nie standardkonform. Man musste immer Hacks bauen, damit die eigenen (modernen) Lösungen auch am IE funktionierten. Bad!

Noch schlimmer: Entwickler arbeiten auf Linux und Mac-Geräten.

Wie komm ich da an einen Internet Explorer?

Hoch lebe der Internet-Explorer

Microsoft selbst schafft hier Abhilfe!

MS bietet virtuelle Maschinen (VM) zum Testen an.

Das sind Betriebssystem-Abbilder, die man, wie ein stinknormales Programm, starten kann.

Das bekannteste Programm um eine VM zu starten ist VirtualBox.

Ein super Programm, dass auf Linux, Mac und Windows läuft.

Auch andere Virtualisierungslösungen werden unterstützt:

Passwort = Passw0rd

Weil das oft übersehen wird, es ist einfach und es steht auf der Website selbst:
„The password to your VM is „Passw0rd!““

Das Passwort lautet also:
Passw0rd

Links

https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/

Interessantes aus der Webentwickler-Welt im Jänner

Schöne Checkbox-Toggle Lösung

https://codepen.io/t_afif/pen/wvrmBNg

 

Object-Fit Fallback in Javascript

Object-Fit wird oft eingesetzt, um ein Bild in ein Element einzupassen.

Man macht das auch gerne mit background-image.

Das Ergebnis sind eingepasste Bilder, die ein passendes Seitenverhältnis haben und dadurch oben oder unten etwas abgeschnitten sind.

Leider wird object-fit nicht im Internet-Explorer unterstützt:

Jaja, der IE ist tot und wer interessiert sich noch dafür?

In manchen Branchen wie Versicherungen und Banken, wo IT-Umwälzungen aber dauern, trifft man noch öfter auf den IE.

Daher braucht es für object-fit einen Fallback, und hier gibt es eine schöne JS-Lösung und hier in jQuery.

Natürlich lässt sich das aber auch unfancy mit gutem, alten CSS lösen!

Umsortierung der Elemente bei display:table

Flexbox ist der neue Meister im Anordnen von Elementen.

Ich persönlich greife aber gerne zu display.table in manchen Fällen, auch wegen der Kompatibilität zu älteren Browsern:

Möchte ich, wie zb in dem Design hier:

Den blauen Block auf mobilen Geräten über dem weißen haben, kann ich das auch bei display:table lösen!

Wie? display: table-footer-group ist dein Freund und wird hier beschrieben: https://www.mediaevent.de/css/display-table.html

 

Element quadratisch machen

Das hört sich auf den ersten Blick ja gar nicht so schwer an, oder?

Einfach Höhe und Breite mit den gleichen Werten setzen.

Aber wie macht man das responsive?

Hier kommt der alte padding-bottom Trick zur Anwendung!

Wenn padding-bottom den gleichen prozentuellen Wert wie die Breite hat, dann wird die Höhe exakt an die Breite angepasst!

Also

height: 0;
padding-bottom: 50%;
width: 50%;

Apple TV UI 3D Bildeffekt nachmachen – Sag hallo zu atropos.js

Schöner 3D Bildeffekte mit atropos.js

Es ist gar nicht so einfach, diesen Effekt zu beschreiben, daher gibt es gleich ein GIF. Nur so viel: Auf Facebook sieht man oft diese Bewegtbilder, wo man mit der Maus hin und herfahren kann und das Bild bewegt sich mit.

Beim AppleTV gibt es für die Vorschaubilder auch so einen Effekt. Diesen hier:

 

Der Autor beschreibt atropos.js als „a stunning touch-friendly 3D parallax hover effect.“

Also einen atemberaubenden 3D-Parallax-Hover Effekt, der auch auf Touchscreens funktioniert.

Also das GIF oben erklärt es eindeutiger.

Anyway, ein sehr interessanter Effekt, den ich über
Timo Ernst gefunden habe. Er hat auch ein schönes Video dazu gemacht. Die Demodaten finden sich hier https://github.com/valnub/atropos-demo

Colorbox – eine jQuery Lightbox

Colorbox ist eine oft empfohlene und umfangreiche Lightbox.

Screenshot der Seite zu Colorbox
Screenshot der Seite zu Colorbox

Die Library ist nur 10KB groß, wenn man die Daten komprimiert sogar nur 5KB.

Beispiele findet man hier: https://www.jacklmoore.com/colorbox/example1/

Hooks und Callbacks

Einer der wichtigsten Dinge in der Webentwicklung bei solchen Librarys sind Hooks und Callbacks.

Weil Lightboxen oft nicht nur zum stupiden Anzeigen von Bildern und Inhalten benötigt wird, sondern oft in umfangreiche Funktionalitäten eingebaut wird.

Daher werden Funktionen benötigt, um Usereingaben auch in der Lightbox zu triggern, und das ist bei Colorbox möglich:

Mehrsprachigkeit

Will man die Texte/Beschriftung ändern, so ist das easy möglich:

Zeigt die Einstellungen zur Mehsprachigkeit

 

Mehr vom Autor von Colorbox kann man hier einsehen: