docMEMO HTML 5 / CSS 3 Mémo basé sur le tutoriel HTML5
download 
Report Transcription
MEMO HTML 5 / CSS 3 Mémo basé sur le tutoriel HTML5
MEMO HTML 5 / CSS 3
Mémo basé sur le tutoriel HTML5 / CSS3 de Mathieu Nebra sur le site OpenClassrooms.
Rédigé (en 2014) et diffusé librement par Raphaël Dujardin, au vu que le tutoriel original est
consultable librement. Le droit d'auteur revient à Mathieu Nebra.
Attention, ce mémo ne convient pas à un débutant complet souhaitant apprendre le HTML et le
CSS, cela requiert la lecture du tutoriel original. Le mémo a pour unique but d'accélérer la remise à
niveau et la recherche d'une information précise quand nécessaire pour quelqu'un ayant déjà appris
le sujet auparavant.
Balises HTML
<!DOCTYPE html>
<meta charset=''utf-8'' />
<p>
<br />
Paragraphe
Retour à la ligne (dans un paragraphe)
<h1>..<h6>
<em>
<strong>
<mark>
Titres
Mettre en valeur (dans un paragraphe)
Mettre bien en valeur (dans un paragraphe)
Faire ressortir visuellement sans forcément avoir de l'importance (ex : résultat de
recherche dans un texte) (apparence par défaut : surligné) (dans un paragraphe)
Liste à puces
Puce
Liste ordonnée
<ul>
<li>
<ol>
Liens
&
title
target=''_blank''
href=''mailto:''
& ; (notamment dans les href)
info bulle
« force » l'ouverture du lien dans un nouvel onglet ou une nouvelle fenêtre
Images
img doit se trouver dans un paragraphe
src,alt (obligatoire!)
title
info bulle
Figures
balise bloc (comme paragraphe)
peut contenir un peu tout
ex : <figure><img … /><figcaption>blabla</figcaption></figure>
figcaption : légende
Une même figure peut contenir plusieurs trucs, plusieurs images, etc.
CSS / Mettre en place le CSS
le css applique l'héritage : si on donne des propriétés à une balise, ces propriétés seront héritées par
toutes les balises contenues.
<link rel=''stylesheet'' href=''...'' />
appliquer un style à plusieurs balises : les énumérer avec des virgules
ex :
h1, em { … }
classes (.), id (#)
* : sélecteur universel
A B : balise contenue dans une autre
A + B : balise qui en suit une autre (sélectionne la première balise b située après un a)
A[attribut] : balise qui possède un attribut
A[attribut=''valeur''] : balise qui possède un attribut de telle valeur (valeur exacte)
A[attribut*=''valeur''] : l'attribut doit cette fois contenir tel truc dans sa valeur (peu importe sa
position)
il existe d'autres sélecteurs CSS.
(cf CSS3 module W3C selectors)
CSS / Formatage du texte
Taille de texte
font-size:16px ;
font-size : small ;
font-size : 0.8em ;
taille absolue (px : pixels ; cm, mm)
taille relative (recommandé) (xx-small, x-small, small, medium, large,
x-large, xx-large)
taille relative (recommandé) (ex : autre unité sur le même principe
mais plus petit de base ;%)
Polices
font-family : police1, police2 ;
polices (dans l'ordre de la préférée à la par défaut)
- en dernier : serif ou sans-serif
- polices courantes : Arial, Arial Black, Comic Sans MS,
Courier New, Georgia, Impact, Times New Roman, Trebuchet
MS, Verdana.
Formats de polices : ttf (ie9 et tous les autres navigateurs), eot (ie uniquement, toutes versions,
format propriétaire microsoft), otf (pas ie), svg (seul format reconnu sur les iphones et ipads pour le
moment), woff (nouveau format conçu pour le web, ie9 et tous les autres navigateurs).
Définir une nouvelle police :
@font-face
{
font-family : 'MaSuperPolice' ;
src : url('MaSuperPolice.eot') ;
}
@font-face
{
font-family : 'MaSuperPolice' ;
src : url('MaSuperPolice.eot') format('eot'),
url('MaSuperPolice.woff') format('woff'),
url('MaSuperPolice.ttf') format('truetype'),
url('MaSuperPolice.svg') format('svg') ;
}
Cette forme permet de proposer plusieurs formats, le browser téléchargera celui qu'il sait lire.
@font-face
{
font-family :'a' ;
src : url('a.eot') ;
src : url('a.eot?#iefix') format('embedded-opentype'),
url('a.woff') format('woff'),
url('a.ttf') format('truetype'),
url('a.svg#a') format('svg') ;
}
Cette dernière forme permet de pallier certains bugs sur IE car les anciennes versions ne
comprennent pas quand on définit plusieurs formats.
Puis on peut l'utiliser dans un font-family.
Apparence
font-style : normal ;
font-style : italic ;
font-style : oblique ;
font-weight : normal ;
font-weight : bold ;
text-decoration : none ;
text-decoration : underline ;
text-decoration : line-through ;
text-decoration : overline ;
text-decoration : blink ; (ne fonctionne pas sur tous les navigateurs, ie et chrome notamment).
Alignement
text-align : left / center / right / justify ;
texte justifié : prend toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les
textes des journaux par ex sont toujours justifiés.
L'alignement ne fonctionne que sur des balises de type block, et pas inline.
Flottants
float : left / right ;
fait flotter l'élément à gauche ou à droite.
Fonctionne sur les block et les inline (rappel : img est inline).
L'élément flottant doit précéder l'habillage dans le HTML.
Faire arrêter un flottant :
clear : left/right/both;
le texte se poursuit en-dessous après un float:left / right ou après un float quelconque.
On utilisera souvent both.
CSS / Couleur et fond
Couleurs standard :
Couleur de texte :
color : blue ;
color : #ffffff ;
color : rgb(128,128,128) ;
background-color
background-image : url(''neige.png'') ;
background-attachment : fixed/scroll ; (fixed : fixée, scroll : défilante avec le texte (par déf))
background-repeat : no-repeat / repeat-x / repeat-y / repeat ;
background-position : 30px 50px ; (x puis y)
ou : top, bottom, left, center, right (combinables, ex top right).
On peut combiner les propriétés, ex :
background : url(''soleil.png'') fixed no-repeat top right ;
C'est une super-propriété. L'ordre des valeurs n'a pas d'importance, elles sont toutes facultatives.
Plusieurs images de fond :
séparer par des virgules.
background : url(''soleil.png'') fixed no-repeat top right, url(''neige.png'') fixed ;
de l'avant plan vers l'arrière plan.
Cela fonctionne sur tous les browsers sauf ie < 9.
Transparence
opacity : 0.6 ; (0 → 1)
fonctionne sur tous les browsers sauf ie < 9
attention à l'héritage : tout le contenu devient transparent
background-color : rgba(255,0,0,0.5) ;
composante alpha idem 0->1 d'opacité
même compatibilité
recommandé de faire succéder background-color rgb et background-color rgba pour la
compatibilité
CSS / Bordures et ombres
Bordures standard
super-propriété border
largeur (en px), couleur, type
types : none, solid (trait simple), dotted (pointillés), dashed (tirets), double (bordure double), groove
(en relief), ridge (autre effet relief), inset (effet 3d global enfoncé), outset (effet 3d global surélevé)
on peut appliquer des bordures différentes selon le côté : border-top, border-bottom, border-left,
border-right (super-propriétés également).
Bordures arrondies
border-radius : 10px ;
border-radius : 10px 5px 10px 5px ;
formes différentes pour chaque coin (en haut à gauche, en haut à droite, en bas à droite, en
bas à gauche).
On peut affiner l'arrondi des angles en créant des courbes elliptiques : il faut indiquer deux valeurs
séparées par un slash.
Border-radius : 20px / 10px ;
les bordures arrondies fonctionnent sur tous browsers sauf ie < 9.
Ombres
ombres des boîtes :
box-shadow : s'applique à tout le bloc et prend 4 valeurs dans l'ordre suivant : décalage x
(px), décalage y (px), adoucissement du dégradé (px), couleur de l'ombre.
L'adoucissement peut être faible (inférieur au décalage), normal (égal au décalage), élevé
(supérieur au décalage).
On peut rajouter une 5è valeur facultative : inset. L'ombre sera placée à l'intérieur du bloc
pour donner un effet enfoncé.
Fonctionne sur tous sauf ie < 9.
il faut encore rajouter une version -webkit-box-shadow.
Ombre du texte :
text-shadow : même principe que box-shadow.
Marche sur tous browsers sauf ie < 10.
Apparences dynamiques
:hover
au survol
:active
au moment du clic
:focus
lorsque l'élément est sélectionné
:visited
lorsque le lien a déjà été consulté
MISE EN PAGE DU SITE
header
footer
nav
section
aside
article
en-tête
pied de page
principaux liens de navigation
section de page
informations complémentaires
article indépendant
ces balises doivent encore contenir des blocs.
on peut avoir des header et des footer dans les section ou les article, etc. tout peut s'imbriquer. Tout
est sémantique.
Compatibilité IE < 9
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></s
cript>
<![endif]-->
Modèle des boîtes
Plusieurs types de balises : block, inline, table-cell, list-item, etc.
Balises universelles : div (block), span (inline).
Dimensions
uniquement pour les block.
width (px / % ), height (px / % ) : taille du contenu (à laquelle viennent s'ajouter les marges pour
donner la taille de l'élément)
tailles minimales et maximales : min-width, min-height, max-width, max-height
en général tailles en % et tailles limites en px.
Marges
tous les blocs et les inlines possèdent des marges.
Marges intérieures, marges extérieures : padding, margin.
Margin-top, padding-bottom, etc.
superpropriétés :
margin : 2px 0 3px 1px ; en haut, à droite, en bas, à gauche
margin : 2px 1px ; en haut et en bas, à gauche et à droite
margin:auto ; centre l'élément (horizontalement seulement).
Dépassements
overflow (texte % bloc)
visible (par défaut) : si le texte dépasse, il reste visible et sort volontairement du bloc
hidden : il est coupé
scroll : coupé mais avec barres de défilement
auto : le browser décide de mettre ou non des barres de défilement (il n'en mettra que si c'est
nécessaire). Valeur conseillée.
word-wrap (largeur des textes)
break-word : césure forcée (conseillé dès qu'un bloc est susceptible de contenir du texte saisi
par des utilisateurs, par ex dans un forum).
Positionnement
Positionnement flottant : obsolète.
display
inline : éléments d'une ligne, se placent les uns à côté des autres
block : éléments en forme de blocs, se placent les uns en dessous des autres et peuvent être
redimensionnés
inline-block : éléments positionnés les uns à côté des autres (comme les inlines) mais qui
peuvent être redimensionnés (comme les blocs)
none : éléments non affichés
Positionnement inline-block (recommandé).
display : inline-block ;
Les éléments vont se placer côte à côte et être redimensionnables.
Problème : ils s'alignent par le bas, selon une baseline (ligne de base).
On utilise vertical-align : baseline (par défaut) / top / middle / bottom / valeur en px ou en % qui
aligne à une certaine distance de la baseline.
Attention, transformer un élément block en inline-block fait qu'il ne va plus prendre toute la largeur
disponible, mais uniquement la largeur dont il a besoin. Il faut utiliser width.
Compatibilité IE < 8 :
<!--[if lte IE 7]>
<link rel="stylesheet" href="style_ie.css" />
<![endif]-->
A mettre après la feuille normale dans le HTML. Dans la feuille réservée à IE < 8, mettre sur les
éléments considérés :
display : inline ;
zoom : 1 ;
Positionnements absolu, fixe et relatif
Il existe d'autres techniques un peu particulières permettant de positionner avec précision des
éléments sur la page. Comme pour les flottants, elles fonctionnent aussi sur des balises inline, mais
on les utilise bien plus souvent sur des balises block.
Choix du mode de positionnement.
position : absolute / fixed / relative.
Positionnement absolu.
left : right : top : bottom :. px ou %.
On peut n'utiliser qu'une partie de ces propriétés, par ex utiliser right:0px pour forcer l'affichage sur
la droite.
Les éléments positionnés en absolu sont placés par-dessus le reste. Propriété z-index : z plus grand
met à l'avant plan si des éléments se chevauchent.
Le positionnement absolu ne se fait pas forcément toujours par rapport au coin haut et gauche de la
fenêtre ! Si on positionne en absolu un bloc A qui se trouve dans un autre bloc B, lui-même
positionné en absolu (ou fixe ou relatif), le bloc A se positionne par rapport au coin haut et gauche
du bloc B.
Positionnement fixe.
Idem.
Positionnement relatif.
L'élément est décalé par rapport à sa position initiale.
Compatibilité IE
IETester, ou bien sur IE9 faire F12 pour afficher le dock développeurs. Un menu « mode
navigateur » permet de simuler les anciennes versions à partir de IE 7.
Erreurs courantes d'affichage : positionnement inline-block (cf astuce), balises structurantes de
HTML 5 (cf astuce avec un petit script).
Il faut faire une croix sur certaines fonctionnalités CSS 3 : coins arrondis, images de fond multiples,
transparence, ombres. On fera une dégradation gracieuse : sur les anciennes versions des
navigateurs on ne cherche pas à obtenir tous les effets, mais on s'efforce d'avoir un site qui reste
quand même lisible sur les vieux navigateurs.
Faire fonctionner les balises structurantes de HTML5 :
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></scrip
t>
<![endif]-->
Positionnement inline-block : cf astuce plus haut avec une feuille de style spéciale.
D'autres erreurs existent sur les vieilles versions d'IE : le texte n'est pas toujours à la bonne taille,
certains blocs sont eux aussi mal dimensionnés, etc. Ces différences doivent être réglées au cas par
cas dans la feuille spéciale vieux IE.
Vérifier la validité
http://validator.w3.org
Ce n'est pas parce que votre page web s'affiche correctement qu'elle ne comporte pas d'erreur.
Mais rien ne vous dit que certains navigateurs ne vont pas se comporter bizarrement !
Avoir une page web valide, c'est avoir la possibilité de dormir tranquille en sachant que l'on a bien
fait les choses comme il faut.
FONCTIONNALITES EVOLUEES
Tableaux
Tableaux simples
<table></table>
<caption></caption> : titre du tableau
<tr></tr> : ligne
<td></td> : cellule
<th></th> : cellule dans la ligne d'en-tête (première ligne du tableau)
table { border-collapse : collapse / separate ; }
td, th{ border : 1px solid black ; }
propriété caption-side : top/bottom (position du titre au-dessus ou en-dessous du tableau, top par
défaut).
Tableaux structurés
On peut diviser les gros tableaux en trois parties : en-tête, corps, pied.
<thead></thead>, <tbody></tbody>, <tfoot></tfoot>.
Généralement si le tableau est long, on remet dans tfoot les cellules d'en-tête.
Il est conseillé d'écrire les balises dans l'ordre thead, tfoot, tbody.
On peut fusionner des cellules avec un attribut dans td.
Fusion de colonnes : colspan.
Fusion de lignes : rowspan.
L'attribut prend en valeur le nombre de cellules à fusionner.
Ex : <td colspan=''2''>.
Indique que la cellule prend la place de deux cellules à la fois (du coup il y a un td en moins après).
On peut modifier l'alignement vertical du texte des cellules de tableaux avec la propriété verticalalign.
Formulaires
<form></form>
Il faut obligatoirement le remplir de balises de type block.
On mettra les champs dans des paragraphes.
Attributs de form :
method : ''get'' / ''post'' (get déprécié car données visibles dans l'adresse et limitées à 255 caractères)
action : adresse de la page ou du programme qui va traiter les informations
Les attributs name des champs permettront le traitement.
Labels
<label for=''pseudo''>Pseudo</label>
for fait référence à l'id et non pas au name.
Zones de texte
monoligne : <input type=''text'' name=''pseudo'' id=''pseudo'' />
attributs supplémentaires : size pour agrandir le champ (en caractères), maxlength pour limiter le
nombre de caractères que l'on peut saisir, value pour pré-remplir le champ, placeholder pour
indiquer quoi saisir, par un exemple par exemple.
mot de passe : type=''password''
multiligne : <textarea></textarea>
taille modifiable en CSS avec width et height, ou avec des attributs rows et cols.
Dans le textarea on met le texte de pré-remplissage. Pas d'attribut value donc.
Zones de saisie enrichies
Apparues avec HTML5 mais pas de problème pour les vieux navigateurs qui les remplacent par des
input text.
input email : même apparence qu'un text mais certains navigateurs vont entourer le champ en rouge
si le champ email est mal renseigné, et certains navigateurs mobiles notamment vont afficher un
clavier adapté à la saisie d'email
input url : là encore clavier adapté sur les mobiles
input tel : numéro de téléphone, idem.
input number : champ avec des petites flèches pour changer la valeur.
attributs : min (valeur minimale autorisée), max (valeur max autorisée), step (pas)
input range : réglette, là encore attributs min max et step
input color : permet de saisir une couleur. Assez peu mis en œuvre par les navigateurs à l'heure
actuelle.
input date : sélection de date
time : heure
week : semaine
month : mois
datetime : date et heure (avec gestion du décalage horaire)
datetime-local : date et heure (sans gestion du décalage horaire)
actuellement peu mis en œuvre.
input search : champ de recherche.
Le navigateur décide ensuite comment l'afficher. Ainsi, il peut afficher une petite loupe au champ
pour signifier que c'est un champ de recherche et éventuellement mémoriser les dernières
recherches effectuées par le visiteur.
Elements d'options
cases à cocher, zones d'options, listes déroulantes.
Cases à cocher.
input checkbox.
On mettra le label après le input pour afficher le texte à droite de la case à cocher.
Donner un name différent à chaque case à cocher.
Attribut checked (sans valeur) pour cocher par défaut.
Zones d'options.
input radio, toutes avec le même name pour les regrouper.
Là encore, attribut checked.
Listes déroulantes.
<select></select> munie de name et id.
Contenu : <option value=''machin''>machin</option> <option value=''truc''>truc</option>.
Option peut prendre l'attribut selected pour être sélectionnée par défaut.
On peut regrouper les options avec <optgroup label=''bidules''></optgroup>. Les groupes ne
peuvent pas être sélectionnés, ils catégorisent juste les options.
Finitions et envoi du formulaire
Regrouper les champs.
<fieldset></fieldset> : groupe de champs.
Fieldset peut contenir une balise <legend></legend> contenant du texte.
Sélectionner automatiquement un champ.
Attribut autofocus dans un champ.
Dès que le visiteur chargera la page, le curseur se placera dans ce champ.
Pseudo-format CSS =>:focus.
Rendre un champ obligatoire.
Attribut required dans un champ.
Le navigateur indiquera alors au visiteur, si le champ est vide au moment de l'envoi, qu'il doit
impérativement être rempli.
Les anciens navigateurs, qui ne reconnaissent pas cet attribut, enverront le contenu du formulaire
sans vérification. Pour ces navigateurs il faut compléter les tests avec par exemple du javascript.
Pseudo-formats CSS =>:required,:invalid.
Bouton d'envoi.
Input submit : principal bouton d'envoi de formulaire. Le visiteur sera conduit à la page indiquée
dans l'attribut action du formulaire.
Input reset : remise à zéro du formulaire.
Input image : équivalent du bouton submit, présenté cette fois sous forme d'image. Rajouter
l'attribut src pour indiquer l'url de l'image.
Input button : bouton générique, qui n'aura par défaut aucun effet. En général géré en javascript.
Les inputs de type boutons peuvent prendre un attribut value pour modifier leur texte.
Vidéo et audio
Formats audio.
MP3 : compatible IE, Chrome, Safari. Incompatible Firefox, Opera.
OGG : compatible Chrome, Firefox, Opera. Incompatible IE, Safari.
On pourra donc proposer différents formats aux navigateurs qui sélectionneront celui qu'ils savent
lire.
Formats vidéo.
Le stockage d'une vidéo a trois paramètres : format conteneur (avi, mp4, mkv...) contenant les deux
éléments suivants, codec audio (cf ci-dessus), codec vidéo. Voici la compatibilité des codecs vidéo :
H.264 : compatible IE, Safari, Opera. Incompatible Chrome, Firefox.
Ogg Theora : compatible Chrome, Firefox, Opera. Incompatible IE, Safari.
WebM : compatible IE, Chrome, Firefox, Opera. Incompatible Safari.
Là encore on proposera plusieurs formats.
Pour la conversion on pourra utiliser le logiciel Miro Video Converter.
Insertion d'un élément audio
<audio></audio>
Compatible sauf IE < 9.
Attributs.
Src : fichier.
Controls : pour ajouter les contrôles de lecture et la barre de défilement. N'y figure pas par défaut,
certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du
javascript.
Width : modifier la largeur de l'outil de lecture audio (en pixels sans préciser px).
Loop : la musique sera jouée en boucle.
Autoplay : la musique sera jouée dès le chargement de la page. Eviter d'en abuser.
Preload : indique si la musique peut être préchargée dès le chargement de la page ou non.
Valeurs : auto (par défaut) : le nav décide s'il doit précharger toute la musique, uniquement
les métadonnées ou rien du tout ; metadata : charge uniquement les métadonnées (durée, etc), none :
pas de préchargement.
On ne peut pas forcer le préchargement de la musique, c'est toujours le navigateur qui
décide.
Contenu de la balise : texte alternatif vieux navigateurs.
Il est conseillé en texte alternatif de mettre un player flash, comme Dewplayer.
Pour proposer plusieurs formats, au lieu de mettre un attribut src on met dans le contenu des balises
<source src=''machin.mp3''>. Le navigateur prendra automatiquement le format qu'il reconnaît.
Attention, la balise source ne doit pas être fermée ni avoir le /> d'une balise orpheline.
Insertion d'une vidéo
<video></video>
Même compatibilité.
Attributs (cf audio pour les détails déjà mentionnés).
Poster : image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le
navigateur prend la première image de la vidéo mais il est conseillée d'en créer une.
Controls
width
height
loop
autoplay
preload (mêmes valeurs, même remarque)
Les proportions de la vidéo sont toujours conservées. Si vous définissez une largeur et une hauteur,
le navigateur fera en sorte de ne pas dépasser les dimensions indiquées mais il conservera les
proportions.
Même principe pour le contenu alternatif.
Même principe pour proposer plusieurs formats.
Attention, les iphone ipad et ipod ne reconnaissent à l'heure actuelle que le H.264 (fichier .mp4) et
uniquement si celui-ci apparaît en premier dans la liste ! Il est donc conseillé d'indiquer ce format
en premier.
A l'heure actuelle, impossible d'afficher la vidéo en plein écran (même en javascript), et impossible
de protéger la vidéo du téléchargement.
Mise en page adaptative avec les media queries
Compatible tous browsers sauf IE < 9.
Une media query va permettre de ne considérer un code CSS que si une règle est vérifiée.
Mettre en place une media query
Deux façons d'appliquer une media query : en chargeant une feuille différente en fonction de la
règle, ou en écrivant la règle directement dans la feuille habituelle.
Chargement d'une feuille différente : ajouter à la balise link un attribut media dans lequel on va
écrire la règle.
Directement dans la feuille : (à préférer) : @media règle { … }.
Règles disponibles
color : gestion de la couleur (en bits/pixel)
height : hauteur de la zone d'affichage (fenêtre)
width : largeur de la zone d'affichage (fenêtre)
device-height : hauteur du périphérique
device-width : largeur du périphérique
orientation : orientation du périphérique (portrait ou paysage)
media : type d'écran de sortie
valeurs possibles : screen (écran classique), handheld (périphérique mobile), print
(impression), tv (télévision), projection (projecteur), all (tous types d'écran)
On peut rajouter le préfixe min- ou max- devant la plupart de ces règles.
Les règles peuvent être combinées à l'aide des mots suivants : only (uniquement), and (et), not
(non).
Exemples :
@media screen and (max-width : 1280px)
@media all and (min-width : 1024px) and (max-width : 1280px)
@media tv
@media all and (orientation : portrait)
Les anciens navigateurs (notamment IE < 9) ne connaissent pas les media queries mais sont
capables d'interpréter le début de la règle (ils savent lire @media screen par ex). Ils vont donc lire
les propriétés CSS qui suivent même s'ils ne sont pas concernés par la règle ! Pour éviter cela, une
astuce consiste à utiliser le mot-clé only que ces vieilles versions ne connaissent pas : « @media
only screen » ne provoquera pas de bug sur les vieux navigateurs.
Les media queries sont surtout utilisées pour adapter le design du site aux différentes largeurs
d'écran.
Media queries et navigateurs mobiles
Les navigateurs mobiles affichent le site en « dézoomant », ce qui permet d'avoir un aperçu de
l'ensemble de la page. La zone d'affichage simulée est appelée le viewport : c'est la largeur de la
fenêtre du navigateur sur le mobile. Autrement dit, les navs mobiles simulent une largeur d'écran, on
appelle cela le viewport.
Si l'on cible l'écran avec max-width sur un mobile, celui-ci va comparer la largeur que vous
indiquez avec celle de son viewport. Le problème c'est que le viewport change selon le navigateur
mobile utilisé : opera mobile (850px), iphone safari (980px), android (800px), windows phone 7
(1024px). En bref, un iphone se comporte comme si la fenêtre faisait 980px de large, tandis qu'un
android se comporte comme si la fenêtre faisait 800px.
Pour cibler les smartphones, plutôt que d'utiliser max-width, on utilisera max-device-width. Les
périphériques mobiles ne dépassant pas 480px de large, on pourra viser uniquement les navs
mobiles avec cette media query : @media all and (max-device-width : 480px).
On n'utilise pas media handheld car quasi aucun nav mobile ne la reconnaît, ils se comportent tous
comme s'ils étaient des écrans normaux (screen).
On peut modifier la largeur du viewport du nav mobile avec une balise meta à insérer dans le head :
<meta name=''viewport'' content=''width=320'' />. Pour obtenir un rendu facile à lire, sans zoom :
<meta name=''viewport'' content=''width=device-width'' />.
TECHNOLOGIES LIEES A HTML 5
Canvas
SVG
Drag & Drop
File API
Géolocalisation
Web Storage
Appcache
Web Sockets
WebGL
MEMENTOS HTML ET CSS
cf tutoriel
GERER LA COMPATIBILITE ENTRE LES NAVIGATEURS
Commentaires conditionnels
Souvent ce sont les anciennes versions d'IE qui posent problème.
<!--[if IE]>
Code HTML réservé à IE
<![endif]-->
Au lieu d'IE on peut mettre :
IE8 : cible une version précise
précédé de lt (inférieur), lte (inférieur ou égal), gt (supérieur) ou gte (supérieur ou égal).
Au contraire, pour un code HTML lu par tous les navigateurs sauf IE :
<!--[if !IE]><!-->
Code HTML pour les navigateurs différents d'IE
<!--<![endif]-->
Plutôt que faire une feuille par version, mettra la balise body avec une class dans les commentaires
conditionnels et finir par un test non IE avec une balise body simple.
Remarque : on peut donner plusieurs noms de classes à une balise, en les séparant par un espace.
Hacks CSS
Astuces qui permettent de faire en sorte que les propriétés CSS soient lues par certaines versions
d'IE uniquement. Déconseillé car on se base sur des bugs des navigateurs, rien ne garantit qu'ils
fonctionneront à l'avenir.
Idée : dans le nom d'une propriété CSS, mettre un antislash pour que la propriété soit lue par IE6 et
7 et ignorée par le reste des browsers ; ou bien la précéder d'un * pour le même effet, ou bien la
précéder d'un _ pour la faire lire uniquement par IE6.
Les outils de débogage
Soit simplement mettre temporairement une couleur de fond flashy à un élément qui pose problème
pour bien le voir, par ex pour régler un problème de positionnement.
Soit utiliser les outils de débogage des navigateurs (cf tutoriel pour un peu de détails).
