Firefox in Version 11 mit 3D-Ansicht

Marc Haunschild Browser No Comments

FF kann in der jetzt aktuellen Version 11 die Elemente von Webseiten in einer 3D-Ansicht so visualisieren, dass auf einen Blick klar wird, wie diese Elemente ineinander verschachtelt sind.

Das soll Entwicklern die Analyse einer Seite einfacher machen. Etwas ähnliches in einer simpleren Darstellung bietet die Web Developer Toolbar unter “Information” als topografische Information.

Einfach mal ausprobieren!

Wie man die Funktion aufruft, (Button im “Element untersuchen”-Bereich) zeigt das folgende Video von Vladimir Simovic.

Wie findet Ihr diese Funktion? Ist das eine echte Hilfe oder ein sinnloses Gimmick? Was bevorzugt ihr! Das neue FF-Feature oder die Web Developer- Topographie?

bittersmann.de

Marc Haunschild HTML No Comments

Allen Webentwicklern mit Lernpotential und -interesse sei ein Blick auf die Seite von Gunnar Bittersmann ans Herz gelegt. Eine hilfreiche Alternative für Floats, (zum Beispiel um Bildergalerien zu realisieren) löst ein lästiges Problem, wenn man es mit unterschiedlich hohen Elementen zu tun hat (in der Bildergalerie zum Beispiel Grafiken mit unterschiedlich langen Bildunterschriften). Wer also an gut erklärten Lösungen interessiert ist, schaut sich das mal an. Und alle die bereits alles zu wissen behaupten: seht es Euch trotzdem mal an, Ihr müsst es ja niemandem verraten. :-)

“CSS – Cascading Style Sheets Level 3″
Neues Lehrbuch für CSS3

Marc Haunschild CSS No Comments

Das CSS-Lehrbuch des Herdt-Verlages habe ich vollständig überarbeitet und in weiten Teilen komplett neu geschrieben. Dazu wurde es um viele CSS3-Möglichkeiten erweitert. Es erscheint am 30.08.2011 unter dem treffenden Titel “CSS – Cascading Style Sheets Level 3″.

Im Einzelnen lernen Sie:

  • Formatvorlagen erstellen und verwenden
  • Elemente sicher und gezielt ansprechen
  • Schriften gekonnt einsetzen und Texte gestalten
  • Farben und Hintergründe anpassen
  • Freiräume und Rahmen verwenden
  • Datentabellen und Formulare attraktiv präsentieren
  • Webseiten vollständig mittels CSS gestalten
  • Inhalte für den Ausdruck aufbereiten

Ein paar Highlights:

  • Die neuen Möglichkeiten der aktuellen Browser
  • Zahlreiche neue Selektoren zur detaillierten und effektiven Elementauswahl
  • Beliebige Schriften für Webseiten
  • Texte und Boxen mit Schatten
  • Mehrere Hintergründe in einem einzigen Element und frei definierbare Größen für Hintergrundbilder
  • Rahmen mit eigenen Bildern oder abgerundeten Ecken

Die Änderungen zum Vorgänger umfassen unter anderem:

  • CSS Level 3
  • Komplett überarbeitet und verbessert, zahlreiche neue Abbildungen und Beispiele
  • Alle Beispiele in aktuellem HTML5 und CSS3
  • Layout-Beispiele, die in allen Browsern funktionieren
  • Zahlreiche Angaben zur Browserunterstützung
  • Aufwändig gestaltetes Beispielformular, das auf Benutzereingaben reagiert

Bei diesem Buch handelt es sich um eine Schulungsunterlage, die speziell für den Einsatz im Unterricht entwickelt wurde. Aber auch Autodidakten werden durch den systematischen Aufbau verständlich in die Grundlagen von CSS3 eingeführt. Die Kapitel sind weitgehend eigenständig, so dass das Buch nicht zwingend von vorne nach hinten durchgearbeitet werden muss.

IE10 und ein bisschen Browser-Statistik

Marc Haunschild UserAgents No Comments ,

