Properti konten CSS: apakah mungkin memasukkan HTML daripada Teks?

246

Hanya ingin tahu apakah mungkin entah bagaimana membuat contentproperti CSS memasukkan kode html sebagai ganti string :beforeatau :afterelemen seperti:

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

ini akan sangat berguna ... Itu bisa dilakukan melalui Javascript tetapi menggunakan css untuk ini benar-benar akan membuat hidup lebih mudah :)

html css pseudo-element css-content Zanona
sumber
@ Kaiido OMG ... tidak, tidak memeriksa tanggal pertanyaan, saya merujuk jawaban Anda ... benar-benar minta maaf, akan menghapus kedua komentar ini :)
Ason

Jawaban:

210

Sayangnya, ini tidak mungkin. Per spec :

Konten yang dihasilkan tidak mengubah susunan dokumen. Secara khusus, ini tidak diumpankan kembali ke prosesor bahasa dokumen (misalnya, untuk reparasi).

Dengan kata lain, untuk nilai string ini berarti nilai selalu diperlakukan secara harfiah. Itu tidak pernah diartikan sebagai markup, terlepas dari bahasa dokumen yang digunakan.

Sebagai contoh, menggunakan CSS yang diberikan dengan HTML berikut:

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

... akan menghasilkan output berikut:

<a href="#top"> Kembali </a> Judul

BoltClock
sumber
1
setuju, tetapi jika Anda membayangkan bahwa itu sudah memiliki dukungan untuk gambar dengan urlatribut, menambahkan tautan tidak akan jauh berbeda dalam perspektif ini.
zanona
12
@ludicco: Itu karena gambar itu sendiri bukan elemen DOM (tidak termasuk <img>), mereka hanya ditarik ke elemen yang ada, jadi dengan menerapkan gambar latar belakang atau daftar Anda tidak benar-benar memodifikasi DOM.
BoltClock
1
Terima kasih, jadi saya pikir saya harus melewati ide ini dan langsung ke js, tepuk tangan
zanona
6
@ludicco: Pertanyaan bagus. Bahkan saya mencari melalui SO berharap ini mungkin.
Robin Maben
1
@watson: Baru saja melihat jawaban Anda untuk pertanyaan lain. Kamu benar; Saya mungkin harus mengklarifikasi dalam jawaban saya bahwa Anda tidak dapat menambahkan markup sewenang-wenang - Anda harus menentukan file eksternal via url()gantinya, seperti halnya dengan gambar lain.
BoltClock
54

Seperti hampir dicatat dalam komentar untuk jawaban @ BoltClock, di browser modern , Anda sebenarnya dapat menambahkan beberapa markah html ke pseudo-elements menggunakan ( url()) dalam kombinasi dengan <foreignObject>elemen svg .

Anda dapat menentukan URL yang menunjuk ke file svg yang sebenarnya, atau membuatnya dengan dataURUR versi ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

Tetapi perhatikan bahwa ini sebagian besar merupakan peretasan dan ada banyak batasan:

  • Anda tidak dapat memuat sumber daya eksternal apa pun dari markup ini (tanpa CSS, tanpa gambar, tanpa media, dll.).
  • Anda tidak dapat menjalankan skrip.
  • Karena ini tidak akan menjadi bagian dari DOM, satu-satunya cara untuk mengubahnya, adalah dengan melewatkan markup sebagai dataURI, dan edit dataURUR ini di document.styleSheets. untuk bagian ini, DOMParserdan XMLSerializerdapat membantu .
  • Sementara operasi yang sama memungkinkan kita untuk memuat media yang disandikan url dalam <img>tag, ini tidak akan berfungsi dalam elemen semu (setidaknya pada hari ini, saya tidak tahu apakah itu ditentukan di mana saja yang seharusnya tidak, sehingga mungkin menjadi fitur yang belum diimplementasikan).

Sekarang, demo kecil beberapa markup html di elemen pseudo: 

/* 
**  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>
Luaskan cuplikan

Kaiido
sumber
Saya menemukan jawaban Anda, dan itu adalah solusi untuk beberapa masalah saya sendiri. Bisakah Anda menjelaskan cara memformat URL yang menunjuk ke file? Saya mencoba url('/relativePathToMySvg/mySvg.svg')dan tidak berhasil
Frank
@ Sejujurnya, per spesifikasi, menggunakan path relatif akan relatif terhadap path file css Anda yaitu, jika Anda punya file css Anda /root/css/yourFile.css, maka fungsi relatif seperti yourFile.svgakan menunjuk ke /root/css/yourFile.svg/. Tapi, saya pikir saya ingat bahwa beberapa UA sebelumnya memiliki bug dan membuatnya relatif terhadap baseURI dokumen. Jadi cara paling aman adalah dengan menggunakan jalur absolut.
Kaiido
1
@BoltClock, benarkah? Aku benar-benar minta maaf soal itu. Saya menjawab pertanyaan 6 tahun ini oleh orang lain dan merasa saya harus mempostingnya sebagai pembaruan, tetapi mungkin saya harus lebih jelas lagi bahwa jawaban Anda baik, dan sudah pasti benar 6 tahun yang lalu? Atau jika Anda memiliki kata-kata bagus yang cocok sebagai tajuk, silakan edit jawaban saya.
Kaiido
1
Bagus. Saya menggunakan: content: url('../../images/como-funciona.svg');dan berfungsi dengan baik
Eliut Islas
Berikut ini adalah posting sebelumnya, yang memiliki jawaban saya, yang menyelam sedikit lebih dalam ke dalam subjek: apakah mungkin untuk menampilkan-an-html-dokumen-atau-html-fragmen-di-css-konten
Ason
7

Dalam media halaman CSS3 ini dimungkinkan menggunakan position: running()dan content: element().

Contoh dari konsep Pembuatan Konten CSS untuk Modul Media Paged :

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

.runner { 
  position: running(heading);
}

.runner dapat berupa elemen apa saja dan headingmerupakan nama arbitrer untuk slot.

EDIT: untuk memperjelas, pada dasarnya tidak ada dukungan browser jadi ini sebagian besar dimaksudkan untuk referensi di masa mendatang / di samping 'jawaban praktis' yang sudah diberikan.

sol
sumber
Hei, bisa kau jelaskan ini sedikit lagi. Saya tertarik dengan teorimu tetapi sepertinya tidak bisa menjalankannya. Bagaimana saya akan memasukkan, katakanlah, tag jangkar menggunakan metode ini atau div.
Neil
masalahnya adalah bahwa saat ini pada dasarnya tidak ada dukungan browser, tetapi renderer HTML khusus mengimplementasikannya sesuai spesifikasi. Berita tidak baik selanjutnya adalah bahwa tampaknya tidak ada implementasi open source yang baik; sebagian besar adalah produk SaaS seperti princexml.com .
sol