Vous souhaitez connaître le niveau de compatibilité de votre navigateur web. Et les différents sites listant les balises html 5 sont parfois très beau mais peu pratique http://html5readiness.com/ . D’autres sont plus complets, mais  en général, ces sites se contentent de lister les balises sous forme de tableaux.
Mis en place par Niels Leenheer la site http://html5test.com/ teste pour vous la compatibilité Html5 de votre navigateur. Le site vous fournis un résultat sur 400 points, sachant que le meilleur résultat est pour le moment détenu par Google chromium qui obtient 293 points. Le plus mauvais résultat c’est (forcement) Internet Explorer 6 avec … 17 points.

le test passe en revue les différents éléments du Html 5 tel que :

• Le Canvas
• Le support de l’audio et de la video
• Les éléments de formulaires
• La géolocalisation
• Le Support WebGL

Le lien pour faire le test html 5 :  http://html5test.com/

Depuis le temps que je suis sous Google Chrome (et je ne pense pas en changer pour Firefox 4) , je n’avais pas encore pris le temps de bien rechercher des plug-in pratiques et utiles pour le WebDesign.
C’est donc un peu par hasard, que j’ai trouvé Résolution test. Ce plug développé par Ben BeckFord permet tout simplement de redimensionner le navigateur chrome  pour tester l’affichage de votre site.

Les fonctions de l’extension :

• redimensionne chrome suivant une liste de résolutions pré enregistrées
• ouvre un nouvelle fenêtre pour chaque résolution choisie
• possibilité d’ajouter, de modifier et de supprimer des résolutions
• permet d’afficher Google Browser Size en transparence (bon google Browser Size est toujours fait avec paint)
• et un page d’option pour régler le tout

Si le plug in vous rend vraiment service, je rappelle qu’il est sous licence  »beer Ware » : il est possible de faire un don au créateur afin qu’il puisse se payer un bière !!

Le lien vers l’extension

Si comme moi vous aimez les « freebies » et autres fichiers gratuits , alors ce site est pour vous.
Le principe, proposer chaque jour un nouveau document photoshop psd gratuit.
A noter que certains fichiers sont proposés en « premium » avec un prix allant de 3 à 5 euros payable via paypal.

http://365psd.com/

Tout est dans le titre ! Au hasard de mes recherches sur les CSS3 et les dégradés, j’ai trouvé ce générateur.
Il permet de

• générer un dégradé multipoint comme dans photoshop ou illustrator, directement depuis le site
• avoir une aperçu du rendu y compris pour Internet Explorer
• générer le code correspondant pour ne plus avoir qu’à faire un copier/coller dans votre feuille de style

L’interface est (trop)  sobre et efficace. Pour le fan de css3 (et les autres aussi d’ailleurs) je ne peux que vous le conseiller.
http://www.colorzilla.com/gradient-editor/

Le but du CSS reset est de mettre à zéro différentes valeurs d’éléments html d’une page afin de rendre l’affichage  du site, le plus cohérent possible entre les différents navigateurs.

Une technique classique mais fortement déconseillé consiste à utiliser le sélecteur universel (*). En effet, cette technique mettra toutes les valeurs à zéro,  ce qui n’est pas le but de la manœuvre.

Exemple de mauvaise utilisation :

* {
    margin: 0;
    padding: 0;
}

Après quelques recherches sur le web, je suis tombé sur cette page ou Eric Meyer nous propose une feuille de style de remise à zéro assez complète. Cette feuille de style est très souvent citée dans les articles traitant de la mise à zéro des CSS

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Malgré tout, cette solution n’est pas parfaite et si vous décidez d’utiliser cette technique, il vous faudra une bonne connaissance des feuilles de style.