Bon, je tiens a dire que j'ai encore dit des betises en parlant sans
verifiant mes fausses intuitions.
Ca m'a travaille cette histoire d'attributs width et height pour eviter le
reflow des pages vu que j'avais deja lu un article la-dessus, et du coup
j'ai voulu les rajouter vite fait, et la, paf !
Definir la value height quand il y a un style responsive comme l'exemple du
mail precedent, ca marche pas.
Du coup j'ai ressorti la methode anti-reflow dudit article d'ici
http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performan...,
et ca donne ca :
CSS :
.media {
font-size: 1rem;
margin: 0 auto;
max-width: 100%;
}
.media img {
width: 100%;
}
.media .wrapper {
background-color: #000;
height: 0;
overflow: hidden;
position: relative;
}
.media .wrapper img,
.media .wrapper iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
HTML :
<div class="media" style="width: 40em;">
<div class="wrapper" style="padding-bottom: 56.25%;">
<img src="image.jpg" alt="The image">
</div>
<div class="caption">The image</div>
</div>
Ca commence a devenir un peu galere niveau HTML, d'autant plus qu'il faut
rajouter une div `wrapper` de plus dans le cas ou on veut coller du texte
sous les images.
Mais en bonus, ca permet d'avoir aussi de jolies videos responsive, par
exemple :
<div class="media" style="width: 40em;">
<div class="wrapper" style="padding-bottom: 56.25%;">
<iframe
src="//player.vimeo.com/video/2354787" width="640"
height="360"
frameborder="0" webkitallowfullscreen mozallowfullscreen
allowfullscreen></iframe>
</div>
</div>
Voila voila, mes excuses, j'espere etre un peu moins dans le faux
maintenant :P
2013/10/27 Christopher Crouzet <christopher.crouzet(a)gmail.com>
Je suppose que rien n'empeche de les mettre si on en a envie, au
final le
CSS aura le dernier mot de toutes facons.
J'avais lu que c'etait surtout utile de mettre ces attributs pour eviter
les problemes de reflow quand on charge une page, apres pour ce qui est de
l'argument des performances, j'aimerais bien voir ce que ca donne en
pratique avec des chiffres a l'appui, parceque d'une maniere generale je
suis plutot sceptique a passer des mois a implementer les 9048201
optimisations qu'on peut trouver ici-et-la sur le net pour gagner 0.001 ms
au final alors que si il y a un probleme de lenteur, ca viendra surement
d'autre chose. Je suis pour le boycott des optimisations qui n'optimisent
rien, et qui en plus se font au detriment de la simplicite ! :P
2013/10/27 Franck Paul <carnet.franck.paul(a)gmail.com>
> Ah ok, mais du coup tu n'appliques plus une des bonnes pratiques du web
> (question perfs je crois) qui est d'inclure les attributs width et height
> de la balise img.
>
> Voir :
http://checklists.opquast.com/fr/oqsv2/criteria/658/
>
>
> Le 27 octobre 2013 13:41, Christopher Crouzet <
> christopher.crouzet(a)gmail.com
> > a écrit :
>
> > Perso je zappe les attributs de la balise img qui sont de toutes facons
> > definis en pixels et je gere tout en CSS, exemple :
> >
> > <div style="max-width: 100%; width: 30em;">
> > <img src="image.jpg" alt="" style="width:
100%;">
> > </div>
> >
> > Du coup la taille des images s'adapte a la taille de l'ecran mais aussi
> a
> > la taille du texte.
> >
> >
> >
> > 2013/10/27 Franck Paul <carnet.franck.paul(a)gmail.com>
> >
> > > width en em, alors qu'elle est spécifiée via les attributs de la
> balise
> > img
> > > ? Je vois pas bien l'intérêt du coup.
> > >
> > > Y'a une astuce que je ne connaîtrais pas ?
> > >
> > >
> > > Le 27 octobre 2013 12:42, Christopher Crouzet <
> > > christopher.crouzet(a)gmail.com
> > > > a écrit :
> > >
> > > > Connaissais pas IWaHa mais ca n'empeche pas que j'aime bien
> reinventer
> > la
> > > > roue pour avoir le controle sur les plugins et pouvoir les modifier
> > selon
> > > > mes besoins :)
> > > >
> > > > Au passage, `max-width: 100%` pour du responsive c'est bien, mais
> > definir
> > > > en plus la taille `width` en em, c'est encore mieux.
> > > >
> > > >
> > > >
> > > > 2013/10/27 Franck Paul <carnet.franck.paul(a)gmail.com>
> > > >
> > > > > Assorti d'un :
> > > > >
> > > > > img {
> > > > > max-width: 100%;
> > > > > height: auto;
> > > > > }
> > > > >
> > > > > Pour quand on veut des images retaillées sur des petits écrans
> > > > (responsive
> > > > > mode)
> > > > >
> > > > >
> > > > > Le 27 octobre 2013 11:03, Julien Mudry
<julien.mudry(a)gmail.com> a
> > > écrit
> > > > :
> > > > >
> > > > > > 2013/10/24 Christopher Crouzet
<christopher.crouzet(a)gmail.com>
> > > > > >
> > > > > > > - enregistrement des dimensions dans la DB !
J'aurais tres
> bien
> > pu
> > > me
> > > > > > > servir de la mediatheque actuelle et faire une nouvelle
balise
> > tpl
> > > > > > publique
> > > > > > > appelant `getimagesize` pour savoir le taille d'une
image,
> mais
> > je
> > > > > > voulais
> > > > > > > que ca soit cache une fois pour toutes dans la DB et
pas
> avoir a
> > > > faire
> > > > > ca
> > > > > > > 100x a chaque fois qu'un visiteur allait afficher
une nouvelle
> > > page.
> > > > > > > J'aurais pu aussi faire un plugin qui rajoute cette
fonction
> sur
> > la
> > > > > > > mediatheque actuelle, mais c'etait moins rigolo.
> > > > > > >
> > > > > >
> > > > > > Ou utiliser le plugin IWaHa qui ajoute les dimensions sur
les
> > images
> > > > > > automatiquement à la sauvegarde du billet (ainsi, du côté
> publique,
> > > il
> > > > > n'y
> > > > > > a même pas besoin d'un accès base de données
supplémentaire).
> ;-)
> > > > > >
> > > > > > julien
> > > > > > --
> > > > > > Dev mailing list - Dev(a)list.dotclear.org -
> > > > > >
http://ml.dotclear.org/listinfo/dev
> > > > > >
> > > > >
> > > > >
> > > > >
> > > > > --
> > > > > Franck
> > > > > --
> > > > > Dev mailing list - Dev(a)list.dotclear.org -
> > > > >
http://ml.dotclear.org/listinfo/dev
> > > > >
> > > > --
> > > > Dev mailing list - Dev(a)list.dotclear.org -
> > > >
http://ml.dotclear.org/listinfo/dev
> > > >
> > >
> > >
> > >
> > > --
> > > Franck
> > > --
> > > Dev mailing list - Dev(a)list.dotclear.org -
> > >
http://ml.dotclear.org/listinfo/dev
> > >
> > --
> > Dev mailing list - Dev(a)list.dotclear.org -
> >
http://ml.dotclear.org/listinfo/dev
> >
>
>
>
> --
> Franck
> --
> Dev mailing list - Dev(a)list.dotclear.org -
>
http://ml.dotclear.org/listinfo/dev
>