blog

Vestiges d’un CSS Guru

Catégorie : Astuces

Billet

Une CSS universelle pour IE6

Que faire face à IE6 ?

  • s’embêter avec des hacks CSS ?
  • faire 2 versions du site ?
  • laisser les bugs partout ?
  • utiliser une CSS alternative ?
  • utiliser du JavaScript pour améliorer la compatibilité ?

IE6, c’est vieux, c’est lourd, c’est moche, c’est chiant. Ca prend du temps, pour pas grand chose, et pour de moins en moins de monde (20% grande moyenne à l’échelle mondiale).

Et puis le web, c’est pour le contenu avant tout. Au lieu d’avoir un site buggé de partout sur IE6, pourquoi ne pas offrir une CSS propre et claire ? C’est l’idée derrière Universal Internet Explorer 6 CSS.

css-universelle-ie6

Billet

Créer des CSS dynamiques avec LESS : un compilateur de CSS en Ruby

less-compilateur-de-css

Ca peut paraître bizarre comme outil, un “compilateur de CSS”, mais LESS est avant tout un outil pour écrire plus efficacement une CSS. Ca rend les CSS dynamiques. C’est un outil écrit en Ruby. J’en parle aussi d’ailleurs sur 29minparjour.

LESS = extension de CSS

LESS se veut être une extension de CSS parce que la syntaxe utilisée pour les fichiers .less (les fichiers source) est très proche de la syntaxe CSS. L’efficacité de cet outil consiste en 4 éléments :

  1. Variables en CSS
  2. Mixins : des includes CSS
  3. Nested Rules : une autre façon de définir des sélecteurs d’arborescence
  4. Operations : addition, soustraction, multiplication, division

Variables CSS

En utilisant des variables, on peut regrouper une valeur à un seul endroit pour pouvoir la mettre à jour facilement par la suite.

@maCouleurPrincipale: #0072bc;
a{ color:@maCouleurPrincipale;}
h1{ color:@maCouleurPrincipale;}

Mixins : des includes CSS

Dans une classe, je peux définir plusieurs propriétés puis inclure cette classe dans d’autres éléments. Ca peut s’avérer très pratique pour les propriétés CSS 3 qui ont une syntaxe différente par navigateur.

.coinsArrondis{ border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
#global{ .arrondis;}

Nested Rules

Cet outil est le moins intéressant des 4. Il permet de gagner un peu en lignes de code mais je ne le trouve pas très lisible.

#header{
background:#fff;
position:relative;
	.logo{
	position:absolute;
	right:0px;
	}
}

Au lieu d’écrire #header puis #header .logo, je mets directement .logo dans #header.

Opérations

Ca permet d’utilisation des opérations arithmétiques traditionnelles : addition, soustraction, multiplication, division. Ca peut-être pratique si on veut que les marges verticales soient le double des marges horizontales.

@marges:5px;
#global{ margin:@marges*2 @marges;}

Exemple complet

J’ai fait un exemple complet utilisant plusieurs fonctionnalités de LESS. Voici mon fichier source bbxdesign.less :

