Change Color of SVG on Hover | CSS-Tricks

Changer la couleur d'un SVG, astuces.

  • le svg inline ou le SVG symbol + la propriété css fill: facile mais lourd puisque l'image est rechargée avec la page à chaque fois au lieu d'être mise en cache.
  • deux background SVG différents (un de chaque couleur): oui, merci mon con, on y aurait pensé tout seul... c'est pas tellement une astuce et ça multiplie par deux le nombre d'icônes. SU-PER.
  • un background SVG (ou SVG object) + un filter : pas bête... le plus dur étant de trouver la couleur que l'on souhaite à base de filters.
  • utiliser un masque de la couleur de fond du site (et donc l'icône en transparent dedans) puis définir la couleur de fond de l'image: oui, mais ça déplace le problème sur la couleur de fond.
  • Un SVG background sous forme de data:image/svg+xml dans le fichier CSS: retour à la méthode 1 mais en écartant le souci de chargement, puisque le fichier css sera mis en cache. Bon, il risque de peser sa tonne au premier chargement, mais bon...

C'est con que les fontes d'icônes soient un problème pour l'accessibilité, parce que ça reste quand même la solution la plus propre et optimisée, je trouve.

javascript - Converting HTML string into DOM elements? - Stack Overflow

Note pour plus tard: Transformer une chaine texte contenant du html en objet à inclure dans le DOM.


 var xmlString = "
<a href='http://www.warriordudimanche.net/tag/astuce#'>Link
"; doc = new DOMParser().parseFromString(xmlString, "text/xml"); console.log(doc.firstChild.innerHTML); console.log(doc.firstChild.firstChild.innerHTML);

apache 2.2 - Apache2 config variable is not defined - Server Fault

Si vous avez une erreur du style _ AH00111: Config variable ${APACHE_RUNDIR} is not defined quand vous faites un apache2 restart et que vous ne voulez pas vous prendre le chou, faites simplement ceci à la place:


sudo service apache2 restart


Chez moi ça a marché

7 Useful JavaScript Tricks

Je retiens:

Virer les false ou équivalents dans un array


 array.filter(boolean)

Mélanger des objets


const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes}; /* Object { "computer": "Mac", "editor": "Atom", "eyes": "Blue", "gender": "Male", "hair": "Brown", "handsomeness": "Extreme", "name": "David Walsh", } */

Récupérer la query string


// Assuming "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

Récuperer l'URL absolue

var getAbsoluteUrl = (function() {
    var a;
    return function(url) {
        if(!a) a = document.createElement('a');
        a.href = url;
        return a.href;
    };
})();
// Usage
getAbsoluteUrl('/something'); // https://davidwalsh.name/something

Fil RSS des articles de ce mot clé