HTML5 : allege le code nouvelle balise: pour les lien vers des

HTML5 :
allege le code
nouvelle balise:
<nav> pour les lien vers des pages web
<aside> pour du texte sur les coté
<article>pour rajouter un artcicle
<section>
<header>
<footer>
plus besoin de div pour le header footer les le reste de la page des balises existe en HTML5
Nouvelle balise fun
<audio>
<video>
PhoneGap est un framework JavaScript/HTML 5 qui permet aux développeurs de concevoir des
applications mobiles hybrides en JavaScript, HTML et CSS pouvant exploiter les principales
fonctionnalités et ressources (géolocalisation, accéléromètre, etc.) des plateformes mobiles.
CSS3
Afin de styliser notre bulle de bande dessinée nous allons commencer par lui
appliquer une simple bordure d’1 pixel et un fond blanc :
1
2
3
4
.comment{
background:white;
border:1px solid black;
}
Se pose ensuite la question fatidique des coins arrondis. Je ne doute pas que la
plupart d’entre vous savent déjà que je vais vous parler de la propriété borderradius.
Effectivement, c’est ce que nous allons maintenant utiliser pour arrondier nos coins. Il
s’agit d’une nouvelle propriété CSS3 que l’on utilise en spécifiant la taille de
l’arrondis de notre bordure :
.comment{
1
background:white;
2
border:1px solid black;
3
border-radius:30px;
4
}
5
Donc là vous vous précipitez vers votre navigateur favoris pour tester ce code… et
là, c’est le drame.
Je ne vois aucune bordure arrondie, tu nous as roulés ! cat fonctionne pas encore
sur tous les navigateurs
Sans CSS3 nous aurions du utilisé des images au préalable réalisé sous photoshop et un tableu :Nous
voici donc partis pour mettre en place l’HTML de notre tableau à 9 cases (au mieux certaines
techniques alternatives réduisent à 3 cases à condition que la largeur ou la hauteur de votre
bloc soit fixe).Après avoir donc passé 2 heures sous Photoshop à essayer de bien caler au
pixel près vos images, notre pauvre balise <div> s’est maintenant transformée en quelque
chose du genre :
Pour revenir au CSS3 certain navigateur se mette au norme heuresement :
Nous allons maintenant voir un bon nombre de nouveautés que je vais diviser en 3
grandes catégories :
Les effets visuels
Les sélecteurs
Les nouveaux outils pratiques
border radius
Arrondit les bords d’un bloc :
box-shadow
Applique une ombre sur un bloc :
text-shadow
Applique une ombre sur un texte :
gradients
Affiche un dégradé de couleurs :
ont face
Permet d’utiliser n’importe quelle police :
opacity
Ajuste la transparence d’un élément :
transform
Déplace, déforme, ou effectue la rotation d’un élément :
transition
Passe d’un état à un autre d’un élément avec par une transition animée :
3D transform
Effectue des transformations en 3D :
Le CSS3 introduit un ensemble de nouveaux sélecteurs.
En voici quelques uns :
Sélection par position des fils
:nth-child(expression) permet de sélectionner un ensemble d’éléments selon leur
position grâce à une expression mathématique (rassurez-vous, pas de cosinus
d’exponentielle au carré au programme !) ou bien grâce à certains mots-clés.
Un cas d’utilisation très fréquent est la coloration d’un tableau.
Il est plus lisible d’utiliser 2 couleurs de fond différentes alternées afin que l’utilisateur
puisse se repérer plus facilement :
On pouvait auparavant utiliser du Javascript ou un code côté serveur pour colorer
une ligne sur deux. On a maintenant une méthode bien plus simple grâce à :nth-child
:
table tr:nth-child(odd){
background-color:#EEF;
}
Le mot-clé “odd” signifie « chiffres impairs » (et “even” pour les chiffres pairs)
Selecteur d attribut : [attribut^="valeur"]
[attribut^="valeur"] sélectionne les éléments dont l’attribut spécifié commence par
une certaine valeur.
Voici un exemple d’utilisation :
1
2
3
4
1
2
3
<a
<a
<a
<a
href="http://www.exemple1.com">Lien externe</a>
href="http://www.exemple2.com">Lien externe</a>
href="#">Lien interne</a>
href="http://www.exemple3.com">Lien externe</a>
a[href^="http://"]{
color:red;
}
:not permet d’exclure certains éléments de la sélection. Par exemple, le code suivant
n’affichera en vert que les 2 derniers liens :
1
2
3
<a href="#" class="notme">Je suis rouge</a>
<a href="#">Je suis vert</a>
<a href="#">Je suis vert</a>
1
2
3
4
5
6
a{
color:red;
}
a:not(.notme){
color:green;
}
X:not(selecteur)
1.div:not(#contenu) {
2.color: blue;
3.}
La pseudo-classe de négation a une utilité particulière. Le code ci-dessus permet de sélectionner
tous les div , sauf ceux qui ont pour id #contenu .
X:nth-child(n)
1.li:nth-child(3) {
2.color: red;
3.}
La notation de pseudo-classe :nth-child(an+b) représente un élément qui a an+b-1 éléments
frères devant lui dans le document, pour une valeur entière positive ou nulle de n. En d'autres
mots, cela sélectionne chaque b-ième fils d'un élément après que tous ses enfants aient été
séparés en groupes de a éléments chacun. Par exemple, cela permet de sélectionner les lignes
paires dans un tableau, et peut être utilisé, par exemple, pour alterner la couleur du texte d'un
paragraphe sur quatre couleurs. Les valeurs de a et b doivent être des entiers négatifs, positifs ou
nuls. L'index du premier enfant d'un élément est 1.
De plus, :nth-child() peut prendre pour argument odd et even. odd a la même signification que
2n+1, et "even" a la même signification que 2n. Source
X:nth-last-child(n)
1.li:nth-last-child(2) {
2.color: red;
3.}
Et si vous aviez une liste comportant de nombreux éléments et que vous aviez besoin d'accéder à
l'avant-dernier élément. Au lieu de faire li:nth-child(398) , vous pouvez utiliser li:nth-lastchild .
X:nth-of-type(n)
1.ul:nth-of-type(3) {
2.border: 1px solid black;
3.}
Imaginez que vous ayez cinq listes. Pour cibler seulement la troisième liste, vous pouvez utiliser la
pseudo-classe :nth-of-type(n).
Les media queries
Les media queries sont une manière élégante de définir des styles différents selon le
type de média de l’utilisateur. C’est particulièrement utile pour avoir des styles
différents sur les écrans de petite taille des smartphones et des tablettes tactiles.
Ainsi une seule page HTML utilisant les media queries peut distribuer des versions
différentes de son design, afin de s’adapter par exemple à la largeur de l’écran ou
même à l’orientation du téléphone.
1
2
3
4
body{
background-color:green;
}
5
6
7
8
9
10
11
12
13
@media screen and (max-device-width: 600px) {
/* Style appliqué uniquement sur les écrans de moins de 600px de largeur */
body{
background-color:red;
}
}
Dans cet exemple le fond de la page s’affichera en vert sur les grands écrans et en
rouge sur les petits écrans.
Les colonnes
Avec le CSS3 il est désormais possible de définir des colonnes, à la manière des
contenus éditoriaux de journaux. Ce cas d’utilisation était assez rare avant
l’apparition du CSS3, qui simplifie grandement les choses. Avec un code aussi
simple que :
1
2
3
p{
column-count:2;
}
On peut passer très facilement de :
à
RGBA
Il est désormais également possible d’utiliser de nouvelles notation pour spécifier des
couleurs. La méthode standard RGB accueille maintenant une composante Alpha qui
gère l’opacité. Cette nouvelle notation diffère beaucoup de la précédente.
On utilise le format rgba(r, g, b, a) avec « r », « g » et « b » étant des entiers de 0 à
255 et « a » un décimal de 0 à 1.
Ainsi pour colorer un arrière plan en rouge semi-transparent nous devons écrire :
1
2
3
div{
background-color: rgba(255, 0, 0, 0.5);
}
http://www.html5-css3.fr/css3/introduction-css3#more-356
HTML5
Le W3C et le WHATWG
Le W3C (World Wide Web Consortium) est l’organisation qui s’occupe de
standardiser le web. Elle est constituée d’un ensemble de membres actifs qui
réfléchissent à l’évolution des standards tels que l’HTML et le CSS. Ils discutent par
exemple des bonnes pratiques à employer pour écrire son code HTML, ou encore de
nouvelles balises qu’il serait intéressant d’ajouter au langage. Le W3C travaille donc
à l’élaboration du standard qu’est “l’HTML5”.
Seulement voilà, le problème c’est qu’une telle responsabilité présente un
inconvénient majeur : la lenteur du processus. La conséquence de cette lenteur est
la création d’un groupe de rébellion au sein du W3C, nommé le WHATWG (Web
Hypertext Application Technology Working Group). Ce groupe est constitué
principalement de développeurs des navigateurs tels que Mozilla, Opera ou Apple.
L’approche est ici totalement différente puisque ce groupe est beaucoup plus ouvert
et surtout a pour objectif d’accélérer la standardisation (ou du moins la mise en place
de standards pour les navigateurs).
L’HTML5 est donc le fruit des travaux du W3C et du WHATWG.
Les nouvelles balises sémantiques
L’HTML5 introduit également un ensemble de nouvelles balises afin de donner plus
de sémantique (de sens) à nos pages. Par exemple, au lieu d’utiliser une <div> avec
un id=”header”, nous pouvons utiliser tout simplement la balise <header>. Parmi ces
balises sémantiques on trouve entre autres
<header> : Qui indique que l’élément est une en-tête
<footer> : Qui indique que l’élément est un pied-de-page
<nav> : Qui indique un élément de navigation tel qu’un menu
<aside> : Qui correspond à une zone secondaire non liée au contenu principal
de la page
<article> : Qui représente une portion de la page qui garde un sens même
séparée de l’ensemble de la page (comme un article de blog par exemple)
Les balises multimédia
<video>
Cette balise intègre directement un lecteur vidéo dans la page, avec des boutons
Lecture, Pause, une barre de progression, du volume… Un vrai petit Youtube intégré
à votre page et natif au navigateur !
<audio>
Cette balise est l’équivalent de la balise video mais pour l’audio. En 3 lignes de code
vous avez un lecteur MP3 !
Nous pouvons d’ailleurs voir sur l’image ci-dessous que chaque navigateur utilise un
design qui lui est propre pour styliser son lecteur. Dans tous les cas il vous est
possible de créer votre propre design si vous préférez un rendu uniforme quel que
soit le navigateur utilisé.
<canvas>
Cette balise est probablement la plus prometteuse de toutes, puisqu’il s’agit d’une
surface sur laquelle il est possible de tracer des formes et de les animer. En
résumé… C’est dans cette zone que sont réalisées des animations ou des jeux.
Les possibilités offertes par la balise canvas sont immenses, et couplé avec le
standard WebGL de rendu graphique 3D, on obtient des résultats impressionnants
au sein même du navigateur.
Les selecteurs en CSS
Vous prétendez maîtriser le CSS et pourtant vous n'utilisez que les sélecteurs de base du
genre #mon_id , .ma_classe , #mon_id div li . Remettez-vous en question. Dans ce guide, vous
découvrirez enfin les sélecteurs avancés qui vous sont obscurs et pourtant oh, combien Awesome!
Des sélecteurs CSS à consommer sans modération.
*
1.* {
2.margin: 0;
3.padding: 0;
4.}
C'est le sélecteur universel. Le symbole étoile cible tous les éléments de la page. Beaucoup de
développeurs l'utilisent pour mettre à zéro les marges de tous les éléments.
#monid
1.#contenu {
2.width: 960px;
3.margin: auto;
4.}
Le sélecteur d'ID permet de cibler 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.
Compatibilité
IE6+
Firefox
Chrome
Safari
Opera
.maclasse
1..error {
2.color: red;
3.}
A la différence des sélecteurs d'ID, les sélecteurs de classe peuvent cibler plusieurs éléments.
Compatibilité
IE6+
Firefox
Chrome
Safari
Opera
XY
1.li a {
2.text-decoration: none;
3.}
Utilisez le sélecteur descendant pour être plus spécifique. Pluôt que de cibler toutes les balise de
lien, l'exemple ci-dessus cible seulement celles qui sont à l'intérieur d'un élément de liste.
Compatibilité
IE6+
Firefox
Chrome
Safari
Opera
X
1.a { color: red; }
2.ul { margin-left: 0; }
Les sélecteurs de type permettent de cibler un élément grâce à son type.
Compatibilité
IE6+
Firefox
Chrome
Safari
Opera
X:link et X:visited
1.a:link { color: blue; }
2.a:visited { color: purple; }
La pseudo-classe :link correspond à tous les liens qui n'ont pas été visités.
La pseudo-classe :visited correspond à tous les liens déjà visités.