CSS: Mit den Daten-Attribut als Content-URL

Question

So habe ich ein div, die mir einen QR-Code der aktuellen Seite URL angezeigt werden können:

.page-qr:before { 
    content: url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8); 
    height: 100px; 
    width: 100px; 
} 

und verwendet wie:

<div class="page-qr"> </div> 

Offensichtlich Um die aktuelle URL im laufenden Betrieb zu erhalten, muss ich dieses CSS-Styling in die meiner Seite einfügen. Ich versuche, es in das Stylesheet zu verschieben.

Ich hatte die Idee, ein Datenattribut zu verwenden, um die URL angeben:

<div class="page-qr" data-url="https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8"> </div> 

Also, meine Frage ist, ist es möglich, die Verwendung von content:url() und attr(data-url) im Stylesheet zu verdoppeln?

.page-qr:before { 
    content: url(attr(data-url)); /* Doesn't work, but you get the idea */ 
    height: 100px; 
    width: 100px; 
} 

Answer 1

Dies ist ein vorgeschlagenes Merkmal für attr() in css-values-3. Die CSS würde wie folgt aussehen:

.page-qr:before { 
    content: attr(data-url url); 
    height: 100px; 
    width: 100px; 
} 

Leider there are no known implementations, so ist dies noch nicht möglich.