• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

hover im style-Attribut des Ankers?

NetAktiv

NetAktiv

Senior HTML'ler
Hallo,

meine Seite ist so aufgebaut, dass ich eine einzige Vorlage habe, die ich mit index.php?page=xxx aufrufe. xxx bestimmt dann die Datei, die ich im data-div include. Nun will ich in einem einzigen Include-File dynamisch bei a:hover ein <span> einblenden, was auch funktioniert, wenn ich im div etwas definiere wie
HTML: 
<style type="text/css">
    #a1       span {display: none;  }
    #a1:hover span {display: block; }
</style>
Das Problem ist, dass XHTML nicht zulässt, dass ein STYLE-Block im Body ist. Ich will den nur 1x genutzten Code aber auch nicht in der Vorlage haben.

Frage: Gibt es eine Syntax, so dass ich obige Style-Definition direkt als Attribut des Ankers #a1 definieren kann?
 
Hallo.

Ein Style Block gehört nicht in den Body sondern in den Head Bereich.
Das ist nicht nur bei XHTML so.

Gruss
Elroy
 
Elroy schrieb:
Ein Style Block gehört nicht in den Body sondern in den Head Bereich.
Zum Vergrößern anklicken....
Das ist eine Regel, mehr nicht. Früher hat man auch gemeint, bei den Programmiersprachen müssen Variable am Kopf der Funktion definiert werden, und nun hat man Variable, die nur innerhalb eines Blocks (if, while for, ...) gültig sind. Wenn STYLE-Anweisungen nur in den HEAD gehören würde, dann wäre auch die Nutzung der Attribute zu unterbinden. Die Frage hier ist doch nur, wie mächtig die Attribute sind. Umgehen kann man es davon abgesehen immer, weil ich mit einen <SCRIPT> im Body dynamisch alles mit den Styles machen kann, nur ist das vergleichsweise umständlich.

Davon abgesehen wird der folgende Code vom HTML5 Validator klaglos geschluckt.
HTML: 
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Hallo das ist p1</title>
</head><body><div>
<style type="text/css">
#p1 { font-size:24pt; }
</style>
<p id="p1">Hallo das ist p1 im div mit spätem Style formatiert</p>
</div></body></html>
 
Zuletzt bearbeitet:
NetAktiv schrieb:
Frage: Gibt es eine Syntax, so dass ich obige Style-Definition direkt als Attribut des Ankers #a1 definieren kann?
Zum Vergrößern anklicken....

Mir ist kein Weg bekannt, Pseudoklassen (:hover) inline zu definieren.

Wenn STYLE-Anweisungen nur in den HEAD gehören würde, dann wäre auch die Nutzung der Attribute zu unterbinden.
Zum Vergrößern anklicken....

Die Rede war schon von style-Elementen (wie gesagt, :hover lässt sich vermutlich nicht ohne festlegen). Die können in HTML5 – wie ich die Spezifikation deute – außerhalb des head-Elements definiert werden, wenn das scoped-Attribut gesetzt wird, ansonsten zumindest offiziell nicht.

- 4 The elements of HTML — HTML5

Davon abgesehen wird der folgende Code vom HTML5 Validator klaglos geschluckt.
Zum Vergrößern anklicken....

Aber nicht von diesen beiden:

- The W3C Markup Validation Service
- Validator.nu (X)HTML5 Validator
 
Da habe ich gestern in der späten Nacht meinen HTML Code dem falschen (CSS) Validator in den Rachen geworfen, also HTML5 will das STYLE in der obigen Form auch nicht. Ändere ich es aber auf
HTML: 
<style type="text/css" scoped="scoped">

dann ist es erlaubt. Das ist ja genau, was ich will, eine nur lokal gültige Definition des Styles. Allerdings kommt eine Warnung, dass die Browser das wohl noch nicht verstehen. Dann bleibt mir wohl im Moment doch nur, wenn ich einen einfachen Weg gehen will, die Definition in die Vorlage aufzunehmen. Da in meiner Vorlage auf eine CSS-Datei verwiesen wird und diese ja nur 1x vom Browser angefordert wird (dann im Cache), ist das auch kein so großer Beinbruch.
 
Zuletzt bearbeitet:
NetAktiv schrieb:
Das ist ja genau, was ich will, eine nur lokal gültige Definition des Styles.
Zum Vergrößern anklicken....

Stimmt auch wieder. War mir gar nicht so aufgefallen. Volle Zustimmung zum Rest des Posts, vor allem zu dem Einwand hinsichtlich der Browserunterstützung von scoped.

Wenn wirklich viel CSS-Code nur auf wenigen Seiten eingebunden werden muss, bietet es sich natürlich an, eine weitere Stylesheet-Datei zu erstellen und dynamisch einzubinden. Erfordert etwas mehr Logikprogrammierung im Backend, ist aber so kompliziert auch nicht.
 
Derzeit erzeuge ich beim Load eine Collection eines Arrays mit 2 Elementen (Title, PathToIncludeFile) und blende diese Daten dann über den Parameter ?page=xxx in der Vorlage ein. Sicher könnte ich das Array um ein drittes Element PathToStyleFile ergänzen und diese so dynamisch einbinden. Lösungen für mein Problem gibt es einige, aber die eleganteste wäre halt gewesen, in meine XHTML 1.0 konformen Seiten diese Daten in der aktuellen include-Datei zu haben. Scheinbar ist das ein nicht so unübliches Anliegen, sonst wäre es nicht in den Standard gekommen.
 
Wie wär's, wenn du dem id="a1" einfach noch eine (zusätzliche) Klasse geben würdest, die nur dann erscheint, wenn es nötig ist. Somit könntest du in der CSS-Datei das hover statisch setzen.
 
Ob class oder Id, das :hover muss irgendwie in den <head> es sei denn, man ignoriert die HTML5-Warnungen. Genaue das mit dem Head wollte ich aber vermeiden. Ich denke, wenn man die Definition so wählt, dass sie global eindeutig bleibt und nichts global definiertes überschreibt, dann kann man die Warnung auch ignorieren. Praktische versuche haben nämlich gezeigt, dass die Browser den Style-Block im Body lesen und interpretieren, aber global gültig machen. Ignoriert wird also nur das scope-Attribut.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben