JROB JROB - 6 months ago 23
CSS Question

CSS: Using data attribute as content URL

So I have a div that allows me to display a QR code of the current page URL:

.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;
}


And used like:

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


Obviously, to get the current URL on-the-fly, I have to put this CSS styling in the
<head>
of my page. I am trying to move it to the stylesheet.

I had the idea to use a data attribute to specify the URL:

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


So, my question is, is it possible to double up the usage of
content:url()
and
attr(data-url)
in the stylesheet?

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

Answer

This is a proposed feature for attr() in css-values-3. The CSS would look like this:

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

Unfortunately there are no known implementations, so this still isn't possible.