CSS: L'utilisation de l'attribut de données URL de contenu

J'ai un div qui me permet d'afficher un code QR de l'URL de la page courante:CSS: L'utilisation de l'attribut de données URL de contenu

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

Et utilisé comme:

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

De toute évidence, Pour obtenir l'URL actuelle à la volée, je dois mettre ce style CSS dans le <head> de ma page. J'essaie de le déplacer vers la feuille de style.

J'ai eu l'idée d'utiliser un attribut de données pour spécifier l'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>

Alors, ma question est, est-il possible de doubler l'utilisation de content:url() et attr(data-url) dans la feuille de style?

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

Source

2016-05-21 JROB

Notez que les propriétés height et width ne redimensionnent pas réellement l'image insérée. Voir http://stackoverflow.com/questions/14978807/can-you-apply-a-width-to-a-before-after-pseudo-element-contenturlimage – BoltClock

@BoltClock: Merci, mis à jour. – JROB

Ceci est une fonctionnalité proposée pour attr() dans css-values-3. Le CSS ressemblerait à ceci:

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

Malheureusement there are no known implementations, donc ce n'est pas encore possible.

Source

2016-05-21 13:36:51 BoltClock

CSS: L'utilisation de l'attribut de données URL de contenu

Répondre

Questions connexes