Microsoft scheint die Fehler der
Vergangenheit nicht wiederholen zu wollen (jahrelang keine Updates für
IE6, der (manche haben es vielleicht schon vergessen) technisch mal ein
Vorreiter war). Der IE9 ist gerade erst draußen und hat einen 7%igen
Anteil an den IE-Versionen
(http://www.browser-statistik.de/statistiken/versionen/), da gibt es
schon den ersten Platform Preview für IE10:

http://blogs.msdn.com/b/ie/archive/2011/04/15/the-ie10-user-agent-string.aspx

Übrigens Updates setzen sich bei der Konkurrenz zügiger durch:
FF4: 23%
Chrome 10: 90(!)%

Testfälle online

Marc Haunschild Browser No Comments

Manchmal braucht man einfach eine Seite, auf der man etwas ausprobieren kann, z. B. die Darstellung aller Überschriften-Ebenen (h1 bis h6). Oft mache ich mir dann so etwas selber und weil es so schnell getan ist und man es so selten benötigt und es dann auch nur eine eher zufällige Sammlungen von Tests ist, die man irgendwann mal gebraucht hat, speichere ich diese meist nicht ab. Es ist aber netter, wenn man eine strukturierte Sammlung von Test-Seiten hat, aus denen man einfach kopieren kann. So eine hat das Projekt BIK (Barrierefrei Informieren und Kommunizieren)  für Tests mit z. B. Screenreadern und Browsern angelegt und unter der folgenden Adresse öffentlich gemacht:

http://testcases.bitvtest.de/index/testcases.html

Ich hoffe, dem einen oder anderen erleichtert das ein wenig die Arbeit.

Neues zum Link (anchor-Element a)

Marc Haunschild Browser No Comments

Auch bei dem altehrwürdigen anchor-Element <a> (Links)  hat sich sinnvolles getan.

Zwei Dinge lassen sich bereits jetzt einsetzen.

1.) In jedem Browser (ab IE8 von mir getestet, vermutlich schon früher) funktioniert bereits die Möglichkeit, einen Link um beliebige Elemente zu legen. War es innerhalb von a bisher nur erlaubt, inline-Elemente zu verwenden (z. B. span, strong, em), darf ein a nun auch blocklevel-Elemente wie div, blockquote oder sogar ul, ol und table enthalten. Ausgenommen sind lediglich interaktive Elemente wie ein weiteres a oder Formular-Elemente (zum Beispiel button oder input – logisch, denn was soll der Browser machen, wenn man auf ein Submit innerhalb eines a klickt: den Link öffnen oder ein Formular abschicken? Das kann er natürlich nicht entscheiden).

Durch die Möglichkeit komplexe Strukturen  zu verlinken, gibt es keinerlei Einschränkungen mehr beim Gestalten von Schaltflächen. Trotzdem sollte man vielleicht von Fall zu fall überlegen, ob es Sinn macht eine komplette Tabelle zu verlinken oder was passiert, wenn ein Screenreader-Nutzer von Link zu Link springt. In diesem Zusammenhang erscheint es selten sinnvoll, eine Tabelle komplett in ein einzelnes a zu packen, obwohl es valides HTML ist…

Nachtrag: Microsoft wäre nicht was es ist, wenn für den IE nicht wieder eine Anpassung nötig wäre. In diversen IEs lässt sich nicht das gesamte Blockelement anklicken, sondern nur die enthaltenen Elemente. Sollten diese nicht direkt aneinandergrenzen, zum Beispiel wegen der Verwendung von margin, so gibt es Bereiche innerhalb des a, welche nicht klickbar sind. Ein simples display:block für das umgebende a behebt das.

2.) Man kann mit dem Attribut rel Beziehungen zum Zieldokument angeben. Vieles davon funktioniert noch in keinem Browser. Interessant aber ist die Möglichkeit mit rel=”prefetch” anzugeben, dass das Ziel bereits vorgeladen werden soll. Das macht immer dann Sinn, wenn der Nutzer durch einen mehrstufigen Vorgang geleitet werden soll. So kann in einem Bestellprozess die Bezahlseite schon mal geladen werden, während der Nutzer noch in der Warenkorb-Übersicht kontrolliert, ob alles wie gewünscht aufgelistet ist.

Funktioniert bisher nur im FF. Da es aber keine Probleme in anderen Browsern gibt und der FF in Deutschland über 50% Marktanteil hat, sicher schon sinnvoll verwendbar.

1 2