IP Girl
  1. IP Girl
  3. Valeurs CSS utilisant l’atsortingbut de données HTML5
Intereting Posts
Impossible de lancer le serveur Web IIS Express Augmentation soudaine et étrange des téléchargements d’applications depuis la Chine sur iTunesConnect? Comment accéder aux atsortingbuts en utilisant Nokogiri Quelles sont les options pour optimiser SVG? MS C ++ 2010 et mspdb100.dll Comment définir le texte à afficher à partir de la disposition de l’en-tête du tiroir dans le tiroir de navigation sans gonfler la vue Dans Maven, comment exclure des ressources du fichier jar généré? Rails: Un moyen élégant d’afficher un message lorsqu’il n’y a pas d’éléments dans la firebase database Comment se connecter à un programme Java sur localhost jvm en utilisant JMX? C – déterminer si un nombre est premier Comment concaténer un std :: ssortingng et un int? NuGet: ‘X’ a déjà une dépendance définie pour ‘Y’ Comment append un fichier JAR dans NetBeans Il ne peut y avoir qu’une seule colonne automatique Obtenir le nom de la classe en cours, y compris le package

Valeurs CSS utilisant l’atsortingbut de données HTML5

 
width: attr(data-width);

Je veux savoir s’il est possible de définir une valeur CSS en utilisant l’atsortingbut de data- HTML5 de la même manière que vous pouvez définir le content CSS. Actuellement, cela ne fonctionne pas.

HTML

CSS 

 div { width: attr(data-width) }

Il existe, en effet, prévision pour une telle fonctionnalité, regardez http://www.w3.org/TR/css3-values/#attr-notation

Ce violon devrait fonctionner comme vous en avez besoin, mais pas pour le moment.

Malheureusement, il s’agit toujours d’un brouillon et n’est pas entièrement implémenté sur les principaux navigateurs.

Cela fonctionne pour le content sur des pseudo-éléments, cependant.

Vous pouvez créer avec javascript des rules css que vous pourrez utiliser plus tard dans vos styles: http://jsfiddle.net/ARTsinn/vKbda/ 

 var addRule = (function (sheet) { if(!sheet) return; return function (selector, styles) { if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); if (sheet.addRule) return sheet.addRule(selector, styles); } }(document.styleSheets[document.styleSheets.length - 1])); var i = 101; while (i--) { addRule("[data-width='" + i + "%']", "width:" + i + "%"); }

Cela crée 100 pseudo-sélecteurs comme ceci: 

 [data-width='1%'] { width: 1%; } [data-width='2%'] { width: 2%; } [data-width='3%'] { width: 3%; } ... [data-width='100%'] { width: 100%; }

Note: Ceci est un peu hors-propos, et pas vraiment ce que vous (ou quelqu’un) veut, mais peut-être utile.

A ce jour, vous pouvez lire certaines valeurs des atsortingbuts de data HTML5 dans les déclarations CSS3. Dans le violon de CaioToOn, le code CSS peut utiliser les propriétés de data pour définir le content .

Malheureusement, il ne fonctionne pas pour la width et la height (testé dans Google Chrome 35, Mozilla Firefox 30 et Internet Explorer 11).

Mais il existe un CSS3 attr () Polyfill de Fabrice Weinberg qui prend en charge data-width data-height et data-height . Vous pouvez trouver le repo GitHub ici: cssattr.js .