CSS/Eigenschaften/Anzeige/appearance
Die Eigenschaft appearance (engl. Aussehen, Erscheinung) sollte es ursprünglich ermöglichen, Formularelementen ihr betriebssystemspezifisches Aussehen zu nehmen.
Details: caniuse.com
Achtung!
Inhaltsverzeichnis
Verhalten gemäß (geplanter) Spezifikation[Bearbeiten]
In der Spezifikation (CSS Basic User Interface Module Level 4) gibt es folgerichtig auch nur zwei Werte, auto
und none
.
button {
display: block;
margin: .5em 1em;
}
button.none {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
<h2>appearance: none;</h2>
<form>
<button class="none">Ich bin ein Button, darf aber nicht so aussehen.</button>
<button class="none">Button</button>
</form>
Erlaubt sind folgende Werte:
-
auto
, (Standardwert) das Element wird wie ein Bedienelement des Browsers dargestellt -
none
, das browsertypische Verhalten wird entfernt
Erweiterungen[Bearbeiten]
Einige Browserhersteller haben Erweiterungen an der Spezifikation vorgenommen, sodass jetzt auch beliebige Elemente wie Formularelemente aussehen können. Aus Gründen der Zugänglichkeit ist dies nicht unproblematisch, etwa wenn vergessen wird, auf die Tastaturbedienung zu achten.
Es wurde eine Vielzahl von zusätzlichen Werten definiert.[1] Nun steht im Vordergrund, beliebigen Elementen das Aussehen von Formularelementen zu geben, deshalb ist der Wert auto
nicht sinnvoll, der Defaultwert ist folgerichtig none
. Man sieht also, dass sich die geplante Spezifikation und die Bestrebungen der Browserhersteller hier widersprechen.
Details: caniuse.com
a {
-moz-appearance: button;
-webkit-appearance: button;
appearance: button;
}
<a href="#">Ich bin ein Link und sehe wie ein Button aus.</a>
Erlaubt sind unter anderem folgende Werte:
-
none
, (Standardwert) das Element wird wie gewohnt dargestellt, entsprichtauto
in der Spezifikation -
button
, das Element wird wie ein Button dargestellt -
checkbox
, das Element wird wie eine Checkbox dargestellt -
listitem
, das Element wird wie ein Listenelement dargestellt -
radio
, das Element wird wie ein Radio-Button dargestellt
Eine vollständige Liste finden Sie unter https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance.
Achtung!
für Firefox | -moz-appearance
|
---|---|
für Chrome, Opera, Safari | -webkit-appearance
|
für Android-Browser | -webkit-appearance
|
Details: caniuse.com
Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.
Siehe auch[Bearbeiten]
Quellen[Bearbeiten]
- ↑ MDN: -moz-appearance
Weblinks[Bearbeiten]
- css-tricks.com: appearance