blog

Vestiges d’un CSS Guru

Catégorie : XHTML / CSS

Billet

Mais arrêtez avec IE6!

Je le dis et je le répète : il faut arrêter de s’acharner à faire fonctionner parfaitement son site sous IE6. Chaque semaine, il y a un nouvel article qui prône cette idée, et c’est très bien.

stop-ie6

Est-ce qu’un site doit apparaître exactement pareil sous chaque navigateur ?

Pour ceux qui ne le sauraient pas encore : la réponse est non.

Notez l’adverbe “exactement”. Parce que d’un côté, il faut que l’utilisateur puisse reconnaître un site, quel que soit le navigateur utilisé. Mais des différences (plus ou moins) légères dans le graphisme sont non seulement tolérées mais parfaitement admises. Ne pas avoir de coins arrondis (par CSS ou PNG), de dégradés complexes (par PNG), des ombres portées… sous IE6 n’est pas un problème.

C’est surtout qu’un utilisateur d’IE6 ne verra aucune dégradation dans sa version vu qu’il ne verra pas la “bonne version”!

Et puis d’abord, tout le monde n’a pas toutes les polices utilisées sur un site (Arial inexistant sous Linux ?), donc il y a déjà obligatoirement des différences, et des grosses différences : la typographie c’est au moins la moitié du design.
Lire la suite →

Billet

Modernizr : un JavaScript pour utiliser du HTML 5 et du CSS 3 dès maintenant

modernizr

Si vous en avez marre d’attendre que le grand public mette à jour ses navigateurs pour pouvoir utiliser du HTML 5 et du CSS 3, vous pouvez utiliser Modernizr :

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Je testerai sans doute à la prochaine refonte du site, c’est à dire prochainement (?).

Billet

CMS.txt : un CMS ultra-léger qui pèse 6kb

Vous êtes designer et vous voulez monter un site, mais vous êtes une quiche en programmation, alors vous vous tournez vers un CMS (Content Management System pour les novices) pour gérer votre contenu. Vous hésitez entre Drupal, WordPress, Joomla (mauvais), Expression Engine, Movable Type, Spip

Mais vous trouvez ça trop lourd. Vous voulez pas d’usine à gaz. Vous voulez un truc super basique. Il y a Pluxml qui est sympa, un CMS tout léger motorisé à l’XML. Mais CMS.txt c’est radical : 6kb pour un CMS.

cms.txt

Pour gérer le site, ça donne ça :

/* -------- Website -------- */

name: My Website Title
theme: awesome-blue
missing: 404.html
foo: bar

Si quelqu’un le teste, j’apprécierais un feedback dessus!

Billet

Le XHTML 2 c’est fini. Le HTML 5 s’en trouve renforcé.

w3c_main

Vous êtes sans doute au courant que le groupe travaillant sur le XHTML 2 va s’arrêter à la fin de l’année, pour notamment rejoindre le groupe du HTML 5. C’est moins laisser tomber quelque chose que se concentrer sur un seul standard.

Différence XHTML / HTML

La différence principale entre le XHTML et le HTML est la rigueur du code. Un document XHTML nécessite de n’inclure aucune erreur de syntaxe pour être bien rendu, alors qu’un document HTML peut se permettre de contenir certaines erreurs. Ca vient du moteur de rendu du navigateur qui gère les deux documents différemment. Ca ne veut pas dire qu’il faut être négligeant dans l’écriture du code pour autant. Mais c’est plus propre d’avoir à se tenir à une syntaxe rigoureuse.

Le HTML a l’avantage d’être davantage rétro-compatible. Les navigateurs plus anciens arrivent à mieux lire un document HTML récent qu’un document XHTML récent. Ca vient sans doute du côté “léger” de sa rigueur.

Concrètement, ça change quoi cette fin du XHTML 2 ?

A vrai dire, pas grand chose car c’est dans la logique des choses. Depuis quelques mois, le HTML 5 n’arrête pas de faire parler de lui. Les navigateurs commencent à bien l’implémenter (Safari 4, Opera et le tout récent Firefox 3.5). Et il a un gros potentiel. Pour en savoir plus, vous pouvez lire ma petite introduction au HTML 5.

Etant un adepte du XHTML 1.0 (pour des raisons de rigueur de code et pour éviter le Quirks Mode), je n’aurais pas à choisir entre le HTML 5 et le XHTML 2. Il n’y en aura plus qu’un. Et puis le HTML 5 aura aussi sa “version XML“. Donc je pourrais toujours imposer au document d’être totalement propre.

Je pense que cette fin du XHTML 2 est une bonne chose (même si ce n’est pas la fin du XHTML). Pas de casse-tête avec plusieurs standards à suivre, et un renforcement du HTML 5, ce qui va amener les navigateurs à être encore plus plongé dans le HTML 5 et va faciliter cette tâche.

Billet

Les mauvais conseils de Google en CSS

google-code

L’objectif de Google, avant tout, c’est la performance. Ils publient d’ailleurs des conseils pour optimiser l’affichage du navigateur.
A la trappe les standards, la beauté, la clarté du code. Extraits choisis.

Prefer class and ID selectors over tag selectors

Mettre uniquement des .class et des #id et pas de a{ color:#0072c;} ou de input{ font-family:Arial,sans-serif;}. Mouais. Faut mettre une classe sur tous ses liens alors ? Génial.

Remove class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway)

En gros, pas de a.maClasse et de p.maClasse. Créer plutôt 2 classes : .maClassePourUnLien et .maClassePourUnParagraphe, même si les deux classes partagent les mêmes propriétés, à une près (sinon quel intérêt de les différencier). Mouais, bof. Si je veux que .maClasse soit d’un style particulier mais que les liens ayant .maClasse aient une propriété différente, je vais pas m’amuser à créer une autre classe juste pour ça.

Use class selectors instead of descendant selectors

Je reprends le mauvais exemple de Google :

/* Ne pas mettre */
ul li {color: blue;}
ol li {color: red;}
/* Mais mettre */
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

Bien sûr. Je vais mettre une classe sur tous mes <li>…

Avoid the :hover pseudo-selector for non-anchor elements

Pas de :hover en CSS mais des onmouseover en JS. Et si le gars a pas de JS ?

Bref, pour optimiser votre code, mettez des classes sur tous vos éléments! Merci Google!

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

Futurebox = Lightbox sans JavaScript

futurebox

J’aimais pas trop les lightbox au début, un peu trop “fancy” à mon goût. Certains la critiquaient même exagérément. Bref, que l’on aime ou pas, ça utilise techniquement toujours du JavaScript.

Mais un ninja a réussi à le réaliser sans JavaScript, juste en CSS. Ca utilise la pseudo-classe :target. Et il appelle ça Futurebox.

Ok, ça marche pas sous IE (6,7,8) mais qu’est-ce qu’on s’en fout. Tiens d’ailleurs, gros f*ck à Microsoft pour son discours de merde (IE8 = le meilleur navigateur du monde entier de l’univers) et ses décisions de merde (Outlook 2010 utilisera le moteur de Word pour afficher le HTML).

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.