Selektor für kleinen Pfeil in CSS-Code zum extra-config-menü.uc.js ab v139

Zitat von Mira_Belle

Und [id^="submenu-"] fasst doch nur (#submenu-ucjs,#submenu-css,#submenu-CSSShadow,#submenu-cssweb) zusammen.

Und das ziemlich elegant sogar. Man könnte auch noch kaskadiertes CSS nutzen.

Einführung in den CSS-Cascade - CSS: Cascading Style Sheets | MDN

Der Cascade ist ein Algorithmus, der definiert, wie Benutzeragenten Eigenschaftswerte aus verschiedenen Quellen kombinieren. Die Cascade legt fest, welche…

developer.mozilla.org

#ExtraConfigMenu-popup {
  #submenu-ucjs,
  #submenu-css,
  #submenu-CSSShadow,
  #submenu-cssweb
  {}
}

Da ist jetzt noch nix mit hofer und after drin.

Aber ich selbst würde :hover und ::after nicht zusammelegen wollen, weil mWn ::after nur für das :hover gilt, aber nicht ohne :hover. Also braucht es schon wieder zwei Definition.

::after
:hover::after

oder

:hover {...::after} (kaskadiertes CSS)

Andersrum dürfte nicht funktionieren, weil after den Content nach einem Element stellt, wobei das Element ge:hover:t wird und ::after zum Element gehört.

Zitat von .DeJaVu

Da ist jetzt noch nix mit hofer und after drin.

Aber ich selbst würde :hover und ::after nicht zusammelegen wollen, weil mWn ::after nur für das :hover gilt, aber nicht ohne :hover. Also braucht es schon wieder zwei Definition.

::after
:hover::after

Man braucht aber eh eine Definition für sowohl mit als auch ohne :hover, da sparst du nix.
Den Code zu straffen, nesten und zu minimieren ist was anderes, aber die beiden Zustände musst du so oder so getrennt angeben.

In diesem Fall macht mE der Attribut Selektor von Sören eine Menge Sinn, schlank und einfach.

Zitat von .DeJaVu

Man könnte auch noch kaskadiertes CSS nutzen.

CSS ist immer „kaskadierend“. Dafür steht das „C“ in „CSS“ (in englischer Schreibweise). Was du ausgehend von deinem Beispiel offensichtlich meinst, ist „verschachteltes“ CSS.

Das hat immer noch das überflüssige :is() mit drin. Kürzer:

#ExtraConfigMenu-popup [id^="submenu-"][open]::after { }

Zitat von Sören Hentzschel

Das hat immer noch das überflüssige :is() mit drin. Kürzer:

CSS

#ExtraConfigMenu-popup [id^="submenu-"][open]::after { }

Ich glaube der Code ist so oder so etwas Murks, auch wenn er oberflächlich funktioniert.
Wird [id^="submenu-"] überhaupt wahrgenommen in dem Zusammenhang, oder nur [open] (= Verkettung von Attributen, geht das überhaupt)?

Ersteres ist ein Selektor, dann folgt noch ein (Unter-)Selektor., usw. Das Element, was genau alle Selektoren erfüllt, wird angesprochen.

Zitat von .DeJaVu

Ersteres ist ein Selektor, dann folgt noch ein (Unter-)Selektor., usw. Das Element, was genau alle Selektoren erfüllt, wird angesprochen.

Denke du hast recht damit, mit den Attribut Selektoren tue ich ich mich manchmal schwer.
Leider frisst Firefox :open anscheinend nicht als Pseudoklasse, dann wär's etwas einfacher.

IMO war das mal so. Aber seit einigen Versionen nicht mehr.
[open="true"] ist nur noch [open]. Falls du das meintest.

Die 115 ESR ist eh dabei aussen vor, weil schlichtweg zu alt - falls noch genutzt.

Zitat von FuchsFan

jetzt funktioniert es wie gewünscht, und zwar mit diesem String.

#ExtraConfigMenu-popup :is([id^="submenu-"][open])::after {    

Prima!

Die hover Funktion hast du nur damit (und der Version von Sören) nicht mehr, aber das zeigt sich in diesem Fall/Script wohl nur durch eine kurze Verzögerung zwischen hover Status (keine Funktion) und dem Moment in dem ein Popup dann aufgeht (open Funktion).

Zitat von Horstmann

Leider frisst Firefox :open anscheinend nicht als Pseudoklasse, dann wär's etwas einfacher.

Weil es open als Pseudoklasse nun mal in CSS nicht gibt. Und wenn Mozilla sie erfände, müsste sie dann :-moz-open heißen, da sie dann proprietär wäre.

Zitat von .DeJaVu

Die 115 ESR ist eh dabei aussen vor, weil schlichtweg zu alt - falls noch genutzt.

Ist noch genutzt, zwangsweise, hab aber eine Testmaschine mit aktuellem Fx für komplexe Fälle.
Mit der Code Lingo halte ich mich aber auf dem Laufenden, keine Sorge.

Was ich meinte war :open als Pseudoklasse wie :hover und :active, meiner Erinnerung nach hat das noch nie gegriffen, kann mich aber täuschen.

Zitat von milupo

Weil es open als Pseudoklasse nun mal in CSS nicht gibt. Und wenn Mozilla sie erfände, müsste sie dann :-moz-open heißen, da sie dann proprietär wäre.

Hmm...
Ok, erst seit 136 in FX, also - jetzt!

Zitat von Horstmann

meiner Erinnerung nach hat das noch nie gegriffen, kann mich aber täuschen.

Weil es :open noch nie gegeben hat und auch jetzt noch nicht gibt.

Und [open] ist ein Status, ein CSS-Selektor, den es nur bei Firefox gibt. Anderes Beispiel:
#urlbar[breakout][breakout-extend][breakout-extend-animate]

Das sind alles ="true" Eigenschaften, die Firefox-proprietär sind und mit CSS nicht viel zu tun haben, sondern so nutzbar sind.

Zitat von FuchsFan

Zitat von Horstmann

eine kurze Verzögerung zwischen hover Status (keine Funktion) und dem Moment in dem ein Popup dann aufgeht

Ja, ist mir sofort aufgefallen, aber ist ja nur ein Päuschen.

Wenn du Laune hast, probier mal das hier, würd mich interessieren ob's a) geht und b) die Pause entfernt:

#ExtraConfigMenu-popup [id^="submenu-"]:is(:hover,[open])::after { Code hier }

Ansonsten sollten auch beide Funktionen klappen (keine Verzögerung) mit dem hier:

#ExtraConfigMenu-popup [id^="submenu-"]:hover::after,
#ExtraConfigMenu-popup [id^="submenu-"][open]::after { Code hier }

Bei dem Script ist es scheint's nicht nötig, aber vermutlich nur weil hier jedes [id^="submenu-"] Element versucht ein Submenu/Popup zu öffnen, auch wenn keines da ist.

Zitat von FuchsFan

Zitat von Horstmann

Wenn du Laune hast, probier mal das hier, würd mich interessieren ob's a) geht und b) die Pause entfernt:

Beide Codes funktionieren, Verzögerung ganz gering noch, ich sage dazu normal.

Edit:

Aber die Popups schließen sofort bei Berührung.

Das kann aber eigentlich nichts mit diesem CSS zu tun haben, ist ja nur zum stylen der Pfeile.

Falls sich das trotzdem dadurch geändert hat, müsste man mal deinen kompletten CSS Code sehen; falls es generell vorher schon ein Problem war, wirds schwieriger.

An welchem Punkt, bzw. mit welchem CSS Code, hat sich das Problem (schliesst bei hover? eingestellt, falls es ein CSS Code war?