Page 1 sur 1
Effet loupe de Firefox3 mais en CSS ?
Publié : 01 avr. 2008, 10:23
par sp
Bonjour,
savez-vous comment reproduire en CSS la fonction zoom de Firefox 3 ?
Elle a ceci d'intéressant qu'elle zoom tout le contenu de la page par défaut (au lieu de zoomer uniquement le texte, cassant la mise en page image).
Je sais que le navigateur prend le contrôle à chaque page du rendu, mais comment le fait-il ?
Est-ce faisable en CSS uniquement (sans utiliser DOM et ECMAScript ni XUL) ?
Merci.
Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Publié : 01 avr. 2008, 12:20
par jpj
Bonjour,
Je déplace ta question dans la section "Développement web".
Publié : 01 avr. 2008, 15:06
par Invité
jpj a écrit :Bonjour,
Je déplace ta question dans la section "Développement web".
Pardon, je n'avais pas vu les sections...
Merci de l'avoir déplacé au bon endroit pour cela.
Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Publié : 01 avr. 2008, 19:30
par nico@nc
Ben... plusieurs feuilles de style pour chaque niveau de zoom, non ?
À combiner éventuellement avec du php pour générer la feuille en direct.
Publié : 02 avr. 2008, 09:14
par calimo
Et comment on change la feuille de style en fonction du zoom ?
Publié : 02 avr. 2008, 14:07
par nico@nc
Avec
ça par exemple. Enfin c'est pour faire quoi précisément ?
Publié : 02 avr. 2008, 14:54
par calimo
ah ok, mais alors ce n'est plus du pur CSS
Effectivement, quelques précisions seraient les bienvenues, parce que pour moi le "loupe", c'est l'agrandissement du texte exactement sous la souris...
Publié : 03 avr. 2008, 15:13
par Invité
nico@nc a écrit :Avec
ça par exemple. Enfin c'est pour faire quoi précisément ?
Merci pour les réponses.
Les styles switchers je connaissais, mais je voulais pouvoir faire cela en css, sans javascript et sans php (ou autres langages de script)
C'est savoir comment faire pour que quand on augmente la taille des polices via un navigateur (FF ou IE ou autre), ça fasse augmenter la taille de tous les éléments, pas uniquement celles des textes, ce qui casse la mise en page.
FF3 le gère bien, mais moi je prévois un site qui passe pareil pour l'accessiblité (lecture écran sur ce cas précis) quel que soit le navigateur.
Qu'en pensez-vous ?
Merci.
Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Publié : 03 avr. 2008, 15:54
par martin
Anonymous a écrit :
C'est savoir comment faire pour que quand on augmente la taille des polices via un navigateur (FF ou IE ou autre), ça fasse augmenter la taille de tous les éléments, pas uniquement celles des textes, ce qui casse la mise en page.
FF3 le gère bien, mais moi je prévois un site qui passe pareil pour l'accessiblité (lecture écran sur ce cas précis) quel que soit le navigateur.
c'est plus précis comme demande
.
Je te conseille alors de :
1° définir une taille de police générale en
em, ex:
c'est important pour IE6, si c'est en px (pixel) il ne pourra pas redimensionner le texte.
2° définir tes tailles de block (width et height) également en em, ou en % pour les sous block.
Le seul soucis, c'est les images d'arrière plan qui ne sont pas redimensionnables (on a aucun moyen en CSS 2 de définir leurs dimensions)
Publié : 03 avr. 2008, 16:59
par Invité
Super ! ! !
Merci pour ta réponse.
Ba maintenant pour le fond d'écran, la difficulté est dans le choix de le faire en accessibilité, sinon on met un calque qui contient l'image en tant que balise image, et on le met en dessous du contenu, qui lui est en fond transparent ? ? ?
ça donnerait quoi ça en accessibilité ?
ça devient difficile de gérer à la fois la presentation et puis la structure du code...
Merci en tous cas.
martin a écrit :Anonymous a écrit :
C'est savoir comment faire pour que quand on augmente la taille des polices via un navigateur (FF ou IE ou autre), ça fasse augmenter la taille de tous les éléments, pas uniquement celles des textes, ce qui casse la mise en page.
FF3 le gère bien, mais moi je prévois un site qui passe pareil pour l'accessiblité (lecture écran sur ce cas précis) quel que soit le navigateur.
c'est plus précis comme demande
.
Je te conseille alors de :
1° définir une taille de police générale en
em, ex:
c'est important pour IE6, si c'est en px (pixel) il ne pourra pas redimensionner le texte.
2° définir tes tailles de block (width et height) également en em, ou en % pour les sous block.
Le seul soucis, c'est les images d'arrière plan qui ne sont pas redimensionnables (on a aucun moyen en CSS 2 de définir leurs dimensions)
[/code]
Message envoyé avec : Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Re: Effet loupe de Firefox3 mais en CSS ?
Publié : 23 déc. 2010, 16:34
par Oneilos
Il exite une propriété CSS
body {
zoom : 200%;
}
mais au jour d'aujourd'hui elle semble ne pas fonctionner sur Firefox
Re: Effet loupe de Firefox3 mais en CSS ?
Publié : 23 déc. 2010, 16:54
par calimo
Oneilos a écrit :Il exite une propriété CSS
body {
zoom : 200%;
}
CSS ? Quelle version ? Je ne trouve rien dans les docs. En tous cas ce n'est pas dans la version actuelle de CSS, qui est la 2.1. À partir de là, ce n'est pas très étonnant que ça ne fonctionne pas