Auswahl Rahmen bei Links

[css-newbie]

Hallo

Wenn ich einen Link bei mir in der Navigation anklicke, bekommt er automatisch einen (weissen) Rahmen. Dies kommt, so wie ich meine, von der Auswahl / Selektion. Da die gesamte Navigation schwarz ist, sieht dass nun komisch aus.

Wie kann ich mit CSS dies verhindern?

D.h. machen, dass die Maus-Interaktion / der Mausklick nicht das ganze Element "auswählt" im Sinne von einen Rahmen ersichtlich wird (bzw. die Elementgrösse ersichtlich wird).

Ich hoffe ihr versteht was ich meine und es gibt eine Lösung dafür-

Vielen Dank, Pascal

[quincunx]

Hallo Pascal,

a {outline: 0;} suchst du das?

gruss quincunx

[Gunnar Bittersmann]

@@quincunx:

nuqneH

a {outline: 0;} suchst du das?

Nein, keinesfalls!

Damit ist die Seite per Tastatur nicht mehr bedienbar.

Qapla'

[quincunx]

@@gunnar,

Damit ist die Seite per Tastatur nicht mehr bedienbar.

so ganz stimmt das nicht, wenn du wie du es oben beschieben hast :focus verwendest kannst du die Seite so gestalten wie es dir beliebt und das durchbrowsen mit der Tastatur funktioniert genauso, nur die outline ist weg.

[Gunnar Bittersmann]

@@css-newbie:

nuqneH

Wie kann ich mit CSS dies verhindern?

Die erste Frage ist: _ob_ man dies verhindern sollte.

D.h. machen, dass die Maus-Interaktion / der Mausklick nicht das ganze Element "auswählt" im Sinne von einen Rahmen ersichtlich wird (bzw. die Elementgrösse ersichtlich wird).

Das sollte man nicht tun. Bei der Navigation per Tastatur ist es notwendig, dass der Nutzer erkennt, welches Element gerade den Fokus hat.

Wenn einem der Rahmen nicht gefällt, kann man dies auch andereitig kenntlich machen. Wenn man dies bspw. per Textfarbe oder Hintergrundfarbe tut, muss man aber auf ausreichenden Kontrast achten – sowohl zwischen Text und Hintergrund als auch zwischen hervorgehoben und nicht hervorgehoben. Und auch bedenken, dass nicht alle Nutzer Farben unterscheiden können.

Wenn man eine andere Art der Hervorhebung gefunden hat, dann kann man den Rahmen entfernen, nicht vorher.

Die Pseudoklasse dafür ist :focus (ggfs. auch :hover), die betreffende Eigenschaft ist outline.

Qapla'

[css-newbie,]

Hi Gunnar

Genial :-) Genau das habe ich gesucht!

p.s. die Links werden via Hover gekennzeichnet (Andere Farbe). Ebenso wenn sie ausgewählt wurden (sind dann keine Links mehr).

Vielen Dank und Grüsse

[M.]

Mahlzeit,

p.s. die Links werden via Hover gekennzeichnet (Andere Farbe). Ebenso wenn sie ausgewählt wurden (sind dann keine Links mehr).

Hover greift aber nicht bei einer Navigation per Tastatur. Das sin völlig verschiedene Dinge.
Und ja, es gibt reichlich Endgeräte ohne Maus aber mit Tastatur.

[Gunnar Bittersmann]

@@M.:

nuqneH

Und ja, es gibt reichlich Endgeräte ohne Maus aber mit Tastatur.

Und es gibt Nutzer, die aufgrund ihrer eingeschränkten Feinmotorik nicht in der Lage sind, eine Maus zu bedienen, wohl aber eine Tastatur.

Qapla'

[Gunnar Bittersmann]

@@css-newbie, :

nuqneH

Genial :-) Genau das habe ich gesucht!

Was genau meinst du mit „genau das“?

p.s. die Links werden via Hover gekennzeichnet (Andere Farbe).

:hover wirkt bei Mausbedienung (und ist meist nette, aber nicht notwendige Spielerei). Für Tastaturbedienung ist :focus zuständig.

Wenn man :hover verwendet, aber nicht :focus, macht man mit an Sicheheit grenzender Wahrscheinlichkeit etwas falsch. Ein Delphinbaby stirbt.

Qapla'