[css] google chrome versus les autres

[Ter Rowan]

hello guys

Mon entreprise ayant installé google chrome ce jour comme navigateur alternatif, je viens d'essayer de regarder ce que ça donnait pour mes pages de jeu

et là qu'elle ne fut pas ma surprise !
je pensais avoir très peu de chose à faire par rapport à firefox et ie et je me retrouve avec un tas de désagréments :

des hauteurs / padding démentiels, des fonctions svg qui ne marchent pas correctement, etc...

du coup j'ai essayé normalize.css mais ca ne change pas grand chose, j'ai le "user agent" de chrome qui me met encore des trucs :

-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;

qui me pourrissent pas mal
après il est possible aussi que, comme ça marchait sous firefox et sous ie8 (enfin sauf le svg sous ie8) je n'ai pas cherché à aller plus loin avec mes css

Suis je isolé ou avez vous vécu déjà ce souci ? Et comment l'avez vous résolu ?

[Xenos]

La norme CSS laisse une grande liberté aux navigateurs pour définir leur stylesheet de base, dont les règles sont utilisées si le site n'en spécifie pas (Firefox a la sienne, Webkit a la sienne aussi, ...)

Du coup, si le site ne spécifie pas de règle (le site ne spécifie pas, par exemple, de margin), alors la règle de la stylesheet de base du navigateur est utilisée (et pour le coup, webkit utilise des -webkit-margin-* un peu partout).
Le meilleur moyen pour éviter cela est de définir chaque règle que l'on souhaite voir appliquée. Donc, margin:0em écrasera ce que webkit met par défaut, et supprimera les blancs.

Attention aussi aux blancs dans le code HTML: l'indentation dans le code de la page génère des espaces, qui peuvent perturber l'interprétation du code par les différents navigateurs (les espaces d'indentations sont alors considérés comme un noeud TextNode, constitué d'espaces).

[Sephi-Chan]

:omg: Tu as vraiment développé depuis septembre 2008 sans tester tes sites sur Google Chrome ? :wow:


Pour résoudre une partie de ton problème, tu peux utiliser un reset CSS, qui va harmoniser les feuilles de styles des différents navigateurs. Le plus connu est celui de Eric Meyer.

/* http://meyerweb.com/eric/tools/css/reset/ 

   v2.0 | 20110126

   License: none (public domain)

*/



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, 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,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}

Pour tout nouveau site (sur de l'existant, ça implique de tout vérifier), je conseille aussi de définir le [bar]box-sizing[/var] qui permet d'inclure les padding dans la taille explicite d'un bloc.

Un petit article de Paul Irish nous explique en quoi c'est une bonne idée : * { Box-sizing: Border-box } FTW.

html {

  box-sizing: border-box;

}

*, *:before, *:after {

  box-sizing: inherit;

}

[Ter Rowan]

:omg: Tu as vraiment développé depuis septembre 2008 sans tester tes sites sur Google Chrome ? :wow:

je sais, j ai honte, mais j'étais tellement persuadé que les soucis allaient être à la marge entre firefox et chrome (par rapport à firefox IE)