Vermeide „CSS Jitter“

Mit mehr Macht kommt mehr Verantwortung.

Eines der Dinge, die CSS Ihnen erlaubt zu steuern, ist der Hover-Zustand vieler Objekte, am bemerkenswertesten Links (<a>-Elemente). Typischerweise wird der Hover-Zustand mit Farbänderungen oder vielleicht etwas Aufwändigerem wie einer Hintergrundbildänderung (oder einer Hintergrundpositionsänderung, siehe CSS Sprites) gestaltet.

Aber das ist nicht alles, was Sie ändern können. Ebenso leicht können Sie Schriftstärke, Außenabstand, Innenabstand oder buchstäblich Höhe und Breite ändern, wenn Sie mit einem Block-Element arbeiten. Die Änderung all dieser Dinge beim Hovern bringt Sie in **gefährliches Terrain**.

Warum gefährlich? Weil Sie den klickbaren Bereich des Elements verändern. Wenn der neue klickbare Bereich so positioniert ist, dass der Cursor außerhalb liegt, wird das Hover-Ereignis ausgelöst und springt zu seinem Standardstil zurück, was den klickbaren Bereich wieder ändert, was dazu führt, dass Ihr Cursor wieder darin liegt, was den Stil wieder ändert, was..... Sie verstehen es, "CSS Jitter".

"CSS Jitter" kann jederzeit auftreten, wenn Sie die Größe eines Objekts beim Hovern ändern.

Es ist so einfach. Wenn Sie CSS Jitter vermeiden wollen, gestalten Sie die Hover-Zustände von Objekten nicht so, dass sich ihre Größe in irgendeiner Weise ändert.

Es gibt einige Beispiele, bei denen die Größenänderung sicher ist. Grundsätzlich, wenn der klickbare Bereich in allen Richtungen größer wird beim Darüberfahren. Zum Beispiel, das Hervorheben von Text beim Darüberfahren. Da die Fettung dazu führt, dass das Objekt in allen Richtungen größer wird, werden Sie nie einen Jitter auslösen. Wenn Sie jedoch das Gegenteil tun würden, unboldierter Text beim Darüberfahren, würde der klickbare Bereich kleiner werden und fast sicher einen Jitter auslösen.

Hier sind einige Hover-Stile, die "CSS Jitter" auslösen könnten

• Text hervorheben/unhervorheben
• Außen- oder Innenabstand ändern
• Rahmengröße ändern
• Breite oder Höhe ändern
• Zeilenhöhe ändern

Schauen Sie sich CSS Jitter-Man an.

Okay, das ist wirklich albern, aber nur um genau zu veranschaulichen, was ich meine, habe ich CSS Jitter-Man erstellt. Jitter-Man ist ein Anker-Element, das standardmäßig 246 Pixel breit ist, aber beim Darüberfahren auf 212 Pixel Breite schrumpft. Wenn Sie also mit der Maus von rechts oder links auf Jitter-Man fahren, wird er schrumpfen. Das verkleinert den klickbaren Bereich, wodurch Ihre Maus außerhalb landet, und er wird wieder größer... und somit der Jitter. Schauen Sie sich das Beispiel an.

Das ist wirklich keine riesige Epidemie oder so, es ist nur etwas, dessen man sich bewusst sein sollte. Es wird wahrscheinlich auf subtilere Weise auftauchen, was tatsächlich der Ursprung meiner Idee ist. Ich hatte eine `border-bottom` für meine Anker-Elemente verwendet, um dem Unterstrich etwas Abstand nach unten zu geben. Dann habe ich beim Darüberfahren diesen Abstand um einen Pixel reduziert, sodass der Unterstrich ein wenig nach oben sprang, was ein schöner Effekt war. Aber was das verursacht hat, war ein ein Pixel breiter Bereich, in dem CSS Jitter auftreten konnte. Nicht gut. Letztendlich habe ich für das Hover-Ereignis eine andere Methode gewählt.