Window Inactive Styling

Sie können die Textfarbe und Hintergrundfarbe von Text anpassen, wenn er mit ::selection und ::-moz-selection ausgewählt wird. Wir haben das schon einige Male in verschiedenen Formen behandelt und es ist ein cooler kleiner Trick.

Selbst das HTML5 Boilerplate hat es standardmäßig drin und verwendet knalliges Pink, was die einfachste Methode ist, eine Boilerplate-Website zu erkennen =).

Aber wenn Sie das Styling der Textauswahl von seiner Standardeinstellung ändern, verlieren Sie die Fähigkeit des Standardstylings, sich selbst zu entsättigen, wenn das Fenster den Fokus verliert. Sehen Sie

Ich mag es, wie der Standard sich entsättigt und visuell weniger intensiv wird. Schließlich konzentrieren Sie sich wahrscheinlich gerade auf ein anderes Fenster und brauchen kein Hintergrundfenster, das um Aufmerksamkeit kämpft.

Vielleicht eine wenig bekannte Tatsache, aber Sie können einen Pseudo-Selektor in Verbindung mit ::selection verwenden, um das Styling anzuwenden, wenn das Fenster in seinem inaktiven Zustand ist. Er verwendet den :window-inactive Pseudo-Selektor, so:

::selection {
  background: hsl(136,65%,45%);
  color: white;
}
::selection:window-inactive {
  background: hsl(136,25%,65%);
}

Mit HSL als Farbwert konnte ich die Sättigung reduzieren und die Helligkeit erhöhen, um eine weniger intensive Version des gleichen Farbtons zu erhalten.

Denken Sie daran, dass Firefox seine eigene Version von ::selection hat, ::-moz-selection. Es hat auch seine eigene Version von :window-inactive, :-moz-window-inactive. Leider funktioniert die gemeinsame Verwendung dieser Dinge nicht.

/* Does work */
::-moz-selection {
  background: rgba(255,0,0,0.9);
  color: white;
}
/* Doesn't work */
::-moz-selection:-moz-window-inactive {
  background: rgba(255,0,0,0.3);
}
/* Nor this */
:-moz-window-inactive::-moz-selection {
  background: rgba(255,0,0,0.3);
}

Also, Sie können in Firefox (3.6+ ?) zumindest eine benutzerdefinierte Textauswahlfarbe erhalten, aber Sie können sie nicht speziell für Fensterinaktivität stylen. Jedoch, Firefox (3.6 und 4 getestet) macht Ihre Textauswahl automatisch grau, wenn das Fenster den Fokus verliert.

Es ist wichtig zu beachten, dass dies nicht daran liegt, dass :-moz-window-inactive nicht funktioniert, es tut es, Sie können es tatsächlich auf jedem Element verwenden, z. B. um einem Div in diesem Zustand die Hintergrundfarbe zu ändern. Es ist nur die gemeinsame Verwendung, die nicht funktioniert.

Das ist kein Fall, bei dem wir mit den Browserherstellern schimpfen können. Nichts davon ist standardisiert. ::selection ist nicht Standard. :window-inactive ist nicht Standard. Tatsächlich ist ::selection technisch gesehen ein Pseudo-Element und kein Pseudo-Selektor, daher müsste es am Ende des Selektors stehen, aber wenn Sie die Reihenfolge ändern, funktioniert es nicht.

Mehr als nur Textauswahl

Wenn :window-inactive standardisiert und breiter unterstützt würde, könnte man damit viel mehr tun als nur Textauswahlfarben zu handhaben. Denken Sie an die Graustufen eines ganzen Websites oder das Stoppen von Animationen.