Formation CSS3

la syntaxe des feuilles de style

Où indiquer le style ?

Le style peut être indiqué :
- dans chaque balise xHTML en y plaçant les attributs de style (à éviter) :
```
<h1 style="color:red">
```
- dans la section <head> du HTML en décrivant le style entre les balises <style> (à éviter excepté dans le cas du test) :
```
<style type="text/css">
h1 {color:red}
</style>
```
- dans un fichier à part (à mettre dans la section <head> du HTML) :
```
<link rel="stylesheet"
    type="text/css" href="feuille.css"/>
```
  C'est la bonne méthode, car elle contribue à faciliter la maintenance et à réduire de bande passante.

Le fichier des règles de style

Il va contenir les règles de mise en forme.
Par convention, il aura l'extension .css

Exemple : feuille.css. Il contiendra les informations de style à appliquer sur chaque balise :

h1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #CC3300;
  text-align:center;
}

Analyse de la syntaxe

On remarque que :
- la balise à considérer est indiquée en toutes lettres sans les chevrons <>, c'est le sélecteur,
- les règles sont entourées par des accolades {},
- chaque règle a une syntaxe du type : attribut:valeur;,
- la syntaxe générale est :
```
selecteur1,selecteur2,...selecteurN {
  attribut1:valeur1;
  attribut2:valeur2;
  attribut3:valeur3;
   ...
  attributN:valeurN;
}
```

Exemple de page HTML
utilisant une CSS


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Document sans nom</title>
<link href="test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>C'est le titre !</h1>
</body>
</html>

Lien entre le style et le médium

Le style doit dépendre du médium cible :
- écran haute définition,
- imprimante,
- navigateur vocal,
- ...

Ceci peut être fait par l'attribut media dans la balise link :

<link rel="stylesheet" type="text/css"
      href="screen.css" media="screen"/>
<link rel="stylesheet" type="text/css"
      href="print.css" media="print"/>

dans le fichier de CSS :
```
@media print {h1 {color:#000}}
```

Feuilles de style multiples

Il est possible de gérer simultanément plusieurs fichiers CSS :

en utilisation simultanée pour segmenter le code :

<link rel="stylesheet"
              type="text/css" href="base.css"/>
<link rel="stylesheet"
              type="text/css" href="color.css"/>

en utilisation séparée pour permettre à l'utilisateur de choisir son style :

<link rel="stylesheet" type="text/css"
               title="été" href="summer.css"/>
<link rel="stylesheet alternate" type="text/css"
               title="hiver" href="winter.css"/>

title permettra au navigateur de proposer le style à utiliser,
le mot alternate indique que la feuille n'est pas à charger par défaut.

Les apports sur le médium CSS3

L'apparition de nouveaux dispositifs a provoqué des nouveaux besoins pour le choix du médium :
- La directive handheld n'est pas toujours utilisée par les téléphones mobiles car jugée trop restrictive,
- La dimension d'un écran est plus importante,
- il en est de même pour sa définition,
- son aspect ratio, son poids, ...
Pour palier ces déficiences il est possible de choisir un style en fonction :
- de l'un de ces critères,
- plus généralement d'un combinaison de ces critères.

Les apports sur le médium CSS3

Exemple de règle CSS appliquée à une fenêtre sur un dispositif de type screen de largeur inférieure à 100mm :
```
@media screen and (max-width:100mm) { 
 body{
  font-size:15px;
 }
}
```
Exemple de règle CSS appliquée à un dispositif de type screen de largeur inférieure à 100mm :
```
@media screen and (max-device-width:100mm) { 
 body{
  font-size:33px;
 }
}
```

Exemple de règle CSS appliquée à un ensemble de dispositifs dont le type handheld quel qu'il soit :

@media screen and (max-width:100mm),
  screen and (max-device-width: 100mm),
  handheld {
 body{font-size:20px}
}

Les attributs propriétaires

En phase préliminaire les éditeurs de logiciel utilisent des attributs expérimentaux.
Ceux-ci ont très souvent le nom de la propriété telle que spécifiée par la norme, mais préfixée du nom de l'éditeur.
Ainsi pour la propriété transform on peut utiliser :
- -webkit-transform sur les navigateurs basés sur webkit,
- -moz-transform sur les navigateurs basés sur mozilla,
- -ms-transform sur les navigateurs microsoft,
- -o-transform sur le navigateur opera.
Après un phase de validation les attributs propriétaires basculent en mode standard.
Le nom propriétaire reste cependant actif avec une priorité supérieure à celle de la propriété standard.

Juxtaposé au fait que les attributs inconnus d'un agent de navigation doivent être ignorés (ceci est spécifié dans la norme CSS tous nivaux confondus), le mécanisme des attributs propriétaires permet, en plus de l'adoption de comportements expérimentaux, de réaliser des hacks afin de contourner certaines déficiences propres à un navigateur particulier sans perturber le fonctionnement global.

L'utilisation de propriétés spécifiques demande un surveillance plus importante car celles-ci peuvent disparaître lors d'une mise à jour.

Documentation

Les spécifications du W3C sur le choix des médias : http://www.w3.org/TR/css3-mediaqueries

Formation CSS3

la syntaxe des feuilles de style

Où indiquer le style ?

Le fichier des règles de style

Analyse de la syntaxe

Exemple de page HTML utilisant une CSS

Lien entre le style et le médium

Feuilles de style multiples

Les apports sur le médium CSS3

Les apports sur le médium CSS3

Les attributs propriétaires

Documentation

Exemple de page HTML
utilisant une CSS