XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   :focus | mit ohne Anker (http://xhtmlforum.de/showthread.php?t=37602)

ulle 17.11.2005 18:16

: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>


The Doc 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 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 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 17.11.2005 18:43

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


Du nimmst den Safari 2.02 ;)

fricca 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! :shock: [@theDoc: ich wundere mich also ;)]
Der 1.0.7 tut's noch - alles Mac OSX.

The Doc 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 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 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 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 ?


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:26 Uhr.

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

© Dirk H. 2003 - 2023