ISCOM::HTML/CSS::session4 (20141105)

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52 1

Cours HTML / CSSLearn to code

HTML/CSS easily

http://www.nicolasaguenot.com

mailto:[email protected]?subject=KEYNOTE::Votre%20Pr%C3%A9sentation

Nicolas AGUENOT - Freelance web developer - [email protected] - +33 (0)6 27 32 20 52

Cours HTML / CSS

• 6 Sessions de ~3 heures > ~18 heures au total,

• A chaque sessions aura des objectifs à atteindre pour pouvoir continuer à la prochaine session,

• 30% de théorie et 70% de pratique,

• Finalité : Monter un site en HTML / CSS responsive,

• En bonus, utilisation d’outil de versioning

2




Rappel du projet

3




Allons de l’avant avec CSS3

5




CSS3• CSS3 est le dernier standard CSS.

• Il est entièrement compatible avec CSS2 (On parle de backwards-compatibility),

• Le CSS3 est cependant en cours de validation W3C …

• … mais beaucoup de navigateurs on déjà implémenté cette nouvelle norme…

• … il ne faut cependant pas oublier les anciens navigateurs qui ne sont pas compatible.

• Le CSS3, c’est du CSS2 avec de nouvelles fonctionnalités.

6




CSS3 CheatSheets




Les prefixes CSS• Certains navigateurs utilisent des prefixes à certaines déclarations CSS afin de pouvoir utiliser certaines

propriétés compatible.

• Les préfixes contiennent obligatoirement un - au début de leur définition, chaque navigateur a son identifiant, puis la déclaration est réalisée.

• Les préfixes identifié par navigateur :

• Chrome, Safari, Android, … : -webkit-,

• Mozilla Firefox : -moz-,

• Internet Explorer : -ms-,

• Opera : -o-,

• Bien entendu, ces prefixes ne sont pas compatible avec les anciens navigateurs. Il faudra avoir une alternative pour ceux-ci

8




Les prefixes CSS

• Exemple d’utilisation :

• On

9




Les prefixes CSS

• Exemple d’utilisation :

• On veut mettre une bordure arrondie (border-radius) de 10px sur un div ayant une classe « b-radius-5 ».

• On déclare ceci dans notre CSS.

• Pourquoi ne pas déclarer Opera et IE ?

10




CSS3 Exercice• Exercice simple :

• Vous avez votre site responsive,

• Utilisez les fonctionnalités CSS3 pour animer votre site en CSS,

• Charger une ou plusieurs police(s) google font ( https://www.google.com/fonts ) et appliquez la au menu et au contenu (il faut que celle-ci soit lisible et adaptée à votre site),

• Le site sera compatible IE9+, Firefox, Safari, Chrome, Opera et mobile.

11



https://www.google.com/fonts


Des questions ?

12



ISCOM::HTML/CSS::session4 (20141105)

Internet

Transcript of ISCOM::HTML/CSS::session4 (20141105)