zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden :focus | mit ohne Anker

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.11.2005, 18:16
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard :focus | mit ohne Anker

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>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.11.2005, 18:33
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.114
The Doc befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.11.2005, 18:38
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
</ulle>
Mit Zitat antworten
  #4 (permalink)  
Alt 17.11.2005, 18:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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...
Mit Zitat antworten
  #5 (permalink)  
Alt 17.11.2005, 18:43
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Mac-Test... (laß das lieber)


Du nimmst den Safari 2.02
__________________
</ulle>
Mit Zitat antworten
  #6 (permalink)  
Alt 17.11.2005, 18:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.786
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.11.2005, 20:53
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.114
The Doc befindet sich auf einem aufstrebenden Ast
Standard

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?
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder
Mit Zitat antworten
  #8 (permalink)  
Alt 17.11.2005, 21:05
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #9 (permalink)  
Alt 19.11.2005, 20:01
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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;
			}
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 19.11.2005, 20:22
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.114
The Doc befindet sich auf einem aufstrebenden Ast
Standard

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 ?
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:00 Uhr.