Rendre le rendu via HTML ou CSS

Question

Quelle est la meilleure pratique dans le cas de modifier l'ordre de rendu des éléments sur une page Web. Par exemple, j'ai deux DIVs qui doivent être affichés sur une page:

<div id="appleSection" class="appleStyle"> 
    <!-- Apple DIVs, content, form elements, etc --> 
</div> 

<div id="orangeSection" class="orangeStyle"> 
    <!-- Orange DIVs, content, form elements, etc --> 
</div> 

En fonction de la sélection de l'utilisateur (peut-être par pays ou quelque chose), l'ordre que les DIVs sont présentés à l'utilisateur peuvent différer lorsque l'utilisateur change leur pays sélectionné. Certaines sélections de pays présentent la section appleSection au-dessus d'orangeSection, et pour les autres sélections, leur ordre est inversé. Si la logique de base de la page est la même, est-ce une bonne pratique pour déterminer l'ordre sur le serveur (peut-être via deux pages qui diffèrent dans l'ordre des DIV), ou est-il plus approprié de avoir une seule page et utiliser CSS pour contrôler si appleSection est au-dessus d'orangeSection ou vice versa?

Answer 1

L'ordre des sélections doit-il changer instantanément? Comme dans, doit-il changer lorsque l'utilisateur sélectionne un pays? Ou est-ce pré-rendu?

Si c'est le dernier, je le ferais du côté serveur. J'enverrais un drapeau quelconque. En supposant que vous utilisez JSTL ou ASP ou quelque chose que vous pouvez contrôler l'ordre en fonction de la valeur de l'indicateur. Je pense que deux pages pour faire la même chose n'est pas une bonne idée parce que c'est une duplication significative du code.

Si cela doit changer en fonction de l'interaction de l'utilisateur, j'utiliserais quelque chose comme jQuery avec le CSS approprié (changez les classes en utilisant jQuery basé sur l'entrée de l'utilisateur).

Answer 2

Ce n'est pas (joliment) possible avec du CSS pur. La seule façon serait d'utiliser position: absolute; et coller les éléments là où vous voulez par les coordonnées de pixel. Mais pour l'afficher correctement, il faut d'abord connaître les hauteurs des éléments ou faire défiler le contenu.

Un autre moyen côté client serait d'utiliser JavaScript, mais cela peut causer "wtf?" Expériences de l'utilisateur final lorsqu'il voit les éléments instantanément échanger/déplacer/redimensionner pendant le chargement de la page. Aussi pas très agréable et pas vraiment discret (ne fonctionnera pas comme prévu si le client a désactivé JS).

Le meilleur moyen serait en effet de le faire dans la technologie de vue côté serveur en question en utilisant une instruction conditionnelle.

Answer 3

Voici une solution possible (cela dépend de la manière dont vous souhaitez afficher vos sections).

<div id="fruitstand" class="apples-first"> 
    <div id="apples"></div> 
    <div id="oranges"></div> 
</div> 

et CSS:

#fruitstand.apples-first #apples { 
    float: left; 
} 
#fruitstand.oranges-first #oranges { 
    float: left; 
}