@color01:#0072bc;
@radius:10px;
.radius{ border-radius:@radius; -moz-border-radius:@radius; -webkit-border-radius:@radius;}
@margin:5px;
body{ color:#333; font-family:Georgia,serif;}
a{ color:@color01; text-decoration:none;}
#global{ background:#fff; .radius; margin:@margin @margin*2;}

Et voici le fichier généré bbxdesign.css :

.radius { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
a { text-decoration: none; color: #0072bc; }
body { font-family: Georgia,serif; color: #333; }
#global { -webkit-border-radius: 10px; margin: 5px 10px; background: #fff; -moz-border-radius: 10px; border-radius: 10px; }

Installation

Tout se fait en lignes de commande. Il faut avoir Ruby installé sur son ordinateur et installer la gem suivante :

gem install less

Ensuite, en navigant dans le dossier où se trouve le fichier .less, on fait :

lessc monfichier.less

Et le fichier .css est automatiquement généré avec le même nom.

Nom de fichier différent

On peut aussi choisir un autre nom pour le fichier généré :

lessc monfichier.less monautrefichier.css

Automatisation

Parce qu’un fichier CSS est souvent modifier, on peut automatiser la création du fichier .css à chaque modification du fichier .less :

lessc monfichier.less --watch

D’ailleurs, si une erreur existe dans le code, le fichier .css ne serait pas généré. Bien pratique.

Conclusion

Il existe plusieurs méthodes pour avoir des CSS dynamiques. J’en ai déjà vues en PHP ou JSP. Mais ces outils génèrent souvent les CSS à la volée, et il faut donc avoir un serveur derrière qui tourne. Ici, le fichier est “compilé” une bonne fois pour toutes.

Autre avantage : la syntaxe de LESS est très proche de la syntaxe CSS. Il est très facile de prendre une CSS existante et la transformer en fichier LESS. Ca m’a pris 2min d’ailleurs.

Après, est-ce que je vais l’utiliser au quotidien ? Ecoutez, je vais essayer.

Billet

ColoRotate : les couleurs en 3D

colorotate

Il existe pleins de générateurs de palette de couleur, notamment kuler. Ici, ColoRotate se distingue par une interface 3D où l’axe horizontal correspond à la saturation, et le vertical à la teinte. On peut aussi choisir sur une échelle de blend entre 2 couleurs. Il suffit d’utiliser le menu en bas à droite pour passer de l’un à l’autre.

* Usability Post

Billet

Les bonnes et mauvaises pratiques en web design

bonnes-et-mauvaises-pratiques-en-web-design

The do’s and don’ts of modern web design regroupe les bonnes pratiques (do’s) et les mauvaises pratiques (don’ts) en web design. A chaque fois, un lien est fourni vers un article expliquant pourquoi c’est une bonne ou mauvaise pratique.

Bonnes pratiques

Dans les do’s on trouve par exemple :

  • mettre les scripts en bas de page
  • utiliser la bonne Doctype
  • utiliser les sprites CSS (j’suis à moitié convaincu par celle-là)
  • valider son code (pratique pour le présent et le futur)
  • écrire de bons attributs class et id (je déteste les class=”blue” et autres class=”alignleft”)

Il faut dire qu’en l’occurence le conseil “Mix and match Classes” contredit un peu le “Write good class and id names” parce qu’il crée une classe “bordered” (bouh pas bien). Mais dans l’ensemble ça reste cohérent.

Mauvaise pratiques

Dans les don’ts (à éviter donc) on a par exemple :

  • souligner ce qui n’est pas un lien (j’en vois encore)
  • utiliser @import
  • mal écrire son text “alt” pour les images
  • forcer l’ouverture d’une fenêtre (laissez moi le choix bordel!)
  • utiliser les pixels pour le texte (ça dépend du design je dirais…)

Le site aurait du rajouter “oublier de faire un lien sur le logo du site”!

Billet

Forcer le retour à la ligne en CSS

Je ne connaissais pas cette astuce et j’en avais besoin pour mon tout récent blog 29minparjour.com où je poste beaucoup de code dans des balises <pre>.

Syntaxhighlighter ? Pas une solution pour moi.

Au début, je voulais utiliser le syntaxhighlighter (très connu et très utilisé) mais je n’aimais pas avoir à spécifier à chaque fois dans le html que tel bloc devait être stylé, et dans quel language. De plus, le code à insérer (name=”code”) n’est pas valide…

J’avoue que le rendu est élégant (sauf avec la version 2.0, la dernière en date). D’ailleurs, Viget Labs avait amélioré le JS en permettant d’agrandir la fenêtre au survol. Une belle amélioration.

Malgré tout, c’était au niveau HTML que je trouvais ça laborieux. Je voulais quelque chose de tout simple.

CSS, aide-moi!

Je voulais juste un simple retour à la ligne pour éviter que les balises <pre> ne dépassent en largeur. J’ai trouvé ça sur le site de Tyler Longren :

pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Ca fonctionne sous FF 3 et IE6. Le comble étant que le reste du site est un encore un peu cassé sous IE6… (soupir)…

Billet

Un lien marqué comme visité original

Je suis tombé sur ce post qui recense des sites d’applications iPhone, où le téléphone en lui-même s’avère être un élément de design redoutable. Mais au-delà du contenu de ce billet, ce qui m’a beaucoup plu c’est la manière dont un lien visité est marqué. Pour ceux qui ne le sauraient pas, il est possible de styler différemment les liens qui ont déjà été visités. Par défaut, les liens nouveaux sont bleus, les liens visités sont violets.

Bref, voici comment ils apparaissent sur ce site :

lien-visite-original

J’ai trouvé ça très sympa et très pratique : rajouter une image par-dessus les liens visités grâce à la CSS.