|
|||
![]()
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> |
Sponsored Links |
|
||||
![]()
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 |
Sponsored Links |
|
|||
![]() Zitat:
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> |
|
|||
![]() Zitat:
Zitat:
edit: @ulle: schöner Effekt. Ich mach jetzt mal einen Mac-Test... |
|
|||
![]() Zitat:
![]() Aber was schlimmer ist: FF 1.5RC2 kann's auch nicht! ![]() ![]() Der 1.0.7 tut's noch - alles Mac OSX. |
|
||||
![]()
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 |
|
|||
![]() Zitat:
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> |
|
|||
![]()
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:
Ü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> |
Sponsored Links |
|
||||
![]()
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 |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
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 |