XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   gepunktete linie um geklickten button entfernen (http://xhtmlforum.de/showthread.php?t=51151)

schaf 29.03.2008 19:21

gepunktete linie um geklickten button entfernen
 
Hallo!
Um den gepunkteten Rahmen, der im Firefox um einen angeklickten Link erscheint zu verhindern, gibt es ja outline:none;. Wenn ich allerdings einem button tag diese eigenschaft gebe, ändert sich nichts und die gepunktete Linie erscheint weiterhin wenn der button angeklickt wird. gibt es da irgendeinen Trick?
liebe grüße und danke im voraus
Florian

gato 29.03.2008 19:41

outline zu verstecken ist die denkbar schlechteste Methode. Du zwingst damit all deine Besucher, ohne auszukommen. Dabei ist die Eigenschaft für Keyboard-Benutzer essentiell.

Wenn dir selbst die outline nicht gefällt, dann deaktiviere sie bitte auch nur für dich selbst. Das geht im Firefox ganz einfach mit der about:config-Variable browser.display.focus_ring_width. Setze sie auf 0 und du hast Ruhe.

schaf 29.03.2008 23:33

Okay, danke, Ich muss zu meiner Schande gestehen, dass ich nicht wusste, dass das so wichtig ist.
Danke
Flo

gato 29.03.2008 23:35

Unwissen kann nur kleiner werden ;)

siteway.de 23.11.2008 17:28

Alter Beitrag, aber bin über die Google Suche eingestiegen.
Habe das gleiche Problem wie *schaf*.

Lieber *gato* danke das Du in diesem Forum aktiv bist, aber ich ärgere mich immer tierisch über Forumseinträge in denen sinnvolle Fragen einfach so abgetan werden... :?

Sicherlich ist es nicht sinnvoll die css-outline einfach so ersatzlos zu disabeln, aber es gibt designtechnisch viel schönere Möglichkeiten, die ich ständig auf meinen Websites einsetzte (davon mal abgesehen, dass ich niemanden kenne, der tatsächlich die Tastatur zum Navigieren nutzt ... ich glaube das ist ein Mythos ;) - aber im Zuge der Accessability sollte man das wohl beachten)

Also hier die Lösung für normale Links mit deaktivierter outline und entsprechendem (schönen) Ersatz für die Tab-Navigation:

css:
Code:

a {color: black; outline: none;}
a:hover, a:focus  {color: red;}

Ich weise also dem Zustand focus (der Eintritt wenn ich einen Link über die Tastatur (Tab) anspringe) das gleiche Layout zu, wie als wenn ich mit der Maus darauf zeige (hover). Das ist eigentlich sogar noch sinnvoller als eine gepunktete Linie ...

Dies kann natürlich mit css beliebig gestaltet werden! Mit Hintergrundbild, Farbe, Border usw. lässt sich hier alles machen.

Ein Problem bleibt:

Das von *schaf* beschriebene Problem bleibt aber bestehen, denn bei dem button-tag funktioniert dies nicht und die outline bleibt (Firefox)

gemeint ist dieser Tag:
Code:

<button>Formular abschicken</button>
Falls also irgendjemand eine Lösung dafür findet bitte hier veröffentlichen!
(weil man diesen Beitrag ja eh über Google schon findet)
8)

Praktikant 23.11.2008 22:05

Ich finde es auch nicht sinnvoll outline zu verstecken. Ich nutzte manchmal die Tastatur, wenn ich zum Beispiel zu faul bin nach der Maus zu greifen, oder wenn ich eh nur eine Hand freihabe weil ich telefoniere und dann ist der Weg einfach kürzer ;) Da bin ich heilfroh, wenn zu der Farbänderung die der Autor für den Link vorgesehen hat noch die outline kommt. Man kann einfach den Link besser sehen.
Zudem.... klappt es danach wirklich noch, wenn man mit dem Keyboard navigieren will??
Kannst du und vielleicht mal ein Beispiel zeigen?

siteway.de 28.11.2008 12:10

Ja, man muss sich eben bewusst sein, dass man dem User ein gewohntes Merkmal nimmt - aber ich bin der Auffassung, dass jemand der die Tab-Navigation kennt und nutzt eher in den Bereich der PC/Internet-affinen User gezählt werden kann und ihm wage ich es zuzumuten (da ich ja auch eine Alternative gebe, die so aussieht, als wenn er die Maus darüber bewegen würde und für mich daher sogar mehr Sinn macht als eine Outline).

Ein Beispiel für in etwa denselben Code wie oben beschrieben (zumindest gleiche Funktion) findest Du z.B.: hier: Home- Bühner Casting Hamburg

fricca 28.11.2008 12:20

Zitat:

Zitat von siteway.de (Beitrag 412406)
aber ich bin der Auffassung, dass jemand der die Tab-Navigation kennt und nutzt eher in den Bereich der PC/Internet-affinen User gezählt werden kann

Schon mal an Menschen gedacht, die keine Maus bedienen können, weil sie motorisch eingeschränkt sind?

andir 28.11.2008 12:29

Zitat:

Zitat von fricca (Beitrag 412408)
Schon mal an Menschen gedacht, die keine Maus bedienen können, weil sie motorisch eingeschränkt sind?

Er wird es nun nicht mehr wagen zu behaupten... :lol:

Davon abgesehen wäre die gepunktete Linie hinfällig, wenn es eine andere eindeutige visuelle Rückmeldung für den Benutzer gibt: Farbwechsel, Grautonwechsel, Schriftänderung und dergleichen. Aber eben sichtbar und eindeutig muss sie sein. Das verlinkte Beispiel der Bühne wäre mir nicht eindeutig genug.

Aber Eindeutigkeit zu schaffen ist hier schwer: Die gepunktete Linie ist konventionell und daher nahezu jedem bekannt für einen aktiven Link. Eine (Farb-)änderung wird nur im Kontext zur Umgebung erfasst und könnte genausogut für die gerade besuchte Seite stehen.

Daher im Zweifel: Lassen.

fricca 28.11.2008 12:33

Zitat:

Zitat von andir (Beitrag 412413)
Er wird es nun nicht mehr wagen zu behaupten... :lol:

Ja, manchmal hilft nur Provokation, um einen Tunnelblick zu erweitern. ;)

Zitat:

Das verlinkte Beispiel der Bühne wäre mir nicht eindeutig genug.
Full ACK.


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:04 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023