Alsacreations.com - Apprendre - Archives (juillet 2011)
Les dernières ressources publiées sur Alsacreations.com
Le langage CSS a été initialement conçu pour demeurer simple et intuitif : des propriétés facilement compréhensibles, associées à des valeurs tout aussi explicites devraient résumer le travail quotidien d'un intégrateur HTML/CSS.
Il n'est pourtant pas rare de rencontrer, au détour d'un clavier, un jeune webdesigner s'arracher les cheveux non pas parce qu'il ne dispose que d'Internet Explorer 6, mais parce qu'il s'embrouille dans la syntaxe employée :
Et après ça, je dois mettre quoi ? Un point ? Une virgule ? Un espace ? Des guillemets ?
Fichtre, ça change tout le temps, c'est compliqué ! Je choisis quoi, moi ? Finalement, les CSS c'est plus compliqué qu'on m'avait dit !
Voici quelques règles générales à adopter ainsi que leurs éventuels pièges.
Accolades, point-virgule, double-point ?
Le principe général d'une règle CSS est d'associer plusieurs éléments : le sélecteur (l'élément HTML sur lequel vont s'appliquer les styles), une propriété, et une valeur associée à la propriété.
Les règles typographiques sont les suivantes :
- Un bloc de déclarations (ensemble des couples propriété-valeur) est entouré d'accolades.
- La propriété est séparée de sa valeur par un double-point,
- Les déclarations ou règles (couple propriété-valeur) sont terminées par un point-virgule. Celui-ci est optionnel sur la dernière déclaration d'un bloc.
Quelques exemples :
.important {
color: red
}
input[type="text"] {
color: red;
}
Traits d'union ou collé ?
Lorsque les noms des propriétés ou des valeurs sont complexes ou s'expriment en plusieurs termes accolés, elles s'écrivent généralement à l'aide de traits d'union.
Les règles sont les suivantes :
- Sauf exception, une propriété s'écrit à l'aide d'un trait d'union lorsqu'elle est composée de plusieurs termes,
- Sauf exception, une valeur s'écrit à l'aide d'un trait d'union lorsqu'elle est composée de plusieurs termes,
-
Il y a certaines exceptions (ex:
lightblue,nowrap,…).
Quelques exemples :
border-radius: 6px 6px 0 0;
padding: 0 10px 6px 1em;
background: #000 url("img/concombre.jpg") left top no-repeat;
font-family: Arial, Verdana, serif;
background-color: rgba(255, 255, 255, .2);
Guillemets ? Simples ? Ou pas ?
Il est de notoriété publique qu'une chaîne de caractère s'écrit entre quotes simples ou doubles. Le langage CSS ne déroge pas à la règle, bien qu'il y ait certaines subtilités.
Les règles sont les suivantes :
- Pas de guillemets en règle générale pour les valeurs CSS, sauf les chaînes de caractères,
- Dans le cas des chaînes de caractères, les spécifications CSS2 et CSS3 indiquent que dès lors qu'une valeur contient des caractères non alphanumériques simples (A-Z, 0-9, tiret, underscore), elle doit être entourée de quotes simples ou doubles,
-
Exception : les chaînes de caractères générées avec la propriété
contentnécessitent toujours des guillemets.
Quelques exemples :
Chemin basé sur la fonction url() :
background: url();
@import: url();
content: url();
Fonctions avec parenthèses :
url() rgb() rgba() attr() calc() min() max() any()
Sélecteurs avec parenthèses :
:nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :not()
@media (max-width: 800px) {...}
Préfixes ?
Depuis CSS2.1 le W3C invite les constructeurs à préfixer leurs propriétés qui sont en cours de développement, non finalisées (-webkit, -moz-, -ms-, -o-, etc.). Dans certains cas, le préfixe se place devant la valeur (lorsque la propriété est finalisée mais pas la valeur). Par exemple : display:-moz-box (et non -moz-display: box).
Les microformats ont fait leur apparition en 2003 (XFN) sous l'impulsion de personnes publiant des blogrolls (listes de blogs qui ont plu ou ont été jugés pertinents dans un domaine précis) recherchant un moyen de faire connaître la nature des relations qu'ils entretenaient avec les auteurs de ces blogs. Depuis, ils ont pris une ampleur remarquable et de nombreux microformats ont été développés et améliorés pour divers supports : CV, rapports, protocole Atom, annuaires partagés, citations, traces des discussions en ligne, formats de médias… HTML5 les remet au goût du jour et ils restent un moyen simple, efficace et puissant d'apporter à vos pages de la lisibilité tant pour un humain que pour une machine.
Définition
Les microformats apportent au langage HTML (et par extension XHTML) davantage de sémantique. HTML possède déjà des éléments ayant du sens mais ils ne suffisaient pas à exprimer toutes les subtilités que les microformats proposent. Concrètement, cela va vous permettre d'ajouter, sans employer de grands moyens et sans grandes compétences, du sens au code fourni, afin de le rendre compréhensible par les humains dans un premier temps et par les machines ensuite.
Sachez que ces petits fragments de code ajoutés à certains attributs des balises HTML vous permettent d'optimiser le sens du contenu de vos pages et du coup, d'améliorer leur prise en compte, par exemple, par les moteurs de recherches, mais pas seulement. Avant de poursuivre notre propos, signalons que plusieurs CMS (Systèmes de Gestion de Contenu) tirent déjà partie des fonctionnalités des microformats : Drupal, WordPress, MediaWiki, Plume CMS (XFN)…
Insertion des µF
Entrons à présent dans le vif du sujet : l'ajout de microformats à vos pages de blog ou de site.
Comme indiqué précédemment, le langage HTML nous fournit suffisamment d'éléments afin d'ajouter, sans autre artifice, nos microformats. Deux attributs, principalement, nous permettront de faire cela :
-
L'attribut
rel, signifiant « relation ». Utilisé uniquement dans une baliseou, il permet, par le truchement des microformats, de préciser le type de relation entre la page source (celle dans laquelle on trouve le lien) et la page cible (celle vers laquelle pointe le lien). Exemple connu utilisé pour la définition de la feuille de style dans l'entête d'un document HTML :rel="stylesheet"> -
L'attribut
class, utilisé principalement à des fins d'identification d'élément pour la modification du style de la page via les CSS, mais permettant également d'ancrer des microformats. Exemple :class="nickname">Jojaba
Il existe un troisième attribut, l'attribut rev signifiant « relation inverse » exprimant la relation entre la page cible et la page en cours. Comme il est souvent mal utilisé, nous préférons ne pas traiter cet attribut dans ce tutoriel, d'autant que certains aspects de cet élément seront dépréciés à l'avenir.
Une dernière chose à savoir à propos de ces attributs (rel et class), ils peuvent prendre plusieurs valeurs, qu'on séparera par des espaces. Exemple :
class="fn n nickname">Jojaba
Les trois valeurs de l'attribut class sont ici : fn, n et nickname.
Les différents formats disponibles
Maintenant que nous connaissons l'endroit où insérer les microformats dans nos pages HTML, passons aux différentes manières de les utiliser. Trois composantes essentielles : les microformats simples, les design patterns (modèles de conception) et les microformats composés. Voici une liste non exhaustive pour chaque type que nous traiterons dans ce tutoriel :
-
Microformats simples : Rel-License, Rel-Noffolow, Rel-Tag, Rel-Bookmark, XFN. On utilise l'attribut
relpour leur mise en oeuvre. - Design Patterns : Abbr Pattern, Datetime Pattern, Value Class Pattern. Ces « Modèles de conception » permettent de combler le manque de sémantique du langage HTML et seront utilisés dans les microformats composés.
-
Microformats composés : hCard, hCalendar, hAtom, hReview, hResume. On utilisera davantage l'attribut
classpour ce type-là. Comme leur nom l'indique, ils sont composés de plusieurs microformats imbriqués et parfois dépendant les uns des autres.
Il existe bien d'autres µF, mais nous avons préféré nous focaliser sur ceux qui ont déjà fait leur preuve et, pour certains, sont accompagnés d'une spécification bien à eux. Pour de plus amples informations concernant les autres microformats, veuillez vous rendre au wiki officiel : Wiki microformats. Une Traduction d'une grande partie de ce wiki en français est proposée, le maître d'oeuvre de cette traduction étant Christophe Ducamp, grand « gourou » des elanceurs (site non mis à jour mais restant une bonne ressource francophone). Ce tutoriel est d'ailleurs entièrement basé sur des informations tirées de ce wiki.