Archives par mot-clé : CSS

Ce qui me gène dans les frameworks CSS actuels

Publié dans HTML et CSS | 2 commentaires

Une chose me turlupine dans les frameworks CSS actuels. Twitter Bootstrap, Knacss, et d’autres que j’ai pu voir. C’est cette histoire de classes CSS réutilisables
Dans le principe, c’est super ! Je construis mon HTML avec des classes CSS spécifiques, et je sais que cela fait le rendu que je veux par la suite. C’est d’ailleurs bien pratique dans la vie réel. Mais parmi ces classes réutilisables, on trouve par exemple :

  • « left » (qui fait un float left sur un bloc),
  • ou « col » (pour un affichage en colonne).

J’ai pris les exemples dans Knacss parce que c’est le plus compréhensible.
Continuer la lecture

PhoneGap: first overview

Publié dans HTML et CSS | Un commentaire

PhoneGap is a platform for building mobile application using Web technologies: HTML, CSS and Javascript. Mobile platforms like Android, iPhone or Blackberry are not ready yet to manage such application, that is why PhoneGap is filling in the gap by providing a plugin system to use native call through Javascript.
This is very interesting platform because there is a global movement between Web technologies interacting with mobile, smartphone, … You know: HTML5, CSS3, Boot 2 Gecko (see also: B2G Wiki), Apache Cordova, SOCIETIES project, …


Continuer la lecture

Futurs articles sur le thème du développement Web

Publié dans Informations | Laisser un commentaire

Le Web et le développement de sites Web est toujours un de mes passes-temps (le tout reste d’avoir du temps), voici donc quelques sujets que j’aimerai aborder sur ce blog dans un futur proche. On verra ce qu’on peut faire 🙂

  • PHP
    • Doctrine, une librairie permettant de gérer sa base de données comme si l’on avait affaire à des objets. Un ORM quoi ! Elle a l’air très puissante et très utile mais je n’ai pas encore réussi à la prendre en main. Utilisé sous Synfony.
    • Twig, un moteur de template particulièrement efficace et facile à prendre en main. Utilisé sous Synfony.
    • Un exemple de structure MVC (avec des controller et des actions, un petit peu à la mode de Struts), l’idée étant de comprendre ce que font des frameworks comme Zend et Synfony.
  • HTML/CSS
    • Quelques tips HTML5
    • LESS, COMPASS et autre « améliorateur » du développement des CSS

Booster ses CSS

Publié dans HTML et CSS | 2 commentaires

Depuis que je suis sur Twitter (vous pouvez me suivre), j’ai l’occasion de lire plus d’articles sur le Web qu’auparavant et notamment quelques uns sur les CSS. Je vous livre donc mes découvertes et réflexions du moment.

CSS sur une ligne

Single line CSS en anglais. C’est le concept qu’il est mieux d’écrire ses CSS sur une seule ligne plutôt qu’en bloc. Par exemple en bloc :

ul li {
list-style:none;
border:1px solid black;
font-weight:bold;
}
dl dt {
width:800px;
}

donnerait sur une ligne

ul li{list-style:none;border:1px solid black;font-weight:bold;}
dl dt{width:800px;}

Le grand avantage c’est que ça réduit le poids du fichier CSS (assez significativement d’ailleurs, même si ça n’a pas grande influence sur le poids total d’une page Web), et ça évite de scroller des heures pour arriver à la fin du fichier. L’énorme inconvénient c’est que c’est moins lisible. C’est vrai, mais j’ai testé et en fait pas tant que ça. Pour ma part je pense que je vais adopter une sorte de mix : CSS sur une ligne, et CSS en bloc pour les lignes trop longue. Sans oublier de commenter les différentes parties du code, on n’est pas à 10 lignes près quand même !

Quelques exemples

Éviter les espaces superflues

