Mozilla spezifisches CSS

[dipser]

Die Mozilla spezifischen CSS-Eigenschaften werden mit -moz-* eingeleitet und heben sich dadurch von den normalen CSS Eigenschaften eindeutig ab. Wodurch es nicht zu Überschneidungen von Mozilla mit den W3C-Standards kommen kann.


Eigenschaft -moz-border-radius

Mit dieser Eigenschaft ist es möglich runde Ecken zu zaubern.

Beispiel:

<p style="border:1px solid red;-moz-border-radius:9px;">Dies ist ein sehr kurzer Paragraph.</p>

Die Werte können in Pixel (px) oder in Prozent (%) festgelegt werden. Außerdem ist es möglich auch nur einzelne Ecken abzurunden. Beispielsweise mit: -moz-border-radius:9px 0px 0px 0px; (oben rechts unten links). Oder man verwendet die speziell definierten Eigenschaften:
-moz-border-radius-topleft:;
-moz-border-radius-topright:;
-moz-border-radius-bottomleft:;
-moz-border-radius-bottomright:;


Zusatzwerte für overflow

Die zusätzlichen bestimmen, ob eine Scollleiste angezeigt werden soll oder nur horizontal bzw. vertikal.

Beispiel:

<div style="border:1px solid red;width:200px;height:50px;overflow:-moz-scrollbars-horizontal;">
Text<br />
Text<br />
Text<br />
Text<br />
</div>

Sonstige Werte:
-moz-scrollbars-none
-moz-scrollbars-horizontal
-moz-scrollbars-vertical


Eigenschaft -moz-background-inline-policy

Diese Eigenschaft zeigt das Hintergrundbild in unterschiedlichen Verläufen an.

Beispiel:

<div style="display:inline; background-image:url(image.png); -moz-background-inline-policy: bounding-box;">                           </div>

-moz-background-inline-policy: bounding-box; -- Zeigt das Bild von oben nach unten an
-moz-background-inline-policy: continuous; -- Zeigt das Bild von links nach rechts an, selbst bei Umbrüchen. (Standardeinstellung)
-moz-background-inline-policy: each-box; -- Zeigt das Bild immer wieder neu an


Zusätzlicher Wert für white-space

Die Eigenschaft -moz-pre-wrap bricht den Text am rechten Rand des Fensters um.

Beispiel:

<pre style="white-space:-moz-pre-wrap;">
Der Text wird umgebrochen, wenn er am Ende des Fensters angelangt ist.
</pre>

Es gibt noch ein paar weitere Werte und Eigenschaften, die aber mittlerweile entweder Standard geworden sind (z.B. opacity) oder aber nicht in HTML Dokumenten funktionieren. Falls ihr noch weitere Werte bzw. Eigenschaften kennt, könnt ihr sie mir mitteilen, ich würde es dann ergänzen.

 

[gery]

das ist echt was nützliches! hast du eine quelle dazu?

 

[dipser]

Es gibt zwar eine interessante Quelle dazu auf xulplanet.com, aber das meiste funktioniert im Brauser nicht, zumindest bei mir nicht, also habe ich es weggelassen. Ich hatte einfach ausprobiert, was sich ändert, wenn ich das CSS benutze. Das Ergebnis könnt ihr da oben erkennen.
Das nicht alles funktioniert hat bestimmt einen Sinn, schließlich kommt dieses CSS aus der internen Struktur von Mozilla. Ein paar Sachen aus der Liste waren nicht mehr erwähnenswert, wie eben opacity oder outline. Aber schau es dir selbst an

 

[bine]

Interessant sind ja dann so Funktionen wie das mit der Scrollbar. Bisher gab es ja immer nur für den IE die Möglichkeit z.B. eine horizontale Scrollbar abzuschalten. Klar besser ist, man schreibt so das erst gar keine kommt wenn man keine haben will. Aber manchmal ist das ja etwas verzwickt zu erreichen.

Gut nun hat Mozilla was was alle anderen nicht können, und der IE hat wieder was was alle anderen nicht können. Ja des Webdesigners Leben muß doch noch ein bisschen mehr durcheinander gebracht werden

Ob wir wohl mal eine Seite machen können wo man sich nicht fragt, wo geht denn das nun und wo nicht? Nein wir werden wohl keine solche Seite machen können. Oder wir schreiben einfach nur noch Text

Nun ja, die Angebote der Möglichkeiten find ich generell gut. Aber es sollte dann auch einen gewissen Punkt geben an dem gesagt wird, soo das müssen jetzt aber alle Browser können.

 

[dipser]

Ein paar weitere Beschreibungen, findet ihr jetzt auch auf http://css4you.de/mozproperty.html