CSS is Awesome !

⚠️ Cette présentation a été réalisée pour un environnement spécifique, aucun effort n'a été effectué pour qu'elle fonctionne correctement dans les autres navigateurs. J'ai utilisé Chrome Canary pour réaliser ces slides

CSS is awesome!

`$ whoami`

Igor Laborie

Expert Java & Web,

@ilaborie

igor@monkeypatch.io

⚠️ Je ne suis pas un designer

The Rule of Least Power

When designing computer systems, one is often faced with a choice between using a more or less powerful language for publishing information, for expressing constraints, or for solving some problem. This finding explores tradeoffs relating the choice of language to reusability of information. The "Rule of Least Power" suggests choosing the least powerful language suitable for a given purpose.

Règles du jeu

Texte
HTML & CSS
SVG
JavaScript

⚠️ ... mais il y a toujours de bonnes raisons pour ne pas suivre ces règles

Le CSS c'est vaste

Selectors
Box model
Float
Media Query
Transitions
Gradients
Responsive Design
Media
Variables
Colors
Shapes
@supports
...

Roadmap

Utiliser un pré-processeur ?
Unités, calc()
Pseudo éléments
Animations
Pseudo classes d'états
Pur HTML ?

Utiliser un pré-processeur ?

Pré-processeurs ?

Oui, mais privilégiez:

le CSS
les post-processeurs

Unités, `calc()`, et `flexbox`

Une histoire d’unités CSS

Commit Strip le 10 Oct. 2016

Unités de longueur

px, cm, pt, ...: longueurs absolues (mesure physique)
em, rem: fonction de la font-size
ex, ch: hauteur d'un x, largeur d'un 0
vh, vw: (100vh, 100vw) = (hauteur, largeur) du viewport
vmin, vmax: min(1vh, 1vw), max(1vh, 1vw)

Holy Grail Layout

<body>
 <header>Header</header>
 <div>
   <nav>Menu</nav>
   <main>Content</main>
   <aside>Side</aside>    
 </div>
 <footer>Footer</footer>
</body>

Exemple

Unités et `calc()`

Unités et Truc et astuces
calc

`flexbox`

Pseudo éléments

<div class="table">
    <div class="plate"></div>
</div>

The :before and :after pseudo-elements
mais aussi ::first-letter, ::first-line, ::selection, ::backdrop
An Ultimate Guide To CSS Pseudo-Classes And Pseudo-Elements

⚠️ ::before et ::after ne marchent pas sur input, img, iframe (pas encore spécifié)

Table et assiette de CSS Diner
Dîner des philosophes

Animations

Pseudo classes d'états

:target, :hover, :focus, :empty, ...: Pour tous
:visited, :link, ...: Pour les liens
:checked, :valid, :invalid, ...: Pour les inputs

The science of operations, as derived from mathematics more especially, is a science of itself, and has its own abstract truth and value.

Ada Lovelace

<label for="switch1">Switch</label>
<input id="switch1" type="checkbox" class="switch">
<label for="switch1"></label>

Switch

.switch + label {
    display: block;
    position: relative;
    padding: .1em;
    width: 2em; height: 1em;
    background-color: #ccc;
    border-radius: 1em;
    border: medium solid #2c233d;
    transition: 0.4s;
}

.switch:checked + label {
 background-color: #2c233d;
}

.switch + label::before {
    display: block;
    position: absolute;
    content: '';
    top: .1em; left: .1em;
    width: 1em; height: 1em;
    background-color: #fff;
    border-radius: 50%;
    transition: background 0.4s;
}
.switch:checked + label::before {
  transform: translateX(1em);
  background-color: #faf8f8;
}

Apollo 11

The computer (or rather the software in it) was smart enough to recognize that it was being asked to perform more tasks than it should be performing. It then sent out an alarm, which meant to the astronaut, I'm overloaded with more tasks than I should be doing at this time and I'm going to keep only the more important tasks; i.e., the ones needed for landing ... Actually, the computer was programmed to do more than recognize error conditions. A complete set of recovery programs was incorporated into the software. The software's action, in this case, was to eliminate lower priority tasks and re-establish the more important ones ... If the computer hadn't recognized this problem and taken recovery action, I doubt if Apollo 11 would have been the successful moon landing it was.[26]

Letter from Margaret H. Hamilton, Director of Apollo Flight Computer Programming MIT Draper Laboratory, Cambridge, Massachusetts[27], titled "Computer Got Loaded", published in Datamation, March 1, 1971

Principe onglets

<div class="tabs">
  <input type="radio" name="tab" id="home">
  <input type="radio" name="tab" id="projects">
  <input type="radio" name="tab" id="about">
  <nav>
    <label for="home">Home</label>
    <label for="projects">Projects</label>
    <label for="about">About</label>
  </nav>
  <div data-for="home">Home page</div>
  <div data-for="projects">Projects page</div>
  <div data-for="about">About page</div>
</div>

Démo onglets

Home page

Projects page

About page

Pur HTML ?

<details>
  <summary>Des détails</summary>
  <p>Plus d'infos à propos des détails.</p>
</details>

Des détails

Plus d'infos à propos des détails.

<dialog id="diag">This is a dialog!</dialog>

Can I use

The CSS3 / CSS4 Test

IE 7+, Firefox, Chrome: Pseudo classes (CSS3 selectors 93)
IE 8+, Firefox, Chrome: ::before, ::after 98
IE 9+, Firefox, Chrome: currentColor 98; background-origin 98; box-shadow 98; calc 97; vh, vw, ... 97
IE 10+, Firefox, Chrome: flexbox 98; Animations 98

Conclusion

Utilisez du CSS pour simpifier le code
Utilisez les pre/post processeurs
HTML, SVG are Awesome !
JavaScript, TypeScript could be Awesome !

Traitez le CSS comme du code

Revue de code
DRY
Clean Code
Single Responsibility Principle
...

http://bit.ly/CssAwesomeMiXiT
https://github.com/ilaborie/css-awesome

Pour apprendre

is awesome!

$ whoami