Article intéressant sur comment gérer les images dont le lien est cassée.
Plutôt que le navigateur affiche le texte alternatif de façon habituelle, il est possible avec du CSS d'adapter le comportement en sachant que :
1. on peut typographiquement styler l’élément <img>, cela n’affectera pas l’image si elle s’affiche ;
2. L’élément <img> étant contrôlé par une source extérieure, les pseudo-éléments :before et :after ne peuvent pas fonctionner avec <img>. Cependant, lorsqu’une image ne s’affiche pas, et donc n’est pas chargée, ces pseudo-éléments peuvent apparaître.

Comment faire un loader uniquement en CSS :)

Comment animer avec du CSS des dessins SVG !

Chargement "différé" des fonts sur une page web pour un rendu plus rapide.

On charge les fonts via CSS, comme habituellement.
On définit les éléments avec ces polices comme fils de .fonts-loaded.
Via une API JavaScript, on détecte quand les fonts sont chargées et prêtes, et on ajoute la classe .fonts-loaded à l’élément body : les polices sont affichées.
⇒ pas de page sans police ou un blanc entre le chargement des polices !

Dans le même genre : http://www.zachleat.com/web/foft/

#container {
   max-height: 100%;
}

#container img {
   /* Keeps image from going outside the screen */
   max-height: 100%;
   max-width: 100%;
   /* Keeps image from beeing distorted */
   height: auto;
   width: auto;
   /* centering horizontally AND vertically */
   /* 50% of container */
   position: relative;
   top: 50%;
   left: 50%;
   /* 50% of image */
   transform: translate(-50%,-50%);
}

Comment transformer un tableau en un tableau responsive lisible sur des petits écrans

@media (max-width: 500px) {

/* table + tbody are blocks */
#mytable, #mytable tbody {
display: block;
width: 100%;
}

/* each row becomes table */
#mytable tr {
display: table;
margin-top: 20px;
width: 100%;
border-spacing: 5px 0;
}

/* each cell becomes a row (of the row that had become a table)  */
#mytable tr td {
display: table-row;
width: 100%;
}
}

Un petit update sur Shaarli, et sur un thème "material" qu'un dév propose.
Cela va certainement m'éviter de réécrire un thème, et la version "Shaarli" semble mise à jour !

Lien intéressant vers Wallabag pour sauvegarder des pages webs (voir si c'est un simple lien ou une archive complète).

Alors comme ça il y a une clef de registre dans Windows qui substitue automatiquement l'Helvetica à de l'Arial…

Website fait avec Bootstrap adapté. Idée de simplicité, petit menu, bien sympa.

Avec les avancées en CSS, il est possible d'utiliser de plus en plus de fonctionnalités typographiques du format OpenType en CSS, de quoi ravir les amateurs de jolies typographies.

Aujourd'hui je vous propose donc de découvrir le site Type Quest, une ressource en ligne qui vous permettra de transposer toutes les capacités des polices Open Type directement en CSS avec la propriété font-feature : ligatures, fractions, nombres, petites capitales, exposant, indice...