Frisch aus der Zeix-Werkstatt: Toolkit Anzeixer
«Anzeixer» ist der Name des Zeix-Toolkits für optimierte Ansichtsdefinitionen im Responsive Webdesign. Ab sofort steht es der Entwickler-Community als Open Source Code zur Verfügung.
Responsive Webdesign setzt das Zusammenspiel von CSS und JavaScript voraus. Dies führt häufig dazu, dass Entwickler Werte redundant definieren. Die Folge ist umständlich zu wartenden Code.
In der Zeix-Werkstatt arbeiten wir mit deshalb mit Anzeixer. Dieser besteht aus einem bewährten Set von CSS- und JavaScript-Snippets, mit dem Entwickler die Eckwerte der Ansichten von Responsive Webdesign nur einmal definieren. Dies spart Zeit und hilft Fehler zu vermeiden.
Was macht Anzeixer?
Definieren von Ansichten in CSS mit @media-Regeln
Definieren Sie Ansichten, die Medienabfragen verwenden, um CSS-Regeln an bestimmten Haltepunkten anzuwenden, und geben Sie den Ansichten beschreibende Namen. Neben unterschiedlichen Ansichten für Smartphones, Tablets und Computer können Sie auch Ansichten für Hoch- und Querformat und für verschiedene Pixeldichten erstellen.
/**
* Medium
*/
@media screen and (min-width: 768px) and (max-width: 999px) {
/* Anzeixer */
body:after {
content: 'm';
background: #ffe6a0;
}
}Anzeigen der aktuellen Ansicht während der Entwicklung
Während der Entwicklung müssen Sie wissen, dass die richtigen CSS-Regeln angewendet werden und das richtige JavaScript ausgeführt wird. Fügen Sie dem <body>-Tag die Klasse dev hinzu, um eine Anzeige in der linken unteren Ecke zu aktivieren, die den Namen der aktuellen Ansicht anzeigt.
<body class="dev">
Abfrage der aktuellen Ansicht mit JavaScript
Wahrscheinlich möchten Sie, dass sich das Verhalten der Benutzeroberfläche je nach Ansicht ändert. Zum Beispiel könnten Sie auf sehr schmalen Bildschirmen die Registerkarten durch ein Akkordeon ersetzen. Indem Sie JavaScript verwenden, um die aktuelle Ansicht aus CSS abzufragen, anstatt die Schwellenwerte ein zweites Mal in JavaScript zu definieren, reduzieren Sie die Komplexität und die Fehlerwahrscheinlichkeit.
var isXSmall = function() { return (getSizeIndex() === 0); };
// target smallest devices only
var isSmall = function() { return (getSizeIndex() < 2); };
// target all small devices
var isMedium = function() { return (getSizeIndex() === 2); };
// target medium devices only
var isLarge = function() { return (getSizeIndex() > 2); };
// target all large devices
var isXLarge = function() { return (getSizeIndex() === 4); };
// target largest devices only
Verbessern Sie die Leistung mit Unified View Change Events
Wenn auf Seiten mit vielen JavaScript-Skripten jedes Skript einzeln auf die Grössenänderungsereignisse des Browsers warten muss, kann dies zu erheblichen Leistungseinbussen führen. Viele Skripte müssen nicht die spezifische Viewport-Grösse kennen, sondern nur, welche Ansicht gerade verwendet wird. Anzeixer kann dabei helfen, indem es ein Viewchange-Ereignis nur dann auslöst, wenn ein Breakpoint-Schwellenwert überschritten wird, so dass Ihre Skripte Grössenänderungsereignisse, die sie nicht benötigen, ignorieren können.
/**
* listen to viewchange event
*/
document.addEventListener('viewchange', function(e){
'use strict';
var li = document.createElement('li');
var text = document.createTextNode('Vanilla JS: '
+ e.detail.originalView + ' -> ' + e.detail.currentView);
li.appendChild(text);
document.getElementById('log').appendChild(li);
}, false);Wer steckt hinter Anzeixer?
Anzeixer wurde vom Development-Team von Zeix entwickelt.
Der Anzeixer wird unter der MIT-Lizenz veröffentlicht, die es Ihnen erlaubt, ihn für jeden Zweck zu verwenden, solange Sie ihn mit Quellenangabe versehen und uns von jeglicher Haftung befreien.
Kontakt: Esther Brunner
Und wie erhält mein Projekt eine gute User Experience? Mit Zeix.
Web Development
Während der Programmierung dauernd umkonzipieren oder gar Code wegwerfen? Nicht mit uns – wir bringen Ihre Anwendung performant, stabil und ohne unnötige Umwege ans Ziel.