html5

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

Voilà une balise intéressante à utiliser dès maintenant pour ceux qui utilise déjà HTML5.

Si je reprends la définition du W3C :

The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines.

Donc en gros, la balise <hgroup> permet de regrouper plusieurs éléments décrivant un en-tête de section. (ex : titre avec un sous-titre ou titre avec un slogan, etc)

Imaginons par exemple un site web corporatif qui à son logo et un slogan en dessous.

Le code approprié serait :

<header>
    <hgroup>
        <h1 id="logo">Budget en ligne</h1>
        <h2>Planifier son budget intelligemment</h2>
    </hgroup>
</header>


C’est simple, efficace et on comprend plus facilement l’intention en analysant le code source.

Tweet This Post

Comme mentionné dans un billet antérieur, HTML5 n’est pas encore supporté par Internet Explorer 8. Pour au moins avoir un quelconque rendu dans ce navigateur, vous devrez rajouter les lignes de code suivantes à vos pages HTML :

<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->

En ajoutant cela, Internet Explorer 8 prendra au moins en compte les nouvelles balises header, footer, nav, article et section. On est loin de pouvoir pratiquement tout faire comme dans Firefox ou Safari, mais c’est un début…

Tweet This Post