Comment éviter d'utiliser un sélecteur universel dans CSS

Bonjour,

Mes pages web ont une marge/écart de quelques pixels par rapport au bord du navigateur, j'ai dû ajouté le code suivant dans mon CSS

* {
margin: 0;
padding: 0;
}

Le soucis c'est que l'utilisation de tel sélecteur est déconseillé si on veut avoir un rendu plus rapide d'une page web

Je me demande donc comment contourner l'utilisation de ce code.
L'autre soucis c'est que je ne sais même pas ce que veut dire * ????
Modifié par dummycreation (26 Apr 2011 - 10:12)

L'astérisque veut dire tout (toutes les balises HTML).

Si tu ne veux pas utiliser ce sélecteur tu peux essayer en utilisant le reset d'un framework CSS.
Par exemple celui de BlueprintCSS (http://www.blueprintcss.org/) qui se présente ainsi :

html { 
	margin:0; 
	padding:0; 
	border:0; 
}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit; 
  vertical-align: baseline;
}

/* This helps to make newer HTML5 elements behave like DIVs in older browers */ 
article, aside, details, figcaption, figure, dialog, 
footer, header, hgroup, menu, nav, section {
    display:block;
}

/* Line-height should always be unitless! */
body {
  line-height: 1.5;
  background: white; 
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { 
	border-collapse: separate; 
	border-spacing: 0; 
}
/* float:none prevents the span-x classes from breaking table-cell display */
caption, th, td { 
	text-align: left; 
	font-weight: normal; 
	float:none !important; 
}
table, th, td { 
	vertical-align: middle; 
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* Remember to define your own focus styles! */
:focus { outline: 0; }

A insérer au début de ta feuille de style.
Modifié par jb_gfx (26 Apr 2011 - 10:19)

D'abord merci pour le lien "blueprint"

Le soucis c'est que selon les dires de Google Pagespeed, des sélecteurs globaux comme tout cela ralentissent le rendu d'une page HTML

Hello,

Sans page html en lien, impossible de te dire comment annuler la marge en question proprement. Il faut identifier l'élément "fautif" et lui appliquer une marge externe nulle.

/avis perso : pas du tout fan des resets css. Encore moins en phase d'apprentissage (ça aide pas à se familiariser avec le modèle de boite).
/Ps : dans l'exemple ci-avant, il faut bien noter le commentaire au dessus de :

:focus { outline: 0; }

Modifié par audrasjb (26 Apr 2011 - 10:54)

Moi aussi je ne suis pas fan du "Reset CSS"

a écrit :
Le problème de cette technique, c'est qu'elle est non seulement très gourmande en ressource, mais qui de plus annule aussi certains styles par défaut des navigateurs qui sont réellement utiles. Le cas le plus flagrant est celui des éléments de formulaire.

De plus, utiliser le sélecteur consomme des ressources au niveau du navigateur qui doit parcourir tous les éléments du document pour leur appliquer ce style.

Mon problème se produit sous Firefox mais pas sous IE, quel est le cas fréquent qui peut causer cela?

Là je commence à lire: Une feuille de styles de base pour bien démarrer vos projets
Modifié par dummycreation (26 Apr 2011 - 11:11)

Bonjour,

commence par chercher l'origine de tes problèmes : liste, titres, div(ision) ?
Le Reset CSS sans comprendre ce qu'il se passe, c'est le tapis de bombe au lieu du sniper (les métaphores guerrières sont peut-être pas les plus appropriées mais bref).

/* Remember to define your own focus styles! */
:focus { outline: 0; }

Naaaaaan !

Pas touche à :focus à moins de savoir à quoi ça sert et de savoir exactement comment on le redéfinit. Sans ça, laisser les valeurs par défaut, merci pour tous les gens qui en ont besoin.

A vrai dire c'est lorsque j'ai intégré la déclaration suivante que ça a bardé:

body.bodyHome {
  background-image: url("site_bg.jpg");
  background-position: center 150px;
}

Mais bon, je vais chercher l'origine de mes problèmes petit à petit!

Je ne vais utiliser le truc de "outline: 0" puisque je ne sais même pas ce que ça veut dire.