Comment utiliser des codes couleur à 3 chiffres plutôt que des codes couleur à 6 chiffres en CSS?
J'ai récemment parcouru mon fichier CSS et changé tous mes codes hexadécimaux à 6 chiffres en codes simples à 3 chiffres (par exemple, mon #FDFEFF a été raccourci en #FFF). Il rend à peu près la même couleur qu'avant, il me semble que les parties intermédiaires sont assez inutiles et les supprimer m'a sauvé 300 octets dans mon fichier CSS.
Quelle est la version que vous utilisez? Je rencontre rarement des sites Web qui n'utilisent que les codes à 3 chiffres (ou je suppose que je ne les rencontre jamais). Est-il toujours parfaitement valable d'utiliser des codes à 3 chiffres plutôt que des codes à 6 chiffres, ou sommes-nous censés utiliser les codes complets à 6 chiffres?
Les codes à 3 chiffres sont des raccourcis, #123 est le même que #112233. Dans l'exemple que vous donnez, vous avez (effectivement) échangé #FDFEFF pour #FFFFFF, qui est proche de la couleur d'origine mais évidemment pas exacte.
Peu importe la version que vous utilisez, en tant que telle, mais les codes de couleur à 3 chiffres signifient que vous avez un peu moins de choix de nuances. Si vous pensez que sauver 300 octets en vaut la peine, alors allez-y et utilisez les codes à 3 chiffres, mais à moins que vous ne conceviez pour une situation à faible bande passante, ces 300 octets ne vous feront pas vraiment économiser beaucoup.
La sténographie craint! Ne l'utilisez pas. Il est plus difficile à entretenir et crée des variations inutiles, par exemple lors de la recherche et du remplacement d'une valeur de couleur ("oh, maintenant je dois prendre en compte #FFFFFF et white et #FFF ").
Ce que vous économisez en taille ne vaut jamais ce que vous perdez en maintenabilité. Utilisez la minifaction et la compression pour économiser la bande passante.
Si vous souhaitez enregistrer des octets, vous feriez mieux d'utiliser les techniques de minification CSS
Si vous l'utilisez dans un tableau en IE 7 8 ou 9 (malheureusement, cela est pertinent à la date de cette réponse)
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables
Les codes à 6 chiffres fonctionnent bien, mais les codes à 3 chiffres s'affichent en noir
<table border="1" bgcolor="#ff0000"> vs. <table border="1" bgcolor="#ff0">
Si les versions "3 chiffres" produisent la couleur dont vous avez besoin, vous pouvez l'utiliser autant que vous le souhaitez. Ce n'est certainement pas faux.
J'utilise toujours la sténographie. Le meilleur avantage est que je peux facilement me souvenir des codes.
Vous en avez encore 163 = 4096 couleurs au choix, devrait suffire.
Cependant, si vous enregistrez 300 octets dans les codes de couleur abrégés, cela signifie que vous avez 100 couleurs effacées dans votre CSS. À moins que votre page ne soit très diversifiée, ou tous les arcs-en-ciel et les fleurs, cela semble beaucoup. Vous pourriez être bon en CSS systématique, mais je vois souvent des règles CSS inutiles. EX: si vous définissez la même règle sur de nombreux éléments enfants qui auraient pu être remplacés par la définition de la règle sur les grands-parents et dans un élément d'exception à la place.
C'est vrai, mais cette transformation n'est pas générale:
#FFF == #FFFFFF
#CCC == #CCCCCC
Ce qu'il fait, c'est qu'il "double" chaque chiffre hexadécimal. Ce n'est donc pas la même couleur. Il est cependant possible qu'elle ait la même apparence car les différences sont minimes. Un flux de travail couleur calibré pourrait aider dans ce cas.
Peu importe que vous utilisiez des couleurs hexagonales ou hexagonales normales, alors allez-y et convertissez-les si vous le souhaitez.
les supprimer m'a sauvé 300 octets dans mon fichier CSS
Wow, 300 octets! : D, ftw sarcasme
La chose est à moins que vous ne réduisiez, compressiez et combiniez tous vos css, javascript, etc. 300 octets valent à peine la peine, d'autant plus que la vitesse Internet moyenne augmente.
S'amuser!