CSS + WordPress + Web Design
bd cinéma couleur css firefox google gratuit ie6 interface iphone javascript jeu musique navigateur new york photo photoshop police vidéo wordpress
29 Jun
Pour savoir ce que l’on peut utiliser sans craindre une incompatibilité entre navigateurs, on peut se fier à ces tableaux des propriétés HTML, CSS, DOM et ECMAScript. Il manque juste Webkit dans le lot.
Il y a par ailleurs un tableau résumant tout.
25 Jun
Que faire face à IE6 ?
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.
24 Jun
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).
17 Jun
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 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 :
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;}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;}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.
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;}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; }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.lessEt le fichier .css est automatiquement généré avec le même nom.
On peut aussi choisir un autre nom pour le fichier généré :
lessc monfichier.less monautrefichier.cssParce qu’un fichier CSS est souvent modifier, on peut automatiser la création du fichier .css à chaque modification du fichier .less :
lessc monfichier.less --watchD’ailleurs, si une erreur existe dans le code, le fichier .css ne serait pas généré. Bien pratique.
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.
6 May
Je me suis posé la question de savoir combien était divisé mon temps pendant que j’intégrais. J’ai divisé en 5 parties ce temps (peut-être en oubliant des parties) et évalué grossièrement leur répartition. Je suis arrivé à ce graphique :
Je code toujours en XHTML 1.0 Strict, et ça m’a évité pas mal de problème de Quirksmode je me rends compte. J’utilise au maximum les balises sémantiques <p>,<ul>,<label>,<hn>,<strong>… mais je suis de moins en moins réticent à multiplier les <div> et <span>. D’un côté, c’est cool d’éviter la divite, c’est joli, c’est léger. Mais en pratique, et surtout pour les gros sites, il faut être très spécifique quant aux styles à appliquer à certains éléments. Donc je rajoute une ou deux div par ci par là pour améliorer ma productivité et surtout la flexibilité du code. Ca facilite grandement la différenciation. Et ça permet surtout de prévoir d’eventuelles évolutions de fonctionnalités, et avoir une approche plus modulaire.
A force de prôner la séparation HTML (contenu) / CSS (mise en page), on a peur de modifier le HTML, comme si c’était devenu interdit voire impossible. Je me dis que les développeurs ne sont pas bien méchants et que l’on peut leur demander des modifs HTML, avoir plusieurs classes sur un même élément au lieu de répéter son code CSS pour pas grand chose (voir plus bas).
C’est évidemment très lié au HTML utilisé. Depuis quelques temps, je me suis fait un fichier reset.css qui utilise le Reset CSS de Yahoo! . Par contre, ce n’est pas un fichier que j’importe à chaque fois mais un code que je copie-colle en créant ma CSS. Parce que oui, je préfère garder une seule CSS pour tout le site. Niveau lisibilité, je n’ai pas trop de problème à utiliser un seul fichier parce que j’écris chaque sélecteur CSS sur une seule ligne. Niveau productivité, répartir des propriétés sur plusieurs CSS c’est passer beaucoup de temps de l’une à l’autre, trouver où se trouve ce sélecteur, éviter les conflits… J’évite. Et le seul vrai avantage d’avoir plusieurs CSS, c’est d’en appeler certaines dans certains cas, et d’autres dans les autres cas. Je préfère mettre une class au body pour différencier les pages, c’est beaucoup mieux.
Les exceptions pour utiliser plusieurs CSS sont : un fichier pour ie6, un fichier par couleur (si il y a des thèmes par couleur) et un fichier pour le print.
Je fais encore pas mal de contextualisation (ex: .bloc table tbody td.direction ) parce que ça permet d’éviter les conflits. + de contextualisation = – de classes à créer
Il y aussi le cas où vous voulez que plusieurs éléments HTML aient les mêmes propriétés CSS Dans ce cas, il y 3 choix :
La première méthode est à éviter : si on veut changer une propriété (ex: la couleur d’une bordure), il faut le changer autant de fois que l’on a copié-collé.
La deuxième méthode est la plus propre : le HTML reste relativement léger (= non alourdi de classes) mais la CSS est plus longue à maintenir. C’est ce que je faisais avant.
La troisième méthode est plus “modulaire” je dirais. Un élément HTML aura par exemple : class=”.maclasse .manouvelleclasse”. On rajoute donc une classe aux éléments qui ont le même style. Mmmh. Est-ce que c’est bien ? Est-ce que l’on sépare bien la mise en page du contenu ? Plus ou moins je dirais. En fait, dans le HTML, on ajoute la classe à tous les éléments qui doivent appraître de la même façon. Et si on veut plus qu’un élément n’aie plus ces propriétés ? Il faut supprimer la classe dans le code HTML. Ah. C’est pas bien. On ne devrait plus avoir à toucher au code HTML. En théorie, c’est vrai. Mais en pratique, c’est, d’une part, très rare de vouloir changer le style d’un seul élément, et d’autre part, pourquoi n’aurait pas-t-on le droit de modifier le HTML ? Une fois livré, on ne peut plus rien faire (voir § sur le HTML) ?
Je dois préciser une chose importante : cette méthode modulaire, je l’utilise surtout pour les blocs et les gros éléments, pour les éléments qui structurent et divisent l’affichage. Il faudrait que j’envisage de faire un article avec des exemples plus éloquents. 
J’ai déjà parlé de ce que l’on pourrait faire si IE6 n’existait plus. En fait, rendre un site compatible IE6, c’est du débuggage pur et simple. On doit utiliser des overflow:hidden, position:relative, display:inline… pour aucune raison valable si ce n’est faire plaisir aux internautes du siècle dernier (ou presque). Sans compter tout ce que l’on est privé de faire. Bref, une calamité.
Dans mon souci d’avoir un code lisible, pour moi et ceux qui retoucheront aux CSS, j’essaye d’avoir des noms de class/id simples mais efficaces. Simple, ça veut dire court. Avec 4 lettres, on peut faire pas mal de choses : .bloc, .nav, .main, .side… J’ai par exemple remplacé .pagination par .page. Ou mettre .srv au lieu de .service. C’est pas très méchant et ça permet d’avoir une CSS bien plus lisible (surtout si l’on contextualise ET que l’on met tout sur une ligne).
Et si je passe autant de temps, c’est aussi pour éviter d’appeler un élément “grillade” par exemple (alors que ça n’a rien à voir avec un barbecue). J’ai vérifié, elle y est encore.
Dernier point : découper le PSD. On voit directement si un PSD est fait par quelqu’un qui sait intégrer ou pas. J’ai de la chance, c’est souvent le cas. Mais lorsque ça ne l’est pas, il faut voir les effets de dégradés, les superpositions, les ombres qui dépassent… qui n’ont l’air de rien graphiquement, mais qui sont une calamité à intégrer. D’ailleurs, c’est une calamité à cause d’IE6! Parce que pour IE6, il faut tout aplatir! L’ombre doit aller avec l’élement qui la fait ET avec l’élément où elle se projette. N’est-ce pas logique ? Et bien non. Vive les PNG. C’est tout.
J’ai essayé de faire un rapide panorama de ce que doit faire un intégrateur. On se rend compte que le grand ennemi reste IE6. Les 40% cités correspondent au temps de débuggage, mais je suis sûr qu’on peut gagner du temps dans les autres domaines (découpage, css, html) si il n’y avait pas IE6. J’ai peut-être oublié des éléments, je ne sais pas. Vous avez des idées ? Des remarques ? Des critiques ?
4 May
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.
Dans les do’s on trouve par exemple :
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.
Dans les don’ts (à éviter donc) on a par exemple :
Le site aurait du rajouter “oublier de faire un lien sur le logo du site”!
27 Apr
J’avais lu un article sympa il y a quelques jours : “10 cool things we’ll be able to do once IE6 is dead“. Je me suis dit que j’allais me faire une petite liste perso.
Si IE6 n’existait plus :
En attendant, je galère encore.
3 Apr
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>.
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.
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)…
29 Mar
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 :
J’ai trouvé ça très sympa et très pratique : rajouter une image par-dessus les liens visités grâce à la CSS.
17 Feb
Si vous désirez créer un menu avec des <ul> et des CSS, voici le site qu’il vous faut : CSS Menus. Il regorge de plusieurs types de menus (horizontal, vertical, déroulant…) et les proposent même en téléchargement gratuit. Accessoirement, ce site constitue un bon moyen d’apprendre à créer des menus soi-même.
