CSS: Microsoft Layouteigenschaften
Microsoft hat für das Layout weitere Eigenschaften eingeführt, die nicht in einer der beiden CSS Spezifikationen enthalten sind.behavior
Diebehavior-Eigenschaft, beschreibt das Verhalten von Elementen. Dies geschieht über sogenannte HTC-Dateien. Diese enthalten (JavaScript-)Code der beschreibt, wann und wie das Element in welcher Situation zu reagieren hat. Als Wert wird daher eine oder mehrere URLs übergeben, die die Adresse der HTC-Datei(en) beschreiben. Mehr dazu erfahren Sie auf Microsofts Behavior Seite. Beispiel:
P.a { behavior: url(meinVerhalten.htc); }
filter
Diefilter-Eigenschaft, beschreibt welche von Microsofts Filtern verwendet werden sollen. Bei diesen Filtern handelt es sich um Effekte, die zusätzlich die Darstellung des Elements (bzw. Elementinhalts) verändern. Als Wert wird hierbei der Name des Filters, sowie (in Klammern dahinter) die zu übergebenden Parameter, notiert. Weitere Informationen dazu finden Sie auf Microsofts Filter Seite. Beispiel:
P.Welle { filter:wave(); }
ime-mode
Dieime-mode-Eigenschaft beschreibt den Status des IME-Modus. Der IME-Modus erlaubt es, chinesische, japanische und koreanische Zeichen über eine normale (eingeschränkte) Tastatur einzugeben. Als Wert kann dazu einer der folgenden dienen:
-
active- Der IME-Modus ist aktiv und kann ausgeschaltet werden. -
auto- (Standard) Die IME-Modus-Einstellung wird nicht berücksichtigt. -
disabled- Der IME-Modus ist inaktiv und kann nicht angeschalten werden. -
inactive- Der IME-Modus ist inaktiv und kann angeschalten werden.
INPUT { ime-modus:active; }
Bitte beachten Sie, dass diese Eigenschaft nur bei den folgenden HTML-Elementen eingesetzt werden kann:input (type="text") und textarea.
layout-grid-char und layout-grid-line
Dielayout-grid-char-Eigenschaft beschreibt die Größe des Zeichengitters und die layout-grid-line-Eigenschaft die Größe des Zeilengitters, das zum Darstellen des Textes verwendet werden soll. Die folgenden Werte sind möglich:
-
auto- Das größte Zeichen der Schriftart wird verwendet um die Größe des Zeichengitters festzulegen. -
none- Es wird kein Zeichengitter verwendet um den Text darzustellen. - Längenangabe - Beschreibt die exakte Größe des Zeichengitters
- Prozentangabe - Beschreibt die Größe des Zeichengitters in Prozent.
P.a { layout-grid-char: auto; layout-grid-line: auto; }
Anmerkung: Der visuelle Effekt dieser Eigenschaft kommt der derline-height-Eigenschaft gleich. Sie hat allerdings die Bedeutung zur Gestalltung bei asiatischen Schriften/-Texten.
layout-grid-mode
Dielayout-grid-mode-Eigenschaft beschreibt, ob für die Darstellung des Inhalts eines Elements zweidimensionale Gitter verwendet werden sollen. Dazu können die folgenden Werte notiert werden:
-
both- Die Zeilen- und Zeichengitter werden verwendet. -
char- Es werden nur Zeichengitter verwendet. -
line- Es werden nur Zeilengitter verwendet. -
none- Es werden keine Gitter verwendet.
DIV { line-grid-mode:char; }
layout-grid-type
Dielayout-grid-type-Eigenschaft beschreibt den Typ des zu verwendenden Gitters. Die folgenden Werte sind möglich:
-
loose- Das Gitter für japanische und koreanische Zeichen wird verwendet. -
fixed- Das Gitter für monospace-Zeichen wird verwendet. -
strict- Die Gitter für chinesische, japanische und koreanische Zeichen wird verwendet. Es wird nur auf bestimmte Zeichen angewandt.
P { layout-grid-type:loose; }
layout-grid
Dielayout-grid-Eigenschaft ist eine Zusammenfassung der 4 oben genannten Eigenschaften. Als Wert kann jeweils der Wert dieser Eigenschaften in der folgenden Reihenfolge notiert werden:-mode -type -line -char
Beispiel:
P { layout-grid: both loose 10% 15px; }
zoom
Diezoom-Eigenschaft beschreibt, um wieviel der Inhalt bzw. die Darstellung eines Elements vergrößert werden soll. Als Wert kann dazu entweder normal, ein Faktor oder eine Prozentangabe notiert werden. normal bedeutet, dass keine Vergrößerung stattfinden soll. Die Notation eines Faktors bzw. einer Prozentangabe bedeutet, dass das Element um soviel vergrößert werden soll, wie der Faktor bzw. die Prozentangabe groß ist. Beispiel:
P.groß { zoom: 300%; }
/* = 3.0 */
P.normal { zoom:normal; }
/* = 100% = 1.0 */
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Animationen
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project