CSS-Eigenschaft: zoom, Kategorien: Bildschirmdarstellung (allgemein), Device Adaptation (CSS 3)
Vergrößerungsfaktor
Steuert den Vergrößerungsfaktor/Zoom-Faktor für die Darstellung.
| Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
|---|---|---|---|---|
| Vergrößerungsfaktor |
| auto |
| Neu in CSS 3 |
Verwandte Eigenschaften aus der Kategorie: Bildschirmdarstellung (allgemein), Device Adaptation (CSS 3):
- align-content
- align-items
- align-self
- box-decoration-break
- box-shadow
- clip
- column-count
- column-fill
- column-width
- columns
- cursor
- direction
- display
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- justify-content
- max-zoom
- min-zoom
- opacity
- order
- orientation
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-x
- overflow-y
- resize
- resolution
- rotation
- rotation-point
- text-overflow
- unicode-bidi
- user-zoom
- visibility
- Aktuelle Seite: zoom
Folgendes ist beim Einsatz von zoom zu beachten:
zoomsteuert die Vergrößerung eines HTML-Elements. Die Eigenschaft ist kein Teil des offiziellen W3C-Standards. Allerdings darf sie in einer CSS-Referenz nicht fehlen, da sie für den Alltag und dem Handling von Internet Explorer Darstellungsproblemen essentiell ist.zoomin Internet Explorer:- In dem Zusammenhang ist die das hasLayout des IE relevant.
Nicht alle HTML-Elemente haben die Eigenschaft
hasLayout. Ohne dieses haben sie keine eigene Breite oder Höhe, noch eine eigene Positionierung. Dadurch geschieht es im IE je nach Kontext, dass Elemente nicht angezeigt werden oder sich wie ein Inline-Element verhalten. - Über
zoom: 1wird dieseshasLayoutgetriggert, ein Element bekommt eigene Dimensionen, es wird korrekt angezeigt. Es ist also nicht die eigentliche Vergrößerung, die man sich hier zu Nutzen macht, sondern den Effekt auf das interne Rendering im IE. - Ein vergleichbarer Effekt kann auch über die Eigenschaften
position: relative,height: 1px(IE6) odermin-heigth: 1px(IE7) getriggert werden, das gemeinsame ist, dass immer dashasLayoutaktiviert wird. - Von daher ist
zoombislang eher als Hack eingesetzt worden, als dass man die Eigenschaft wirklich zum Vergrößern von Elementen genutzt hat.
- In dem Zusammenhang ist die das hasLayout des IE relevant.
Nicht alle HTML-Elemente haben die Eigenschaft
-
zoomals CSS3 Eigenschaft:- Das W3C diskutiert unter dem Modul-Namen css3 device adaptation neue CSS-Eigenschaften, die vor allem auf mobile Endgeräte abzielen. Der Status des W3C-Dokuments ist aktuell (Dezember 2012) Editor's Draft, sodass dieser Teil des Standards ohne jegliche Verbindlichkeit ist und von größeren Änderungen betroffen sein kann.
- Im Gegensatz zu den anderen Eigenschaften auf dem Bereich css3 device adaptation kann man bei
zoomallerdings davon ausgehen, dass diese Eigenschaft Teil vom CSS3 Standard wird. Einerseits aufgrund der vollständigen Unterstützung durch den Internet Explorer, aber auch Safari und Chrome unterstützen diese Eigenschaft bereits. - Alternativ besteht je nach Browser über transform und dem Wert
scale()die Möglichkeit, HMTL-Elemente zu skalieren, also zu zoomen.
zoomerwartet Werte als Zahl oder Prozentangabe.1.0entspricht dabei100%und entspricht der 1:1-Darstellung. Werte über 1.0 vergrößern ein Element, unter 1.0 verkleinert Elemente.zoomwirk sich auf das komplette HTML-Element einschließlich Schriftgrößen, Innenabstände und Rahmenstärke.- Obwohl
zoomim IE bereits seit Versionen implementiert ist, zeigt der IE8 die Vergrößerung fehlerhaft dar. Hintergrundinformationen unter http://haslayout.net/haslayout. Ab der Version 9 wirdzoomjedoch wieder sauber dargestellt.
 Firefox |  Chrome |  Internet Explorer |  Safari |  Opera |
|||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CSS3 |
|
|
|
|
| ||||||||||||||||||||||||||||||||||||||||||
Hinweis
Die CSS-Eigenschaften aus dem Bereich css3 device adaptation werden beim W3C noch diskutiert. Es ist nicht sicher, ob diese Teil des offiziellen W3C-Standards werden, ebenfalls können Eigenschaften verändert werden oder auch komplett entfallen.
Weiterführende Informationen zu zoom:
- W3C Spezifikation:
http://dev.w3.org/csswg/css-device-adapt/#zoom
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
z-index
Beispiele
HTML:
<div id="example-1">zoom</div>CSS:
div {
border: 1px solid #333;
background-color: #FF8000;
padding: 20px;
width: 50px;
height: 50px;
font-size: 16px;
}
/* Anweisungen für alle Beispiele. */Beispiel nur für: 
Beispiel Nr. 1 So sieht's aus:
zoom
HTML:
<div id="example-2">zoom</div>CSS:
#example-2 {
zoom: 2.5;
}Beispiel nur für:
Beispiel Nr. 2 So sieht's aus:
zoom
HTML:
<div id="example-3">zoom</div>CSS:
#example-3 {
zoom: 0.75;
}Beispiel nur für:
Beispiel Nr. 3 So sieht's aus:
zoom
HTML:
<div id="example-4">zoom</div>CSS:
#example-4 {
zoom: 200%;
}Beispiel nur für:
Beispiel Nr. 4 So sieht's aus:
zoom
HTML:
<div id="testcase-vendor">zoom</div>CSS:
#testcase-vendor {
background-color: #00FF00;
-moz-zoom: 3;
-webkit-zoom: 3;
-o-zoom: 3;
}Testbeispiel: Schreibweise mit
Vendor-Präfix
zoom
HTML:
<div id="testcase-standard">zoom</div>CSS:
#testcase-standard {
background-color: #0080FF;
zoom: 3;
}Beispiel nur für:
Testbeispiel: Standardschreibweise
zoom
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!