Archive for the ‘JavaScript’ Category
Ist display=”none” jetzt irrelevant?
Beim Studieren der aktuellen HTML5 Spezifikation, ist mir ein neues Attribut aufgefallen, welches möglicherweise bald eine große Bedeutung bekommen könnte. Ich spreche hier vom Attribut irrelevant, welches allen HTML Elementen zugewiesen werden darf.
Wofür steht irrelevant?
Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.
Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.
Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)
Hier weiterlesen...
Die Sprache eines Links kennzeichnen
Ein bislang fast nie benutztes Attribut des <a> Tags ist das Attribut hreflang, welches beschreibt in welcher Sprache die Seite geschrieben ist, zu der ein Link führt. Dieses Attribut darf nur gesetzt werden, wenn auch das href Attribut angegeben wurde.
Doch scheint das hreflang Attribut keinen wirklichen Nutzen zu haben, da es ja in keiner Weise auf der angezeigten HTML Seite dargestellt wird. In den nächsten Abschnitten möchte ich zwei Wege zeigen, wie man das Attribut doch sichtbar machen kann.
Die CSS Methode
Moderne Browser wie Firefox erlauben es per CSS auf Elemente der Seite mit bestimmten Attributen zuzugreifen und diesen dann einen Style zuzuweisen. Dies geschieht, indem man den Attribut Namen in eckigen Klammern hinter den Tag Namen schreibt:
a[hreflang] { ...Styles... }
Das Problem mit scrip.aculo.us Effect.scroll()
Oliver Schwarz beschreibt in seinem Blog wie man "Unaufdringliches Scrollen in großen Webseiten" mit Hilfe von JavaScript umsetzen kann. Gemeint ist damit das Springen von einer Stelle einer bestimmten Seite zu einer anderen Stelle auf der selben Seite. Nur eben, dass der Browser nicht wirklich zur neuen Position springt, sondern weich dort hinscrollt.
Dies gelingt ihm unter Einsatz des JavaScript Frameworks prototype und der Effekt Bibliothek script.aculo.us. Letztere bietet eine Funktion Effect.scroll() an, um zu jeder beliebigen Position innerhalb einer Seite scrollen zu können.
Auch wenn es sich bei Olivers Lösung, welche auf der mediastyles Seite zu bewundern ist, um einen ansehnlichen Effekt handelt, sind in den Kommentaren zu seinem Blog-Eintrag einige wichtige Bemerkungen gemacht worden.
In einem Kommentar beschreibt Christine Kühnel das Problem des nicht mehr funktionierenden Back-Buttons.
"Der Scroll-Effekt ist ganz schön, hat aber einen Nachteil: Der Back-Button funktioniert nicht mehr wie gewohnt. Ich denke, viele Leute benutzen den ganz gern, um wieder nach oben zu springen."
"Es gibt zwar andere Möglichkeiten, wieder auf Anfang zu springen (Tasten z.B.), aber ich denke, ein wenig bedenklich ist es immer, wenn Browser-Standard-Verhalten beeinflusst wird..."
Damit spricht sie natürlich ein großes Problem bei vielen Webseiten/Webanwendungen an, welches sich auch besonders in AJAX Anwendungen wiederfinden lässt. In einem späteren Kommentar bietet sie aber auch gleich eine mögliche Lösung an. Durch ein Aufrufen des angesprungenen Ankers nach dem erfolgten Scrollen wird die URL im Browser geändert, was eine Verwendung des Back-Buttons wieder möglich macht. Allerdings sind dazu noch ein paar Tricks notwendig, welche dazu führen, das die Seite nach dem Scrollen kurz flackert, was den Effekt natürlich etwas unschön erscheinen lässt. Das Resultat ist auf dieser Testseite zu betrachten.
Hier muss meines Erachtens nach noch eine bessere Lösung gefunden werden. Auch wenn der Effekt schön anzusehen ist, sollte man es sich momentan besser zweimal überlegen, ob solch ein Scrolleffekt eine Seite wirklich besser benutzbar macht.
FireBug 0.4 – Der ultimative Web Debugger
Webseiten von heute bestehen meistens nicht nur aus HTML und CSS, sondern häufig auch viel JavaScript. Es sind häufig gar keine Webseiten mehr, sondern schon richtige Webanwendungen. Und wir alle wissen, dass Anwendungen häufig auch Fehler enthalten können. Auch Webanwendungen sind davon nicht ausgeschlossen.
Bisher war es meistens schwierig solche Fehler im JavaScript Code oder im HTML zu finden. Es fehlen die richtigen Tools, wie man sie z.B. bei der Programmierung mit Java ode C++ gewohnt ist, um diese Fehler aufzuspüren und zu beheben. Da HTML, CSS und JavaScript im Browser ausgeführt und angezeigt werden, braucht man auch Tools, um sie genau da - während sie ausgeführt werden - zu debuggen. Der Browser Firefox bietet hierfür einige gute Tools an. Ein guter Debugger ist z.B. Venkman. Und mit dem DOM Inspector kann man sich bequem den DOM Tree der Seiten anschauen.
Doch in Zeiten von web 2.0 und Ajax braucht man noch bessere und spezialisiertere Tools. Und eins dieser "Übertools" ist FireBug, welches jetzt in der Version 0.4 erschienen ist.
Hier ein kurzer Überblick über die neuenFeatures:
JavaScript Debugger
FireBug ermöglicht es, Breakpoints im JavaScript Code zu setzen, Schritt für Schritt durch die Codezeilen zu springen und lokale Variablen sowie den Stack zu betrachten.
Stack Traces bei JavaScript Fehlern
Jeder JavaScript Fehler wird mit einem Stack Trace angezeigt. So kann man genau sehen, an welcher Stelle im Code und durch welchen Aufruf ein Fehler genau aufgetreten ist.
JavaScript Fehler debuggen
Wenn ein Fehler auftritt, reicht es meistens nicht, nur den Stack Trace zu sehen. Meistens möchte man auch sehen, welche Werte bestimmte Variablen gerade hatten, als der Fehler auftrat. Mit FireBug kann man durch die Einstellung "Break On Error" den Debugger automatisch anhalten lassen, wenn ein Fehler auftritt. Man wird dann sofort zur richtigen Stelle im Code gebracht.
Logging Funktionalitäten
Über das console Objekt kann man verschiedene Nachrichten auf der Konsole ausgeben lassen, während der JavaScript Code ausgeführt wird. Dabei kann man verschiedene Stufen wählen, wie z.B. console.debug(), console.info(), console.warn() oder console.error(). Diese Meldungen werden dann auch noch in unterschiedlicher Farbdarstellung in der Konsole kenntlich gemacht.
Außerdem besitzt FireBug noch viele weitere wichtige und nützliche Funktionen. So kann man sich detailiert den Request anschauen, der bei Ajax gesendet wird. FireBug liefert auch eine sinnvolle JavaScript command line, um schnell kleine JavaScript Schnipsel ausführen zu können. Und über die verschiedensten Inspektoren können alle möglichen Aspekte von HTML, DOM, CSS und JavaScript genau betrachtet werden.
Ich finde das FireBug ein "Must Have" Tool für Webentwickler ist. Es läßt sich leicht als Erweiterung in den aktuellen Firefox 1.5 Browser integrieren.
cloneNode() Problem bei TextAreas im Firefox
Bei einem aktuellen Projekt benötigte ich eine Möglichkeit, bestimmte Inhalte einer Webseite zu Drucken. Dazu habe ich mir per JavaScript einen Bereich der Seite genommen, diesen geclont, ein neues Fenster geöffnet und dort den geclonten Bereich wieder eingefügt.
Falls sich in diesem geclonten Bereich interaktive Elemente wie Butons, Links oder Eingabefelder befanden, habe ich diese ebenfalls mittels JavaScript entfernt oder den Textinhalt der Eingabefelder bzw. Textareas kopiert und als Text an die gleiche Stelle wieder eingefügt. Als Ergebnis gibt es dann eine HTML Seite ohne Links und Buttons.
So weit so gut, aber da gibt es ein Problem, welches mir vorher noch nicht bewußt war und was ich auch noch nirgendwo dokumentiert sah. Wenn man im Firefox eine Textarea clont in welche der User zuvor noch Inhalte eingegeben hat, werden diese Inhalte nicht mitgeclont. Im Internet Explorer funktioniert dies richtig. Ich habe dazu mal eine Testseite erstellt, wo man dieses Verhalten nachprüfen kann. Getestet habe ich es zur Zeit nur im Firefox 1.5!
Ich werde mal weiter nachforschen, ob dies ein gewolltes Verhalten von den Firefox Entwicklern ist, oder ob es dafür schon Bugeinträge in Bugzilla gibt.