##Le CSS et ses versions##

Le CSS a connu plusieurs version au cours de ces 20 dernières années. Contrairement au HTML, il n’est pas nécessaire de spécifier une version. Et un même fichier peut aussi bien utiliser des propriété CSS2, CSS2.1 et CSS3 en même temps ! En fait, ce n’est pas le fichier qui est “en CSS3”, ce sont juste les propriétés utilisées.

- CSS1

Le CSS est apparu pour répondre à une demande d’enjoliver et de mettre un peu en forme l’internet, vers le milieu des années 90. Mais faisant face à de gros soucis de compatibilités des navigateurs de l’époque, Internet Expl(h)orer et Netscape. Beaucoup de propriétés ne seront pas utilisées et il sera vite remplacé par sa deuxième version.

- CSS2

Un an seulement après CSS1, voilà une première révision qui permettai notemment de gérer les styles suivant le média (print, screen, etc…), et ajoute un bon nombre de propriété très utiles pour la mise en forme de contenu. Mais encore une fois, les 2 navigateurs rois de l’époque n’en faisant qu’à leur tête pour ce qui était de l’interpretation des propriétés. L’intégrateur était souvent obligé de faire presque 2 versions de code pour les deux navigateurs, ou alors de privilégier une mise en forme à l’ancienne, sous forme de <table>.

- CSS2.1

Apparition en 2001, les propriétés CSS2.1 sont celle qui sont majoritairement utilisées aujourd’hui, leur compatibilitée étant aujourd’hui acquises sur nos navigateurs moderne depuis la mort d’IE6 & IE7, et surtout les navigateurs proposant des mises à jours automatique tels que Chrome ou plus récemment Firefox.

C’est vraiment cette version qui va révolutionner nos mises en forme et nous ouvrir des perspectives presques illimitées en terme de créativité, parfois pour notre plus grand bonheur, parfois pour le malheur de nos yeux !!!

Cette fois-ci, le CSS est soumi lui aussi à une convention du W3C et quelques transitions font leur apparitions avec une nouvelle version qui a été dévellopé en parralèle : le CSS3

- CSS3

Dévellopé en parallèle du CSS2.1, cette version à été pensée de façon modulaire, afin de permettre une plus grande souplesse et donc une intégration beaucoup plus rapide. Malheureusement, c’est exactement l’inverse qui s’est produit car les navigateurs n’étant plus obligé d’interpreter toute les propriétés, ils les ont intégrer petit à petit, et vraiment à des rythmes très différents. Beaucoup de propriétés ne sont encore aujourd’hui pas supportée de manière native et l’intégrateur est encore obligé d’utiliser des “préfixes” navigateurs pour chaque propriété…ce qui alourdi inutilement le code et rend certaines mises en forme particulièrement laborieuse.
Exemple, voyez un peu l’horreur :

/*Animation native CSS3*/
animation: all ease-in 1s;
animation-iteration-count: infinite;
transform-origin: 50% 50%;
/*Animation pour le moteur webkit (Chrome & Safari)*/
-webkit-animation: all ease-in 1s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 50%;
/*Animation pour le moteur de Mozilla Firefox*/
-moz-animation: all ease-in 1s;
-moz-animation-iteration-count: infinite;
-moz-transform-origin: 50% 50%;
/*Animation pour le moteur d'Opera*/
-o-animation: all ease-in 1s;
-o-animation-iteration-count: infinite;
-o-transform-origin: 50% 50%;
/*Animation pour le moteur d'Internet Explorer*/
-ms-animation: all ease-in 1s;
-ms-animation-iteration-count: infinite;
-ms-transform-origin: 50% 50%;