Dans le même genre, histoire de grappiller quelques octets, c’est vrai que ça ne sert à rien de rajouter des espaces entre une propriété et sa valeur, une balise et l’accolade qui la suit. Bref, je suis pour d’enlever les espaces superflues ! Mais quand même, un espace entre chaque propriété quand on écrit en ligne : c’est cool pour les yeux !

Enlever les les sélecteurs

CSS superflues D’après PageSpeed (un outils de Google pas mal du tout pour tester la rapidité de ses pages Web), il serait avantageux de réduire au maximum la liste des sélecteurs CSS. Prenons l’exemple suivant :

#menu ul li{font-weight:bold;}

Préciser l’élément ul est en général superflue puisque pour un cas classique, il n’y aurait pas de li en dehors d’un ul dans #menu. Il vaudrait donc mieux écrire :

#menu li{font-weight:bold;}

Et je dis : ouais, ça se tient ! ça réduit la taille du fichier CSS, améliore la lecture du fichier, et il y a des chances que cela facilite le travail de l’interpréteur de CSS. Attention tout de même à ne pas tailler à l’arrache dans le CSS, certains sélecteurs sont utiles !
C’est tout pour aujourd’hui !

Mise à jour 2 ans plus tard : de nos jours, on cherche toujours plus à grappille des octets ! Par contre, on évite absolument de faire ce que je propose ! On écrit son code CSS aussi humainement que possible, puis on génère à partir de ce code, un feuille de style minifiée à laquelle tous les espaces inutiles, ainsi que les commentaires, auront été retirés. Certains vont même jusqu’à utiliser un langage plus haut niveau que CSS (acceptant des variables par exemple), puis le faire passer à la moulinette d’un pré-processeur (SASS, LESS, … chacun ayant son mini-langage) qui génère une feuille de style minifiée et optimisée pour le traitement par le navigateur.

Plusieurs CSS sur une seule page

Publié dans HTML et CSS | Laisser un commentaire

J’ai découvert aujourd’hui comment appliquer plusieurs feuilles de styles sur une seule et même page. J’avais essayé plusieurs fois sans réel succès, pourtant cela peut être très pratique pour séparer son code.

Un fichier CSS sur une page

<link rel="stylesheet" type="text/css" href="fichier.css" />

Pour proposer des designs alternatifs, on emploie le mot clef alternate.

<link rel="alternate stylesheet" type="text/css" title="Titre du design" href="fichier1.css" /> <link rel="alternate stylesheet" type="text/css" title="Autre titre du design" href="fichier2.css" />

C’est le premier qui sera utilisé par défaut.

Plusieurs fichiers CSS sur une page

<link rel="stylesheet" type="text/css" href="fichier1.css" />
<link rel="stylesheet" type="text/css" href="fichier2.css" />

Mais en utilisant les titres, on peut aller plus loin. L’exemple suivant utilisera les designs ayant pour titre « compact » et le design persistant (sans titre) commun.css. Mais l’utilisateur peut sélectionner les designs « beautiful », ce qui appellera aussi le design persistant.

<link rel="alternate stylesheet" type="text/css" title="compact" href="fichier1.css" />
<link rel="alternate stylesheet" type="text/css" title="compact" href="fichier2.css" />
<link rel="alternate stylesheet" type="text/css" title="beautiful" href="fichier3.css" />
<link rel="alternate stylesheet" type="text/css" title="beautiful" href="fichier4.css" />
<link rel="stylesheet" type="text/css" href="commun.css" />

Pour aller plus loin

On peut noter qu’il est possible d’utiliser une balise méta ou un header pour préciser le ou les fichiers CSS à afficher par défaut :

<meta http-equiv="Default-Style" content="compact" />
<?php
header(Default-Style: "compact");

Merci le W3C sur Lagrange !

Des bords arrondis, sans images, avec les CSS3

Publié dans HTML et CSS | 2 commentaires

