Właściwość treści CSS: czy można wstawić HTML zamiast tekstu?

246

Zastanawiam się tylko, czy można w jakiś sposób sprawić, by contentwłaściwość CSS wstawiała zamiast kodu HTML ciąg znaków :beforelub :afterelement taki jak:

.header:before{
  content: '<a href="#top">Back</a>';
}

byłoby to bardzo przydatne ... Można to zrobić za pomocą Javascript, ale użycie do tego css naprawdę ułatwiłoby życie :)

html css pseudo-element css-content zanona
źródło

@Kaiido OMG ... nie jest, nie sprawdziłem daty pytania, odniosłem się do twojej odpowiedzi ... naprawdę przepraszam, usunę oba te komentarze :)

Ason

Odpowiedzi:

210

Niestety nie jest to możliwe. Zgodnie ze specyfikacją :

Wygenerowana treść nie zmienia drzewa dokumentów. W szczególności nie jest on zwracany do procesora języka dokumentu (np. W celu ponownej analizy).

Innymi słowy, w przypadku wartości ciągu oznacza to, że wartość jest zawsze traktowana dosłownie. Nigdy nie jest interpretowany jako znacznik, niezależnie od używanego języka dokumentu.

Na przykład przy użyciu podanego CSS z następującym kodem HTML:

<h1 class="header">Title</h1>

... spowoduje następujące wyniki:

<a href="#top"> Wstecz </a> Tytuł

BoltClock
źródło

Zgadzam się, ale jeśli wyobrażasz sobie, że ma już obsługę obrazów z urlatrybutami, dodanie linku nie różni się w tej perspektywie.

zanona

@ludicco: To dlatego, że same obrazy nie są elementami DOM (nie licząc <img>), po prostu są rysowane na istniejące elementy, więc stosując obrazy tła lub listy, tak naprawdę nie modyfikujesz DOM.

BoltClock

rozumiem dzięki, więc myślę, że będę musiał przekazać ten pomysł i przejść prosto do js, okrzyki

zanona

@ludicco: Dobre pytanie. Nawet przeszukiwałem SO, mając nadzieję, że to możliwe.

Robin Maben,

@watson: Właśnie zobaczyłem twoją odpowiedź na inne pytanie. Masz rację; Prawdopodobnie powinienem wyjaśnić w mojej odpowiedzi, że nie można dodać dowolnego znacznika - url()zamiast tego należy określić plik zewnętrzny , tak jak w przypadku każdego innego obrazu.

BoltClock

Jak prawie zauważono w komentarzach do odpowiedzi @ BoltClock, we współczesnych przeglądarkach można faktycznie dodać znaczniki HTML do pseudoelementów za pomocą ( url()) w połączeniu z <foreignObject>elementem svg .

Możesz podać adres URL wskazujący na rzeczywisty plik svg lub utworzyć go za pomocą wersji dataURI ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

Pamiętaj jednak, że jest to głównie hack i że istnieje wiele ograniczeń:

Nie można załadować żadnych zasobów zewnętrznych z tego znacznika (bez CSS, bez obrazów, bez multimediów itp.).
Nie można wykonać skryptu.
Ponieważ nie będzie to częścią DOM, jedynym sposobem na jego zmianę jest przekazanie znacznika jako dataURI i edycja tego dataURI w document.styleSheets. w tej części DOMParseri XMLSerializermoże pomóc .
Chociaż ta sama operacja pozwala nam ładować media zakodowane w <img>adresach URL w tagach, nie będzie to działać w pseudoelementach (przynajmniej na dzień dzisiejszy nie wiem, czy jest określone gdziekolwiek, co nie powinno, więc może być jeszcze nie zaimplementowaną funkcją).

Teraz mała demonstracja niektórych znaczników HTML w pseudo-elemencie:

/* 
**  original svg code :
*
*<svg width="200" height="60"
*     xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
*	<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
*		I am <pre>HTML</pre>
*	</div>
* </foreignObject>
*</svg>
*
*/

#log::after {
  content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}

<p id="log">hi</p>

Rozwiń fragment kodu

Kaiido
źródło

Natknąłem się na twoją odpowiedź i jest to rozwiązanie niektórych moich własnych problemów. Czy możesz wyjaśnić, jak sformatować adres URL wskazujący plik? Próbowałem url('/relativePathToMySvg/mySvg.svg')i to nie zadziałało

Frank

@Frank, za widowisko, wykorzystując ścieżkę względną będzie w stosunku do IE ścieżka pliku CSS, o ile masz plik css w /root/css/yourFile.css, a następnie względnej funcIRI jak yourFile.svgbędzie wskazując /root/css/yourFile.svg/. Ale myślę, że pamiętam, że niektóre wcześniejsze UA miały błąd i uczyniły go względnym w stosunku do baseURI dokumentu. Tak więc najbezpieczniejszym sposobem jest użycie absolutnej ścieżki.

Kaiido

@BoltClock, naprawdę? Naprawdę mi przykro z tego powodu. Przyszedłem do tego 6-letniego pytania przez inne i czułem, że muszę opublikować je jako aktualizację, ale może powinienem być jeszcze bardziej wyraźny, że twoja odpowiedź jest dobra i zdecydowanie 6 lat temu? Lub jeśli masz jakieś dobre sformułowania, które mogłyby pasować jako nagłówek, możesz edytować moją odpowiedź.

Kaiido,

Miły. Użyłem: content: url('../../images/como-funciona.svg');i działa dobrze

Eliut Islas

Oto wcześniejszy post, który ma moją odpowiedź, który zagłębia się nieco głębiej w temat: czy to możliwe, aby wyświetlić-dokument-html-dokument-lub-HTML-fragment-css-treść

Ason

W mediach stronicowanych CSS3 jest to możliwe przy użyciu position: running()i content: element().

Przykład z wersji CSS Generated Content for Paged Media Module :

@top-center {
  content: element(heading); 
}

.runner { 
  position: running(heading);
}

.runner może być dowolnym elementem i headingjest dowolną nazwą dla boksu .

EDYCJA: aby wyjaśnić, w zasadzie nie ma obsługi przeglądarki, więc w większości miało to być do wykorzystania w przyszłości / oprócz „praktycznych odpowiedzi” już podanych.

sol
źródło

Hej, czy mógłbyś to trochę wyjaśnić? Interesuje mnie twoja teoria, ale wydaje się, że nie mogę jej zrealizować. Jak mam dołączyć, powiedzmy, tag zakotwiczenia przy użyciu tej metody lub div.

Neil

Problem polega na tym, że obecnie zasadniczo nie ma obsługi przeglądarki, ale dedykowane renderery HTML implementują ją zgodnie ze specyfikacją. Kolejną niezbyt dobrą wiadomością jest to, że wydaje się, że nie ma dobrej implementacji open source; większość z nich to produkty SaaS, takie jak princexml.com .

sol