html5

Certains utilisent sIFR, d’autres utilisent Cufon et d’autres préfèrent @font-face en CSS. Le but de ce billet n’est pas de vanter une des techniques en particulier, mais plutôt de vous décrire la technique ­@font-face qui est à mon avis, quelque peu délaissé. Cette technique pourrait par contre être de plus en plus utilisée avec l’utilisation de CSS3.

@font-face n’est pas une nouveauté de CSS3. Cette technique était déjà présente avec CSS2 et nous pouvions même l’utiliser avec la version 5 d’Internet Explorer. Le problème est qu’elle prenait seulement en compte les polices ayant le format .eot et les autres navigateurs, à l’époque, avaient décidé de ne pas utiliser ce format.

@font-face est une propriété CSS qui est prise en compte par Firefox depuis la version 3.5 (donc il y a peu de temps…) ce qui peut expliquer le pourquoi qu’elle n’est pas encore la plus populaire à l’heure actuelle.

Comme sIFR et Cufon, elle apporte l’avantage que les utilisateurs d’un site Web n’ont pas à avoir les polices utilisées sur le site Web. Par exemple, je pourrais décider que mon texte est uniquement écrit en Futura et même si vous n’avez pas cette police d’installé sur votre ordinateur, vous verriez pareil l’affichage avec le texte en Futura.

Cette méthode ne requiert également aucun code JavaScript comparativement à Cufon et sIFR. Nous n’avons donc plus besoin de nous soucier si JavaScript est activé ou non.

Jusqu’à maintenant, cette technique semble avoir que des avantages, mais elle n’est évidemment pas parfaite. En effet, en utilisant la technique @font-face en CSS, nous exposons facilement à la vue de tous le téléchargement de nos fontes. En regardant notre code source, n’importe qui peut voir l’emplacement du fichier et le télécharger. Ce n’est pas un problème pour des fontes gratuites, mais dû moment que ce sont des fontes payantes, nous tombons dans l’illégalité.

Prenons par exemple une personne achetant son pack Helvetica. Il utilise Helvetica Neue pour son texte et utilise @font-face. Je me rend sur le site Web en question, analyse quelque peu le code source et en moins d’une minute j’ai maintenant Helvetica Neue comme nouvelle fonte sur mon ordinateur.

La ligne peut être mince quant à l’utilisation de cette méthode. Elle peut être fort utile si vous utilisez des fontes gratuites qui ne se retrouvent pas nécessairement sur l’ordinateur de vos visiteurs. Par contre, il faut rester très vigilant pour ne pas tomber dans l’illégalité.

Dans le prochain billet, je montrerai un exemple d’utilisation de la technique @font-face.

Tweet This Post

Récemment, j’ai vu passer certains trucs dans mon Twitter concernant les transitions en CSS3. Le premier exemple que j’avais vu ne m’avait guère impressionné, mais je m’y suis un peu plus intéressé et voilà que je trouve cela beaucoup plus convainquant.

Compatibilité

Pour l’instant, les transitions en CSS3 sont compatibles sur Safari 4 et Chrome 3.

Les propriétés à connaitre

transition-property : détermine sur quelle propriété CSS nous voulons que la transition soit appliquée (ex : background, color, etc)

transition-duration : détermine la durée de la transition

transition-timing-function : détermine l’accélération/décélération de la transition

transition-delay : détermine le délai avant que la transition s’effectue

Raccourci/Shorthand

selecteur  {
    transition: opacity 2s ease-in;
}

Voici deux exemples sur les transitions CSS :

Demo 1

Demo 2

Vous pouvez télécharger ci-dessous les deux exemples que j’ai faits avec les transitions.

Télécharger le premier exemple sur les transitions CSS.

Télécharger le deuxième exemple sur les transitions CSS.

Que va amener les transitions CSS ? Ces nouvelles possibilités vont nous amener à délaisser encore une fois Flash. Je dis encore une fois, puisqu’HTML5 nous amène déjà à le délaisser. Nous n’avons qu’à penser à la balise <video> entre autre. Il ne sera plus nécessaire d’avoir recours à Flash et d’absolument utiliser Javascript pour ajouter plus d’interactivité dans nos sites Web. Les transitions CSS « vont faire la job » pour créer des animations de base.

Avec toutes ces nouvelles possibilités, il n’y aura plus d’excuse pour abuser de Flash dans nos sites Web…

