Optimiser mon CSS

Question

J'ai une feuille de style CSS qui ressemble à ceci :

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}

Il y en a beaucoup qui spécifient la gauche, la droite, le haut, le bas, etc. Y a-t-il un moyen d'optimiser / de simplifier le CSS ? J'aimerais qu'il y ait un raccourci pour cela, comme c'est le cas pour les bordures.

Remerciements

Answer 1

Il n'y a pas d'abréviation pour haut, bas, gauche, droite.

Answer 2

Il n'est pas possible de raccourcir ce texte :

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}

Mais vous pourriez raccourcir ce texte :

div#sbar {position:absolute;top: 10px;bottom: 10px;left:10px; right: 10px;}
div#gbar {position:absolute;top: 10px;bottom: 10px;left:500px; right: 30px;}
div#nbar {position:absolute;top: 10px;bottom: 10px;left:50px; right: 200px;}

A cela :

div#sbar, div#gbar, div#nbar { position:absolute; top: 10px; bottom: 10px }

div#sbar { left:10px; right: 10px }
div#gbar { left:500px; right: 30px }
div#nbar { left:50px; right: 200px }

Cela pourrait être utile.

En outre, il n'est pas nécessaire d'utiliser div en div#sbar : id sont par définition uniques, et il n'est donc pas nécessaire de qualifier l'élément id avec le nom de la balise. L'utiliser en réalité ( vraiment, vraiment marginalement) ralentit votre navigateur.

Ce serait donc mieux (et, plus précisément, plus court) :

#sbar, #gbar, #nbar { position:absolute; top: 10px; bottom: 10px }

#sbar { left:10px; right: 10px }
#gbar { left:500px; right: 30px }
#nbar { left:50px; right: 200px }

---

Voici un exemple où j'ai fait quelque chose de très similaire à ce que je viens de suggérer :

• Comment puis-je remanier certains éléments HTML et CSS répétitifs ?

En fait, cette question s'est avérée plus efficace, car toutes les div étaient contenues dans un parent commun, il n'était donc pas nécessaire d'énumérer les éléments deux fois.

Answer 3

Un conseil d'optimisation : pas besoin de div avant #sbar

-- addendum --

Tous ces attributs ne s'annulent-ils pas mutuellement ? Déplacer quelque chose vers le bas de 10px puis en l'augmentant de 10px n'entraînera aucun mouvement.

Answer 4

Vous cherchez quelque chose comme.. :

div#sbar {position: absolute 10px 10px 10px 10px;}`

Cela n'existe pas (pour autant que je sache), mais ce serait bien.

Answer 5

Il n'existe pas d'abréviation de top , bottom , left ou right .

Quant à votre sélecteur CSS lui-même, il se répète deux fois. Ce que je veux dire par là, c'est que le CSS s'analyse de droite à gauche.

Si vous avez par exemple ceci : div table tr td#myContent{} Voici ce qui se passe :

div table tr td #myContent {}

myContent trouvé !

div table tr td #myContent {}
Nous avons déjà trouvé #myContent, mais d'accord !

div table tr td #myContent {}
Je vous l'ai dit, nous avons déjà trouvé #myContent... !

div table tr td #myContent {}
Comme je l'ai dit les trois autres fois, nous avons déjà trouvé #myContent ! !!

div table tr td #myContent {}
...