# CSS avancées --- ## Présentation Objectif : Utilisez les fonctionnalités avancées des CSS. --- ## Programme * Bonnes **pratiques** * Gestion du **support** * **Mises en page** avancées * **Frameworks** CSS * C'est aussi du **CSS 3** * Les **pré-processeur** CSS # Bonnes pratiques --- ## Compatibilité navigateur « Vous avez quelle version d'IE ? » --- ## Un paysage hétérogène * IE/Edge * Firefox * Chrom* * Safari * leurs homologues mobiles * et les autres... --- ## Lisser les différences * le [reset CSS](https://www.alsacreations.com/astuce/lire/36-reset-css.html) * [Détection](https://modernizr.com/) de fonctionnalité * Pré/Post processeur * [Autoprefixer](https://github.com/postcss/autoprefixer) * Les polyfills (Deprecated) * Dégradation gracieuse * Outils * Connaître les [compatibilités](http://caniuse.com) * Grilles * Frameworks --- ## Des conventions * **BEM** - [Block, Element, Modifier](http://getbem.com/introduction/) * **oCSS** - organic cascade style sheet * **SMACSS** - Scalable and Modular Architecture for CSS * **OOCSS** - Object Oriented CSS * **ACSS** - Atomic CSS * **SUITCSS** — Style tools for UI components * [Mini convention Alsacreation](https://www.alsacreations.com/article/lire/1707-MiniConventionCSS.html) Notes: * [Google trends](https://trends.google.fr/trends/explore?q=oocss,bem%20css,smacss,ocss,suitcss) * [Awesome CSS](https://github.com/ikkou/awesome-css#architecture) * [BEM Alsa](https://www.alsacreations.com/article/lire/1641-bonnes-pratiques-en-css-bem-et-oocss.html) * [Re BEM](http://guidecss.fr/convention.html) --- ## Les performances * [Id vs classes vs élément...](https://vanseodesign.com/css/css-selector-performance/) * Règles trop générales * Trop de descendants * Trop de règles * Ré-arrangement du Dom * Propriétés gourmandes * Transformations 2D vs 3D * Minification # Gérer le support --- ## Les critères * Taille de l'écran * Densité * Orientation * Touch ![multi](images/multisupport.png) --- ## La meta viewport * Dans le header HTML * Permet de compenser la densité * « Pixels CSS » VS pixel physique * Gérer le zoom * Écran VS viewport * Le [touch delay](https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away) * Standard de fait --- ## Exemple Exemple : ```html
``` [Draft](https://drafts.csswg.org/css-device-adapt/#viewport-meta) Notes: * [Alsa](https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html) * [Specs](http://media-queries.aliasdmc.fr/meta_viewport_et_viewport_css_mobile.php) --- ## Testons les effets de la balise **Activité** : [Jouer](https://www.quirksmode.org/m/tests/widthtest.html) avec la balise meta. --- ## Les media queries * Pour sélectionner un média * screen * print * handheld * ... * Hauteur/largeur de l'écran * Orientation * Résolution * ... Notes: * [Alsa](https://www.alsacreations.com/article/lire/930-css3-media-queries.html) --- ## Syntaxe Exemple : ```css @media screen and (max-width: 640px) { /* Seulement pour les écrans de taille inférieure à 640px */ body { background-color: red; } } ``` Notes: * [Exemple](https://www.alsacreations.com/xmedia/tuto/exemples/mediaqueries/index.html) --- ## Principe Mettre en place des "points de rupture" pour : * Adapter les tailles et les styles * Réorganiser le contenu * Filtrer les contenus Notes: Des outils : * [mydevice](http://mydevice.io/) * [Screen size](http://screensiz.es/phone) --- ## Adaptons un site **Activité** : rendre responsive un site Notes: * [Codepen](http://codepen.io/anon/pen/WpbBWm) * [Fork codepen](http://codepen.io/anon/pen/bqNPqP) * Voir image de l'activité # Mises en page avancées --- ## Les flexbox * CSS3 * Modèle de boîte flexible * Prise en compte des besoins modernes * [Répandu ?](http://caniuse.com/#search=flex) * [Démonstration](http://codepen.io/anon/pen/ygQwga) Notes: * [Alsa](https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html) * [Cheatsheet](https://www.alsacreations.com/outils/lire/1719-flexbox-cheat-sheet-pense-bete.html) * [Solved](https://philipwalton.github.io/solved-by-flexbox/) --- ## Principes * flex(flex-items*) * Distribution * Alignement * Réorganisation * Occupation spatiale --- ## En image ![flex](images/flex.png) --- ## Syntaxe Forme générale : ```css
{ display: flex; flex-direction:
; /* Direction de l'axe principal */ flex-wrap:
; /* Une seule ligne ou retour */ /* flex-flow:
; */ justify-content:
; /* Alignement axe principal */ align-items:
; /* Alignement axe secondaire */ }
{ align-self:
; /* Alignement axe secondaire */ order:
; /* Ordre */ flex:
; /* Flexibilité */ } ``` --- ## Jouons avec flexbox **Activité** : Découvrir les flexbox en jouant. Notes: * [Froggy](http://flexboxfroggy.com/) * [Defense](http://www.flexboxdefense.com/) --- ## Les grilles CSS * Structure le contenu * Donne du rythme * Ne pas en abuser * [CSS3 grid ?](http://caniuse.com/#search=grid) * [Des exemples](https://gridexamples.com/) * Dans les frameworks ![grille](./images/anatomie-grille.jpg) Notes: * [Learn css grid](https://learncssgrid.com/) * [Alsa](https://www.alsacreations.com/article/lire/1196-grilles-framework-css-webdesign.html) * [960](http://960.gs/) * [Materialize](http://materializecss.com/grid.html) * [Unsemantic](http://unsemantic.com/) --- ## Fonctionnalités des grilles * Marge / colonne / gouttière * 12 colonnes : 1x2x2x3 * Push / Pull / Offset * Responsive * Inception --- ## Principes * grid(grid-items*) * Template pour ligne et colonne * Fraction de l'espace * Positionnement de chaque elt dans cette grille * Tout est possible... --- ## Syntaxe Forme générale : ```css
{ display: grid; /* Ou inline grid */ grid-template-rows: 50px 100px; /* Template pour chaque ligne */ grid-template-columns: 200px 10% 2fr; /* Pour chaque colonne */ grid-row-gap: 20px; /* Espacement vertical */ grid-column-gap: 5rem; /* Espacement horizontal */ justify-items: center; /* Alignement horizontal des elts */ align-items: end; /* et vertical */ justify-content: space-between; /* Alignement H de la grille */ align-content: start; /* et V */ }
{ grid-row-start: 2; /* L'élément commence à cette ligne */ grid-row-end: 3; /* et fini à celle-ci */ grid-column-start: col-2-start; /* Idem pour la colonne */ grid-column-end: col-end; } ``` --- ## Testons les grilles **Activité** : Découvrir les grille CSS en jouant. Notes: * [Css garden](https://cssgridgarden.com/#fr) old * [Ancien Codepen](http://codepen.io/anon/pen/BpGEgJ) * [Codepen](http://codepen.io/anon/pen/zZxVZZ) * [Fork CP](http://codepen.io/anon/pen/KWwjaw) * [Doc bootstrap](http://getbootstrap.com/css/#grid) * Penser à utiliser le responsive # Les frameworks CSS --- ## À quoi servent-ils ? * Devenus indispensables * Structurants * Configurables * Responsives * Et de l'interacion... --- ## Que font-ils 1/2 * Une base CSS * Reset * Typo * Grille * Helpers * Icônes * ... --- ## Que font-ils 2/2 * Styles * table * liste * boutons * formulaires * ... * Composants * et plus encore ... --- ## Les plus connus * [Bootstrap](http://getbootstrap.com) * [Materialize](http://materializecss.com/) * [Foundation](http://foundation.zurb.com/sites.html) * [Knackcss](http://knacss.com/) * ... --- ## Découvrons les frameworks **Activité** : visiter les sites de ces frameworks. Notes: ...et y retrouver tout ce dont nous venons de parler. # CSS 3 ++ --- ## Que pouvons-nous faire ? * Coins arrondis * Dégradés * Transparence * Ombres (text et box) --- ## Mais aussi... * Transitions * Transformations * Animations --- ## Remarques générales * Attention compatibilité * Ne pas oublier les préfixes --- ## Les transitions CSS * Animation * Sur un changement d'état * Au chargement de la page * pseudo classes (`:hover`, `:active`, `:focus`, ...) * ajout/suppression de classe par le javascript * S'applique à certaines propriétés Notes: * Example [lava lamp](http://www.css3create.com/Menu-en-full-CSS-style-Lavalamp) --- ## Comment ça marche ? * Propriétés à animer * Durée * Fonction de transition * Délais Notes: * [Timing function](http://www.the-art-of-web.com/css/timing-function/) * [Generateur test](https://matthewlein.com/ceaser/) --- ## Que peut-on animer ? * Couleurs * Positions * Dimensions * Visibilité * Transformations * Ombres Notes: * [Petite démo](http://fr.myebox.com/demo/transition-css) --- ## Syntaxe Formes générales : ```css
{ transition-property:
, [
, [...]] | all; transition-duration:
; transition-timing-function:
; transition-delay:
; } /* ou */
{ transition:
; } ``` Notes: * [Alsa](https://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html) --- ## Transitons un menu **Activité** : Ajouter les transitions sur ce [menu](http://codepen.io/anon/pen/KWwOXX) Notes: * [Codepen](http://codepen.io/anon/pen/KWwOXX) * [Codepen bis](http://codepen.io/anon/pen/mWyNPb) * [Solution](http://codepen.io/anon/pen/mWyNPb) --- ## Transformations CSS * Transformations géométriques * Translation * Échelle * Rotation * Déformation * Matricielle * Transformation 2D (3d possible) Notes: * [Alsa](https://www.alsacreations.com/article/lire/1418-css3-transformations-2d.html) --- ## Syntaxe Forme générale : ```css selector { transform-origin:
; /* Point d'origine de la transformation */ transform:
(
) [
(
) [...]]; } ``` Avec `function` == translate, scale, rotate, skew, matrix. Notes: * [Exemples](http://codepen.io/anon/pen/VPqKYO?editors=1100#0) --- ## Transformons des boîtes **Activité** : Réaliser un tangram. ![tangram](./images/tangram.png) Notes: * [Codepen initial](http://codepen.io/anon/pen/dNwpwY?editors=1100) * [Codepen fait](http://codepen.io/anon/pen/mRarme?editors=1100) --- ## Animations CSS * Comme les transitions... * ... mais avec plusieurs étapes... * ... puis retour à l'état initial Notes: * [Alsa](https://www.alsacreations.com/tuto/lire/1299-timing-des-animations-et-des-transitions-en-css3.html) --- ## Définition de l'animation Forme générale : ```css @keyframes
{ from{
} 50% {
} ... to {
} } /* Détail d'un state : */ 25% { prop1: val1; ... animation-timing-function:
; } ``` --- ## Utilisation de l'animation Formes générales : ```css
{ animation-name:
; animation-duration:
; animation-delay:
; animation-direction:
; animation-iteration-count:
; animation-timing-function:
; animation-fill-mode:
; animation-play-state: paused | running; } /* ou */
{ animation:
; } ``` Notes: * [Exemples](http://leaverou.github.io/animatable/) * [Banque](https://daneden.github.io/animate.css/) --- ## Animons le web **Activité** : Animer le carré bleu en CSS 3. Notes: * [Base codepen](http://codepen.io/anon/pen/XMJvwO) * [Solution](http://codepen.io/anon/pen/EWaqLG) --- ## Quelques mots sur des canvas * 2D/3D * Permet faire beaucoup de choses # Les pré-processeurs CSS --- ## Que font-ils ? * Se "compilent" en CSS * Parfois CSS compatibles * Variables * Mixins * Boucles * Hiérarchie * Fonctions * Opérations * and so much... --- ## Qui sont-ils * [Sass](http://sass-lang.com/guide) * [Less](http://lesscss.org/) * [Stylus](http://stylus-lang.com/) --- ## Less is more * C'est [ici](http://lesscss.org/) * Écrit en javascript * Sur le navigateur * La syntaxe * Le workflow --- ## Des CSS en Less **Activité** : Créer un mini framework en Less CSS. Notes: Avec : * Reset * Prefix auto sur prop CSS3 (quelques-unes) * Grid paramétrable * Thémable par variable --- # Des questions ?