nicht angemeldet michaah
MudGuard
michaah
Der Martin
Matthias Apsel
Der Martin
michaah
Gunnar Bittersmann
michaah
Matthias Apsel
Bei der (dann natürlich vergeblichen) Suche für unmittiges Rendering eines details/summary Elements habe ich nun festgestellt, dass FF und Chromium dies Element (zumindest mit meinen Vorgaben) unterschiedlich rendern:
FF richtet den Text (unerwünschterweise) nach oben hin aus, Chromium wie gewünscht mittig.
Ist das ein Bug?
Ist das für den FF behebbar?
Hi,
Bei der (dann natürlich vergeblichen) Suche für unmittiges Rendering eines details/summary Elements habe ich nun festgestellt, dass FF und Chromium dies Element (zumindest mit meinen Vorgaben) unterschiedlich rendern:
FF richtet den Text
Welchen? Den im Summary oder den in den Details?
(unerwünschterweise) nach oben hin aus, Chromium wie gewünscht mittig.
Ich seh in Deinem CSS nix, was für eine Ausrichtung nach oben zuständig sein könnte.
cu,
Andreas a/k/a MudGuard
FF richtet den Text
Welchen? Den im Summary oder den in den Details?
Im Summary
(unerwünschterweise) nach oben hin aus, Chromium wie gewünscht mittig.
Ich seh in Deinem CSS nix, was für eine Ausrichtung nach oben zuständig sein könnte.
Aber du siehst die unmittige Ausrichtung im FF?
Im CSS sehe ich auch nichts, da steh ja auch nix diesbezüglich. Im FF sieht man es ( am bestem im Inspektor in Smartphone/Tablet viewports Größen.
Und versucht man irgendwas mit vertical-align, (Beispielseite erweitert) verwirft der FF den marker und kümmert sich sonst nicht weiter drum.
Ich kann in meinem FF-Inspector allerdings keine Kennzeichnung für U.A.- Angaben sehen wie das im Chromium-inspector der Fall ist.
cu,
Andreas a/k/a MudGuard
Hallo,
FF richtet den Text (unerwünschterweise) nach oben hin aus, Chromium wie gewünscht mittig.
also verwenden sie wohl unterschiedliche Vorgaben im Browser-CSS. Das ist nicht verboten.
Ist das ein Bug?
Ist das für den FF behebbar?
Nein und vermutlich ja. Es ist völlig normal, dass bestimmte Details in verschiedenen Browsern mit unterschiedlichem Default-CSS versorgt werden. Will man diese Varianz nicht haben, muss man die entsprechenden Eigenschaften (hier vermutlich vertical-align) explizit setzen.
Live long and pros healthy,
Martin
Hallo Der Martin,
Es ist völlig normal, dass bestimmte Details in verschiedenen Browsern mit unterschiedlichem Default-CSS versorgt werden.
Ergänzung: Damit ist jetzt nicht unbedingt und ausschließlich das details-Element gemeint, @michaah.
Bis demnächst
Matthias
n'Abend,
Es ist völlig normal, dass bestimmte Details in verschiedenen Browsern mit unterschiedlichem Default-CSS versorgt werden.
Ergänzung: Damit ist jetzt nicht unbedingt und ausschließlich das
details-Element gemeint, @michaah.
ja, richtig. Ich dachte dabei unter anderem an ol/ul und li: Bei manchen Browsern ist die Einrückung durch padding-left von ol/ul realisiert, bei anderen durch margin-left von li. Das Ergebnis ist in den meisten Fällen dasselbe - außer wenn man ganz konkret auf bestimmte Aspekte eingehen will.
Live long and pros healthy,
Martin
@@Der Martin
Ich dachte dabei unter anderem an ol/ul und li: Bei manchen Browsern ist die Einrückung durch padding-left von ol/ul realisiert, bei anderen durch margin-left von li.
?? Ist das noch so?
Ich hab in letzter Zeit nur noch ul, ol { padding-left: 0 } gesetzt und hab in keinem (aktuellen) Browser links noch Abstand.
😷 LLAP
Hallo Gunnar,
Ich dachte dabei unter anderem an ol/ul und li: Bei manchen Browsern ist die Einrückung durch padding-left von ol/ul realisiert, bei anderen durch margin-left von li.
?? Ist das noch so?
das weiß ich nicht; das fiel mir nur spontan als Beispiel ein. Denn genau diesen Fall habe ich vor etlichen Jahren[1] mal näher untersucht und festgestellt, dass der IE, Opera (Classic) und Firefox drei unterschiedliche Varianten verwendeten:
Die Zuordnung weiß ich allerdings nicht mehr.
Ich hab in letzter Zeit nur noch
ul, ol { padding-left: 0 }gesetzt und hab in keinem (aktuellen) Browser links noch Abstand.
Ja, kann gut sein, dass die mittlerweile eine gemeinsame Linie gefunden haben. Es gibt ja auch eigentlich nur noch zwei relevante Browser-Engines: Blink und Gecko.
Live long and pros healthy,
Martin
Da ich zu der Zeit noch primär auf Windows unterwegs war, muss das tatsächlich sehr lange her sein. ↩︎
Ergänzung: Damit ist jetzt nicht unbedingt und ausschließlich das
details-Element gemeint, @michaah.
Naja, darum geht es aber.
Dazu wäre es schön ich könnte die UA-settings im FF-inspector sehen (wie das im Chromium-inspector der Fall ist). Gibt es dafür im FF-inspector vielleicht einen extra Schalter?
Allerdings habe ich nun dieses Detail in meiner Prioritätenliste ein ganzes Stück nach hinten verschoben.
@@michaah
Dazu wäre es schön ich könnte die UA-settings im FF-inspector sehen (wie das im Chromium-inspector der Fall ist). Gibt es dafür im FF-inspector vielleicht einen extra Schalter?
😷 LLAP
Danke dafür. Das war mir bei meiner Durchsicht der Inspector Einstellungen nicht aufgefallen, da hat das aber auch noch keine Rolle gespielt.
Also rutscht die Untersuchung des Ausrichtungskrams wieder ein gutes Stück nach vorne ...
Hallo michaah,
mir scheint, du investierst viel Zeit in Dinge, die nicht sonderlich sinnvoll sind. Du musst damit leben, dass deine Seite in verschiedenen Browsern unterschiedlich aussehen kann. Wichtig ist, dass sie bedienbar ist. Die (vermeintliche) Ästhetik steht erst an k-ter (k > 2) Stelle. Vergiss nicht, dass Leute, die mit dem Browser Dingens surfen, das details-Element wahrscheinlich immer so sehen werden.
Bis demnächst
Matthias
Hallo michaah,
mir scheint, du investierst viel Zeit in Dinge, die nicht sonderlich sinnvoll sind.
Jain.
Es sieht einfach K**** aus, wenn im ein-Zeilen-hohen summary der Marker sichtbar unmittig sitzt. Zudem arbeite ich nun, statt mit dem Chromium-inspector, vorrangig mit dem FF-Inspector ... und dann habe ich das ständig vor Augen.
Hallo Micha,
mir scheint, du investierst viel Zeit in Dinge, die nicht sonderlich sinnvoll sind.
Jain.
gute Antwort. 😉
Es sieht einfach K**** aus, wenn im ein-Zeilen-hohen summary der Marker sichtbar unmittig sitzt.
Das ist Geschmackssache. Ich empfinde die Ausrichtung nach oben als normal. Die würde mir also in vielen Fällen nicht unangenehm auffallen.
Was mir oft unangenehm auffällt, ist allerdings die Voreinstellung in Excel, dass Zelleninhalte am unteren Rand ausgerichtet sind. Wer ist denn auf die komische Idee gekommen?
Zudem arbeite ich nun, statt mit dem Chromium-inspector, vorrangig mit dem FF-Inspector ... und dann habe ich das ständig vor Augen.
Naja, aber letztendlich sollte man sich immer fragen, ob das Überschreiben eines gegebenen Defaultwerts sinnvoll ist. Und damit stoße ich in dasselbe Horn wie Matthias: Wer einen bestimmten Browser nutzt, ist auch an dessen Eigenheiten gewöhnt. Wenn's nun auf einer Website anders aussieht, fällt das auf. Im Zweifelsfall negativ.
Live long and pros healthy,
Martin
Das ist Geschmackssache.
Eben.
Naja, aber letztendlich sollte man sich immer fragen, ob das Überschreiben eines gegebenen Defaultwerts sinnvoll ist.
Naja, diese Frage kann ich ganz einfach beantworten wie das jeder von euch, dann eben an anderer Stelle, auch tut. Der Punkt ist für mich ein anderer. Für euch ist das eine oder andere Problem in seiner grundsätzlichen Ursache relativ schnell klar, für mich nicht. Das ist ja der Grund warum ich euch frage und nicht umgekehrt 😉 . Und zunächst überwiegt eben die Frage "Was ist hier los?" Die Einsicht "... dann ist das eben so" folgt erst mit Abstand.
Und nun habe ich wenigstens den Schalter im FF-inspector gefunden, der mir die Browsersettings überhaupt erst sichtbar macht (was im Chromium-inspector standard ist). Und einmal details- und summary-settings durchgeschaut ist nicht soviel Arbeit.
Und da gibt es keinen vertical-align Standardwert, und auch sonst konnte ich nichts finden was die Zeilenausrichtung beeinflußt.
Und damit lasse ich es auf sich beruhen bis die Lösung vom Himmel fällt.
Hallo michaah,
das Problem ist: selbst wenn Du es schaffst, das list-Icon auf dem summary Element zu verschieben, dann wirkt die Verschiebung auch in Chrome und sieht dann dort K... aus.
Ich habe etwas mit summary::marker herumgespielt, Einstellungen wie vertical-align, padding oder margin haben keinen Einfluss. Die Spec will es so.
Ich habe aber auch den Eindruck, dass der Fuchs ein anderes Symbol als Chrome verwendet, das kleiner ist, deshalb seine Spitze höher hat und dass das die Problemursache ist. Es scheint auch (was man sieht, wenn man den Font von ::marker vergrößert), dass der vom Fuchs verwendete Glyph sehr hoch in der Textbox sitzt.
Ich würde Dir als Workaround vorschlagen, die Darstellung des Markers komplett durch eigenes Gewerk zu ersetzen. Chrome unterstützt das erst ab Version 86, d.h. Du musst das mit @supports (selector()) einrahmen. DAS unterstützt Chrome ab Version 83.
Rolf B
JürgenB@supports (selector(::marker)) {
summary { list-style: none; }
summary::before { content: "► "; }
details[open] summary::before { content: "▼ "; }
}
Ich verwende die Unicodezeichen 25BA ► (black right-pointing pointer) und 25BC ▼ (black down-pointing triangle). Die sehen bei mir im Firefox ganz gut aus. 25B6 ▶ (black right pointing triangle) ist zu wuchtig.
Rolf
Hallo Rolf,
@supports (selector(::marker)) { summary { list-style: none; } summary::before { content: "► "; } details[open] summary::before { content: "▼ "; } }
im Wiki mache ich es so:
/* Originalsymbole vor den Summary entfernen und eigene Symbole definieren */
#sitenav summary::-webkit-details-marker {
display: none;
}
#sitenav summary {
list-style-type: none;
}
#sitenav details summary::after {
font-family: arial_unicode_ms;
vertical-align: top;
}
#sitenav ul details:not([open]) > summary::after {
content: ' ►';
}
#sitenav ul details[open] > summary::after {
content: ' ◄';
}
Gruß
Jürgen
Danke auch für deine Lösung.
"▼ ";
' ►';
' ◄';
Eines haben wir sicher gemeinsam: die Frage wohin die Pfeile sinnfälligerweise zeigen sollten.
Ich liebäugle ja mit der Idee sie (not[open]) nach unten, und und [open] nach oben zeigen zu lassen (und eben sehe ich dass es im Wiki genau so ist).
Und es ::after anzuzeigen ist eine sehr gute Idee, das mildert sowohl das Problem der Unsymetrie und ist hier vielleicht auch ergonomisch die bessere Variante.
Und schon ist aus dem Kleinkram ein interessanter Gestaltungsfortschritt geworden ... wobei ich notgedrungen recht konservativ bin, Techniken zu nutzen die in Legacybrowsern nicht weit zurück reichen. Mal sehen ...
@@michaah
Eines haben wir sicher gemeinsam: die Frage wohin die Pfeile sinnfälligerweise zeigen sollten.
Ich liebäugle ja mit der Idee sie (not[open]) nach unten, und und [open] nach oben zeigen zu lassen
Rendern nicht alle Browser auf allen OS das so?
▶︎ nicht geöffnet
▼ geöffnet
Das ist auch der Standard für auf-/zuklappbare Dinge sowohl bei Windows als auch bei macOS/ipadOS/iOS.
Davon würde ich nicht abweichen.
(und eben sehe ich dass es im Wiki genau so ist).
Daran muss man sich kein schlechtes Beispiel nehmen.
😷 LLAP
@@Gunnar
Das ist auch der Standard für auf-/zuklappbare Dinge sowohl bei Windows als auch bei macOS/ipadOS/iOS.
Linux kommt bei dir nicht vor (nicht dass es da anders wäre ...)?
Davon würde ich nicht abweichen.
Ich finde Standards gut und beachtenswert. Aber die Ausrichtung dieser Pfeile hat mich von Anfang an irritiert. Nur bin ich noch nicht restlos davon überzeugt, dass meine Idee besser ist 😉, von dem Zusatzaufwand für alte Browser mal ganz abgesehen.
(und eben sehe ich dass es im Wiki genau so ist).
Daran muss man sich kein schlechtes Beispiel nehmen.
Nö, auf diese Lösung kann man auch ohne Wiki kommen, schlecht ist die sicher nicht.
Gruß
M
Hallo,
@@Gunnar
Das ist auch der Standard für auf-/zuklappbare Dinge sowohl bei Windows als auch bei macOS/ipadOS/iOS.
Linux kommt bei dir nicht vor (nicht dass es da anders wäre ...)?
das hat er wahrscheinlich gerade nicht zur Hand. 😉
Linux ist da aber schwieriger zu beurteilen, weil das je nach verwendetem Desktop völlig anders aussehen kann. Ich bin von meinem System aber auch die Version gewöhnt, die Gunnar skizziert hat (zugeklappt: Pfeil deutet nach rechts; aufgeklappt: Pfeil zeigt nach unten).
Aber bei sortierbaren Listen (z.B. Datei-Detailansicht im Windows-Explorer) irritieren mich die Pfeile oft, weil sie immer der Sortierrichtung entgegen gerichtet sind. Beispielsweise Sortierung nach Dateinamen von oben nach unten, der Pfeil zeigt aber von unten nach oben.
Live long and pros healthy,
Martin
@@Der Martin
Linux kommt bei dir nicht vor (nicht dass es da anders wäre ...)?
das hat er wahrscheinlich gerade nicht zur Hand. 😉
Stimmt. Mit Linux hatte ich noch nie was am Hut. Anfangs war das nur was für Freaks; Systemadministration gehört nicht zu meinen Hobbys. Als Linux dann massentauglich wurde, war ich längst auf Mac.
Aber bei sortierbaren Listen (z.B. Datei-Detailansicht im Windows-Explorer) irritieren mich die Pfeile oft, weil sie immer der Sortierrichtung entgegen gerichtet sind. Beispielsweise Sortierung nach Dateinamen von oben nach unten, der Pfeil zeigt aber von unten nach oben.
?? Sowohl Windows als auch macOS:
^ aufsteigende Sortierung A–Z
˅ absteigende Sortierung Z–A
Aber ja, die Crux bei diesen Icons: Zeigen sie nun den Zustand an oder die Aktion, wenn man draufdrückt? Steht ^ also nun für „aufwärts sortiert“ oder für „aufwärts sortieren“?
In dem Fall für ersteres – den Zustand. Da der Pfeil Teil der Spaltenüberschrift ist und kein einzelner Button, finde ich das auch richtig so.
😷 LLAP
Hallo,
Aber bei sortierbaren Listen (z.B. Datei-Detailansicht im Windows-Explorer) irritieren mich die Pfeile oft, weil sie immer der Sortierrichtung entgegen gerichtet sind. Beispielsweise Sortierung nach Dateinamen von oben nach unten, der Pfeil zeigt aber von unten nach oben.
?? Sowohl Windows als auch macOS:
^ aufsteigende Sortierung A–Z
˅ absteigende Sortierung Z–A
genau, also gerade verkehrtrum.
Aber ja, die Crux bei diesen Icons: Zeigen sie nun den Zustand an oder die Aktion, wenn man draufdrückt? Steht ^ also nun für „aufwärts sortiert“ oder für „aufwärts sortieren“?
In dem Fall für ersteres – den Zustand.
Nee. Bei Sortierung von A-Z, also von oben nach unten, zeigt der Pfeil nach oben.
Live long and pros healthy,
Martin
@@Der Martin
Nee. Bei Sortierung von A-Z, also von oben nach unten, zeigt der Pfeil nach oben.
Ich glaube, die Konfusion entspringt dem unglücklichen Begriff „Sortierung von oben nach unten“. Was soll das heißen?
Mit Zahlen wird’s vielleicht deutlicher. Das Äquivalent zu A–Z ist 0–9 – und das ist von unten nach oben – aufsteigend.
Oben steht das Kleine – die 0 bzw. das A; unten das Große – die 9 bzw. das Z. Dementsprechend ist der Pfeil oben klein (schmal), unten groß (breit).
Dreh mal die Ungleichungen 0 < 9 bzw. A < Z um 90° im Uhrzeigensinn!
😷 LLAP
Hallo,
Nee. Bei Sortierung von A-Z, also von oben nach unten, zeigt der Pfeil nach oben.
Ich glaube, die Konfusion entspringt dem unglücklichen Begriff „Sortierung von oben nach unten“. Was soll das heißen?
das heißt, die Wertigkeit nimmt von oben nach unten zu.
Mit Zahlen wird’s vielleicht deutlicher. Das Äquivalent zu A–Z ist 0–9 – und das ist von unten nach oben – aufsteigend.
Nein. Der kleinste Wert steht oben, der größte unten. Das ist für mein Verständnis absteigend, weil ich in Richtung zunehmender Werte von oben nach unten gehe.
Oben steht das Kleine – die 0 bzw. das A; unten das Große – die 9 bzw. das Z. Dementsprechend ist der Pfeil oben klein (schmal), unten groß (breit).
Das ist ja noch abstrakter als die Begriffe auf- oder absteigend.
Dreh mal die Ungleichungen 0 < 9 bzw. A < Z um 90° im Uhrzeigensinn!
So ist es verständlich. Aber ein Pfeil steht doch nicht für ein mathematisches Symbol, sondern für eine Richtung. Also 0 → 9 oder A → Z (und auch die Darstellung kannst du nun in die Vertikale drehen).
Live long and pros healthy,
Martin
^ aufsteigende Sortierung A–Z
˅ absteigende Sortierung Z–Agenau, also gerade verkehrtrum.
Das ist immer irgendwie falsch, egal wie man es macht:
Denn der Gedanke des "Aufsteigens" ist eben bei einem pulldown Menü in Anzeigerichtung gedacht (die Leserichtung ist dazu genau umgekehrt):
Je weiter (((nach unten))) man liest, desto "weiter" steigt man ab in der Sortierung, die Darstellung selbst ist aber aufsteigend. Es hängt davon ab womit man aufsteigend/absteigend assoziativ knüpft, die Darstellung oder die Leserichtung.
Und 1€ ist zwar weniger als 10€, so sind die Preise bei absteigender Leserichtung in ihrer Höhe (auf-) steigend.
Anders beim Wettkampf, da ist der 1. Platz besser (mehr) als der 10 Platz. Da ist beides absteigend, je größer die Nummer wird.
@@michaah
Ich finde Standards gut und beachtenswert. Aber die Ausrichtung dieser Pfeile hat mich von Anfang an irritiert. […]
Nö, auf diese Lösung kann man auch ohne Wiki kommen, schlecht ist die sicher nicht.
Im Zweifel ist das gut, was Nutzer (m/w/d) von anderswo kennen. (Erwartungskonformität)
Wo du’s sagst: Das Projekt, an dem ich arbeite, verwendet auch ▼/▲. Gleich mal ein Ticket aufgemacht.
😷 LLAP
Hallo Gunnar,
im Wiki-Tutorial zeigen die Pfeile in die Richtung, in die auf- bzw. zugeklappt wird. Evtl. ein Thema in Mannheim.
Gruß
Jürgen
Hallo Gunnar,
im Wiki-Tutorial zeigen die Pfeile in die Richtung, in die auf- bzw. zugeklappt wird. Evtl. ein Thema in Mannheim.
Das ist genau der Gedanke, den ich generell auch mit diesen Pfeilen verfolge.
Nur ist es ausgerechnet in meinem eigenen Beispiel so, das sich unter der details Zeile eine Abbildung befindet, und dadurch bei abwärts zeigendem Pfeil der Eindruck entsteht, dass der summary-Text einfach ein Erläuterung zu dem Bild wäre.
Ist aber eben ein noch geschlossenes Akkordeon mit ergänzender Info für mit der Situation noch nicht Vertraute ...
Gruß
M
PS:
Eine Variante könnte sein '↘' zu verwenden, für alles was tiefer in die Seit hinein ginge, auch ein Website-interner Link könnte so gekennzeichnet werden. Dementsprechend das '↗' für alles was zurück geht oder in der Hierarchie oben oder aus der Website hinaus geht.
Hallo michaah,
das Problem ist: selbst wenn Du es schaffst, das list-Icon auf dem summary Element zu verschieben, dann wirkt die Verschiebung auch in Chrome und sieht dann dort K... aus.
Das sollte eigentlich nicht passieren, wenn FF eine Voreinstellung hat und chrome nicht, bzw. eine die so ist wie eine neues Nutzer-CSS für den Selektor?
Ich habe etwas mit summary::marker herumgespielt, Einstellungen wie vertical-align, padding oder margin haben keinen Einfluss. Die Spec will es so.
Das bestätigt meine erfolglosen Versuche.
Ich habe aber auch den Eindruck, dass der Fuchs ein anderes Symbol als Chrome verwendet, das kleiner ist,
Das ist auch mein Eindruck.
...deshalb seine Spitze höher hat und dass das die Problemursache ist. Es scheint auch (was man sieht, wenn man den Font von ::marker vergrößert), dass der vom Fuchs verwendete Glyph sehr hoch in der Textbox sitzt.
Mein Eindruck ist allerdings, dass zusätzlich der FF den Text in der Box anhebt (oder Chromium diesen absenkt), was sichtbar wird, wenn man im Inspector den Selector markiert: Im FF sind Ober- und Unterlängen gleich weit vom Boxenrand entfernt, die Spitze des Markers sitzt aber mittig zu "E" (wenn man diesen Buchstaben als ersten Textbuchstaben wählt), d.h. mittig zum Text ohne unterlängen. Optisch wirkt das im Kontext nach oben verschoben. Im Chrome sitzen die Unterlängen direkt auf dem unteren Rand der Box, oben ist sichtbar Platz. Und obwohl hier der Marker auch mittig zu einem "Anfangs-E" sitzt, wirkt das stimmiger, auch weil der Marker größer ist.
Wirklich störend auffällig ist das erst, wenn die Textbox beim aktivieren mit einem Rahmen die Unsymmetrie deutlich werden läßt.
Auch wenn das wirklich Kleinkram ist und es wichtigeres gibt, so bin ich doch froh es geklärt oder doch zumindest bestätigt zu sehen. Und wenn man erstmal einen Kratzer wahrgenommen hat ist es nicht so einfach diesen dann wieder zu übersehen ....
Ich würde Dir als Workaround vorschlagen, ...
Danke dafür. Schaue ich mir dann mal an.
Gruß
M.