:focus | mit ohne Anker

ulle · #1 (**permalink**) 17.11.2005, 18:16

Habe da etwas gefunden und möchte es Euch nicht vorenthalten

Dynamische Pseudoklassen und benannte Anker (Ein lob auf den Autor: Klaus Langenberg)

Was man mit :focus und Ankern doch so alles anstellen kann, aber schaut selbst indem Ihr das TEST-Case kopiert und auf die Links klickt.

Natürlich möchte ich eine Cross-Browser Test

IE => geht es nicht (logisch)
FF 1.07 => perfekt

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/


*			{
			margin:  0;
			padding: 0;
			
			border-collapse:collapse;
			border-spacing: 0;
			}

html[xmlns]	{ 
			height : 100%; 
			padding-bottom : .005em; 
			} 

			
html,
body		{
			color:		#000000;
			background:	#EEEEEE;
			
			/* line-height ohne Einheit - sonst Vererbung
			 */
			line-height: 1.45;
			}

body		{
			/* Nur hier, sonst gibt es
			 * eventuell Vererbungsprobleme.
			 */
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}

div			{
			margin: 1em;
			border: 1px solid #000000;
			padding: 1em;
			
			background:	#FFFFFF;
			
			font-size: .8em;
			}		

p			{
			margin: .6em 0;
			}
			
a
			{
			background:	#FFF6F6;
			}
a:focus
			{
			background:	#00CCCC;
			}

			

/* :focus muss zuerst, 
 * weil im IE nicht bekannt 
 * => wuerde wie :visited im IE interpretiert 
 */
:link:focus, 
:visited:focus		
			{
			background:	#FFFF00;
			}
	
:link,
:visited	{
			background:	#66CCFF;
			}

:link:hover, 
:visited:hover,
:link:active,
:visited:active
			{
			background:	#FFFF00;
			}



/*]]>*/
</style>

</head><body>

<div>
Quelle: http://www.thestyleworks.de



<a id="css1">
Bereits in CSS 1 gab es die Gruppe der Link-Pseudoklassen, der damals :link, :visited und :active angehörten.
Diese Pseudoklassen schließen sich in ihrer Verwendung gegenseitig aus und können nur auf Quellenanker, d. h. Elemente A mit dem Attribut href, angewandt werden.
</a>
</p>



<a id="css2">
Mit dem Erscheinen von CSS 2 wurden die dynamischen Pseudoklassen als neue Gruppe eingeführt.
:active gehört seitdem in diese Gruppe, dazu kamen noch :hover und :focus. 
Im Gegensatz zu den Link-Pseudoklassen schließen dynamische Pseudoklassen
sich nicht gegenseitig aus und lassen sich (in standardskonformen Browsern) auf alle Elemente anwenden.
</a>
</p>



Korrekt interpretiert, gilt diese Notierung nicht nur für Quellenanker, sondern bezüglich der dynamischen
Pseudoklassen auch für Zielanker. Das führt zu :hover-Effekten an diesen Ankern, die dem Besucher die 
Anwesenheit eines Quellenankers oder Verweises suggerieren. 
</p>



Wer mehr wissen möchte sollte obigen LINK (Quelle) besuchen und den gesamten Artikel lesen.
</p>




CSS1 | Link-Pseudoklassen


CSS2 | Dynamische Pseudoklassen
</p>
</div>

</body></html>

The Doc · #2 (**permalink**) 17.11.2005, 18:33

Was genau meinst du denn jetzt?
In dem CSS Definierst du ja hauptsächlich Hintergrundfarben, aber ich merke bei einem hover nur den Farbenwechsel (von blau nach gelb), bei einem :focus, sprich klick drauf ändert sich die Schriftfarbe nach rot (ist afaik ein Firefox-Standard)

