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/

J’utilise depuis quelque temps pour le création de sites un générateur de grilles. Pour faire simple, j’utilise un service web sur lequel je règle les paramètres de ma grille et le site génère un fichier zip contenant :

• un fichier html contenant quelques balises <div> à titre d’exemple

<div class="container clearfix">
		<div class="grid_12">
			<h1>12</h1>
		</div>

• un fichier css contenant la définition des colonnes

/*
 & Columns : 12
 & Gutter %: 20%
 & MinWidth: 960px
 & MaxWidth: 1080px
 */
.grid_1 { width: 6.6666666666667%; }
.grid_2 { width: 15%; }
.grid_3 { width: 23.333333333333%; }

Oui, je sais l’arrondi à la 13e décimale pour la largeur, ce n’est pas ce que l’on a fait de plus élégant.

Ces colonnes sont tout de suite utilisables, il suffit d’attribuer une classe aux balises <div>, par exemple grid_12 (pour avoir une largeur équivalente à 12 colonnes).
Ce générateur de grille, Tiny Fluid Grid est inspiré du fameux 1kb CSS grid. Mais Tiny Fluid Grid a l’avantage de proposer l’option largeur minimum et maximum ainsi qu’une prévisualisation de rendu de la grille.

http://www.tinyfluidgrid.com/

Envie de tester, d’apprendre, d’approfondir ses connaissances en CSS3, alors css3 maker est fait pour vous.

Au menu de ce générateur :

• Border-Radius
• Gradient
• Css Transform
• Css Tansition
• Text Shadow
• Box Shadow

Et pour chacune des propriétés css, css3Maker nous informe de la compatibilité des navigateurs. Une information plutôt importante, sachant que tous les navigateurs ne gèrent pas de la même façon ,et c’est rien de la dire …

Pour le tester, le lien ici  : http://www.css3maker.com/

Sujet déjà évoqué dans un précédent billet, nous avons pu voir que la technique des css reset n’est pas une science parfaite.

Pour palier à ce soucis, Rui Zhang, web-designer indépendant, propose un framework css qui ne se contente pas de faire la mise à zéro des éléments html comme le fait la feuille de style d’Eric Meyer. Mais ce framework permet aussi de ré-écrire les règles de bases pour la typo, les tables, les titres …

Le framework est disponible dans deux formats, soit non compressé pour les développeurs, soit compressé et dans ce cas la feuille de style ne dépasse pas les 2,5 Ko.

Le lien vers toucan css reset

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.