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 „&“ ( „&“)→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 …"
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/
Top Related