SlideShare ist ein Scribd-Unternehmen logo
Die HTML/CSS-Validierung in den
Zeiten von HTML5
WP Camp Berlin am 9.11.2013
WP Camp Berlin

Torsten Landsiedel
➔

Moderator de.forums.wordpress.org/.com

➔

Validator der Übersetzungsdatei

➔

Co-Orga: WP Meetup Hamburg

➔

WordPress Freelancer

➔

@zodiac1978
WP Camp Berlin
WP Camp Berlin
WP Camp Berlin
Gute alte Zeiten ...

WP Camp Berlin
… die Zukunft!

WP Camp Berlin
WP Camp Berlin

<section>, <article>, <nav>, <header>,
<footer>, <aside> und <main>
<audio> und <video>
<input type“url/email/search“>
...
WP Camp Berlin

<canvas>,<mark>, <figure>, <figcaption>,
<data>, <time>, <output>, <progress>
oder <meter>
...
WP Camp Berlin
WP Camp Berlin

Validierung ist unsinnig!
WP Camp Berlin

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

Markup
<span class=“red“>Roter Text</span>
CSS
.red { color: red; }
WP Camp Berlin

Warum überhaupt Validierung?
WP Camp Berlin

Caniuse.com
WP Camp Berlin

https://developer.mozilla.org/de/
WP Camp Berlin

http://www.webplatform.org/
WP Camp Berlin

Das Problem
WP Camp Berlin

Wie aussagekräftig ist eine Validierung?
WP Camp Berlin
WP Camp Berlin

90% der Fehler ...
XHTML / HTML- Mix
HTML4 / HTML5 – Mix
Nicht maskierte „&“ (→ „&amp;“)
ALT-Attribut nicht gesetzt
WP Camp Berlin
WP Camp Berlin

Hersteller-Präfixe sind Warnings:
-moz-webkit-ms-o-
WP Camp Berlin

Browser-Hacks oder proprietäre
Anweisungen:
filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF); 
zoom: 1;
WP Camp Berlin

Validierung ist wichtig!
WP Camp Berlin
WP Camp Berlin
WP Camp Berlin
WP Camp Berlin
WP Camp Berlin
WP Camp Berlin

Scheitern als Chance!
WP Camp Berlin

Linkcheck, SEO-Check, Struktur-Check, HTML-Check, CSS-Check, …
zu jedem erfolgreichen Projekt gehören Abschlusstests!

Aus Fehlern lernen ...
WP Camp Berlin

Beispiele
für Validierungsfehler
WP Camp Berlin

<meta http­equiv="X­UA­Compatible" content="IE=edge;chrome=1">
WP Camp Berlin

Beim Apache füge diese Zeile zu deiner .htaccess hinzu:
Header set X­UA­Compatible "IE=edge"
Google Frame wird ab Januar 2014 nicht mehr fortgeführt.
WP Camp Berlin

<hgroup>
Wurde aus der HTML5-Spezifikation gestrichen.
WP Camp Berlin

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

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.
WP Camp Berlin

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' );
WP Camp Berlin

Video!?
<link rel='stylesheet' id='mediaelement­css' href='http://example.de/wp­
includes/js/mediaelement/mediaelementplayer.min.css' type='text/css' 
media='all' />
<link rel='stylesheet' id='wp­mediaelement­css' href='http://example.de/wp­
includes/js/mediaelement/wp­mediaelement.css' type='text/css' media='all' />
WP Camp Berlin

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
WP Camp Berlin

iFrames
<iframe seamless="seamless">
Wird leider nicht von Firefox unterstützt …
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
WP Camp Berlin
WP Camp Berlin

WordPress HTML5 beibringen!
WP Camp Berlin