Voici un excellent site Web pour voir différents exemples sur les transitions en CSS3 :

http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html

Pour en savoir davantage sur les transitions en CSS3, je vous invite également à lire la spec du W3C.

Tweet This Post

Comme vous le savez, je m’intéresse beaucoup à HTML5 et à CSS. Jusqu’à maintenant, j’avais quelque peu délaissé la future version de CSS pour me consacrer à HTML5 (et mes 10 000 projets personnels, mais bon…).

Aujourd’hui, je vous offre une nouveauté de CSS3 que j’attends depuis un bon moment et qui risque de me faire sauver de l’argent sur les tylenols. Depuis que je fais du design web, il m’est arrivé de me casser la tête en CSS pour faire certains trucs. Non pas que je ne connais pas CSS, mais plutôt parce que la version actuelle a été négligé.

En effet, il n’est pas possible avec la version 2 de CSS d’appliquer plusieurs images en background à un même élément. Pourquoi? Aucune idée. Il est pourtant évident que tous aurait bénéficié de pouvoir le faire. Heureusement que CSS3 va être terminé un jour…

Voici donc comment appliquer plusieurs backgrounds à un même élément en CSS3 :

#twitterWidget {
	/* L'ORDRE POUR PLACER LES BACKGROUNDS EST IMPORTANTE */
	background-image:    url(../images/box-bg-top.jpg),
                             url(../images/box-bg-middle.jpg),
                             url(../images/box-bg-bottom.jpg);
	background-position: top left, center center, bottom left;
	background-repeat:   no-repeat, repeat, no-repeat;
}

Dans notre exemple, nous avons 3 images différentes. Une pour le haut, une autre pour le milieu et finalement une pour le bas. Il suffit de séparer nos déclarations par des virgules pour appliquer plus d’un background à un élément. Aussi simple que cela.

Remarque : L’ordre dans lequel nous plaçons nos backgrounds est important. Il est préférable de suivre cet ordre logique : top, middle, bottom.

À noter que les backgrounds multiples ne sont pas pris en compte par Firefox 3.5. Je vous conseille donc de faire les tests sous Chrome 3.0 et Safari 4.

Télécharger l’exemple des backgrounds multiples en CSS3.

Voici le lien pour voir l’exemple en ligne : http://ins.pire.me/open-source/css3/exemple01-background/demo.html

L’icône Twitter utilisée à été créé par la designer Mirjami Manninen.

Tweet This Post

Ayant travaillé sur plusieurs projets impliquant du code CSS, je me suis rendu compte qu’il arrivait rapidement que l’on ne se retrouve plus dans ses propres fichiers. Ce n’est pas nécessairement dû à des mauvaises pratiques, mais plutôt au fait qu’un fichier CSS peut rapidement devenir volumineux. En effet, il suffit d’avoir environ 5 sections pour que l’on commence à devoir user de la barre de défilement pour parcourir nos fichiers.

Il existe une technique toute simple permettant de rechercher rapidement dans nos fichiers CSS et c’est d’utiliser des FLAGS. Les FLAGS sont des mots-clés que l’on peut placer au début de nos sections.

Ex :

/* ---------------------------------------------------
Navigation principale  =navPrin
----------------------------------------------------*/
nav {…}
nav ul {…}
nav ul li {…}

En mettant un = devant le mot-clé, il suffit de rechercher =navPrin pour facilement trouver la section d’un seul coup. Nous nous assurons également d’être positionné au début de la section que l’on recherche et d’éviter de passer d’une occurrence à une autre. Toujours en pensant en fonction d’HTML5, vous risquez d’avoir plusieurs occurrences de la balise header, nav ou footer. Il est donc d’autant plus utile d’utiliser les FLAGS CSS pour trouver nos sections rapidement.

Et vous, quelles méthodes utilisez-vous pour vous retrouver facilement dans vos fichiers CSS?

Tweet This Post

Voici la suite de comment bien organiser ses feuilles CSS. Dans la première partie, j’ai décrit ma méthode d’organisation des fichiers ainsi que de l’en-tête de mes fichiers CSS.

Une fois l’en-tête bien déclarée, nous pouvons commencer à implémenter nos styles selon les différentes sections présentes dans notre site Web. Il est important de bien diviser notre fichier en plusieurs sections.

Chaque section se devrait d’avoir un en-tête de ce genre :

/***********************************

———->>> NOM DE LA SECTION PRINCIPALE (ex : header) <<<———–

***********************************/

