:focus in Webkit
0 0 
Der-Dennis
0 
Gunnar Bittersmann
0 Der-Dennis
0 0 0 0 0 0 Gunnar Bittersmann
0
:focus in Webkit
MudGuardHi,
folgender Code:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
a:focus{background:black;}
</style>
</head>
<body>
<a href="#">Foo</a>
</body>
</html>
Im FF, IE und Opera bekommt der Link nachdem man auf ihn geklickt hat einen schwarzen Hintergrund.
In Chrome und Safari bekommt er die Hintergrundfarbe nur wenn man mit der Tastatur hin navigiert.
Ist das ein Bug in Webkit?
Wisst ihr einen Workaround oder bis wann der Bug behoben werden soll (falls es einer ist)?
~dave
-
Hi,
a:focus{background:black;}
Im FF, IE und Opera bekommt der Link nachdem man auf ihn geklickt hat einen schwarzen Hintergrund.
In Chrome und Safari bekommt er die Hintergrundfarbe nur wenn man mit der Tastatur hin navigiert.
Ist das ein Bug in Webkit?
Eher eine andere Auslegung, bis wann ein Link den Fokus hat.
Nachdem er angeklickt wurde, ist er nämlich :active.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi,
Nachdem er angeklickt wurde, ist er nämlich :active.
Nein, :active ist er WÄHREND des Anklickens.
siehe http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes:
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
---------------------------------^^^^^"while" = "während", "Nachdem" wäre "after" (und dann hieße es auch nicht "is being", sondern "has been" ...)
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
@@MudGuard:
nuqneH
Nachdem er angeklickt wurde, ist er nämlich :active.
Nein, :active ist er WÄHREND des Anklickens.
War mir doch so, dass jemand hier im Forum noch einen alten IE benutzt. ;-)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Hey dave,
In Chrome und Safari bekommt er die Hintergrundfarbe nur wenn man mit der Tastatur hin navigiert.
ist das nicht eigentlich das gewünschte Verhalten bei :focus? Aus http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=SelfHTML: ":focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)"
Gruß, Dennis
-
@@Der-Dennis:
nuqneH
In Chrome und Safari bekommt er die Hintergrundfarbe nur wenn man mit der Tastatur hin navigiert.
ist das nicht eigentlich das gewünschte Verhalten bei :focus? Aus http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=SelfHTML: ":focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)"
Der Unterschied liegt wohl in CSS 2.1 vs. CSS 3 begründet:
“The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).” [CSS21 §5.11.3]
“The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).” [CSS3-SELECTORS §6.6.1.2]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hey Gunnar,
Der Unterschied liegt wohl in CSS 2.1 vs. CSS 3 begründet:
“The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).” [CSS21 §5.11.3]
“The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).” [CSS3-SELECTORS §6.6.1.2]
danke für den Hinweis. War mir so gar nicht bewusst.
Gruß, Dennis
-
Hi,
d.h. es ist ein Bug, richtig?
Weis jemand ob geplant ist den zu beheben?
~dave
-
Hi,
hab selbst was dazu gefunden:
Mein Problem: https://bugs.webkit.org/show_bug.cgi?id=18425
Das gleiche Problem nur bei <button>s: https://bugs.webkit.org/show_bug.cgi?id=22261~dave
-
d.h. es ist ein Bug, richtig?
Nein. Es gibt keine Vorschrift, dass eine Link den Fokus behalten muss, nachdem das Linkziel navigiert wurde.
Vielleicht solltest du als Designer deinen Usern folgen, die auch eher zielorientiert fokusieren.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hi,
Vielleicht solltest du als Designer deinen Usern folgen, die auch eher zielorientiert fokusieren.
Verstehe ich nicht.
~dave
-
Vielleicht solltest du als Designer deinen Usern folgen, die auch eher zielorientiert fokusieren.
Verstehe ich nicht.
<a href="#go">Go</a>
<h1 id="go">Sektion</h1>
Was sollte im Fokus der Aufmerksamkeit liegen, nachdem der Link aktiviert wurde?
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
@@Beat:
nuqneH
<a href="#go">Go</a>
<h1 id="go">Sektion</h1>
Was sollte im Fokus der Aufmerksamkeit liegen, nachdem der Link aktviert wurde?
Kurze Antwort: nichts.
Lange Antwort: h1 kann nicht :focus sein, wohl aber :target.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
<a href="#go">Go</a>
<h1 id="go">Sektion</h1>
Was sollte im Fokus der Aufmerksamkeit liegen, nachdem der Link aktviert wurde?Kurze Antwort: nichts.
Lange Antwort: h1 kann nicht :focus sein, wohl aber :target.Richtig, darum sprach ich von "Fokus der Aufmerksamkeit"
Vergleiche dies zum Original Test-Case
<a href="#"></a>
Diese Link rückt nur deshalb nicht aus dem momentanen Viewport, weil er aktuell nichts navigiert. Sollte er etwas tun, so rückt er mit Garantie ausserhalb des Fokus des Betrachters (sofern man weiter als nur media screen denkt)mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hi,
Danke, :target eignet sich viel besser für mein vorhaben.
Auch wenn ich noch immer nicht so ganz verstehe wie man von deinem Text auf :target kommen soll und auch nicht verstehe warum du nicht einfach :target geschrieben hast :P
~dave
-
Musste leider gerade feststellen das die IE :target nicht unterstützt, wodurch das ganze wieder hinfällig wird...
~dave
-
@@dave:
nuqneH
Musste leider gerade feststellen das die IE :target nicht unterstützt, wodurch das ganze wieder hinfällig wird...
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
Musste leider gerade feststellen das die IE :target nicht unterstützt, wodurch das ganze wieder hinfällig wird...
Mein Ziel war es in allen aktuellen Browsern eine Lightbox ohne JS darstellen zu können.
Mein erster Ansatz war eben :focus + .lightbox, durch den Hinweis von Beat habe ich mich dann an :target versucht.Leider funktioniert :focus in Webkit eben anders und :target im IE gar nicht, daher wird meine Lightbox ohne JS wohl nicht umsetzbar sein (außer mit input[type=text] und :focus was ich aber hässlich finde).
Außerdem sind von IE7 auf IE8 doch einige Features korrigiert/hinzugefügt worden auf die ich eigentlich ungern verzichte nur damit ich CSS-Expressions verwenden kann.
Falls jemand eine Idee hat wie man das umsetzen könnte immer her damit :-)
~dave
-
-
-
-
-
-
-
-
-
-
-
Hi,
In Chrome und Safari bekommt er die Hintergrundfarbe nur wenn man mit der Tastatur hin navigiert.
ist das nicht eigentlich das gewünschte Verhalten bei :focus? Aus http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=SelfHTML: ":focus = für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)"
Natürlich sollte das beim navigieren mit der Tastatur sein, aber eigentlich doch _auch_ beim draufklicken?
Wenn ich auf ein <input> Klicke hat das auf jeden Fall :focus.
Ich nehme jetzt anstelle der Links einfach <input>s :D
~dave
-
Hey dave,
Natürlich sollte das beim navigieren mit der Tastatur sein, aber eigentlich doch _auch_ beim draufklicken?
ist richtig, Gunnar hat hier die entsprechende Erklärung gegeben.
Gruß, Dennis
-
-