HTML 5 – Sebastians Blog https://sgaul.de Neues aus den Softwareminen Mon, 31 Mar 2014 13:00:42 +0000 de-DE hourly 1 https://wordpress.org/?v=6.1.7 https://sgaul.de/wp-content/uploads/2019/02/cropped-sgaul-2-1-32x32.jpg HTML 5 – Sebastians Blog https://sgaul.de 32 32 Fit für CSS 3 und HTML 5? https://sgaul.de/2012/07/19/fit-fur-css-3-und-html-5/ https://sgaul.de/2012/07/19/fit-fur-css-3-und-html-5/#comments Thu, 19 Jul 2012 10:24:08 +0000 https://sgaul.de/?p=1306 Wurde gerade auf ein nettes Quiz rund um CSS 3 und HTML 5 aufmerksam gemacht: Das HTML5& CSS3 Quiz. Eine ganz witzige Idee, mit der man mal prüfen kann, ob man all die Neuerungen der neuen Hoffentlich-bald-Standards schon kennt. Nach jeder Frage werden die wichtigsten Syntaxdetails und Browserkompatibilität erläutert.

Mit meinen 232 Punkten bin ich anscheinend noch kein „absoluter Profi“.

]]> https://sgaul.de/2012/07/19/fit-fur-css-3-und-html-5/feed/ 2 Command and Conquer im Browser https://sgaul.de/2012/01/27/command-and-conquer-im-browser/ https://sgaul.de/2012/01/27/command-and-conquer-im-browser/#comments Fri, 27 Jan 2012 19:43:00 +0000 https://sgaul.de/?p=995 Command and Conquer im Browser weiterlesen]]> Dass man mit Javascript und HTML 5 ne Menge anstellen kann ist ja kein Geheimnis, aber Command and Conquer ist schon etwas anderes als Tetris. Das alles läuft sogar recht flüssig (jedenfalls in Chrome, mein Firefox lädt sehr lange und danach ruckelt es stark) und sieht aus wie damals. Wirklich lange spielen will man es in dem kleinen Fenster wohl nicht, dafür aber auch mit dem Code seinen Spaß haben.

Es ist nur ein kleiner Schritt, aber ich möchte meinen, dass die Luft für Flash deutlich dünner wird…

C&C 1 im Browser - ganz ohne Flash! (http://apps.nahklick.de/cnc/)

Links

]]> https://sgaul.de/2012/01/27/command-and-conquer-im-browser/feed/ 1 Der neue Script-Tag in HTML 5 https://sgaul.de/2012/01/27/der-neue-script-tag-in-html-5/ https://sgaul.de/2012/01/27/der-neue-script-tag-in-html-5/#comments Fri, 27 Jan 2012 19:08:43 +0000 https://sgaul.de/?p=988 Der neue Script-Tag in HTML 5 weiterlesen]]> Eine nette kleine Änderung in HTML 5, die ich bisher übersehen habe: Auch das Script-Tag wurde überarbeitet und bietet gleich drei interessante Neuheiten.

Optionales Type-Attribut

Vorbei ist die Zeit von <script type="text/javascript">: Der Typ, welcher in rund 100% aller Fälle immer auf Javascript gesetzt werden musste, ist endlich optional. Das schöne daran: Alte Browser hatten ohnehin nie Probleme, wenn das Attribut fehlte.

Viele Code-Schreiber entschieden sich daher schon früh, das Attribut wegzulassen. Für mich fühlte es sich das falsch an. Standards zu brechen „weil es geht“ und etwas praktisch ist. Auch bei der Apacheerweiterung Modpagespeed gab es des öfteren Diskussionen über das Thema. Nun ist dieses Thema also keines mehr: Es funktioniert überall und ist valide.

Asynchrones Ausführen von JS: <script async>

Mit dem Async-Attribut kann man den JS-Code einer Datei asynchron ausführen. Dies bedeutet, dass vor allem aufwendige Berechnungen nicht mehr dazu führen, dass der Browser einfriert. Bisher habe ich mir in solchen Situationen mit einem Timeout geholfen, so dass einzelne Code-Teile immer wieder mit einer Auszeit gestartet wurden.

function recursive(a) {
  window.setTimeout(function(){
    a += 1;
    return recursive(a);
  }, 0);
}

Das Beispiel zeigt die Idee und keinen sinnvollen Anwendungsfall…

Das „normale“ Skript kann dann mit dem asynchron ausgeführten Code mittels Nachrichtenaustausch kommunizieren. Allerdings scheint das alles noch sehr frisch zu sein, ich konnte auf die Schnelle keine gute Anleitung dafür finden.

Auf die Verbreitung darf man hier noch lange nicht setzen. Insofern ist dieses Attribut wohl leider noch nicht interessant. Ähnlich wie beim dritten Kandidaten…

Nicht blockierendes Laden dank <script defer>

Ein bekanntes Problem ist es, dass das Laden einer Javascript-Datei das Rendern der Website blockiert. Dies fällt vor allem beim klassischem Script-im-Head-Prinzip auf. Mit dem neuen Attribut defer gibt es endlich Abhilfe: Ist dieses mit angegeben, weiß der Browser, dass er auch während das Skript geladen wird schon einmal weitermachen kann.

Solange die breite Masse der Browser dies nicht unterstützen, gibt es hier einen simplen und effektiven Workaround: Man packt die Scripts einfach ans Ende, direkt vor den schließenden Body:

  <!-- content... -->
  <script src="script.js"></script>
</body>

Funktioniert überall und tut nicht weh. So gesehen drängt die Verbreitung des Defer-Attributs nicht wirklich…

Links

]]> https://sgaul.de/2012/01/27/der-neue-script-tag-in-html-5/feed/ 8