Ceci dit, les navigateurs très récents comme ceux de nos mobiles ont été conçus de manière à supporter nativement quasiment toutes les propriétés CSS3, en voilà en idée qu’elle est bonne :)
Cette version a aussi amenée une évolution cruciale pour les sites récents : la gestion des media-queries
Il devient alors possible d’appliquer certains styles en ciblant uniquement une plage de résolution d’écran par exemple, ou de densités de pixels. Cette amélioration, aujourd’hui très bien supportée par les navigateurs nous permet de faire des sites dont le contenu est adapté sur plusieurs appareils (écran très large, tablette, mobile etc.), tout en gardant la même structure HTML pour toutes ces versions, on dit alors que le site est “responsive”. Exemple : jvenerosy.fr, Bouygues Telecom
Alors qu’auparavant, nous étions obligés de faire une version mobile…exemple : 01net. version PC et 01net. version mobile
Voici un très bon article sur le responsive design : C’est quoi le Responsive Web Design ? - par Alsacrétions - ###CSS4
En cours d’ébauche depuis 2010 !

##Séparation du fond et de la forme

###Pourquoi ? L’une des principales missions du CSS aujourd’hui est de séparer le fond, c’est à dire votre contenu, de la forme, donc du design de votre site. Ceci afin de rendre votre code plus lisible (pas de surcharge stylistiques inutiles), et ainsi garantir une meilleure accessibilité. Cela permet aussi une meilleure souplesse de votre code. Votre style peut ainsi évoluer indépendemment de votre structure HTML.

###Comment ? Il existe 3 façon de mettre en place votre style CSS :

Le style inline

<p style="font-size:14px; line-height: 18px; color: darkgrey; text-transform: uppercase">Voici un peu de texte</p>

Le style dans la balise <head>

