Ist es möglich, CSS-generierte Inhalte auszuwählen? [duplicate]

Lesezeit: 5 Minuten

Danield

Nehmen wir an, ich habe eine Markierung:

<div data-generated="world!">Hello </div>

..mit CSS:

div:after {
    content: attr(data-generated);
}

Dies erzeugt den Text: Hallo Welt! – GEIGE

div:after {
    content: attr(data-generated);
}

<div data-generated="world!">Hello </div>

ABER…

Wenn ich versuche, den Text auszuwählen/zu kopieren, ist nur der Teil „Hallo“ auswählbar.

Gibt es eine Möglichkeit, CSS-generierten Text auszuwählen?

Hinweis:

1) ~~Ich habe mir die Spezifikation angesehen (hier und hier) in Bezug auf generierte Inhalte und ich habe keinen Hinweis auf dieses Problem gesehen.~~

Die spez hier und hier scheint das zu sagen generierte Inhalte sollten auswählbar sein

Generierte Inhalte sollten durchsuchbar, auswählbar und für Hilfstechnologien verfügbar sein

2) Wenn die Antwort auf diese Frage „nein – das ist nicht möglich“ lautet, verlinken Sie bitte auf eine glaubwürdige Quelle, in der dies angegeben ist.

Ich weiß es nicht genau. Aber da der generierte Inhalt nicht Teil des DOM ist, sollte ich nein sagen.

– Yunzen

24. Juni 2014 um 11:16 Uhr
Grundsätzlich nicht in FF: bugzilla.mozilla.org/show_bug.cgi?id=12460

– Alex K.

24. Juni 2014 um 11:19 Uhr
In Fett sollte es sein nicht auswählbar sein, weil es tatsächlich so ist Styling Wir missbrauchen die content Element, es auf diese Weise zu verwenden. Wenn Sie tatsächlich auswählbaren “Inhalt” wünschen, verwenden Sie ein richtiges HTML-Element und kein Pseudo-Element. – developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

– Paulie_D

24. Juni 2014 um 11:53 Uhr
ich ganz sicher nicht denken, dass <div data-commentcount="3"> comments </div> ist auch eine akzeptable Verwendung. CSS sollte nicht zum Generieren von Inhalten verwendet werden, sondern Stile. Das Schreiben von “3” wird hier nicht als Stil, sondern als tatsächlicher Inhalt angesehen. Wenn Sie versuchen würden, ein paar ausgefallene Anführungszeichen oder Aufzählungspunkte hinzuzufügen, wäre dies ein Stil. Außerdem, welchen Vorteil bringt Ihnen das, wenn Sie nur “3 Kommentare” als Text einfügen?

– kba