Je suis actuellement en train de faire le design d’un nouveau site, et pour la première fois, je me suis amusé un petit peu avec les CSS 3. Je n’ai utilisé que des bords arrondis (border-radius), et des effets d’ombres (box-shadow), et je suis impressionné par ce que l’on peut faire en quelques lignes. Quand je pense aux transitions, aux couleurs RGBa (pour gérer la transparence facilement), les arrières-plans multiples, j’ai vraiment hâte que les navigateurs l’implémentent ! Il est déjà possible de tester un rendu temporaire en utilisant les préfixes -moz- (pour Firefox), et -webkit- (pour Safari et Google Chrome), et sans préfixe pour Opéra à partir de la version 10.5 . Pour Internet Explorer, il faut se rabattre sur les créations anciennes ou nouvelles des développeurs de Microsoft, qui, quand elles existent, ne suivent pas de standard particulier. Welcome in the real world!

Un peu d’arrondi pour la douceur

Nous allons commencer par voir comment réaliser des bords arrondis sans utiliser d’images. Et en ajoutant une petite image pour la déco quand même, on va créer la chose suivante :


Continuer la lecture

Où trouver des idées de design XHTML/CSS ?

Publié dans HTML et CSS | Laisser un commentaire

Une chose que je remarque de plus en plus est que je la partie la plus délicate, pour moi, lors de la création d’un site Internet (et dans une moindre mesure, d’une application) est la phase de design. Parfois j’ai quelques idées en tête, mais même avec ça, je galère vraiment à trouver quelque chose de jolie… Je ne dois pas avoir la fibre artistique, le sens des couleurs, ou je ne sais. Je crois n’avoir réussi l’exploit de faire quelque chose de jolie (et encore, c’est subjectif) que pour un seul site, mon site perso La Bnbox. A l’époque j’ai du avoir une sorte d’inspiration, et ça a roulé comme sur des roulettes. J’étais vraiment fier, même si aujourd’hui c’est un peu passé de mode et un peu trop bleu, blanc et statique à mon goût. Mais bon, de l’eau à passer sous des ponts depuis le temps…

La Bnbox v3

Une autre chose que je remarque c’est que si on me file un psd (format Photoshop) ou une image d’un design, je suis tout à fait capable de transcrire tout ça en XHTML et en CSS, en créant les images ou non. Bref, je suis plus intégrateur Web que Designer Web. Mais je crois que je préfère encore le développement.
Continuer la lecture

Modifier un thème Dotclear

Publié dans Dotclear | Laisser un commentaire

Hier soir, (un peu tard je l’avoue) je me suis dit que le design de ce blog était bien fixe et que cela rendait assez désagréable la lecture de mes codes d’exemple. Alors j’ai utilisé la fonction d’édition de thèmes de Dotclear pour modifier un peu le CSS du design GlossyBlue que j’utilise.

Je suis franchement étonné par la clarté du code CSS, je l’ai très rapidement pris en main, d’autant plus que la manière de coder (d’abord les balises d’usages body, a, hx suivi des parties principales header, page, content, footer, puis tout ce qui est relatif à de plus petites parties du design) ressemble fortement à ce que j’essaie de faire lorsque je code (avec plus ou moins de succès ;-)). La système d’édition est de plus bien construit : on ouvre un fichier, il apparait dans un textarea, on le modifie, on enregistre, reste à actualiser la page ! Simple, mais efficace. Bon alors c’est vrai qu’une petite coloration syntaxique, et une numérotation des lignes seraient super chouette (éh, ils le font bien chez Mozilla), mais bon, c’est pas vraiment fait pour ça ! Bref, j’ai rendu le design GlossyBlue extensible (pour le coup j’ai de la place. Peut-être un peu trop…), et le truc qui est pas mal avec Dotclear c’est que dans la galerie de thèmes, il y a aussi des gabarits de thèmes. On peut donc modifier la forme de son design assez rapidement et sans se prendre la tête.

Avec tout ça, il faudrait quand même que j’améliore un petit peu mon header.