<head>
    <style>
        p{
            font-size: 14px;
            line-height: 18px;
            color: darkgrey;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <p>Voici un peu de texte</p>
</body>

Le style dans un fichier séparé

Code HTML

    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>Voici un peu de texte</p>
    </body>

Code CSS dans le fichier style.css

    p{
        font-size: 14px;
        line-height: 18px;
        color: darkgrey;
    }

Ici, les 3 exemples feront exactement la même chose : définir une taille de caractère, un interlignage et une couleur, ainsi qu’un casse particulière à notre balise <p>.

Sur ces 3 méthodes, tout comme avec Duncan McLeod du clan des McLeod, il ne doit en rester qu’une : la 3ème !
Ceci dit, il est important de connaitre les 2 autres au cas ou vous tomberiez dessus.
La première met du code en tant qu’attribut “style”, et ne respecte donc pas une séparation fond/forme. La maintenance de ce code est extremement laborieuse…Imaginez-vous que du jour au lendemain on vous demande de changer sur toutes les 25 templates de votre site la couleur du texte…il faudrait alors reprendre chaque balise “style” et modifier la couleur ! Quand on voit la quantité de paragraphe que peut comporter un article, on se rend compte de la lourdeur de cette mission !
La deuxième respecte une séparation fond/forme, mais a un gros inconvénient. Elle nous oblige à réécrire autant de fois le code que l’on a de page HTML. Et donc même histoire, si l’on doit faire une modification de style, il faudra faire cette dernière sur toutes nos pages !
La troisième et donc la bonne offre une vraie séparation de fond et de forme. Ces derniers sont alors dans 2 fichiers disctincts ce qui implique que l’on pourra appeller ce même fichier dans toutes nos pages HTML, et donc une modification dans ce fichier impactera directement toutes nos pages ! C’est un gain en terme de lisibilité mais surtout en terme de temps, et le temps…$$$ !

##Un peu de pratique : le ciblage d’éléments

La première chose à savoir faire en CSS, c’est le ciblage, un ciblage efficace vous évitera une sur-utilisation de classe et vous fera gagner en lisibilité aussi bien dans votre code HTML que dans vos CSS.

###Petit exercice

  1. Je suis un client chiant et j’ai des goûts futuristes pour le design, cherchez pas, vous pouvez pas comprendre !!!
    Aussi j’aimerai que mes paragraphes aient une grosse…taille, soient écrits en rouge sur fond bleu (oh yeah), qu’il soient très espacés entre eux et que chaque mot commence par une majuscule…Vous pourriez me faire ça ?

  2. Bon en fait le rouge c’est un peu agressif, finalement j’aimerai que le texte soit écrit en blanc et en noir (un paragraphe sur deux)

  3. Hmmm, pas mal, pouvez-vous mettre mes titres avec une jolies polices de caractère, le du Comic MS ?

Voici la base de votre code HTML :

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Ceci est mon <a href="">titre</a> n°1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima delectus tempora, at alias rerum iure dignissimos, molestiae doloribus dolor quos praesentium eum cupiditate labore repellendus eaque natus sunt in voluptatum!</p>
    <p>Neque inventore eius a! Libero eligendi alias, minus id, asperiores dolores <a href="">nisi et voluptas</a>, reiciendis aspernatur quaerat modi rerum odio soluta. Dicta totam nemo illo beatae dolores tempore, impedit aut!</p>
    <p>Natus quae cupiditate eveniet cum autem dolorem voluptatem similique at laborum ipsum, eius, voluptates impedit fugiat nulla dolorum earum rem ratione? Non dolorum pariatur nesciunt voluptatum porro fuga, est minus?</p>
    <p>Eius nemo vero quos quisquam, soluta hic at, voluptate ad fugiat sequi dolor itaque consequatur ipsam officia aut aperiam. Saepe quos accusamus et totam? Hic quidem illo ex rem reprehenderit!</p>
    <p>Minima architecto assumenda ipsam aspernatur officiis saepe ex voluptates laudantium nihil id! Cum, voluptas quidem nam rem ut! Eveniet, omnis autem et culpa eos atque dolorem nobis fuga modi pariatur!</p>
    
    <h1>Ceci est mon <a href="">titre</a> n°2 </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur reiciendis, ipsa quaerat sapiente saepe doloribus veniam, veritatis in ab, dolore aliquid itaque iste laborum rerum magnam fugiat fugit corporis neque.</p>
    <p>Reprehenderit, id quasi facere libero optio, saepe similique sunt. Dolorem optio eos repellendus, porro iusto laudantium tenetur id. Quis adipisci molestias tempore, corrupti aliquam sequi facilis magni quo quam, ut?</p>
    <p>Impedit veniam reiciendis numquam, <a href="">beatae asperiores perspiciatis eius</a> doloribus labore assumenda. Numquam quam explicabo rem amet alias. Consequatur magni similique maiores, eligendi, quos dolorem ipsam saepe, accusantium vel nobis, optio!</p>
    <p>Dolorem ea iure necessitatibus ipsa dignissimos ducimus? Nihil iusto maxime itaque animi quidem, atque obcaecati aliquam maiores? Laudantium nihil laboriosam, laborum ad id vel esse consequuntur dolorum, maiores natus corporis.</p>
    <p>Ipsa ipsam expedita, eveniet alias animi nihil minus quae doloribus corporis, in voluptatum nulla sapiente quam possimus sit magni aliquam. Fugiat esse pariatur omnis doloribus, ipsum excepturi dolor illum quia?</p>
   
    <h1>Ceci est mon <a href="">titre</a> n°3 </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores impedit ex animi enim quaerat, minima quasi nam iste dicta molestias accusantium eligendi ad, repellendus aliquam, blanditiis sequi ducimus labore illum!</p>
    <p>Praesentium hic saepe accusantium dignissimos at, atque modi blanditiis, ipsa totam in. Similique voluptates ullam libero et, accusamus, dolor a fugiat tempore quasi, rerum alias dignissimos? Optio architecto delectus odit.</p>
    <p>Temporibus beatae autem repellendus veritatis eligendi sed molestias, minus natus. Harum possimus eos iste vitae, dignissimos alias consectetur numquam accusantium quibusdam <a href="">voluptas sed neque architecto</a>. In, nemo. Atque cupiditate, repudiandae?</p>
    <p>Dicta exercitationem, soluta, quis odit id ipsam placeat unde deserunt vero, veritatis obcaecati excepturi suscipit eaque, eos. Magnam fuga quis, maiores voluptatum placeat, aut sed nisi, nobis animi, laborum veritatis.</p>
    <p>Asperiores modi exercitationem esse ea. Vitae atque necessitatibus commodi magnam sunt cumque autem reiciendis veniam nam, dignissimos doloremque eaque voluptatum dolore optio excepturi ut perspiciatis dicta tenetur error asperiores odio.</p>
   
    <h1>Ceci est mon <a href="">titre</a> n°4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed explicabo natus magnam, esse rerum quisquam iusto dignissimos soluta, officiis fugit id unde aliquam possimus inventore doloremque! Sed odit nesciunt laboriosam!</p>
    <p>Deleniti, optio earum sequi neque quo aut expedita minus, ipsa doloribus porro, nostrum nemo quisquam eaque sint laborum. Qui atque nam reprehenderit error aliquam quas velit obcaecati assumenda temporibus rerum.</p>
    <p>Voluptates laborum obcaecati qui quis officia adipisci recusandae ducimus animi quisquam id et, voluptatem nostrum magnam harum architecto temporibus accusantium quod! Ex suscipit voluptatem, reprehenderit explicabo. Sint nesciunt, voluptatem temporibus!</p>
    <p>Dolore velit distinctio unde corrupti, dicta porro nihil laboriosam voluptatum recusandae temporibus minus delectus expedita asperiores veritatis esse excepturi sapiente facilis vel ea hic, nesciunt libero doloribus assumenda sed. Enim.</p>
    <p>Consectetur, numquam, a nemo saepe sequi facere libero tempora sit quis harum est exercitationem, praesentium itaque corporis atque ipsam ducimus inventore voluptate incidunt in nostrum quidem? Illo veritatis, voluptates laboriosam.</p>
</body>
</html>

Copiez collez ce code dans un nouveau fichier html, et créer un fichier “style.css” dans le même répertoire et amusez vous pour essayer d’atteindre le rendu demander par notre super client. En CSS, le plus important est de savoir chercher, donc si vous ne savez pas changer une taille de police par exemple, Google est votre ami :)
Bon courage !

