Anleitung: Tippziele auf Hausgroesse -- und ein Fehlalarm entschaerft

pruef-handy-teamdogi (8 rot -> 17 gruen) und pruef-handy (schon gruen,
192 statt 186 Pruefungen).

ECHT WAR: Auf anleitung.html und willkommen.html waren fuenf Tippziele
40 statt 44 px hoch -- Filter, "Hingehen", "Nochmal ansehen", Pflege-
und Fehlend-Knoepfe. Daneben stand der Satz "40 Pixel hoch: Die
Hausgroesse fuer etwas, das ein Daumen trifft". Nachgezaehlt: 98 Stellen
im Haus nehmen 44, 25 nehmen 40. Ein Kommentar, der eine Zahl zur Regel
erklaert, macht sie nicht dazu.

FEHLALARM WAR: "LIEGT UEBEREINANDER -- a.an-karte__weg ⨯ a.an-karte__weg",
vier Rollen lang, auf beiden Seiten. Die Messung stimmte (93x18 px),
sichtbar war davon nichts.

Der Weg dorthin hat gedauert, und das lag an der Meldung: "93x18px"
sagt, DASS sich zwei Rechtecke schneiden, und schickt einen suchen.
Also sagt sie jetzt auch, WO beide liegen und aus welchen Vorfahren sie
kommen -- und damit war es in einem Lauf klar:

  a.an-karte__weg in an-karte@4510+375 < an-stufe__gitter@4165+2256
                                       < an-stufe__falte@4065+55

Der Abschnitt ist 55 px hoch und traegt `overflow: hidden`; sein Gitter
faengt 45 px UNTER dessen Unterkante an. Der Browser schneidet alles
davon weg.

`sichtbar()` fragte bis heute nur das Element selbst: Groesse,
visibility, display, Deckkraft. Alle vier koennen tadellos sein und das
Ding trotzdem unerreichbar. Jetzt kommt `imAusschnitt()` dazu:
Schneidet ein Vorfahr mit `overflow: hidden` es vollstaendig weg, zaehlt
es nicht -- fuer alle drei Messungen dieser Datei (zu klein, Ueberstand,
Ueberdeckung).

ZWEI VERSUCHE DAVOR WAREN FALSCH, beide an mir: Erst fragte ich nach
`details:not([open])` -- die Abschnitte tragen `[open]`, also griff es
nicht. Dann setzte ich die Rechnung in die falsche Filterkette (die fuer
zu kleine Ziele statt die fuer `bedienbar`). Geprueft wird jetzt die
WIRKUNG und nicht die Bauform: Rechtecke veralten nicht mit der
Bauweise.

Die eingebauten Gegenproben der Datei laufen weiter an (ein zu breites
Element und ein zu kleiner Knopf werden gemeldet) -- der Filter blendet
also nichts Echtes aus.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-10-07 14:05:58 +02:00
co-authored by Claude Opus 5
parent da7508b6ce
commit 3f55e63703
48 changed files with 789 additions and 698 deletions
+14 -7
View File
@@ -49,7 +49,7 @@
.an-nochmal__weg {
display: inline-flex;
align-items: center;
min-height: 40px;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--rand);
@@ -326,8 +326,15 @@ a.an-schritt__rumpf:hover .an-schritt__name { text-decoration: underline; }
font: inherit;
font-size: .85rem;
font-weight: 650;
/* 40 Pixel hoch: Die Hausgröße für etwas, das ein Daumen trifft. */
min-height: 40px;
/* 44 Pixel, nicht 40 (berichtigt 07.10.2026).
Hier stand "40 Pixel hoch: Die Hausgroesse fuer etwas, das ein
Daumen trifft" -- die Hausgroesse ist aber 44, und zwar an 98
Stellen gegen 25. Gemessen hat es pruef-handy-teamdogi auf
anleitung.html und willkommen.html, fuer vier Rollen gleich.
Ein Kommentar, der eine Zahl zur Regel erklaert, macht sie nicht
dazu. */
min-height: 44px;
padding: 0 15px;
border-radius: 999px;
border: 1px solid var(--rand);
@@ -519,8 +526,8 @@ a.an-schritt__rumpf:hover .an-schritt__name { text-decoration: underline; }
.an-karte__weg {
align-self: flex-start;
margin-top: auto;
/* 40 Pixel: dieselbe Daumenhöhe wie der Filter. */
min-height: 40px;
/* 44 Pixel: dieselbe Daumenhoehe wie der Filter -- siehe dort. */
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0 14px;
@@ -683,7 +690,7 @@ a.an-schritt__rumpf:hover .an-schritt__name { text-decoration: underline; }
font: inherit;
font-size: .85rem;
font-weight: 650;
min-height: 40px;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid var(--rand);
@@ -765,7 +772,7 @@ a.an-schritt__rumpf:hover .an-schritt__name { text-decoration: underline; }
font: inherit;
font-size: .85rem;
font-weight: 650;
min-height: 40px;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);