Cipher Bliss

jeudi 13 mars 2014

CSS split circles

Capture_du_2014-03-13_13_49_58.png Pour un exercice donné par Nadir Kademe je me suis lancé dans une démo de Javascript / CSS où l'on découpe des cercles de couleur en passant le curseur dessus. Au bout d'une heure la démo n'était pas super opérationnelle, mais une heure de plus et voici la démo visible sur mon portfolio et disponible sur github, ainsi chacun peut se l'approprier et la bidouiller à loisir. possibilités: choix de mélanger les couleurs ou non avec le cercle parent. choix de couleurs plutôt claires, grises ou foncées comme batman les aime. choix de profondeur de découpe. cercles ou carrés.

Jouez zy donc sur artlemoine.com : http://artlemoine.com/circles

vendredi 3 mai 2013

Problème avec le sélecteur CSS :last-child

Peut être vous êtes vous déjà demandé pourquoi votre sélecteur :last-child ne ciblait pas le dernier élément de la classe que vous lui avez passé. Nous avons explication: c'est parce que ce sélecteur se base sur l'élément où s'applique la classe, et qu'il choisit le dernier élément. Admettons que nous ayons ce code HTML

<nav>
	<div class="panel">mon item</div>
	<div class="panel">mon item 2</div>
	<div class="panel">mon item 3</div>
	<div class="panel">mon item 4</div>
	<div class="clear"></div>
</nav>

et ce code CSS pour avoir en fond rouge le derner .panel.

.panel:last-child{
	background: red;
}

Surprise, aucun élément .panel n'a de fond rouge, et surtout pas le dernier (4e enfant de <nav>). Il semblerait que c'est un bug CSS non résolu à ce jour, et que comme le dernier div n'est pas de la class panel, il ne soit ciblé, et ne renvoie pas un test concluant. Donc, n'applique pas le style demandé.

Et oui jammy, même dans Chrome supportant parfaitement le CSS3. Cependant, je suis toute ouïe si vous avez une meilleure explication.

mercredi 4 janvier 2012

Se débarrasser de IE 6

Quand est ce qu'on pourra enfin se débarrasser de IE 6 (certains veulent le sauver :D http://www.saveie6.com/ heureusement que c'est pour déconner) quand on considère la conception d'un design pour le web? Hébien, très bientôt il me semble.
ce qui permettra de faire plein de choses cool comme utiliser les sélecteurs d'enfants en css, min-width, max-width, ne plus passer 90% du temps de design à trafiquer le style pour que ça s'affiche pareil pour chaque visiteur, gagner du temps (et donc du pognon), pouvoir se servir de z-index, bosser dans la joie et la bonne humeur. Levons les bras \o/ Vous pouvez accélérer le mouvement en plaçant sur vos sites un encart conditionnel incitant vos visiteurs à prendre conscience qu'ils utilisent une technologie trop vulnérable, trop vieille et qui leur pourrit leur expérience utilisateur, comme je l'ai expliqué dans ce billet.

J'ai pris les statistiques de fréquentations de w3c school pour monter ces petits graphiques avec le tableur open office: versions IE 2009 2011

navigateurs 2009 2011 Ici on peut donc voir l'avancée de chrome et le léger recul de internet exlporer en général entre 2009 et fin 2011. resolutions Pour les résolutions d'écran, la plupart des gens en ont des plus grandes que 1024px de large, ce qui permet d'envisager des designs de sites de plus des sacro saints 960px de large pour le contenu.