Die Fähigkeit, Text und andere Objekte hervorzuheben, wurde vor vielen Jahren unter Computerbenutzern entwickelt. Wir heben den Inhalt von Webseiten aus verschiedenen Gründen hervor. Vielleicht müssen Sie den Text kopieren und irgendwo zitieren - vielleicht ist es für jemanden einfacher, den Text zu lesen und seine Fragmente hervorzuheben. Auf Mobilgeräten wird jedoch etwas Schwierigeres hervorgehoben. Zum Beispiel nervt es mich. Ich möchte den Inhalt von Webseiten auf dem Telefon nicht hervorheben. Diese Operation scheint irgendwie "falsch" zu sein. In diesem Artikel werde ich über alles sprechen, was Sie über das Stylen von Auswahlen mit CSS wissen müssen. Insbesondere werden wir über das Pseudoelement und die Eigenschaft sprechen
::selectionuser-select. Dieser Artikel soll allen zeigen, die möchten, dass CSS mit Auswahlen arbeitet, und wie verschiedene Methoden zum Arbeiten mit Auswahlen verwendet werden.Die Grundlagen
In MDN können Sie lernen, dass Sie ::selectionmit einem Pseudoelement Stile auf Teile eines Dokuments anwenden können, die vom Benutzer ausgewählt wurden (z. B. mit der Maus).Um es zu verwenden, reicht es ::selectionaus, die folgende Konstruktion zu verwenden:p::selection {
color: #fff;
background-color: #000;
}
Ausgewählter TextHier ist ein Beispiel, mit dem Sie experimentieren können.Unterstützte Eigenschaften :: Auswahl
Es ist erwähnenswert, dass das Pseudoelement ::selectionnur Eigenschaften unterstützt color, backgroundund text-shadow.Passen Sie Ihre eigenen Auswahleffekte an
Was ist, wenn wir die Auswahl besonders aussehen lassen müssen? Zum Beispiel, damit die Auswahl eine bestimmte Höhe oder einen interessanten Hintergrund hat? Schauen Sie sich die folgende Abbildung an.Ein Beispiel für eine spezielle AuswahlauswahlDies ist möglich, erfordert jedoch einige Anstrengungen. So wird die oben gezeigte Auswahl getroffen:- Ein Pseudoelement wird mit demselben Text hinzugefügt, den wir auswählen. Dann wird das Pseudoelement auf eine Eigenschaft
height: 50%und eine weiße Hintergrundfarbe gesetzt. - Das Pseudoelement befindet sich über dem Quelltext.
Wenn Sie jetzt den Text auswählen, überlappt das Pseudoelement 50% des Textes vertikal. Auf diese Weise können wir den gewünschten Effekt simulieren.p {
position: relative;
color: #fff;
}
p:after {
content: attr(data-content);
position: absolute;
color: #000;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: #fff;
}
p::selection {
background: rgba(76, 125, 225, 0.18);
}
Ich habe gelernt , über diese Technik hier .Eine weitere Option für diese Auswahl ist unten dargestellt. Hier habe ich anstelle einer soliden Auswahl die Auswahl als CSS-Gradienten implementiert. Hier geht es darum, einen weißen Farbverlauf mit einer Höhe von 50% zu verwenden und das Element einmal mit dem Hintergrundbild zu füllen, indem der Wert no-repeatbeim Festlegen der Eigenschaft verwendet wird background.h1:after {
content: attr(data-content);
position: absolute;
color: #000;
top: 0;
left: 0;
width: 100%;
background: linear-gradient(#fff, #fff) top/100% 50% no-repeat;
}
Die folgende Abbildung zeigt diese Technik.Implementieren der Hervorhebung vonVerläufen Hoffentlich konnte ich diese Idee klar erklären. Hier ist ein Arbeitsbeispiel.Auswahl animieren
Am vorherigen Beispiel habe ich die folgende Frage gestellt: "Ist es realistisch, die Auswahl zu animieren?". Bei der Auswahl von Text beträgt die Höhe der Auswahl beispielsweise 50%. Wenn der Mauszeiger zur Seite bewegt wird, erhöht sich die Höhe der Auswahl auf 80%. Wie kann man das machen? Aber so:p {
transition: background 0.3s ease-out;
}
p:hover:after {
background-size: 100% 80%;
}
Text im AuswahlprozessText nach Abschluss der AuswahlHier ist ein Video, das die animierte Auswahl demonstriert.Mehrzeiliger Text
Die obige Auswahlanpassungstechnik ist leider nicht für mehrzeiligen Text geeignet. Um dennoch etwas Ähnliches für einen solchen Text zu implementieren, müssen Sie auf die Funktionen von JavaScript zurückgreifen und jedes Wort in ein Inline-Element (Kleinbuchstaben) einfügen, z. B. in <span>. Nachdem jedes Wort in einem eigenen Element erscheint <span>, muss jedem dieser Elemente ein Pseudoelement hinzugefügt werden. Danach kann der oben beschriebene Effekt auf mehrzeiligen Text angewendet werden.Hier ist ein Skript, um jedes Wort in einen <span>Container zu setzen:let paragraph = document.querySelector(".text");
const words = paragraph.textContent.split(" ");
paragraph.innerHTML = "";
words.forEach(function (word) {
let wordItem = document.createElement("span");
wordItem.setAttribute("data-word", word);
wordItem.innerHTML = word + " ";
paragraph.appendChild(wordItem);
});
Danach müssen die Elemente <span>stilisiert werden. Dann müssen Sie jedem von ihnen ein Pseudoelement hinzufügen:span {
position: relative;
font-size: 1.25rem;
line-height: 1.4;
}
span::after {
content: attr(data-word);
position: absolute;
left: 0;
right: 0;
top: -0.28em;
height: 75%;
padding-top: 0.14em;
background: #fff;
pointer-events: none;
}
span::selection {
background: rgba(#4C7DE1, 0.18);
}
Wenn Sie sich dieses Design in der Praxis ansehen, stellt sich heraus, dass es funktioniert, aber nicht ganz so, wie Sie es vielleicht erwarten. Ein Beispiel für die Hervorhebung mehrzeiliger Texte ist unten dargestellt. Möglicherweise stellen Sie fest, dass die Auswahl uneinheitlich aussieht.Inhomogene AuswahlIch würde sagen, dass eine solche mehrzeilige Auswahl nicht sehr gut ist und nicht auf globaler Ebene verwendet werden sollte. Vielleicht sollte es nur verwendet werden, um beispielsweise die Auswahl eines bestimmten Absatzes zu organisieren.Hier können Sie mit einer solchen Auswahl experimentieren.Kreative Verwendung :: Auswahl und Textschatten
Da eine der Eigenschaften, die das Pseudoelement unterstützt, darin ::selectionbesteht, text-shadowdass wir versuchen können, einige interessante Effekte unter Verwendung mehrerer Schatten des Textes zu erzielen. Wir untersuchen die Möglichkeiten, die diese Idee vor uns eröffnet.▍ Mit langen Schatten hervorheben
Ausgewählter Text wirft lange Schatten.So implementieren Sie diesen Effekt:p::selection {
color: #444444;
background: #ffffff;
text-shadow: 1px 0px 1px #cccccc, 0px 1px 1px #eeeeee, 2px 1px 1px #cccccc, 1px 2px 1px #eeeeee, 3px 2px 1px #cccccc, 2px 3px 1px #eeeeee, 4px 3px 1px #cccccc, 3px 4px 1px #eeeeee, 5px 4px 1px #cccccc, 4px 5px 1px #eeeeee, 6px 5px 1px #cccccc, 5px 6px 1px #eeeeee, 7px 6px 1px #cccccc;
}
▍ Gliedertexteffekt
Ausgewählter Text wird zur KonturDiese Idee habe ich in diesem Artikel gefunden. Wir sprechen über die Tatsache, dass Sie mit der Eigenschafttext-shadowden Effekt des Gliederungstextes simulieren können.p::selection {
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
▍ Unschärfeeffekt
Ausgewählter Text sieht verschwommen aus.Ein weiterer interessanter Effekt, der auf ausgewählten Text angewendet werden kann, ist das Verwischen des Texts. In der unteren Zeile wird die Eigenschaft verwendet, wenn die Farbe des Texts festgelegt wirdcolor: transparent. Die mit der Hilfe eingestellten Schattentext-shadowverschwinden nirgendwo, was den gewünschten Effekt ergibt.p::selection {
color: transparent;
text-shadow: 0 0 3px #fff;
}
Ich bin mir sicher, dass Sie selbst noch viele weitere Beispiele für die text-shadowAuswahl von Stilen finden können. Diese Eigenschaft gibt uns unbegrenzte Möglichkeiten.▍Schattentexte und Performance
Es wird nicht empfohlen, beim Anpassen zu komplexe Stile zu verwenden text-shadow. Tatsache ist, dass übermäßige Begeisterung für diese Eigenschaft zu Leistungsproblemen führt. Hier ist ein Video, das ein Beispiel für solche Probleme zeigt.Verwenden sehr ausgefeilter Stile zum Anpassen der TextauswahlDer hier vorgestellte Neon-Effekt ist sehr komplex. Bitte beachten Sie, dass bei Auswahl dieses Textes zwischen der Auswahl des Textes und der Anwendung der Stilisierung eine spürbare Verzögerung auftritt. Beachten Sie außerdem, dass das, was nicht oben und links erscheinen soll. Deshalb bitte ich Sie, estext-shadowvorsichtig zu verwenden.Heben sich Formelemente ab?
Eine kurze Antwort auf die Frage im Titel dieses Abschnitts lautet "Ja". Es scheint mir, dass dies falsch ist: Sie wählen die Seite aus, aber es stellt sich heraus, dass der Inhalt in den Eingabefeldern ebenfalls hervorgehoben wird. So sieht es aus.Der Inhalt in den Eingabefeldern wird hervorgehoben.Hier kann auch der Text innerhalb der Schaltfläche ausgewählt werden. In dem Abschnitt überuser-selectwerden wir darüber sprechen, ob Benutzer die Formen von Elementen hervorheben dürfen oder nicht.Hier ist ein Beispiel.Untersuchen der User-Select-Eigenschaft
Mit dieser Eigenschaft user-selectkönnen Sie festlegen, ob der Benutzer bestimmten Text auswählen kann. Diese Eigenschaft kann nützlich sein, um die Möglichkeit zum Auswählen von Text zu deaktivieren. Dies kann nützlich sein, um die Fähigkeit des Benutzers einzuschränken, nebeneinander angeordnete Materialien auszuwählen. Hier ist ein Standard, der beschreibt user-select.Diese Eigenschaft kann die folgenden Werte annehmen : none, auto, text, contain, all.Vom Benutzer ausgewählte Anwendungsfälle
▍Text und Symbol
Wenn das Element Text und ein Symbol enthält - in Form eines Symbols oder eines Symbols aus einer Schriftart - wird dieses Symbol hervorgehoben, wenn der Text ausgewählt wird. Betrachten Sie das in der folgenden Abbildung gezeigte Beispiel.Schaltfläche mit Text und Symbol Hier ist der Code für diese Schaltfläche:<button>Our Services<span aria-hidden="true">▼</span></button>
Wenn Sie dieses Element auswählen, sieht es wie das unten gezeigte aus.Dedizierte TasteDies ist völlig unnötig. Bitte beachten Sie, dass das Markup ein Attribut verwendetaria-hidden, das das Symbol vor Bildschirmleseprogrammen verbirgt. Um das Problem der Hervorhebung dessen zu lösen, was Sie nicht hervorheben müssen, können wir den folgenden Stil verwenden:button span[aria-hidden="true"] {
user-select: none;
}
Auf diese Weise können Sie die Auswahl des Symbols verhindern. Gleichzeitig binden wir das Auswahlverbot an das Attribut aria-hidden. Infolgedessen sollte für Bildschirmleser höchstwahrscheinlich nicht alles sichtbar sein, was nicht auffallen sollte.▍ Flaggen
Dieses Verhalten der Flags ärgert mich, wenn ich durch Setzen oder Deaktivieren eines Flags versehentlich den Text seiner Beschreibung auswähle. So sieht es aus.Der Text der Flag-Beschreibung wird zufällig ausgewählt. Sie könnendieses Problem lösen, indem Sie das Element<label>wie folgt gestalten:label {
user-select: none;
}
▍ Markieren Sie den gesamten Text
Mit dem Wert all, den eine Immobilie annehmen kann, user-selectkönnen Sie einen interessanten Effekt erzielen. Wenn das übergeordnete Element diese Eigenschaft mit einem solchen Wert hat, kann der gesamte in einem solchen Element enthaltene Text mit einem Klick ausgewählt werden. Dies kann nützlich sein, um mit Textinhalten zu arbeiten, die vollständig hervorgehoben werden sollten. So markieren Sie beispielsweise Codefragmente, die auf einer Seite verfügbar sind:.embed-code {
user-select: all;
}
Ein Textfragment, das in einem solchen Stil gestaltet ist, kann mit einem Klick ausgewählt werden.Web Applikationen
Die Webanwendung sollte vom Benutzer als echte Anwendung wahrgenommen werden. Ist es möglich, Schaltflächentext in regulären Anwendungen auszuwählen? Nein, geht nicht. Es ist wichtig, dass Webanwendungen die bekannten Funktionen regulärer Anwendungen widerspiegeln, auch wenn sie mit HTML und CSS erstellt wurden.Betrachten Sie einige Beispiele aus dem Leben.»Schwarz
In Slack können Sie Beschriftungen und Eingabefelder markieren. Schaltflächentexte werden jedoch nicht hervorgehoben.Schaltflächenbeschriftungen werden nicht hervorgehoben.Hier ist ein weiteres Beispiel.Die Signatur in der Titelleiste des Modalfensters wird hervorgehoben. Das Datum des Chats kann nicht hervorgehoben werden.Das Datum kann nicht zugewiesen werden.Im Allgemeinen erscheint es mir seltsam, dass Sie in der Anwendung einige Texte auswählen können, die die Auswahl anscheinend nicht unterstützen sollten. Es gibt Stellen in der Slack-Oberfläche, an denen sie verwendet wirduser-select: none, aber es gibt weniger solche Stellen, als Sie vielleicht erwarten. Für mich als Benutzer hat es beispielsweise keinen Vorteil, den Titel eines modalen Fensters hervorzuheben.»Note
Die Herangehensweise an die Auswahl der in Notion implementierten Elemente gefällt mir besser. Diese Webanwendung ähnelt eher einer echten Anwendung als einer Website, von der jeder Teil hervorgehoben werden kann.Was nicht auffallen sollte, fällt nicht auf. Aufdiesem Bild wird kein einziges Textfragment hervorgehoben. Genau das können Sie von einer Anwendung erwarten.Verwenden Sie nicht die Deaktivierung der globalen Auswahl
Es wird nicht empfohlen, die Auswahl global zu deaktivieren. Wenn Sie die Auswahl deaktivieren, versuchen Sie, sie nur für Elemente zu deaktivieren, für die dies keinen Sinn ergibt. Dazu können Sie eine Hilfsklasse erstellen. Zum Beispiel - dies:.disable-selection {
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}
Schlechtes Muster
Es gibt ein UX-Muster, das ich wirklich nicht mag. Es besteht darin, eine Warnung anzuzeigen, wenn versucht wird, Text hervorzuheben. Dies nervt und gibt dem Benutzer das Gefühl, als würde er versuchen, seine Interaktion mit der Site zu kontrollieren. Ein Beispiel für dieses Muster ist unten dargestellt.Hervorheben mit Benachrichtigungsanzeige deaktivierenBitte tun Sie dies nicht.Markieren Sie mobile Geräte
Es gibt eine Eigenschaft -webkit-touch-calloutfür iOS Safari, die die Anzeige des Standard-Tooltips deaktivieren soll, der angezeigt wird, wenn Text ausgewählt wird. Ich habe versucht, diese Eigenschaft zu verwenden, aber sie funktioniert nicht.p {
-webkit-touch-callout: none;
}
Stile ::selectionfunktionieren auch nicht.Und das Anwesen user-select: nonefunktioniert wie erwartet.Ich habe versucht, ein reales Beispiel zu finden, das dieses Problem veranschaulicht. Ich habe einen Text aus Wikipedia kopiert. Gleichzeitig wurde der für mich völlig unnötige Text kopiert (listen). Das ist nervig.Zusammen mit dem nützlichen Text wird er kopiert und (abgehört)Anstatt dem Benutzer das Kopieren dieses „Abhörens“ zu ermöglichen, ist es besser, diesem Element einen Stil hinzuzufügenuser-select: none. Wenn Sie Text kopieren, der dieses Element enthält, wird er daher nicht kopiert.Zusammenfassung
Hier haben wir uns Methoden zum Anpassen der Hervorhebung von Webseitenelementen mithilfe von CSS angesehen. Vielleicht möchten Sie sich dieses Material ansehen.Liebe Leser! Wie richten Sie die Textauswahl in Ihren Projekten ein?