Le Hollandais Volant

Oh cool !

J’ajoute le miens (notez que les numérotations elles-mêmes sont en CSS) : http://lehollandaisvolant.net/tuto/css/exemple17.html

via http://warriordudimanche.net/shaarli/?yeIMOg

« Ne JAMAIS utiliser des ID en CSS. »

Objection !
Les ID sont *beaucoup* plus rapides à parser pour le navigateur, justement parce qu’il y en a un seul dans tout un document html.

Il ne faut pas oublier qu’une page a un temps de chargement et un temps de parsage et de traitement : sous vous avez 5 éléments uniques, c’est débile de faire .el1, .el2, .el3, etc. : il faut faire #el1, #el2, #el3…

Et y’a encore pire : quand on fait « .class .clas .cla {} » c’est beaucoup plus long à traiter pour un navigateur que de donner un ID #cla au .cla (s’il est unique, évidemment).

Les ID ne sont pas à bannir : utilisez les quand il faut, utilisez vos neurones pour ça. Prenez un papier et notez les indices de priorité pour chaque élément.

D’ailleurs, il est aussi totalement inutile et contre-productif de faire « .classe #id {} » : le #id est déjà unique, donc préciser qu’il doit être dans un .classe ralentit l’ensemble.
(ça peut néanmoins être utile quand le fichier CSS sert pour plusieurs documents HTML différents : le ID est uniquement au document, pas au site)

Liens :
http://lehollandaisvolant.net/?mode=links&id=20120419122407
http://lehollandaisvolant.net/index.php?d=2011/06/20/16/25/08-
http://lehollandaisvolant.net/tuto/pagespd/#aff
http://www.commentcamarche.net/faq/33023-les-poids-css

Via : http://anadrark.com/links/?0yxlEw

Pas vraiment d’accord : j’ai horreur des scrollbars horizontaux, et je préfère que le contenu du site soit mis en avant, pas forcément les menus ou les encarts divers (archives, tags, etc.)

Utiliser « max-device-width » ça ne sert à rien ! S’il a un écran 27" et que le navigateur fait 1000px, l’affichage sera mauvais parce que la taille du navigateur n’est pas celui de l’écran.

J’ai également un écran divisé en parties : le navigateur d’un côté (2/3 de l’écran), comportant mes flux RSS sur 200px, Dragonfly pour le dev/debug quand je fais des pages web, à gauche j’ai un terminal et mon éditeur de texte et un autre navigateur avec un lecteur audio (youtube) ou VLC.
Ma page web n’a gère la place que de 900px en largeur.

En général on déconseille de mettre plus de 3 sélecteurs imbriqués : c’est mauvais pour le temps de rendu de la page.

Ce soir je tombe sur ça : #kIM tbody tr td table tbody tr td.last

8 sélecteurs, et sans classes ni ID. Pauvre navigateur…

Remonter ça, pourquoi pas.
Faut d’abord voir ce que dit la spécification exactement : le supposé bug est présent dans Firefox, Chrome et surtout Opera (connu pour suivre les spécifications à la lettre).

Après, ça se corrige biensûr en JS, mais le principe est de s’en passer justement. Sinon autant utiliser juste du JS (ça se fait en une seule ligne sur le onblur="") et pas le CSS (restons cohérent).

http://lehollandaisvolant.net/files/i.html

Par contre, je viens de voir que ça ne marche que si le html contient véritablement quelque chose dans le value="".

Si on le remplit, le formulaire dans est bien rempli, mais dans le code source, seulement en mémoire. C’est un peu débile.

Dans Blogo, j’utilise un champ de recherche qui s’agrandit au hover. Pratique.

Si je veux le laisser grand également quand il y a quelque chose dedans, j’utilise ce CSS :

#q:hover, #q:focus, #q:not([value=""]) {width: 200px;}
#q {width: 50px;}

La largeur sera de 50px normalement.
La largeur sera de 200px au hover, au focus et si le « value » n’est pas vide.

D’autre sélecteurs sont là : http://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html

Ouais, ben cette tendance de design pour tablettes, je n’aime pas.
En quoi c’est utile pour les PC ? Je préfère l’approche d’Apple : des icônes belles et finies, polies.

Idem pour le design : j’aime beaucoup ce que permet le CSS avec les dégradés et les couleurs, les effets de :hover et autres.

Tout ce monochrome, je suis très peu enthousiaste.

Yahoo a beaucoup d'astuces comme ça.

Les préfixes navigateurs ne se limitent pas à -o-, -ms-, -moz-, -khtml-, -webkit- !

Il y a aussi -icab- pour le navigateur du même nom, ou -xs- pour le module de synthèse vocale d’Opera.
Et aussi un pour les imprimantes HP : -hp- ou pour diverses télés ou marques de copieurs…

Et plein d’autres : http://wiki.csswg.org/spec/vendor-prefixes

Oui, le CSS est passionnant : quand on creuse un peu on trouve des trésors.

:O

Le réseau du métro de Londres. Ok.
En HTML et CSS uniquement. WHAT ?

Des kit de boutons/formulaires/UI en CSS.
Certains sont sympas.

ZE putain de truc qui me manquait.

Exemple plus que parlant : http://css-tricks.com/examples/BoxSizing/
Ça permet d’inclure ces putains de padding DANS le width au lieu de les ajouter.

Jusqu’alors j’utilisais un « width: 98%; padding: 1%; » pour voir une largeur totale de 100%.

Supporté par tout le monde (même IE8 :O) sauf Firefox (qui a besoin du -moz-). Ceci dit, Firefox est le seul à le supporter à 100%, les autres n’ont qu’on support partiel.

Je ne connaissais pas, mais il aurait été possible de la retrouver experimentalement.

C'est pas simple, de faire une bonne UI, encore moins quand cette dernière doit être responsive, donc la même interface mais avec un design différent...

Edit : on pourrait compléter cette loi, en comptant le temps entre un point et le moment où l'action voulue est réalisée : les interfaces en "hover" sont alors bien plus rapides que les interface où les menus s'affichent par un clic.

Mais pour le hover il faut faire gaffe : j'ai déjà fait des menus déroulants (en css) déroulant sur plein de niveaux. Une seule erreur, un seule instant où le curseur sort de l'élément et c'est le drame. J'ai trouvé la solution : utiliser les foctions de timing CSS pour retarder le "unhover" quelques fractions de secondes.

:O
Puissant, les CSS !
(à voir dans Firefox ou Chrome)