Fragen zu HTML5 & Co beantwortet 8 – CORS, Z-Index, Drag & Drop, Default-Styles

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

Es hat etwas gedauert, aber ich habe wieder vier Fragen und Antworten zu HTML5, CSS3 und Konsorten für euch zusammengekratzt. Warum kriege ich in letzter Zeit so wenig Fragen? Ihr wisst doch: eine E-Mail oder ein Tweet genügen!

How to CORS?

Ich möchte einen XMLHttpRequest an eine API machen, von der ich einen JSON-String abfragen werde. Wie bekomme ich das hin, dass ich keine Probleme mit Cross-Domain bekomme?

Normalerweise werden durch die Same-Origin-Policy (also durch den Browser) Zugriffe unterbunden, die von einer Webseite aus auf eine andere Webseite mit andere Domain unternommen werden. Die Technologie um das zu ändern heißt Cross-Origin Resource Sharing (CORS) und wird bereits von vielen Bowsern unterstützt. Um sie zu aktivieren muss man aber am Server Hand anlegen und einen speziellen Header verschicken – enable-cors.org erklärt wie das geht. Möchte man auch alte Internet Explorer mitschleifen, braucht man neben dem normalen Ajax-Code auch das IE-spezifische XDomainRequest-Objekt. Genaueres dazu weiß das CORS-Tutorial von HTML5 Rocks.

Z-Index und Opacity

Ich bin gerade mit dem nachlesen der siebten Fragerunde zu HTML5 und Co auf deinem Blog fertig geworden. Zum Thema, Transformation und z-Index war ich sehr verwundert, konnte mich aber an ein ähnliches Problem erinnern. Ich habe einfach mal die transformation-Anweisungen durch eine opacity-Angabe ersetzt. Siehe da ich habe das selbe Problem. Frage nun: ist es aus dem selben Grund? Gibts sowohl für die eine oder andere einen Workaround?

Ja, das ist in der Tat ganz ähnlich. Die Mechanik hinter Transformationen und Opacity ist fast die gleiche: die Kindelemente eines betroffenen Elements werden mit dem Elternelement zusammengerendert und nur dieses Gesamtwerk wird transformiert bzw. von Opacity-Effekt betroffen. Zitat Spezifikationen:

Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering [...] Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with z-index:0 and opacity:1.

Von einem Workaround ist mir nichts bekannt. Das Außer-Kontext-Rendern ist offenbar ein unumgängliches Funktionsprinzip von Transformationen und Opacity.

Drag & Drop – kein Drop-Event im Firefox

Hast du eine Idee, wieso das Drop-Event von HTML5 Drag & Drop im Firefox nicht gefeuert wird? In Chrome funktioniert es ohne Probleme.

Kurze Antwort: das Problem lässt sich lösen, indem man das dragover-Event abfängt und mit preventDefault() abbricht, in etwa so:

dropziel.ondragover = function(evt){
    evt.preventDefault();
};

Lange Antwort: während einer Drag-Operation feuert eine ganze Menge Events und viele von denen muss man, wenn man die API verwenden möchte, einfach abbrechen, damit andere Events funktionieren. Das klingt erst mal verquer, hat aber schon so seinen Sinn. Es sollen schließlich die meisten Elemente in einer Seite keine Ziele für Drag & Drop sein und es ist ganz sinnvoll, auf diesen gar nicht erst drop-Events zuzulassen. Um ein Element zum potenziellen Ziel zu machen muss daher zunächst das dragover-Event abgebrochen werden.

Warum das neuerdings in Chrome nicht mehr nötig ist, darüber kann ich nur spekulieren. Entweder ist das ein Bug oder die Chrome-Entwickler finden ganz einfach diese Event-Abbrechen-um-Events-stattfinden-zu-lassen-Geschichte so blöde, dass sie sich bewusst dagegen entscheiden. Ich würde ihnen daraus auch keinen übergroßen Vorwurf stricken, denn die API ist im Originalzustand einfach zu bekloppt.

Wo stehen die Default-Styles?

Gibt es irgendwo eine Übersicht, welches Default-Styling für welche HTML5-Elemente existiert?

Diese Übersicht gibt es praktischerweise direkt in den HTML5-Spezifikationen. HTML5 hat den Anspruch, neben Tags und Attributen auch das ganze im Browser befindliche Drumherum zu spezifizieren – von URL-Parsern über Download-Algorithmen bis hin zu DOM-Features ist alles dabei. Und da dürfen die Default-Styles natürlich nicht fehlen.

Weitere Fragen?

Eure Fragen zu HTML5, JavaScript und anderen Webtechnologien beantworte ich gerne! Einfach eine E-Mail schreiben oder Twitter bemühen und ein bisschen Geduld haben – falls ich gerade unterwegs bin, kann es mit Antwort manchmal etwas dauern, doch früher oder später schreibe ich garantiert zurück.

Kommentare (1)

  1. Christian

    8. November 2012, 11:13 Uhr

    Sehr guter Artikel! Weiter so!

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon