WebTec - Blog

 

Browser Typ und Version erkennen

logo-mixDer Frontend Entwickler steht manchmal vor Anforderungen, die es nötig machen genau festzustellen welcher Browser und welche Browserversion seine Webseite anzeigt. Vor JQuery 1.9 stand dafür die Funktion .browser zur Verfügung, die aktuell nur durch das Plugin Migrate wieder aufrufbar ist. 

Welche HTML5 und CSS3 Features der Browser verarbeiten kann, überprüft der Modernizr. Er fügt dem BODY entsprechende Klassen hinzu mit denen der Frontend Entwickler auf veraltete Browser und den IE reagieren kann.

Was aber tun , wenn z.B. für den IE8 bestimmte Funktionen oder Inhalte komplett getauscht werden müssen?

 

Flexible Divs mit festem Seitenverhältnis

1

Hier kommt Text!

3

4

5

6

und weiter text bin text bin text....

8

9

Die Größe von Divs wird für responsive Webseiten besser relativ zum Elternelement angegeben. Möchte man nun aber unabhängig vom Inhalt einen bestimmten Look erzeugen, z.B. quadratische Kacheln wie Win8, kann diese reine CSS Lösung helfen!

Ergebnis ist, dass eine beliebige Anzahl von Kacheln in beliebiger Spaltenanzahl unabhängig vom Inhalt die gleiche Fläche bekommen und wir das Seitenverhältnis der Kacheln festlegen können.

 

Joomla Template migrieren 1.5 nach 3.x

joomla 3 filestructureMit Migrationskomponenten wie JUpgrade oder SP-Upgrade lassen sich zwar die Inhalte, Struktur und teils auch fremde Erweiterungen in eine aktuelle 3.x Version migrieren. Doch das vorhandene 1.5 Template kann von diesen Komponenten in den meisten Fällen nicht angepaßt werden.

Besonders wenn das Quell Template zahlreiche html overrides enthält, direkt mit der Joomla API arbeitet oder ein Framework verwendet ( z.B. Gantry, Warp, Gavern, Zen Grid, Helix, ...) kann es unverhältnismäßig aufwendig sein, dass Template selbst zu ändern. 
Prüfen Sie daher immer, ob es vom Anbieter eine aktuelle Version ihres Templates gibt!

Einfache Templates die sich auf das Positionieren des Joomla Outputs und Layout Styles beschränken, können dagegen mit folgender Methode für Joomla 3.x nutzbar gemacht werden:

 

Attraktive Links mit CSS3 Animation

HTML Element animiert rotieren mit transform:rotate

ich bin ein Link!

Auf unserer Seite verwenden wir diese Technik um auf Links aufmerksam zu machen: in der Desktop Version löst das hover event die Rotation des Pseudo Element :before aus, auf mobilen Geräten läuft die Animation nach dem touch event während das Linkziel geöffnet wird.
Damit es für den Texter möglichst einfach und ein konsistentes Layout gewährleistet bleibt, werden die CSS Eigenschaften nicht über eine extra Klasse zugewiesen.

FacebookTwitterDiggGoogle BookmarksTechnoratiLinkedin