figure und figcaption-tags ausreichend von Browsern unterstützt?

[Martinus33]

Hallo,
kann jemand grob abschätzen, wie viel Prozent der User noch einen Browser nutzen, der die beiden HTML5-tags NICHT unterstützt und was passiert dann eigentlich in der Darstellung?

Danke.

 

[Daaron]

Problematisch ist nur der IE <=8... und für die lieferst du einfach html5shim mit. Dazu noch ein paar Stylesheets in denen du auch dem letzten Holzbrowser klar machst, dass figure und figcaption Blockelemente sind, schon ist alles gut.

 

[palace4d]

Browsersupport steht ganz unten http://devdocs.io/html/figure
Für ein Privatprojekt würde ich alles unter IE9 ignorieren.

Wenn der IE < 9 einen Elementnamen nicht explizit erkennt, fügt er das Element als leeren Knoten ohne Kinder ein. Alle Elemente, die unmittelbare Kinder des unbekannten Elements sind, werden als seine Geschwister eingefügt. CSS Styling erlaubt er auch nicht für unbekannte Elemente.

Problemlösung: HTML5 shim https://github.com/aFarkas/html5shiv

Was macht es? Die Elemente werden über JS erzeugt und können somit auch Styling erhalten.

<style>article {border: 1px solid red;}</style>
<!--[if lt IE 9]>
    <script>document.createElement("article");</script>
<![endif]-->

 

[Martinus33]

Angesichts aktueller Browser-Statistiken dürften max. 10% aller User noch den IE8 oder kleiner nutzen.

Wie sieht das dann in der Praxis aus, wenn "die Kinder fehlen", haut es mir dann das ganze Design durcheinander?

Das JS ist empfehlenswert? Verlangsamt nicht jedes Script die Ladezeit?

Ich bin am Überlegen, ob die Vorteile von figure/figcaption die Nachteile überwiegen....

 

[T0a5tbr0t]

Einfach als Conditional comment rein und fertisch.... (palace4d hat ja schon den Beispielcode gezeigt)
Dann wird es nur von den alten IE's geladen und die HTML5 Elemente sind kein Problem. Andere Browser ignorieren das komplett. Das Script ist so klein, dass es selbst in den IE's nicht wahrnehmbar ist.

 

[Martinus33]

Also verstehe ich das richtig, das Ganze kommt nur beim IE8 und kleiner überhaupt zur Ausführung und auch dann ist es von der Ladezeit her unproblematisch, weil sehr klein?

Conditional comment = kommt nur bei IE8 und kleiner zur Ausführung?
Ist also das hier: http://de.wikipedia.org/wiki/Conditional_Comments ?

Falls die Antworten darauf drei Mal ja lauten, wäre noch zu klären, wie es in Wordpress integriert werden kann. Ich habe irgendwo einen Code gefunden, der in die functions.php soll. That's the way?

 

[BlubbsDE]

10%?

XP hat den IE8 als technisches Maximum.

https://www.computerbase.de/news/be...von-windows-xp-faellt-unter-40-prozent.38317/

 

[Daaron]

Also verstehe ich das richtig, das Ganze kommt nur beim IE8 und kleiner überhaupt zur Ausführung und auch dann ist es von der Ladezeit her unproblematisch, weil sehr klein?

<!--[if lt IE 9]><script src="pfad/zu/html5-3.js"></script><![endif]-->
Die aktuelle Version ist, unkomprimiert, ~2.4kByte groß. Das ist selbst mit DSL Light noch kein Problem bzw. hat man da echt andere Sorgen... Außerdem wird es ja nur einmal geladen, danach kommts aus dem Browsercache.
Und ja, obiger Conditional Comment sorgt dafür, dass der Kram eben nur in "less than" IE9 geladen wird, denn der IE9 hat dieses Gemurkse nicht nötig.

Falls die Antworten darauf drei Mal ja lauten, wäre noch zu klären, wie es in Wordpress integriert werden kann.

Oh mein Gott... schon wieder Wordpress.... Ok... ich lass mich mal nicht über diese Seuche aus...

Du musst einfach obigen Kram irgendwo im Kopfbereich deines Templates unterbringen. Evtl. kann es auch vor den schließenden </body>-Tag, aber da kann ich für nix garantieren.

Übrigens auch sehenswert: http://css3pie.com/ -> einige CSS3-Styles im IE verwenden.

10%?
XP hat den IE8 als technisches Maximum.

Das spielt keine große Rolle. Du vergisst dabei eine ganze Latte an Aspekten:
- Wie viele XP-User nutzen tatsächlich den IE? Während MS für XP nur IE8 anbietet könnte man genauso wirklich aktuelle Versionen von Chrome, FF oder Opera nutzen...
- Wie viele dieser XP-User nutzen im IE Chrome-Frame?
- Wie viele dieser Techbremsen gehören überhaupt zu meinen Kunden/Besuchern? Wenn ich z.B. über CSS3 und HTML5 bloggen würde, dann käme da sicher keiner mit nem IE8 vorbei bzw. würde ich so eine Person einfach mit Verachtung strafen.
- Viele von den XP-Krüppelkisten sind Firmen-PCs, die nicht zum Surfen verwendet werden. Wir haben z.B. so ne Krücke im Büro, weil unser alter Plotter nur daran funktioniert. Was tangiert mich auf einer Gaming-Seite denn, dass die Mitarbeiter einer Regierungsbehörde oder Bank nur mit 1000 Jahre getesteten Systemen arbeiten können?
- Wen tangiert Windows? Wie viele potentielle Besucher kommen über Smartphones und Tablets? Du wärst überrascht, wie extrem der Marktanteil aktuell ist.

