Workshop CSS

Sommaire

  1. Sélecteurs
  2. Display
  3. Position
  4. Pseudo elements
  5. Flexbox
  6. Transitions
  7. Animations

Sélécteurs

x+y Sélectionne l'élément y immédiatement précédé par l'élément x.

x>y Séléctionne tous les enfants y directs d'un élément x

x~y Séléctionne tous les éléments y précédés par l'élément x 

ul + p { color: red }
#container > ul {
    border: 1px solid black;
}
ul ~ p {
 color: red;
}

x[attr] Séléctionne tous les éléments ayant l'attribut attr 

a[title] {
 color: green;
}

x[attr="foo"] Séléctionne tous les éléments x ayant l'attribut attr et contenu "foo" 

a[href="http://google.fr"] {
 color: green;
}

x[attr*="foo"] Tous les éléments x ayant l'attribut attr et contenu "foo" n'importe où 

a[href*="google"] {
 color: green;
}

x[attr^="foo"] Tous les éléments x ayant l'attribut attr et contenu "foo" au début 

a[href^="http://"] {
 color: green;
}

x[attr$="foo"] Tous les éléments x ayant l'attribut attr et contenu "foo" à la fin 

a[href$=".fr"] {
 color: green;
}

En savoir plus

Display property

Inline span, a, strong, em, img, br, input, abbr, acronym

Block div, h1...h6, p, ul, li, table, blockquote, pre, form

Éléments les en dessous des autres. Width par défaut de 100%

Inline-Block 

Idem que inline, mais permet le redimensionnement.

Autres propriétés

Eléments sur une seule ligne, qui se placent les uns à coté des autres. Ne peut être redimenssioné. Peut prendre en compte les sauts de lignes et les espaces dans le HTML.

Flex

A savoir

Les éléments sont positionnés par défaut sur la baseline du bas. Il est possible d'utiliser vertical-align pour positionner verticalement un élément inline-block.

  • Float:left est hors du flux, penser à mettre un clearfix sur le parent
  • Float:left est utile pour les images dans un texte
  • Il est possible de placer text-align:center sur le parent des éléments inline-block pour center un menu par exemple.

 

 

  • Attention ! Inline-block prend en compte les espaces et sauts de ligne dans le HTML. Technique de porc : Utiliser les commentaires pour retirer les espaces.

Float:left vs d:inline-block

Exemple

Position property

Static

Relative

Valeur par défaut d'un élément. Pas de possibilité de z-index

Flux normal d’un contenu. Permet de déplacer horizontalement et verticalement un élément sans affecter les éléments suivants. Possibilité d’utiliser les z-index

 

Absolute

Sors du flux. Se positionne par rapport à son ancêtre positionné. Si aucun ancêtre n’est positionné, il se positionnera par rapport au body.

 

 

Fixed

Sors du flux. Se positionne par rapport au body, ne réagit pas au scroll. Ne pas utiliser de transform sur le parent d’un élément positionné en fixed, risques de gros bugs. (Bug connu sur chrome, ne pas utiliser une position fixed sur un élément dont un des parents possède une propriété transform)

 

Autres propriétés

Exemple

Pseudo elements/classes

x::before, x::after

 

créé respectivement un contenu  à l'intérieur de l'élément x avant et après le contenu de l'élement

Propriété content obligatoire pour faire apparaître l'élément.

:before content property values

  • string
  • attr(attribute)
  • open-quote
  • close-quote
  • url(url)

Autres pseudo-éléments

x:not(y) Sélectionne tous les éléments sauf ceux qui ont la classe y 

div:not(.container) {
 color: blue;
}

x:nth-child(n) Sélectionne le n-ième élément x base 1.  (odd : 2n, even : 2n+1)

 

li:nth-child(3) {
 color: red;
}

li:nth-child(2n) {
 background: gray;
}

Liste de tous les sélecteurs

x:first-child / x:last-child Sélectionne respectivement le first et last elem 

ul li:first-child {
 border-top: none;
}

ul > li:last-child {
 color: green;
}

Flexbox

Transition

Ajoute des effets d'animations, sans l'utilisation de flash ou javascript.

Utile sur des pseudo classes et des toggle class

div {
    transition: <property> <duration> <timing-function> <delay>;
}
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Cubic-bezier

Transitions css3

Transition callback

Callback transition

Lancer une action une fois la transition terminée

$("element").one("transitionend", function(){ 

});

Animation

Ajoute des effets d'animations, sans l'utilisation de flash ou javascript.

Pour faire des trucs kikoo

div {
    animation: name duration timing-function delay 
    iteration-count direction fill-mode play-state;

}

Patterns fréquents

Propriétés intéressantes

Box-sizing

Border

Background

Border

Box-shadow

Text-shadow

Counter-increments/Counter-reset

kilix-workshop-css

By Stéphane Montlouis-Calixte

Made with Slides.com

kilix-workshop-css

  • 930

More from Stéphane Montlouis-Calixte