Download pdf - 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





Gute alte Zeiten ...


… die Zukunft!


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

<audio> und <video>

<input type“url/email/search“>

...


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

oder <meter>...



Validierung ist unsinnig!


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


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

CSS.red { color: red; }


Warum überhaupt Validierung?


Caniuse.com


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


http://www.webplatform.org/


Das Problem


Wie aussagekräftig ist eine Validierung?



90% der Fehler ...

XHTML / HTML- MixHTML4 / HTML5 – Mix

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



Hersteller-Präfixe sind Warnings:-moz-

-webkit--ms--o-


Browser-Hacks oder proprietäre Anweisungen:

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

zoom: 1;


Validierung ist wichtig!







Scheitern als Chance!


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

zu jedem erfolgreichen Projekt gehören Abschlusstests!

Aus Fehlern lernen ...


Beispielefür Validierungsfehler


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


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.


<hgroup>

Wurde aus der HTML5-Spezifikation gestrichen.


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


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.


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' );


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' />


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

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

http://caniuse.com/#feat=style-scoped


iFrames

<iframe seamless="seamless">

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



WordPress HTML5 beibringen!


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


Was passiert bei der Suche?

input type="search"placeholder="Suche …"

class="searchsubmit"class="searchfield"


Was passiert beim Kommentarformular?

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


Was passiert bei den Kommentarlisten?

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


Achtung beim Ausprobieren! CSS-Anpassungen beachten!

input[type=text]→

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


Mache Abschlusstests deiner Webseiten!

Lerne die Validatoren zu interpretieren!

Nutze da HTML5, wo es breiten Browsersupport gibt!


Fragen?

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