24. Juni 2014 um 12:41 Uhr
@Daniel Warum müssten Sie ein zusätzliches Span-Element hinzufügen? Und selbst wenn Sie hatte dieses span-Element hinzuzufügen, das ist immer noch besser, als ein `data’-Attribut in meinem Buch hinzuzufügen.

– kba

25. Juni 2014 um 1:14 Uhr

Nein, das kannst du nicht.

Siehe Auswählen und Bearbeiten von CSS-Pseudoelementen wie ::before und ::after using jQuery. Um das dort Beschriebene zu wiederholen, generierter Inhalt ist nicht Teil des DOM.

Mit den Worten des CSS2.1-Spezifikation,

Generierter Inhalt ändert den Dokumentbaum nicht.

Generierte Inhalte existieren nur in der visuellen Welt der Rendering-Engine. Beim Auswählen geht es darum, Teile des DOM auszuwählen. Generierter Inhalt befindet sich nicht im DOM und kann daher nicht ausgewählt werden. Aus demselben Grund können generierte Zähler oder Aufzählungszeichen für Listenelemente nicht ausgewählt werden.

Bedeutet die Tatsache, dass die Chrome-Entwicklertools seit kurzem Pseudo-Elemente im Markup anzeigen, dass sich etwas geändert hat, oder handelt es sich nur um eine Chrome-Funktion zum einfacheren Debuggen?

– Danield

29. Oktober 2014 um 10:34 Uhr
Letzteres. Es ist nur eine Möglichkeit, sie auszuwählen, um ihre Stile zu untersuchen.

– Benutzer663031

29. Oktober 2014 um 10:49 Uhr
Betreff: “Beim Auswählen geht es darum, Teile des DOM auszuwählen“, warum so? Warum nicht real auswählen?

– Schrittmacher

9. Juli 2017 um 6:42 Uhr

Danield

Anstatt den generierten Inhalt tatsächlich auszuwählen, könnten Sie dies tun simulieren dies mit etwas Javascript.

Ich bin darüber gestolpert David Walsh-Blogwo er Code bereitstellt, der generierte Inhalte abruft.

Damit können Sie den generierten Inhalt an den regulären Inhalt anhängen, um die Auswahl des generierten Inhalts zu simulieren, dann können Sie den generierten Inhalt mit festlegen display:none damit es nicht doppelt auftaucht. So was:

GEIGE

String.prototype.unquoted = function() {
  return this.replace(/(^['"])|(['"]$)/g, '')
}

var element = document.getElementById('div1');

var content = window.getComputedStyle(
  element, ':after'
).getPropertyValue('content');

element.innerHTML = element.innerHTML + content.unquoted();

console.log(content.unquoted());

div:after {
  content: attr(data-generated);
  display: none;
}

<div id="div1" data-generated=" world!">Hello</div>

Also warum würdest du jemals so etwas tun wollen?

Nun, Sie würden das wahrscheinlich nie tun wollen, aber ich habe einen langen Kommentar zu der Frage hinterlassen, in dem ich eine bestimmte Einschränkung erklärte, die ich einmal hatte, wo dies eine Lösung gewesen sein könnte.

Hinweis: Mir ist klar, dass diese „Lösung“ den generierten Inhalt nicht wirklich selbst auswählt, aber ich habe beschlossen, diese Antwort zu posten, falls jemand da draußen jemals eine Problemumgehung benötigt.

Warum würdest du jemals so etwas tun wollen? Nun, ein solider Anwendungsfall wäre das Kopieren von Markdown-Code, der (aus HTML) von einer CSS-Vorlage generiert wurde, um ihn in einen Textbereich mit Markdown-Unterstützung einzufügen. Sehen gist.github.com/ImJasonH/c00cdd7aece6945fb8ea.

– John Slegers

28. Mai 2015 um 19:09 Uhr
Dies ist eine großartige Antwort.

– Herr Polywhirl

17. Mai 2018 um 13:07 Uhr
Anwendungsfall? Der Farbwert wird in einer CSS-Variablen gespeichert. Wert wird dem Benutzer über generierten Inhalt (:after) angezeigt. Der Benutzer sollte diesen Wert auswählen und in die Zwischenablage kopieren können. Voila!

– Christoph Werby

13. Juli 2020 um 19:48 Uhr

Mr7-iturdeveloper

Speichern Sie keine Inhalte, die sichtbar und zugänglich sein sollten in data Attribute, da Hilfstechnologien möglicherweise nicht auf sie zugreifen

Überprüfen Sie diese Links:

http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier einzufügen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verlinkte Seite ändert.

– trejder

27. Oktober 2014 um 7:01 Uhr
@trejder Ein Link in der Antwort verwandelt ihn nicht in eine Nur-Link-Antwort, auch wenn er kurz ist.

– Korem

27. Oktober 2014 um 7:17 Uhr
Bei allem Respekt handelt der Text in dieser Antwort von Barrierefreiheit, was jedoch nützlich ist und sich nicht auf die Frage bezieht oder eine Antwort darauf gibt. Der zweite Link bietet allgemeine Informationen zu Datenattributen, vermutlich auch zugunsten der Kommentare unten zur Barrierefreiheit. Diese Informationen zur Barrierefreiheit gehören in einen Kommentar. Der erste Link behandelt die Frage, den einzigen Teil der Antwort, der dies tut, bietet jedoch keine Zusammenfassung der wichtigsten Punkte. was in der Tat als Nur-Link-Antwort angesehen werden könnte.

– Benutzer663031

27. Oktober 2014 um 9:31 Uhr

11307700cookie-checkIst es möglich, CSS-generierte Inhalte auszuwählen? [duplicate]

#Auswahl #CSS #CSS-Inhalt #html #Pseudo-Element