Auch wenn ich alle Links auf "unbesucht" stelle (Webdeveloper-Bar) sehe ich die Türkise Hintergrundfarbe nie (a:focus{background:#00CCCC;}).

Benutze Firefox 1.5

Bitte stell nochmal dar, was du jetzt so tolles gefunden hast

ulle · #3 (**permalink**) 17.11.2005, 18:38

Zitat:

Zitat von The Doc

Benutze Firefox 1.5

Einmal geht es darum dass der Anker (also das Ziel) von den Formatierungen ausgeschlossen werden, das wird im verlinkten Artikel genau erläutert.

Worum es mir geht ist dass beim aktivieren der Links der Inhalt der Ziel-Anker per Event(:focus) aufbereitet werden kann, in meinem Beispiel mit einer Hintergrundfarbe über den gesamten Absatz.

Falls Du keine Hintergrundfarbe (Änderung) beim FF 1.5 erhälst ist der Browser nicht Standardgerecht

fricca · #4 (**permalink**) 17.11.2005, 18:39

Zitat:

Zitat von The Doc

Bitte stell nochmal dar, was du jetzt so tolles gefunden hast

Was siehst du, wenn du die beiden unteren Links anklickst (und wieder loslässt)? Welche Hintergrundfarbe haben dann die Sprungziele?

Zitat:

Benutze Firefox 1.5

Ich benutze noch 1.0.7 - sollte mich aber wundern, wenn der 1.5 das nicht mehr kann.

edit: @ulle: schöner Effekt. Ich mach jetzt mal einen Mac-Test...

ulle · #5 (**permalink**) 17.11.2005, 18:43

Mac-Test...

(laß das lieber)

Du nimmst den Safari 2.02

fricca · #6 (**permalink**) 17.11.2005, 18:56

Zitat:

Zitat von ulle

Du nimmst den Safari 2.02

Ja, ich hab's getan

- Safari 2.02 kann's nicht.

Aber was schlimmer ist: FF 1.5RC2 kann's auch nicht!

[@theDoc: ich wundere mich also

]
Der 1.0.7 tut's noch - alles Mac OSX.

The Doc · #7 (**permalink**) 17.11.2005, 20:53

Deshalb hatte ich auch nochmal nachgefragt, ich hatte mir ja extra den CSS-Code angeguckt und bin alle Farben durchgegangen...

Sehr merkwürdig, dass RC2 das nicht mehr kann, meldet das jemand mal @ bugzilla?

ulle · #8 (**permalink**) 17.11.2005, 21:05

Zitat:

Zitat von ulle

.........
Falls Du keine Hintergrundfarbe (Änderung) beim FF 1.5 erhälst ist der Browser nicht Standardgerecht

Nach längerem Überlegen glaube ich dass der FF 1.5 wohl eher standardgerechtes Verhalten an den Tag legt als die jetzige Version 1.07.

Wenn man zu Grunde legt dass nur Elemente fokusierbar, also somit auch für den Event-Handle (onfocus) nutzbar, sind die auch eine Aktion ausführen konnen, so zum Beispiel Verweise, Textfelder oder Druckknöpfe (Button), dann ist das Verhalten wohl richtig. Im FF 1.07 läßt sich der Anker (Ziel) ja auch nicht mit TABs fokusieren.

Leider schade, und ich dachte es wäre eine schöne Möglichkeit andere ("unabhängige") Elemente innerhalb der WEBpage Ereignis bezogen zu Steuern.

Was bleibt:

Eine schöner Ansatz/Lösungsweg zum Eingangs erwähnten Thema,
die Trennung von Anker und Verweis per selector ohne class oder #id.
Und das Verständnis zur Link-Pseudoklassen und Dynamische Pseudoklassen

ulle · #9 (**permalink**) 19.11.2005, 20:01

Da ja meine 'schlauer' :focus Trick nur eine Halbwertszeit bis zum FF 1.5 besitzt muß eine andere Lösung her, natütlich ohne JavaScript.
Da ich ja oben das Ankerziel mit einem Event beeindrucken wollte, und dieses Verlangen wohl auch schon andere umtrieb, hat das W3C schon vorgedacht - siehe CSS 3 :P

Ziel => target (engl.)

The target pseudo-class :target

Zitat:

Zitat von w3c CSS3

Some URIs refer to a location within a resource. This kind of URI ends with a "number sign" (#) followed by an anchor identifier (called the fragment identifier).

URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section_2 in a HTML document:

http://example.com/html/top.html#section_2A target element can be represented by the :target pseudo-class:

p.note:targetrepresents a p of class note that is the target element of the referring URI.

CSS example of use of the :target pseudo-class:
*:target { color : red }

*:target::before { content : url(target.png) }

Weiß jemand was diese doppelten Doppelpunkte zu bedeuten haben?

Übrigens funktioniert :target nicht nur mit Ankern, es lassen sich auch andere Elemente mit ID verändern. So zumindest meine ersten Tests.

_____________

FF 1.07 kann die Pseudo-Class deklarieren/umsetzen. Ich hoffe der FF 1.5 auch.

Code:

/* change */

a
			{
			background:	#FFF6F6;
			}
a:target
			{
			background:	#00CCCC;
			}

The Doc · #10 (**permalink**) 19.11.2005, 20:22

Funktioniert auch in der letzten RC (#3, die wird wahrscheinlich auch die final sein).

Danke Ulle, werd ich sicher mal verwenden, weiß jemand ob Opera das unterstützt? Oder Safari 2 ?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Anker Textfarbe "permanent" ändern.	kifkef	CSS	17	21.03.2012 18:42
Mit welchen Elementen ist :focus nutzbar?	Gottkaiser	CSS	3	23.04.2009 20:53
Fixer Header (CSS Frame) und Sprung zu Anker auf dieser Seite	Chico_wau	CSS	2	14.05.2007 19:08
Seitenübergreifender Anker funzt net unter IE	dablake	CSS	6	06.03.2006 22:44
IE6, CSS, Anker und XHTML	Smirftsch	CSS	7	14.02.2006 19:50