HTML/CSS-Validierung in Zeiten von HTML5

Die HTML/CSS-Validierung in den Zeiten von HTML5

WP Camp Berlin am 9.11.2013

WPWP Camp Camp BerlinBerlin

Torsten Landsiedel

➔ Moderator de.forums.wordpress.org/.com

➔ Validator der Übersetzungsdatei

➔ Co-Orga: WP Meetup Hamburg

➔ WordPress Freelancer

➔ @zodiac1978

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

Gute alte Zeiten ...

WPWP Camp Camp BerlinBerlin

… die Zukunft!

WPWP Camp Camp BerlinBerlin

<section>, <article>, <nav>, <header>, <footer>, <aside> und <main>

<audio> und <video>

<input type“url/email/search“>

...

WPWP Camp Camp BerlinBerlin

<canvas>,<mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>

oder <meter>...

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

Validierung ist unsinnig!

WPWP Camp Camp BerlinBerlin

<span style="cursor: pointer;" onclick="javascript:window.open('http://www.google.de','Externer_Link','')">Link zu Google</span>

WPWP Camp Camp BerlinBerlin

Markup<span class=“red“>Roter Text</span>

CSS.red { color: red; }

WPWP Camp Camp BerlinBerlin

Warum überhaupt Validierung?

WPWP Camp Camp BerlinBerlin

Caniuse.com

WPWP Camp Camp BerlinBerlin

https://developer.mozilla.org/de/

WPWP Camp Camp BerlinBerlin

http://www.webplatform.org/

WPWP Camp Camp BerlinBerlin

Das Problem

WPWP Camp Camp BerlinBerlin

Wie aussagekräftig ist eine Validierung?

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

90% der Fehler ...

XHTML / HTML- MixHTML4 / HTML5 – Mix

Nicht maskierte „&“ ( „&amp;“)→ALT-Attribut nicht gesetzt

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

Hersteller-Präfixe sind Warnings:-moz-

-webkit--ms--o-

WPWP Camp Camp BerlinBerlin

Browser-Hacks oder proprietäre Anweisungen:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF); 

zoom: 1;

WPWP Camp Camp BerlinBerlin

Validierung ist wichtig!

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

Scheitern als Chance!

WPWP Camp Camp BerlinBerlin

Linkcheck, SEO-Check, Struktur-Check, HTML-Check, CSS-Check, …

zu jedem erfolgreichen Projekt gehören Abschlusstests!

Aus Fehlern lernen ...

WPWP Camp Camp BerlinBerlin

Beispielefür Validierungsfehler

WPWP Camp Camp BerlinBerlin

<meta httpequiv="XUACompatible" content="IE=edge;chrome=1">

WPWP Camp Camp BerlinBerlin

Beim Apache füge diese Zeile zu deiner .htaccess hinzu:

Header set XUACompatible "IE=edge"

Google Frame wird ab Januar 2014 nicht mehr fortgeführt.

WPWP Camp Camp BerlinBerlin

<hgroup>

Wurde aus der HTML5-Spezifikation gestrichen.

WPWP Camp Camp BerlinBerlin

<hgroup> kann einfach durch <header> oder <div> ersetzt werden.

WPWP Camp Camp BerlinBerlin

CSS lost in HTML

Beim Einbinden einer Galerie oder eines Videos (mit dem neuen MediaElement.js-Player) baut WordPress

Inline-Styles mitten im HTML-Dokument ein.

WPWP Camp Camp BerlinBerlin

Deaktivieren!In der functions.php von Twenty Thirteen, Twenty Ten,

aber nicht Twenty Twelve und Twenty Eleven:

add_filter( 'use_default_gallery_style', '__return_false' );

WPWP Camp Camp BerlinBerlin

Video!?<link rel='stylesheet' id='mediaelementcss' href='http://example.de/wpincludes/js/mediaelement/mediaelementplayer.min.css' type='text/css' 

media='all' />

<link rel='stylesheet' id='wpmediaelementcss' href='http://example.de/wpincludes/js/mediaelement/wpmediaelement.css' type='text/css' media='all' />

WPWP Camp Camp BerlinBerlin

Inline-Style ist im HTML-Body nicht erlaubt, außer mit HTML5 und dem scoped Attribut!

http://html5doctor.com/the-scoped-attribute/

Aber nur in Firefox seit Version 23:http://caniuse.com/#feat=style-scoped

WPWP Camp Camp BerlinBerlin

iFrames

<iframe seamless="seamless">

Wird leider nicht von Firefox unterstützt …https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

WPWP Camp Camp BerlinBerlin

WPWP Camp Camp BerlinBerlin

WordPress HTML5 beibringen!

WPWP Camp Camp BerlinBerlin

add_theme_support('html5',array('searchform','commentform','commentlist'));

WPWP Camp Camp BerlinBerlin

Was passiert bei der Suche?

input type="search"placeholder="Suche &hellip;"

class="searchsubmit"class="searchfield"

WPWP Camp Camp BerlinBerlin

Was passiert beim Kommentarformular?

novalidateinput type="email"input type="url"

WPWP Camp Camp BerlinBerlin

Was passiert bei den Kommentarlisten?

<article> (commentbody)<footer> (commentmeta)

WPWP Camp Camp BerlinBerlin

Achtung beim Ausprobieren! CSS-Anpassungen beachten!

input[type=text]→

input[type=email],input[type=url], input[type=search], etc.

WPWP Camp Camp BerlinBerlin

Mache Abschlusstests deiner Webseiten!

Lerne die Validatoren zu interpretieren!

Nutze da HTML5, wo es breiten Browsersupport gibt!

WPWP Camp Camp BerlinBerlin

Fragen?

© Spiderman-Bild by Jordan Simhttp://creativecommons.org/licenses/by-nd/2.0/