2010-02-23 5 views
14

Est-ce que cela va me causer un chagrin indescriptible si je le colle au sommet de ma feuille de style?Est-ce que * {position: relative} est une mauvaise idée?

* {position:relative} 
+1

Titre et question ne correspondent pas vraiment: -? –

+0

Eh bien, si ce que j'ai suggéré était une bonne idée, je vais aller de l'avant et déprécier le positionnement statique .. Oui, ils correspondent à IMO. –

+0

"Eh bien, si ce que j'ai suggéré était une bonne idée, j'irais de l'avant et déprécierais le positionnement statique." Bon pour vous, mais ce n'est pas la même chose que 'position: relative,' réellement * étant déconseillé (ce qui nécessiterait le CSS spec pour indiquer qu'il est déprécié, ce qui n'est pas le cas). –

Répondre

2

Les caractères génériques peuvent entraîner des problèmes de performances lorsqu'ils ne sont pas utilisés avec précaution. Ce ne serait probablement pas le cas dans votre exemple, mais c'est une mauvaise habitude à développer.

Mais plus important encore, il est rare que vous puissiez dire de façon concluante que vous souhaitez que tout comportement s'applique à tous les éléments.

Avec un positionnement relatif, vous ne réaliserez au mieux rien et, au pire, créerz de nombreux maux de tête en essayant de dépanner des choses qui «fonctionneraient» normalement.

Le positionnement relatif a définitivement ses utilisations. Appliquez-le quand vous en avez besoin.

+0

id considère le problème flottant comme le plus gros problème. Depuis que j'ai posé cette question, j'ai déménagé à flotter à peu près tout dans mon DOM, donc je suis en train de me tirer dans le pied avec cette déclaration générique hey? –

+0

Oui, j'évite généralement les caractères génériques dans CSS. Il est rare que vous puissiez dire de façon concluante que vous souhaitez que tout comportement s'applique à TOUS les éléments. Le positionnement relatif a définitivement ses usages; Appliquez-le simplement quand vous en avez besoin via une classe CSS spécifique ou même un sélecteur jQuery. –

11

Est-ce que ça va me causer la douleur indicibles si je la mets au sommet de ma feuille de style?

Oui. Vous ne pourrez plus travailler avec des éléments absolument positionnés, par exemple - le positionnement absolu sera toujours relatif à l'élément parent, ce qui n'est presque jamais le résultat souhaité.

Je pourrais imaginer qu'il y a encore plus de champs d'effets secondaires de z-index paramètres.

Pas une bonne idée IMO.

Et non, position: static est pas dépréciée, après tout, il est le réglage par défaut :)

+0

Mm J'essaie de ne pas imbriquer les éléments qui sont absolus par rapport à la fenêtre de toute façon. J'espérais que cela réduirait réellement les problèmes potentiels d'index z entre firefox et ie. –

+0

@ user278457 Vous ne pourrez même plus positionner absolute dans l'élément parent du parent. Et corrigez-moi si je me trompe, mais je ne vois pas comment cela va résoudre les problèmes d'indexation croisée du navigateur. –

+0

Ok, je pense que je vois ce que vous voulez dire. Je ne pense pas comme ça, ou je n'ai pas encore besoin de ça. Je préfère utiliser deux "left: 10" que "left: 10" sur le parent et un "left: 20" sur l'enfant. Je suppose que c'est une bonne idée de laisser l'option ouverte si vous ne vous sentez pas particulièrement discipliné un jour. –

3

C'est une mauvaise idée IMHO car il modifie le comportement par défaut des éléments sans indication claire et sera avoir conséquences imprévues.

Si vous voulez vraiment avoir la plupart des éléments positionnés, vous pourriez penser à simplement faire div et similaire relatif.

+0

Une bien meilleure idée. Je pense que je vais essayer de coller une div {position: relative} dans ma réinitialisation css. –

+0

@ user278457 toujours une idée horrible.Cela peut fonctionner pour vous maintenant, mais que se passe-t-il si un jour vous avez besoin d'un positionnement absolu, ou devez inclure un widget externe. –

+0

Je pourrais donner quelque chose d'une position absolue encore. Je ne vais pas l'imbriquer dans un autre div. Je ne vois vraiment pas pourquoi vous imbriqueriez quelque chose qui est positionné par rapport à la fenêtre d'affichage. Vous voulez dire si je concevais quelque chose qui devrait être inclus sur un site externe, n'est-ce pas? –

2

Répondre à la question du titre:

Ceci est la CSS actuelle 2.1 spec:

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

Valeurs acceptées static, relative, absolute, fixed et inherit.

Je ne suis pas sûr de CSS 3 (il est encore en cours), mais ils ne semblent pas parler static:

http://www.w3.org/Style/CSS/current-work#positioning

Quoiqu'il en soit, je ne serais pas encore vraiment soin :)

Répondre à la question du corps:

la valeur par défaut est static vous souhaitez donc être en train de changer la propriété pour chaque article dans la page. Le mieux que vous puissiez réaliser n'est rien. Le pire est que vous allez probablement créer des effets secondaires bizarres que vous ne remarquerez même pas à première vue.

Aussi (c'est de la pure spéculation de mon côté), ça ne peut pas être bon pour la performance. Je suis sûr que les moteurs de rendu sont optimisés pour avoir une majorité d'éléments statiques.

+0

Bon point. Mais la façon dont ils décrivent la position relative implique qu'elle est "relative" à une propriété mystérieuse sans nom qui fonctionne "tel que défini par le modèle de boîte" –

2

Juste pour donner l'autre côté de la médaille, j'ai beaucoup utilisé ce réglage et je l'ai trouvé utile. L'avancée principale étant la facilité d'utilisation des propriétés de positionnement (en haut, à gauche, à droite, en bas) sans avoir à définir le positionnement relatif à parent tout le temps.

Il est vrai que ce réglage rend impossible l'utilisation du positionnement absolu par rapport à n'importe quoi d'autre que le parent ci-dessus, mais je trouve que c'est une bonne chose. Parce que le premier parent avec 'position: parent' est visuellement parent de facto de n'importe quel enfant avec 'position: absolute', alors il est logique de leur faire diriger les enfants aussi dans la hiérarchie HTML.

En résumé, * {position:relative} force une convention qui permet de mieux comprendre le fonctionnement du positionnement.

Avertir 1: Evénement si la nouvelle convention simplifie les choses aux nouveaux venus, c'est différent de ce que les développeurs CSS expérimentés sont utilisés. Préparez-vous à faire face à l'opposition si vous commencez à l'utiliser dans un grand projet avec de nombreux développeurs frontend.

Avertissement 2: Le problème de performance doit être testé correctement. J'ai essayé d'activer et de désactiver ce paramètre sur certains grands sites sans remarquer de différence, mais il n'existe pas de réels tests avec des nombres réels (à ma connaissance). Note finale: La première ligne du deuxième paragraphe n'est pas tout à fait vraie. Vous pouvez toujours remplacer les définitions génériques, en définissant position: static un nœud de niveau intermédiaire, si vous en avez vraiment besoin.

+0

Cela provoque des problèmes de performances dans Opera 12 (la dernière version utilisant le moteur Presto) alors soyez prudent. Définir z-index à n'importe quel nombre résout le problème cependant. – tomasz86

+0

Il provoque également des bogues bizarres dans Firefox avec des cellules de table dont le remplissage est défini en pourcentages. – tomasz86

Questions connexes