Css avec Nicolas

Tips css

1- animation css : keyframe (background + fleche)

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

2- scroll smooth : lien vers des div internes

<link href="/media/examples/link-element-example.css" rel="stylesheet">

Outils

https://codepen.io/ : pour pratiquer https://freefrontend.com/ : de jolis exemples https://developer.mozilla.org/fr/docs/Web/CSS/flex : la base d’html

Pour codepen, on peut choisir le langage (js, typescript, etc…), ajouter des css

Compatibilité navigateur

Tous les navigateurs ne gèrent pas le css de la même façon.

https://caniuse.com/ : site pour tester les différents navigateurs

Par exemple pour transform : webkit-transform : pour internet explorer ms-transform : pour firefox transform

On peut aussi vérifier pour les media query, ou les sticky, … comment chaque navigateur les prend en compte.

Responsive

Sur chrome, on peut tester la responsivité d’une application dans F12, en clickant sur l’icone “device” :

Audit

Sur chrome, on peut faire un audit de l’application (accessibilité, sécurité) dans F12 :

Code plus vite avec Emmet

Pour les webcoders, par exemple on ecrit (dans codepen, vscode, …), puis tab :

ul#maliste>li*3

Et cela transforme automagiquement en :

<ul id="maliste">
  <li></li>
  <li></li>
  <li></li>
</ul>

https://docs.emmet.io/

@author Josselin Tobelem