##Confusions niveau 1

###margin vs padding Une notion souvent source de confusion lorsque l’on apprend le CSS, la différence entre les propriétés “margin”, et “padding”. Pour faire simple, un “margin” est une marge exterieure d’un élément, alors qu’un “padding” est une marge intérieur.
Essayez de créer plusieurs <p> sur votre page, et de leur appliquer une couleur de fond, un margin de 10px et un padding de 5px. Vous verrez alors très nettement la différence !

###display C’est l’état d’un élément, il peut être de type :

  • inline : comme une <img>, un <span> ou un <em>, ces éléments vont se mettre à la suite les uns des autres, et ne peuvent pas avoir de hauteurs ou de marge verticales, il est d’ailleurs important avant de s’énerver sur un fichier CSS, de vérifier l’était “par défaut” d’un élément.
  • none : Le contenu ne sera tout simplement pas affiché !
  • block : c’est avec le inline l’était le plus répandu. Les <div>, <p> ou encore <hx> sont de type “block”, ces élément se succèdent les uns en dessous des autres, prennent de base toute la largeur de leur conteneur (ou parent).
  • il existe aussi les types inline-block, table et quelques autres que nous verrons un peu plus tard.

Notez qu’en aucun cas un élément de type “inline” ne doit englober un élément de type “block” dans votre code HTML. Le code ci-dessus est donc incorrect, il ne passerait pas au validateur.

<span><p>Ceci est du texte</p></span>

Le display est un concept très important à appréhender, sa maitrise et sa compréhension vous évitera bien des arrachages de cheveux !

##Second exercice : la mise en forme de votre article

Reprenez votre article de la semaine dernière et essayez de lui donner une meilleure tronche. Soit inspirée de celle du site d’origine, soit une qui vous conviendrait.

