Effet loupe de Firefox3 mais en CSS ?

[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

[jpj]

Bonjour,

Je déplace ta question dans la section "Développement web".

[Invité]

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

[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.

[calimo]

Et comment on change la feuille de style en fonction du zoom ?

[nico@nc]

Avec ça par exemple. Enfin c'est pour faire quoi précisément ?

[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...

[Invité]

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

[martin]

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:

Code : Tout sélectionner

body { font-size: 0.7em; }

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)

[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.

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:

Code : Tout sélectionner

body { font-size: 0.7em; }

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

[Oneilos]

Il exite une propriété CSS

body {
zoom : 200%;
}

mais au jour d'aujourd'hui elle semble ne pas fonctionner sur Firefox

[calimo]

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