Modifier l'ordre des éléments en responsive

Bonjour,

Code simple :

<div id="un">Un</div>
<div id="deux">Deux</div>
<div id="trois">Trois</div>

@media screen and (max-width: 768px)
{
Je veux que div#deux apparaisse avant div#un
}

Bien sûr c'est facile de dupliquer div#un et jouer sur Display

<div id="un">Un</div>
<div id="deux">Deux</div>
<div id="un_bis">Un</div>
<div id="trois">Trois</div>

div#un_bis {display: none}

@media screen and (max-width: 768px)
{
div#un {display: none}
div#un_bis {display: static}
}

J'obtiens l'effet recherché mais sans être un puriste je préférerais une solution par le positionnement sans duplication de code html.

Je précise que je ne connais pas la hauteur de mes div qui varie selon le contenu.
Modifié par boteha_2 (24 Jun 2017 - 15:49)

Le nouveau modèle CSS Grid Layout fait très bien le job (exemple de Raphaël), en effet la fonctionnalité demandée a été prévu nativement pour ce système de grille, mais Grid Layout est encore très mal supporté par nombre de navigateurs.

En attendant on peut faire le modèle demandé en modèle tabulaire (et non en flexbox comme je l'écrivais précédement) : voir cet article.
Modifié par Olivier C (24 Jun 2017 - 20:17)

Bonjour,

Merci de ta réponse rapide.

Si Grid Layout est mal supporté, la question est de savoir comment se comportent les navigateurs qui ne supportent pas.
S'il ignore les déclarations ce n'est pas trop grave.
S'il met tout en vrac c'est plus ennuyeux.
Je suppose que les navigateurs ignorent mais je pose la question.

Ce développement vise uniquement à faciliter la lecture sur les mobiles, il faut donc que Grid Layout soit correctement supporté par les navigateurs de mobile, j'ai l'impression que c'est le cas.

L'alternative que tu donnes en lien n'est pas Flexbox mais display : table.
Je ne sais pas si tu voulais m'orienter sur display : table mais cela semble une bonne idée même si cela m'oblige à ajouter un container.

<div id=mobile">
<div id="un">Un</div>
<div id="deux">Deux</div>
</div>
<div id="trois">Trois</div>

@media screen and (max-width: 768px)
{
div#mobile {display: table}
div#un {display: table-footer-group}
}

C'est un peu dommage d'ajouter ce container div#mobile mais il semble que j'y suis obligé pour que div#un soit affiché avant div#trois.

boteha_2 a écrit :
Si Grid Layout est mal supporté, la question est de savoir comment se comportent les navigateurs qui ne supportent pas.
S'il ignore les déclarations ce n'est pas trop grave.
S'il met tout en vrac c'est plus ennuyeux.

Malheureusement il s'agit du deuxième cas, Grid Layout n'est supporté que par les navigateurs récents...

boteha_2 a écrit :
L'alternative que tu donnes en lien n'est pas Flexbox mais display : table.

Mea culpa, il s'agit effectivement de display:table. Je viens de corriger mon post.
Modifié par Olivier C (24 Jun 2017 - 20:17)

Bonjour,

Olivier C a écrit :

Malheureusement il s'agit du deuxième cas, Grid Layout n'est supporté que par les navigateurs récents...

Si tu utilises uniquement grid-template-areas pour modifier l'ordre des éléments, je suppose que si le navigateur ne comprend pas il laisse simplement les éléments dans l'ordre où il les trouve.

Je n'ai qu'à essayer mais je me rend compte que le code à modifier est assez copieux et en plus dynamique.
Certains éléments apparaissent ou disparaissent selon le contenu.

J'ai des travaux plus urgents mais je reviens sur le sujet dès que possible.

Et oui ! order... j'avais oublié.

Bonjour gcyrillus,

Merci pour la piste Flex, cela semble très intéressant.

Je pense que je vais commencer par tester cela.

je vous tiens informés.

Bonjour,

J'aurais aimé ne pas avoir à vous faire subir mon code mais la propriété order ne marche pas.

Pour les petits écrans, le problème est de passer les deux tableaux "produits très proches" et "fil d'ariane" qui actuellement sont float: left plus bas dans la page (disons avant la rubrique résumé) de façon à ce que la photo du produit s'affiche plus haut.

Faites le test de diminuer la largeur de la fenêtre, l'ordre des éléments ne change pas alors que j'ai indiqué :

div#recherche {display: flex; flex-flow:column}

@media screen and (max-width: 768px)
{
table#pro {order: 1}
}

Modifié par boteha_2 (25 Jun 2017 - 21:47)

Bonjour.

Attention, flex n'agit que sur ses enfants directs.

Bonjour,

Zelena a écrit :
Bonjour.
Attention, flex n'agit que sur ses enfants directs.

D'accord.
De cette manière j'obtiens un résultat :

Voir le test

Par contre la mise en page est flinguée car les éléments flottants ne flottent plus.
Je suppose que c'est facile à corriger, je vais relire l'article de Raphaël.

Beaucoup plus ennuyeux, j'aimerais positionner mes deux tableaux "Produits très proches" et "Fil d'Ariane" plus bas que la limite du container dont ces tableaux sont les enfants directs.

Je suppose que c'est impossible avec la structure html actuelle.
Je vais y réfléchir, il existe actuellement des contraintes liées uniquement aux micro-formats et il doit être possible de les traiter autrement (<div class="item hproduct"> n'a aucun rôle dans la structure de la page, c'est juste pour Google).

Cela donne envie d'acheter le bouquin de Raphaël et tout refaire en flexbox...

boteha_2 a écrit :
Il existe actuellement des contraintes liées uniquement aux micro-formats et il doit être possible de les traiter autrement (&lt;div class="item hproduct"&gt; n'a aucun rôle dans la structure de la page, c'est juste pour Google).

L'ajout d'élément html n'est en aucun cas un problème, mais par contre, personnellement, ma préférence se tourne - et de loin - en faveur des microdata prôné par Google et consorts.

boteha_2 a écrit :
Cela donne envie d'acheter le bouquin de Raphaël et tout refaire en flexbox...

Quitte à tout refaire autant faire un framework perso répondant à tout tes besoins, pas seulement à une page du moment. Moi je l'ai fais et je ne le regrette pas (en flex pour le coup) : Scriptura, Layout Examples. J'emploie ce framework pour mes sites "statiques" mais aussi pour des sites sous WordPress, comme dans cet exemple : Testimonia. Si je rencontre un nouveau une truc auquel je n'avais pas pensé alors je le rajoute dans mon framework et je le liste dans un style guide, ce qui me fais gagner du temps dans le développement.

On ne deviens plus le designer d'une page, on penses les implications de son code dans son ensemble. Mais cela demande beaucoup d'expérimentation et de temps...
Modifié par Olivier C (01 Dec 2018 - 11:53)

Bonjour Olivier C,

Merci de tes remarques et de tes liens très intéressants.

Microdata pourquoi pas mais le site n'est pas en html 5.

Petite remarque, pourquoi dis-tu que l'ajout d'élément html n'est en aucun cas un problème ?
Quand tu dois créer un DIV juste pour entrer une class de Microformats moi je trouve cela désagréable.
Et pénalisant, la ,preuve avec le souci que je rencontre à cause de cette DIV qui fait que des enfants ne sont plus directs.

Je crois qu'il existe des microformats qui passent juste par des balises <meta>, c'est sans doute mieux.

Dans les meta ce sont principalement les balises open graph.

Regarde le format JSON-LD si tu ne veux pas avoir pleins de balises/attributs partout. Je ne pense pas que ton doctype est aucune incidence pour ce genre de chose.

Bonjour,

bzh a écrit :
Dans les meta ce sont principalement les balises open graph.
Regarde le format JSON-LD si tu ne veux pas avoir pleins de balises/attributs partout. Je ne pense pas que ton doctype est aucune incidence pour ce genre de chose.

Merci de l'info je vais aller voir.

Bonjour,

J'ai fit une recherche rapide sur le format JSON-LD.

Sûr que c'est mieux que de devoir ajouter dans le code html des noms de class et surtout des balises de structure.

J'ai cherché l'équivalent en JSON-LD des microformats hproduct et hreview-aggregate.

Je n'ai pas trouvé, avez-vous une adresse ?

Sur le site du google tout est expliqué même si c'est un peu fouillis :
Products

Tu as un outil pour tester aussi : Outil de test des données structurées

Merci pour le lien vers Google.

Je vais m'y mettre. Je vous tiens informés.

Bonjour,

Voilà un exemple de la doc Google :

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Executive Anvil",
  "image": "http://www.example.com/anvil_executive.jpg",
  "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
  "mpn": "925872",
  "brand": {
    "@type": "Thing",
    "name": "ACME"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.4",
    "reviewCount": "89"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "119.99",
    "priceValidUntil": "2020-11-05",
    "itemCondition": "http://schema.org/UsedCondition",
    "availability": "http://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "Executive Objects"
    }
  }
}
</script>

Ce qui est bien est que l'on peut entrer aggregateRating dans le fiche produit.

En micro-format c'est une fiche produit que l'on incorpore dans aggregateRating et c'est moins logique.

Je me demande s'ils ont prévu le cas d'un produit en versions multiples.
Par exemple le même produit sous différentes couleurs avec éventullement des prix différents selon les couleurs.

bzh a écrit :
Regarde le format JSON-LD si tu ne veux pas avoir pleins de balises/attributs partout. Je ne pense pas que ton doctype est aucune incidence pour ce genre de chose.

Mince alors ! Mais je ne connaissais pas moi ! Il va falloir que je m'y colle pour mes prochains projets... Merci pour le tuyau en tout cas.