##Devoirs

Pour la semaine prochaine, vous devrez mettre en forme le HTML suivant :

<h1><span>Tarif et conditions</span></h1>
<div class="container">
    <h3>Tarifs</h3>
    <a href="">Guide des tarifs</a>
</div>
<div class="container">
    <h3>Fiches d'informations standardisées</h3>
    <div>
        <h4>Offres mobiles</h4>
        <p>
            <a href="">Fiche d'information Carte Bouygues Telecom</a>
            <a href="">Fiche d'information Forfaits bloqués Bouygues Telecom</a>
            <a href="">Fiche d'information Forfaits Bouygues Telecom</a>
        </p>
        <h4>Offres Bbox</h4>
        <p>
            <a href="">Fiche d'information offres Bbox et Bbox Sensation (ADSL/VDSL)</a>
            <a href="">Fiche d'information offres Bbox Sensation Fibre</a>
        </p>
    </div>
    <div>
        <h4>Offre internet 4G/4G+</h4>
        <p>
            <a href="">Fiche d'information offre internet 4G/4G+ prépayée</a>
            <a href="">Fiche d'information offre internet 4G/4G+ prépayée sim seule</a>
            <a href="">Fiche d'information Forfaits internet 4G/4G+</a>
        </p>
    </div>
</div>
<div class="container">
    <h3>Rétractation</h3>
    <a href="">Formulaire de rétractation</a>
</div>
<div class="container">
    <h3>Déclaration de conformité Bbox Sensation</h3>
    <div>
        <p>
            <a href="">Modem Bbox Sensation</a>
            <a href="">Décodeur TV Bbox Sensation</a>
        </p>
    </div>
    <div>
        <p>
            <a href="">Bbox Sensation Fibre (SMT-G7440)</a>
            <a href="">Bbox Sensation Fibre (SMT-G7441)</a>
        </p>
    </div>
</div>
<div class="container">
    <h3>Conditions générales</h3>
    <div>
        <p>
            <a href="">Conditions Générales de ventes</a>
            <a href="">Conditions Générales de services</a>
            <a href="">Conditions Particulières Internet +</a>
        </p>
    </div>
    <div>
        <p>
            <a href="">Infos légales</a>
            <a href="">Guide des communicatios électroniques</a>
        </p>
    </div>
</div>
<div class="mentions">
    <p><strong>Mentions légales</strong></p>
    <p>Avec la boutique Bouygues Telecom, sélectionnez un téléphone portable et choisissez un forfait mobile parmi les Forfaits Sensation et Forfaits bloqués de Bouygues Telecom. Découvrez également nos offres Box ADSL : la Bbox avec Internet haut débit, TV, téléphonie fixe ou nos offres Box Fibre avec Internet très haut débit jusqu'à 100 Méga - TV en haute définitition - Téléphonie fixe.</p>
</div>

De façon à ressembler à ça :

Page tarif

Image en taille réelle

La police étant protégée, je vous autorise à en utiliser une autre. Ne vous inquiétez pas, vous allez vous prendre la tête modèle géant pour cet exercice et c’est tout a fait normal. Les diffultés ne sont pas à prendre comme une barrière, mais comme un challenge que vous vous devez de réussir. C’est en cherchant une problème pendant des heures que vous retiendrez la solution toute votre vie !

Honnêtement, je ne m’attends pas à ce que vous réussissiez cet exercice dans son entièreté, mais encore une fois, il fera une bonne base pour notre prochain cours. Donc essayez de vous approcher au maximum du rendu espérez avec vos connaissances actuelle, prenez vous un peu la tête s’il le faut pour ce que vous ne savez pas faire mais n’allez pas jusqu’à vous décourager. Car dans décourager, il y a rager, et c’est moche. Encore une fois, une difficulté ne doit pas être source de démotivation, l’intégration est un métier qui demande beaucoup de temps pour saisir ses moindres subtilités.

Bon courage et à la semaine prochaine :)