nicht angemeldet
Buttons mit CSS gestalten
Matthias Scharwies
Buttons mit CSS gestalten
Matthias Scharwies
Camping_RIDER
Gunnar BittersmannServus!
Ich hab nach einiger Zeit mal wieder CSS Secrets von Lea Verou in der Hand gehabt und wollte den Trick, die Hit Area eines Buttons mit einem transparenten Rand zu vergrößern, ins Wiki einfügen.
Dabei bin ich wieder über
gestolpert.
Buttons gehören wie beinahe alle Formularelemente zu denen, die sich etwas gegen die Gestaltung durch CSS „wehren“. Das liegt daran, dass das Aussehen dieser Bedienelemente vom Browser und Betriebssystem abhängig ist. Sowohl Aussehen als auch Funktionalität sollte möglichst nicht durch den Webdesigner beeinflusst werden, Buttons sind Teil der Arbeitsumgebung des Anwenders und deshalb kein Spiel- und Tummelplatz für Autoren von Web-Seiten.
Da im Beispiel ein Button mit einem Hintergrundbild mit CSS gestaltet wird, hat sich das Argument contra Gestaltung imho eigentlich von selbst erledigt.
Hätte irgendjemand Lust dieses Kapitel zu überarbeiten (oder einen eigenen Artikel / Blog-Beitrag zu schreiben), der sich eher um Grundsätze der Usablity kümmert:
- gute Erkennbarkeit als interaktives Element
- gute Beschreibung
- genügend groß auch auf kleinen Viewports
- …
Vielen Dank im Voraus
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste
Es gibt viel zu tun: ToDo-Liste
-
Servus!
Dabei bin ich wieder über
gestolpert.
Was haltet ihr von:
Benutzer können Buttons anklicken und mit der Tastatur ansteuern. Die Browser kennzeichnen dieses [[Standardverhalten]] in ihren [[Browser-Stylesheet]]s, dass, wenn sie mit der Maus angesteuert werden, z.B. im Firefox, Opera und IE11 der Hintergrund blau, wird bei einer Fokussierung erhalten sie im Chrome, Firefox und Opera eine blaue Umrandung. Bei einigen Browser erhalten auch angeklickte Buttons den Fokus.<ref>MDN: [https://developer.mozilla.org/de/docs/Web/HTML/Element/button#Clicking_and_focus Clicking and focus]</ref> Dieses Verhalten ist notwendig, damit Ihre Webseite für '''alle''' Benutzer ohne Einschränkungen zugänglich (→ [[accessibility]]) ist. {{Empfehlung|Achten Sie beim Stylen von Buttons darauf, das Standardverhalten von Buttons deutlich zu zeigen: {{Beispiel|Pseudoklassen hover, active, focus als CSS-Selektoren| {{BeispielCode|<source lang="css"> /* Normale Gestaltung */ button { ... } /* Gestaltung, wenn Button mit Maus oder Tastatur ausgewählt ist */ button:hover, button:focus { ... } /* Gestaltung, wenn Button gedrückt ist */ button:active { ... } </source>}} {{BeispielText|Legen Sie klar erkennbare Formatierungen für Buttons fest, die dann über die Pseudoklassen [[CSS/Selektoren/Pseudoklasse/hover, active, focus|hover, active, focus]] selektiert werden. }}}} }}Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
-
@@Matthias Scharwies
Was haltet ihr von:
Benutzer können Buttons anklicken und mit der Tastatur ansteuern. Die Browser kennzeichnen dieses [[Standardverhalten]] in ihren [[Browser-Stylesheet]]s, dass, wenn sie mit der Maus angesteuert werden, z.B. im Firefox, Opera und IE11 der Hintergrund blau, wird bei einer Fokussierung erhalten sie im Chrome, Firefox und Opera eine blaue Umrandung.Def Satz ist so kompliziert, dass ich nicht einmal durchsteige, ob er grammatikalisch korrekt ist.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Aloha ;)
Was haltet ihr von:
Benutzer können Buttons anklicken und mit der Tastatur ansteuern. Die Browser kennzeichnen dieses [[Standardverhalten]] in ihren [[Browser-Stylesheet]]s, dass, wenn sie mit der Maus angesteuert werden, z.B. im Firefox, Opera und IE11 der Hintergrund blau, wird bei einer Fokussierung erhalten sie im Chrome, Firefox und Opera eine blaue Umrandung.Def Satz ist so kompliziert, dass ich nicht einmal durchsteige, ob er grammatikalisch korrekt ist.
Du hast Recht, aber irgendwie vermisse ich deinen Vorschlag für eine Umformulierung.
Meiner wäre:
Buttons können entweder angeklickt oder mit der Tastatur angesteuert werden. [[Standardverhalten|Standardmäßig]] machen die Browser jede mögliche Interaktion visuell deutlich (Beispiel: blauer Hintergrund beim Darüberbewegen der Maus, blaue Umrandung bei einer Fokussierung). Bei einigen Browser erhalten auch angeklickte Buttons den Fokus.<ref>MDN: [https://developer.mozilla.org/de/docs/Web/HTML/Element/button#Clicking_and_focus Clicking and focus]</ref> Diese visuelle Verdeutlichung ist notwendig, damit der entsprechende Button für '''alle''' Benutzer ohne Einschränkungen zugänglich (→ [[accessibility]]) ist. Sie sollten bei selbstgestalteten Buttons darauf achten, auch eine entsprechende visuelle Markierung für jede mögliche Interaktion anzubieten, damit die selbstgestalteten Buttons mindestens so zugänglich sind wie ihre [[Browser-Stylesheet|Standarddarstellung]]. {{Empfehlung|Achten Sie beim Stylen von Buttons darauf, alle Pseudoklassen des Buttons mit einer visuellen Verdeutlichung für die entsprechende Benutzer-Interaktion zu versehen: {{Beispiel|Pseudoklassen hover, active, focus als CSS-Selektoren| {{BeispielCode|<source lang="css"> /* Normale Gestaltung */ button { ... } /* Gestaltung, wenn Button mit Maus oder Tastatur ausgewählt ist */ button:hover, button:focus { ... } /* Gestaltung, wenn Button gedrückt ist */ button:active { ... } </source>}} {{BeispielText|Legen Sie klar erkennbare Formatierungen für Buttons fest, die dann über die Pseudoklassen [[CSS/Selektoren/Pseudoklasse/hover, active, focus|hover, active, focus]] selektiert werden. }}}} }}Grüße,
RIDER
-
Servus!
Def Satz ist so kompliziert, dass ich nicht einmal durchsteige, ob er grammatikalisch korrekt ist.
Du hast Recht, aber irgendwie vermisse ich deinen Vorschlag für eine Umformulierung.
Meiner wäre:
@Camping_RIDER @Gunnar Bittersmann Danke Euch beiden!
Ich hatte den Text hier vorgestellt, weil ich mir auf die Schnelle nicht sicher war. Wenn's erst mal im Wiki steht, ändert es ja auch keiner mehr.
Jetzt ist es aktualisiert.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste
-
-
-