CSS3 Les Nouveautés

16 février 2018

Type(s) :	P
Durée :	2 Jours – 14 Heures

Pré-requis

Etre déjà familier avec les subtilités des langages HTML et CSS. .

Objectifs

Savoir exploiter le potentiel de la norme CSS3 et employer pertinemment les nouveautés apportées : les méthodes de positionnement, de sélectionnement, de décoration, de transitions et d’animations.

Public concerné

Webmasters, concepteurs Web, développeurs, chefs de projets techniques.

Profil du formateur

Formateur consultant, expert, pédagogue et certifié dans son domaine
Méthode pédagogique
La formation est constituée d’apports théoriques et d’exercices pratiques. Chaque stagiaire dispose d’un poste de travail et la gestion en petit groupe (jusqu’à 8 stagiaires) permet un suivi individualisé et adapté. Durant les sessions de formation, un support pédagogique est remis aux stagiaires.
Suivi, évaluation, sanction
Des tours de table permettent de suivre la progression du stagiaire au fur et à mesure de la formation. Un suivi de la formation est réalisé par une feuille de présence émargée par demi-journée par les stagiaires et le formateur. Un questionnaire de satisfaction et une validation des acquis sont complétés par chaque stagiaire en fin de formation.
Formation sans certification.

Plan du cours

Introduction à HTML5

(nouveau Doctype, nouveaux éléments sémantiques, audio, video, canvas, géolocalisation, drag and drop)

Introduction à CSS3

(propriétés, sélecteurs, préfixes, médias, transitions, transformations, Internet Explorer)

Syntaxe, préfixes et usages CSS3

Doit-on utiliser CSS3 en production aujourd'hui ?
Préfixes : liste et utilité
Syntaxe particulière à CSS3

Valeurs, fonctions et unités

La transparence avec RGBa et HSLa
Les variables calc(), min() et max()
Nouvelles unités (rem, vw, vh, vm, deg, rad, s)
Compatibilités navigateurs

La gestion des médias avec Media-Queries

Syntaxe et médias
Valeurs

Propriétés de texte et de contenu

word-wrap
text-overflow
overflow-x, overflow-y

Propriétés décoratives CSS3

@font-face
border-radius
box-shadow
background-size
Arrière-plans multiples
Dégradés linéaires et radiaux (gradient)

Le positionnement en CSS3

box-sizing
multi-colonnes
Modèle de boîte flexible (flexbox model)
template layout
grid layout
CSS3 Regions, Shapes et Exclusions

La sélection d'éléments en CSS3

Sélecteur d'adjacence général
Sélecteur d'attribut
Pseudo-classes générales
(:lang, :empty, :target, :nth-child, :nth-of-type, :only-child, :not,…)
Pseudo-classes de formulaire
(:valid, :invalid, :checked, :required, :optional,…)

Les transformations

Rotation
Zoom avec scale
Translation avec translate
Déformations avec skew et matrix

Les transitions et animations

Propriétés : property, duration, delay, timing-function
Accélération
Propriétés supportées
Animer avec keyframes

Voir tout