Que fait le "zoom" en CSS ?

Question

J'ai trouvé que certains plugins jQuery, dans leur règle css, utilisent le descripteur 'zoom', j'ai même regardé dans le site web du w3c et j'ai trouvé qu'il est utilisé pour agrandir mais comment puis-je l'implémenter ? Ou bien je dois définir un viewport ? Et comment puis-je définir cette fenêtre ? Ou bien je me trompe à propos de tout cela ?

est-il possible de l'utiliser comme

a {
    zoom:1;
}

a:hover {
   zoom:2;
}

Answer 1

Le zoom est pris en charge dans IE, Safari 4, Chrome (et vous pouvez obtenir un effet similaire dans Firefox avec -moz-transform: scale(x) depuis 3.5). Voir ici .

Donc, tous les navigateurs

 zoom: 2;
 zoom: 200%;

permet de zoomer sur votre objet par 2, ce qui revient à doubler sa taille. Ce qui signifie que si vous avez

a:hover {
   zoom: 2;
}

Au survol, le <a> fera un zoom de 200%.

Comme je l'ai dit, dans FireFox 3.5+ utilisez -moz-transform: scale(x) il fait à peu près la même chose.

Edit : En réponse au commentaire de thirtydot je dirai que scale() n'est pas un remplacement complet. Il ne s'étend pas en ligne comme zoom Au contraire, il s'étend hors de la boîte et sur le contenu, sans forcer l'accès à d'autres contenus. Voir cela en action ici . En outre, il semble que zoom n'est pas pris en charge par Opera.

Ce site donne un aperçu utile sur les moyens de contourner les incompatibilités avec scale et les solutions de contournement à l'aide de jQuery.

Answer 2

Surpris que personne ne l'ait mentionné zoom: 1; est utile pour IE6-7, pour résoudre la plupart des bogues propres à IE en déclenchant hasLayout .

Answer 3

Cette propriété contrôle le niveau d'agrandissement de l'élément actuel. L'effet de rendu de l'élément est celui de la fonction "zoom" d'un appareil photo. Même si cette propriété n'est pas héritée, elle affecte le rendu des éléments enfants.

Exemple

 div { zoom: 200% }
 <div style=”zoom: 200%”>This is x2 text </div>

Answer 4

Le zoom est une spécification css3 pour le descripteur @viewport, comme décrit ici

http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor

utilisé pour zoomer la totalité de la fenêtre ('écran'). il arrive aussi de zoomer des éléments individuels dans beaucoup de navigateurs, mais pas tous. css3 précise que transform:scale doit être utilisé pour obtenir un tel effet :

http://www.w3.org/TR/css3-transforms/#transform-functions

mais son fonctionnement est un peu différent de celui du "zoom élémentaire" dans les navigateurs qui le prennent en charge.

Answer 5

Un très bon article sur le sujet du "zoom" se trouve ici, sur CSS-tricks : http://css-tricks.com/almanac/properties/z/zoom/