CSS içerik özelliği: Metin yerine HTML eklemek mümkün mü?

246

Sadece bir şekilde CSS contentözelliğinin html kodu yerine dize :beforeveya :afterbir öğe eklemesinin mümkün olup olmadığını merak etmek :

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

bu oldukça kullanışlı olurdu ... Javascript ile yapılabilirdi ama bunun için css kullanmak gerçekten hayatınızı kolaylaştıracak :)

— zanona
kaynak

@Kaiido OMG ... değil, sorunun tarihini kontrol etmedim, cevabınıza atıfta bulundum ... gerçekten üzgünüm, bu iki yorumu da silecek :)

— Ason

Yanıtlar:

210

Ne yazık ki, bu mümkün değil. Başına spec :

Oluşturulan içerik belge ağacını değiştirmez. Özellikle, belge dili işlemcisine geri beslenmez (örn. Yeniden çözümleme için).

Başka bir deyişle, dize değerleri için bu, değerin her zaman tam olarak işlendiği anlamına gelir. Kullanılan belge dilinden bağımsız olarak asla biçimlendirme olarak yorumlanmaz.

Örnek olarak, verilen CSS'yi aşağıdaki HTML ile kullanma:

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

... şu çıktıyı verir:

<a href="#top"> Geri </a> Başlık

— BoltClock
kaynak

kabul etti, ancak urlözelliklerine sahip resimler için zaten desteğe sahip olduğunu düşünüyorsanız , bu perspektifte bir bağlantı eklemek o kadar farklı olmaz.

— zanona

@ludicco: Bunun nedeni, görüntülerin kendilerinin DOM öğeleri (sayılmamaları <img>) olmadığı için, sadece mevcut öğelerin üzerine çekiliyor olmalarıdır, bu nedenle arka plan veya liste resimleri uygulayarak DOM'yi gerçekten değiştirmezsiniz.

— BoltClock

Teşekkürler, bu yüzden bu fikri

— iletip

@ludicco: Güzel soru. Ben bile bu mümkün olduğunu umarak SO arıyor.

— Robin Maben

@watson: Diğer soruya cevabını gördüm. Haklısın; Muhtemelen cevabımda keyfi işaretleme ekleyemeyeceğinizi açıklığa kavuşturmalıyım - url()bunun yerine başka bir görüntüde olduğu gibi harici bir dosya belirtmeniz gerekir .

— BoltClock

@ BoltClock'un cevabındaki yorumlarda neredeyse belirtildiği gibi, modern tarayıcılarda , url()svg <foreignObject>öğesiyle birlikte ( ) kullanarak sözde öğelere bazı html işaretlemesi ekleyebilirsiniz .

Gerçek bir svg dosyasına işaret eden bir URL belirtebilir veya dataURI sürümüyle oluşturabilirsiniz ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))

Ancak, bunun çoğunlukla bir saldırı olduğunu ve birçok sınırlama olduğunu unutmayın:

Bu işaretlemeden herhangi bir harici kaynak yükleyemezsiniz (CSS yok, görüntü yok, medya yok vb.).
Komut dosyası yürütemezsiniz.
Bu DOM'un bir parçası olmayacağından, değiştirmenin tek yolu, biçimlendirmeyi dataURI olarak geçirmek ve bu dataURI'yı düzenlemek document.styleSheets. bu bölüm için DOMParserve yardımcı XMLSerializer olabilir .
Aynı işlem, <img>etiketlerde url kodlu medya yüklememize izin verirken , bu sözde öğelerde çalışmaz (en azından bugün itibariyle, olmaması gereken herhangi bir yerde belirtilip belirtilmediğini bilmiyorum, bu yüzden henüz uygulanmayan bir özellik olabilir).

Şimdi, sözde bir öğede bazı html işaretlemesinin küçük bir demosu:

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

Snippet'i genişlet

— Kaiido
kaynak

Cevabınıza rastladım ve bu benim kendi sorunlarım için bir çözüm. Bir dosyaya işaret eden bir URL'nin nasıl biçimlendirileceğini açıklayabilir misiniz? Denedim url('/relativePathToMySvg/mySvg.svg')ve işe yaramadı

— Frank

@Frank, spesifikasyonlara göre, göreli bir yol kullanmak css dosyanızın yoluna göreceli olacaktır, yani css dosyanızı /root/css/yourFile.cssgirdiyseniz, göreceli bir funcIRI gibi yourFile.svgişaret eder /root/css/yourFile.svg/. Ancak, daha önceki bazı UA'ların bir hata olduğunu ve belgenin baseURI'sine göre yaptığını hatırlıyorum. Bu yüzden en güvenli yol sadece mutlak yolu kullanmaktır.

— Kaiido

@BoltClock, gerçekten mi? Bunun için gerçekten üzgünüm. Bu 6 yaşındaki soruya başka bir soru ile geldim ve bir güncelleme olarak yayınlamak zorunda olduğumu hissettim, ama belki cevabınızın iyi olduğunu ve 6 yıl önce kesinlikle doğru olduğunu daha da netleştirmeliyim? Veya bir başlık olarak sığabilecek iyi ifadelere sahipseniz, cevabımı düzenlemekten çekinmeyin.

— Kaiido

Güzel. Kullandım: content: url('../../images/como-funciona.svg');ve iyi çalışıyor

— Eliut Islas

İşte cevabı biraz daha derinlemesine inceleyen daha önceki bir yazı: bir-html-belge-veya-html-parça-css-içeriğinde görüntülenmesi mümkün

— Ason

CSS3 bu kullanarak mümkündür medya sayfalı position: running()ve content: element().

Sayfalı Medya Modülü taslağı için CSS Oluşturulmuş İçerik örneği :

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

.runner { 
  position: running(heading);
}

.runner herhangi bir öğe olabilir ve headingalan için isteğe bağlı bir addır.

DÜZENLEME: açıklığa kavuşturmak için, temelde hiçbir tarayıcı desteği yoktur, bu nedenle bu çoğunlukla gelecekteki referans için / zaten verilen 'pratik cevaplara' ek olarak amaçlanmıştır.

— sol
kaynak

Hey, bunu biraz daha açıklayabilir misin? Teorinizle ilgileniyorum ama bunu yürütmesini sağlayamıyorum. Bu yöntemi veya bir div'ı kullanarak bir bağlantı etiketini nasıl eklerim?

— Neil

sorun şu anda temelde hiçbir tarayıcı desteği olmaması, ancak özel HTML oluşturucuları spesifikasyona göre uygular. Bir sonraki pek de iyi olmayan haber, iyi bir açık kaynak uygulaması olmadığı yönünde; çoğu princexml.com gibi SaaS ürünleridir .

— sol