Archives de catégorie : HTML et CSS

Avec l’arrivée du CSS 3 et peut-être un jour du HTML 5, il m’arrive assez souvent de palabrer autour de ces deux langages pour en décortiquer les détails. Cela dit, j’ai déjà pas mal à faire avec du CSS 2 et du XHTML…

DateTimePicker : différentes solutions

Publié dans HTML et CSS | Laisser un commentaire

Plusieurs solutions existent pour sélectionner facilement une date avec un DatePicker (et l’heure pour un DateTimePicker !) pour le Web. Voici une petite sélection.

HTML5 DateTimePicker

Eh oui, sélectionner facilement la date, c’est possible nativement dans votre navigateur avec une simple balise HTML. L’inconvénient c’est que ce n’est pas encore très supporté. Dans Opera, mais ailleurs… ? Et il faut reconnaître que ce n’est pas magnifique.

Choisir une date : <input type="datetime" name="yourDate" />

html5-datetimepicker

Voir les exemples du W3Schools.
Continuer la lecture

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

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