Gerade der letzte Aspekt ist eben verdammt wichtig. Er ist so wichtig, dass man einem Kunden nicht mehr guten Gewissens eine Seite ohne Responsive Design andrehen kann.

 

[Martinus33]

@Daaron:
Mit obigem Kram meinst du <!--[if lt IE 9]><script src="pfad/zu/html5-3.js"></script><![endif]--> wobei das nun doch etwas anders aussieht als der Code von palace4d?

 

[Daaron]

Palace4d übertrieb es etwas mit den technischen Hintergründen seiner Antwort.
Lad dir von Github aus seinem Link die aktuelle .js - Datei runter und binde sie so ein, wie ich das beschrieben hab.

Alternativ: Schieß Wordpress in den Wind und verwende einfach Contao. Das setzt seit Version 2.10 strikt auf HTML5 und bindet automatisch HTML5Shim sowie CSS3Pie mit ein.... oh, und es hat nicht jeden Tag 20 neue Sicherheitslücken.

 

[Martinus33]

Ich Dödel habe gerade bemerkt, dass WP seit 3.4 eine eigene Funktion für Bildunterschriften hat.

Siehe z.B. hier: http://wpmu.org/how-to-add-a-caption-to-wordpress-images/

Ob das ein vollwertiger Ersatz für figure/figcaption ist, muss ich noch checken.

Sind hier WP-Anwender, die aus Erfahrung sprechen können?

Die Vorteile von figur/figcaption, die ich bislang gefunden habe, sind:
-Sematischer Bezug zwischen Bild und Bildunterschrift
-Nicht nur für Bilder einsetzbar
-Erleichtertes CSS-styling
-Gruppierung mehrerer Abbildungen, z.B. für Galerien

@Daaron:
Das mit der Sicherheit ist in der Tat nicht so erfreulich bei WP, aber man muss halt alle Gegenmaßnahmen ergreifen, die möglich sind. Und es ist vieles möglich.

 

[Daaron]

Ist ne Grundsatzfrage: Was ist besser?
- In eine sichere Nachbarschaft ziehen
- Im Ghetto wohnen bleiben, dafür die Fenster vergittern und die Tür mit 10 Ketten sichern

 

[palace4d]

In den Themeordner in WP musst du den Skriptblock in der header.php hinzufügen.

 

[Daaron]

palace, man braucht deutlich weniger als du ihm verkaufen willst. Probier es aus, das hier reicht:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Dazu sollte man zur Sicherheit noch per CSS sagen, dass figure, figcaption, article,... eben Blockelemente sind (und <time> ein inline). Da man aber eh meist noch ein Reset-Stylesheet einbindet ist das im selben Abwasch mit erledigt.

 

[palace4d]

Und das muss er in die header.php zur jeweiligen WP-Theme eintragen ...

 

[Martinus33]

O.k.,, also genau der Code aus posting 15.
Wie würde es mit der CSS-Blockelemente-Sache aussehen?

Mein Theme-Hersteller empfiehlt die Nutzung einer "custom functions" in einem child theme. Offenbar ist es nicht ganz ungefährlich, direkt in der header.php zu arbeiten.

 

[Daaron]

Bei den Themes kann ich dir nicht weiterhelfen. Von Wordpress lasse ich soweit es möglich ist die Finger. Seit ich da mal in den Code reingeguckt hab denk ich mir: ich hätte lieber die Grippe als eine Wordpress-Installation... Wenigstens ist Grippe heilbar...

Ob dein Theme bereits eine Form von reset.css nebst Fallbacks für IE<9 mitbringt musst du schon selbst rausfinden. Schau einfach, ob irgendwo für die HTML5-Blockelemente (dürften alle HTML5-Elemente außer <time> sein) ein "display:block;" definiert ist, und eben ein display:inline; für time.

 

[Martinus33]

Dank euch, werd's schon hinkriegen.

 

[Kanibal]

Eine meiner Lieblingsseiten

 

[Daaron]

Is ne geile Seite, nutze ich alle paar Tage.... hat hier aber keine Relevanz. Dass der IE<=8 keine HTML5-Tags hinsichtlich ihrer Semantik erfasst war vorher klar. Relevant ist nur, wie man IE<=8 dazu bringt, die Elemente ÜBERHAUPT erst einmal zu erkennen, denn der IE weigert sich normalerweise, unbekannte Elemente überhaupt zu rendern. Die Antwort darauf lautet eben einfach: HTML5Shiv + ein paar zusätzliche Zeilen CSS.

Das Fazit des Threads kann eigentlich nur lauten:
Nutzt HTML5, nutzt die Möglichkeiten der Semantik. Für Holzklasse-Browser gibts einen guten Fallback. Wenn jemand partout mit nem IE<=8 und abgeschaltetem JavaScript bei euch vorbei kommen will, dann hat er einfach PECH GEHABT. Kein Mitleid für sowas.