add_theme_support('html5',array('search­
form','comment­form','comment­list'));
WP Camp Berlin

Was passiert bei der Suche?
input type="search"
placeholder="Suche &hellip;"
class="search­submit"
class="search­field"
WP Camp Berlin

Was passiert beim Kommentarformular?
novalidate
input type="email"
input type="url"
WP Camp Berlin

Was passiert bei den Kommentarlisten?
<article> (comment­body)
<footer> (comment­meta)
WP Camp Berlin

Achtung beim Ausprobieren! CSS-Anpassungen beachten!
input[type=text]
→
input[type=email],input[type=url], 
input[type=search], etc.
WP Camp Berlin

Mache Abschlusstests deiner Webseiten!
Lerne die Validatoren zu interpretieren!
Nutze da HTML5, wo es breiten Browsersupport gibt!
WP Camp Berlin

Fragen?
© Spiderman-Bild by Jordan Sim
http://creativecommons.org/licenses/by-nd/2.0/

Weitere ähnliche Inhalte

Ähnlich wie HTML/CSS-Validierung in Zeiten von HTML5

Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
Christian Heilmann
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Yves Hoppe
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
Nicolai Schwarz
 
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian BlumPHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
Sebastian Blum
 
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013Bernhard Kau
 
Html5 einführung
Html5 einführungHtml5 einführung
Html5 einführung
Hans Mittendorfer
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascript
Andy Bosch
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
Alexander Schmidt
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Patrick Lauke
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
Bastian Grimm
 
Welches Webframework passt zu mir? (WJAX)
Welches Webframework passt zu mir? (WJAX)Welches Webframework passt zu mir? (WJAX)
Welches Webframework passt zu mir? (WJAX)
Alexander Casall
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
Jens Grochtdreis
 
jQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/FluidjQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/Fluid
Peter Schuhmann
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEARCH ONE
 
WP-CLI - Das Kommandozeilen Interface für Wordpress
WP-CLI - Das Kommandozeilen Interface für WordpressWP-CLI - Das Kommandozeilen Interface für Wordpress
WP-CLI - Das Kommandozeilen Interface für Wordpress
frankstaude
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Stephan Hochdörfer
 

Ähnlich wie HTML/CSS-Validierung in Zeiten von HTML5 (20)

Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian BlumPHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
PHP-SEO Vortrag SEOCampixx 2013 von Sebastian Blum
 
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
Performance Optimierung mit Mod_Pagespeed - WP Camp 2013
 
Html5 einführung
Html5 einführungHtml5 einführung
Html5 einführung
 
Andy bosch-jsf-javascript
Andy bosch-jsf-javascriptAndy bosch-jsf-javascript
Andy bosch-jsf-javascript
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Ruby on Rails SS09 06
Ruby on Rails SS09 06Ruby on Rails SS09 06
Ruby on Rails SS09 06
 
Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Welches Webframework passt zu mir? (WJAX)
Welches Webframework passt zu mir? (WJAX)Welches Webframework passt zu mir? (WJAX)
Welches Webframework passt zu mir? (WJAX)
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
jQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/FluidjQueryMobile mit Extbase/Fluid
jQueryMobile mit Extbase/Fluid
 
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-Freaks
 
WP-CLI - Das Kommandozeilen Interface für Wordpress
WP-CLI - Das Kommandozeilen Interface für WordpressWP-CLI - Das Kommandozeilen Interface für Wordpress
WP-CLI - Das Kommandozeilen Interface für Wordpress
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13 Offline Strategien für HTML5 Web Applikationen - dwx13
Offline Strategien für HTML5 Web Applikationen - dwx13
 

Mehr von Torsten Landsiedel

Das Health Check Plugin in der Praxis
Das Health Check Plugin in der PraxisDas Health Check Plugin in der Praxis
Das Health Check Plugin in der Praxis
Torsten Landsiedel
 
UX-Probleme mit dem neuen Block-Editor (Gutenberg)
UX-Probleme mit dem neuen Block-Editor (Gutenberg)UX-Probleme mit dem neuen Block-Editor (Gutenberg)
UX-Probleme mit dem neuen Block-Editor (Gutenberg)
Torsten Landsiedel
 
Oh, no! DSGVO.
Oh, no! DSGVO.Oh, no! DSGVO.
Oh, no! DSGVO.
Torsten Landsiedel
 
WordPress kaputt machen
WordPress kaputt machenWordPress kaputt machen
WordPress kaputt machen
Torsten Landsiedel
 
Werde Übersetzer! Werde Translation Editor!
Werde Übersetzer!  Werde Translation Editor!Werde Übersetzer!  Werde Translation Editor!
Werde Übersetzer! Werde Translation Editor!
Torsten Landsiedel
 
Die schmutzige Seite von WordPress
Die schmutzige Seite von WordPressDie schmutzige Seite von WordPress
Die schmutzige Seite von WordPress
Torsten Landsiedel
 
The Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano EditionThe Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano Edition
Torsten Landsiedel
 
Umgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPressUmgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPress
Torsten Landsiedel
 
The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)
Torsten Landsiedel
 
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden binWie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Torsten Landsiedel
 
Das Child-Theme-Dilemma
Das Child-Theme-DilemmaDas Child-Theme-Dilemma
Das Child-Theme-Dilemma
Torsten Landsiedel
 
Contact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und KürContact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und Kür
Torsten Landsiedel
 
Social Media Menüs in WordPress
Social Media Menüs in WordPressSocial Media Menüs in WordPress
Social Media Menüs in WordPress
Torsten Landsiedel
 
Mitmachen bei WordPress
Mitmachen bei WordPressMitmachen bei WordPress
Mitmachen bei WordPress
Torsten Landsiedel
 
MetaMeetup
MetaMeetupMetaMeetup
MetaMeetup
Torsten Landsiedel
 
Shortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPressShortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPress
Torsten Landsiedel
 
WordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in BerlinWordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in Berlin
Torsten Landsiedel
 
Podcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-BlogsPodcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-Blogs
Torsten Landsiedel
 

Mehr von Torsten Landsiedel (18)

Das Health Check Plugin in der Praxis
Das Health Check Plugin in der PraxisDas Health Check Plugin in der Praxis
Das Health Check Plugin in der Praxis
 
UX-Probleme mit dem neuen Block-Editor (Gutenberg)
UX-Probleme mit dem neuen Block-Editor (Gutenberg)UX-Probleme mit dem neuen Block-Editor (Gutenberg)
UX-Probleme mit dem neuen Block-Editor (Gutenberg)
 
Oh, no! DSGVO.
Oh, no! DSGVO.Oh, no! DSGVO.
Oh, no! DSGVO.
 
WordPress kaputt machen
WordPress kaputt machenWordPress kaputt machen
WordPress kaputt machen
 
Werde Übersetzer! Werde Translation Editor!
Werde Übersetzer!  Werde Translation Editor!Werde Übersetzer!  Werde Translation Editor!
Werde Übersetzer! Werde Translation Editor!
 
Die schmutzige Seite von WordPress
Die schmutzige Seite von WordPressDie schmutzige Seite von WordPress
Die schmutzige Seite von WordPress
 
The Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano EditionThe Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano Edition
 
Umgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPressUmgang mit Frustration im Open-Source-Projekt WordPress
Umgang mit Frustration im Open-Source-Projekt WordPress
 
The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)The Child Theme Dilemma (EN)
The Child Theme Dilemma (EN)
 
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden binWie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
Wie ich durch Support und Übersetzung ein (besserer) Entwickler geworden bin
 
Das Child-Theme-Dilemma
Das Child-Theme-DilemmaDas Child-Theme-Dilemma
Das Child-Theme-Dilemma
 
Contact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und KürContact Form 7 - Pflicht und Kür
Contact Form 7 - Pflicht und Kür
 
Social Media Menüs in WordPress
Social Media Menüs in WordPressSocial Media Menüs in WordPress
Social Media Menüs in WordPress
 
Mitmachen bei WordPress
Mitmachen bei WordPressMitmachen bei WordPress
Mitmachen bei WordPress
 
MetaMeetup
MetaMeetupMetaMeetup
MetaMeetup
 
Shortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPressShortcodes erstellen mit WordPress
Shortcodes erstellen mit WordPress
 
WordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in BerlinWordPress absichern - WP Camp 2012 in Berlin
WordPress absichern - WP Camp 2012 in Berlin
 
Podcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-BlogsPodcasting mit WordPress.com-Blogs
Podcasting mit WordPress.com-Blogs
 

HTML/CSS-Validierung in Zeiten von HTML5