Pourquoi ?

Définition du HTML5

• Canvas
• Géolocalisation
• LocalStorage

Gmail

Smash Mag

Historique

Inventé par Tim Berners-Lee

• 1990 : HTML
• 1993 : IMG
• 1994 : Création du W3C
• 1996 : Création du CSS

Pendant ce temps là, personne ne suit

Aucun standard de respecté par les navigateurs ( IE / Netscape / Mosaic )

Flash : du son et des images qui bougent !

Holy Savior !

• 2002 : Mozilla reprend Netscape et crée Firefox en suivant le W3C
• 2004 : Division du W3C
• 2007 : Début du développement d'HTML5 soutenu par les big boss d'Internet (Opéra, Apple, Mozilla, Google)
• 2012 : Passage en Candidate Recommandation

Balises HTML5

• section
• article
• nav
• ...

Pour une meilleure sémantique

Accessibilités pour d'autres lecteurs que les écrans

Pour mieux se retrouver

Ça fait plaisir aux moteurs de recherche

Micro-data

Itemscope / itemtype

<div itemscope itemtype="http://schema.org/Product" itemid="urn:isbn:978-2-212-12826-0">
<h1 itemprop="name">CSS avancées</h1>
</div>                                
                        

<canvas id="exemple" width="200" height="200">
  Navigateur non comptabible
</canvas>                        		
                         

  var exemple = document.getElementById('exemple');
  var contexte = exemple.getContext('2d');
  contexte.fillStyle = "rgba(0,0,255,0.5)";
  contexte.fillRect(30, 30, 50, 50);
                     

Selecteurs et Poids CSS

Un sélecteur CSS permet de cibler une balise ou des balises de l'arbre d'une page html dans le but de modifier son apparence graphique.

Un style se définit dans une page CSS dédiée (à part) ou entre les balises

<style> </style>

*{
    margin:0;
    padding:0;
}

Sélectionne tous les éléments de ma page, pratique pour mettre à zéro les marges de tout les éléments.

#mon-id

#monid{
    width:200px;
    height:200px;
}

Cible un élément par son identifiant. L'identifiant doit être unique. Plusieurs éléments d'une même page ne peuvent pas avoir le même identifiant.

.ma-classe

.error{
    color:red;
}

Cible un élément par sa classe, elles peuvent cibler plusieurs éléments.

Sélecteur de type

a{
    color:red;
}

Cible un élement par son type.

something:hover pseudo-class

a:hover { color: blue; }

a:visited { color: red; }

a:link { color: green; }

x + y sélecteur adjacent

div + p{
    color:red;
}

Le sélecteur adjacent correspond à tout élément Y qui est après / à droite d'un élément X.

X > Y sélecteur enfant direct

article > ul{
    background-color:red;
}

<div id="article">
    <ul> Sélectionné
        <li> element 1</li>
        <ul> Ignoré
            <li> element 1</li>
        </ul>
    </ul>
    <ul> Sélectionné
        <li> element 1</li>
    </ul>
</div>

Le sélecteur d'enfants directs correspond à tout élément Y qui est directement dans un élément X.

something:first-child // something:last-child

ul > li:first-child{
    color:pink;
}

Cible le premier enfant de l'élément parent.

something:NTH-OF-TYPE(X)

ul > li:nth-of-type(x) {
    font-size:10px;
}
                        

Sélectionne le Xème enfant (li) de l'élément parent (ul).

Les poids CSS

• Le poids d'un élément (une balise) type body, section, article est de 1.
• Le poids d'une classe est de 10.
• Le poids d'un ID est de 1000.
• Le poids d'un attribut de style est de 1000.

div {color:green;}  
.maDiv {color:blue;}
.maDiv {color:red;}

Le texte sera rouge.

div {background-color:blue;}  
div.maDiv {background-color:red;}  
.maDiv {background-color:yellow;}

Le texte sera rouge

<div id="maDiv" style="background-color:green"> </div>

Le texte sera vert !

Margin & Padding

Margin

margin-top: 0;
margin-right: 2em;
margin-bottom: 10px;
margin-left: 5%;

Padding

padding-top: 100px;
padding-right: 3em;
padding-bottom: 0;
padding-left: 20%;

En 1:

margin: 25px;
padding: 25px;

margin: 10px 25px;
padding: 10px 25px;

En 3:

margin: 25px 50px 100px;
padding: 25px 50px 100px;

margin: 10px 25px 5px 15px;
padding: 10px 25px 5px 15px;

Auto

margin: 0 auto;

Le navigateur calcule le margin (right/left) automatiquement.

Position

position: static;

position: relative;

position: absolute;

position: fixed;

Demonstration

<html>
<head>
<title>Test Position</title>
<style type="text/css">
body {height:3000px;margin:0;}
.one {height:100px;width:250px;background-color:red;}
.two {height:100px;width:250px;background-color:green;}
.three {height:100px;width:250px;background-color:blue;}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html

Les types d'éléments

Penser avec des boiboites

block

display:block;

• Retour a la ligne
• Toute la largeur
• Taille modulabme

Inline

display:inline;

• Pas de retour à la ligne
• Taille s'adaptant au contenu
• Donc pas de changement de la taille en CSS

Inline-block

display:inline-block;

• Pas de retour à la ligne
• Taille s'adaptant au contenu
• Changement de taille possible !

Et plein d'autres trucs

• inherit
• box
• flex
• table-cell
• table-row

Le flux horizontal

Toi, met toi tout a gauche

float:left;

Et toi, tout a droite

float:right;

Remise a zero des flux

clear:both;
clear:left;
clear:right;

Le cas Internet Explorer ♥

Solution ?

Les SHIV ou SHIM

Permettre au navigateur obsolète d'interpréter les balises HTML5

Html5 shiv

    							<!--[if lt IE 9]><script src="dist/html5shiv.js"></script><![endif]-->
<!--[if IE 5.0]><script src="dist/html5shiv.js"></script><![endif]-->
<!--[if IE]><script src="dist/html5shiv.js"></script><![endif]-->

   							 
   							

Détecteur de compatibilité HTML 5

    							
									 if (Modernizr.geolocation){
									  // La géolocalisation est supportée 
									}
									else {
									  // La géolocalisation n’est pas supportée
									}   								
   								
   							

Les solutions tout-en-un

Les solutions tout-en-un

Les solutions tout-en-un

Propriétés CSS3

Box Shadow

box-shadow: h-pos v-pos (blur) (spread) (color) (inset);

-moz-box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);
box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7);

Radius

border-radius: hg hd bg bd;

border-radius: 5px 10px 0 5px;

Gestion de l'opacité

background-color: rgba(0, 0, 215, 0.6);

Transition

div { background-color:pink;}

div:hover{
    background-color:red;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}
						

Site internet:

• Caniuse : Compatibilité des navigateurs
• Alsacréation : Actualités FR
• HTML5 ROCKS : Actualités EN & Tutorial
• W3schools: Test et database des propriétées css

Livres :

• CSS Avancé : Raphaël Goetter
• HTML 5 : Raphaël Goetter
• CSS maintenables : Kaelig deloumeau
• Intégration web - Les bonne pratiques : Corinne Schillinger

Les grid system

Avantage ?

• Intégration rapide
• Optimisation de la lisibilité : Typographie, mise en forme, etc...
• Compatibilité entre les navigateurs

Inconvénient ?

• Solution lourde niveau css
• Problème sémantique

960 GRID

Blueprint

Twitter Boostrap

1140 grid

Fondation