En faisant cela, nous nous assurons de bien séparer chacune des sections principales. Il devient  donc plus facile de repérer ces mêmes sections.

Ensuite, nous commençons à implémenter les styles pour la section en question.

div#wrap header {
    width: 99.9%;
    height: 145px;
}

div#wrap header hgroup {
    width: 180px;
    height: 144px;
    float: left;
    margin-left: 20px;
    background: url(../images/logo-bg.png) top left no-repeat;
}

..etc

Les propriétés des classes et IDs devraient être dans un ordre logique. Le code est encore plus structuré et en utilisant cette méthode, vous verrez que vous gagnerez en rapidité à long terme. Avant, je ne faisais que mettre les propriétés en ordre alphabétique comme ceci :

div#wrap header hgroup {
    background: url(../images/logo-bg.png) top left no-repeat;
    float: left;
    height: 144px;
    margin-left: 20px;
    width: 180px;
}

Mais je me suis vite rendu compte que ça me nuisait plus qu’autre chose. Par exemple, j’ai l’habitude de toujours placer la propriété height après la propriété width.  Je perdais  donc du temps inutile à chercher mes propriétés.

La solution était donc de garder un ordre semi-alphabétique, mais logique! En effet, maintenant je place mes propriétés selon l’ordre logique suivant : sizing, positionning, background et autres. (noter que vous pouvez créer l’ordre logique qui vous conviendra le mieux..)

Ex. de mon ordre semi-alphabétique logique :

header {
    width: 100%;
    height: 150px;
    float: left;
    margin: 10px;
    background-color: #eee;
    background-position: top left;
    autre…
}

Voilà! Il ne reste plus qu’à tester quelle méthode sera la plus pertinente pour vous. Et vous, quelle méthode utilisez-vous?

Tweet This Post

Ceci est la première partie de comment bien organiser ses feuilles CSS. Vous trouverez la partie 2 la semaine prochaine.

Plusieurs personnes utilisent leur propre méthode pour organiser ses feuilles de styles. Certains préfèrent utiliser qu’une seule ligne pour toutes leurs déclarations tandis que d’autres préfèrent indenter le plus possible leur code. Existe-t-il une méthode à privilégier pour s’assurer de créer des gabarits de qualité? Il en existe plusieurs, mais je vais vous décrire celle que moi j’utilise dans pratiquement tous mes projets. Je ne dis pas quelle est la meilleure, mais je crois qu’elle offre beaucoup d’avantages.

Tout d’abord, je déclare toujours 2 feuilles de styles dans toutes mes pages HTML. J’ai toujours mon « master.css » (qui est mon fichier maître) et mon fameux « reset.css ».

« master.css » comprend plusieurs autres fichiers comme par exemple base.css, typography.css, layout.css, etc…

Chacun de mes fichiers CSS contient un en-tête séparé en 4 sections : les informations de base, ma « table of content », les couleurs et finalement les « flags ».

Les informations de base sont les suivantes : le nom du fichier, sa description, l’auteur, la date de création et la date de la dernière modification.

Ma « table of content » est en faite toutes les grosses sections qui sont présentes dans mon fichier. Ex : header, navigation, content, footer, etc.

Mes couleurs sont une liste des couleurs que j’utilise plusieurs fois dans le même fichier.

Mes « flags » sont là pour faciliter la recherche dans mes fichiers CSS. (Je ferai un autre post prochainement sur l’utilisation et l’efficacité des flags.)

En ayant un en-tête dans tous vos fichiers, il devient plus simple de bien comprendre le fichier en question. De plus, si dans le futur une autre personne se doit de faire des modifications dans l’un de vos fichiers, cette personne ne pourra qu’en bénéficier puisque qu’elle pourra trouver ce qu’elle cherche rapidement. Le temps c’est de l’argent comme on dit…

Et vous, comment organisez-vous vos en-têtes de fichier?

Exemple d’en-tête de fichier CSS :

/**********************************************
MAIN INFO

@filename           : layout.css
@description        : Voici la description de mon fichier CSS
@authors            : Simon Guérin
@date               : September 22 2009
@modification       : September 23 2009

TABLE OF CONTENTS

#header
#content
#nav
#footer

COLORS

#8h1h2h        ------ light blue
#333333        ------ dark gray

FLAGS

=header
=content
=nav
=footer

**********************************************/

Tweet This Post