CSS

Encore quelques curiosités et astuces

Xavier Zalawa · @7studio

Bonne année !

  • Xavier Zalawa
  • Développeur Web chez kairn
  • Formateur WP à l'IUT 'A' Paul Sabatier
  • Je fais parti des gens qui aime CSS

<table>

<td colspan="100%">

  • Une alternative limitée à colspan="0"
  • colspan="100%" est équivalent à colspan="100"
  • La cellule va s'étendre jusqu'à la limite droite du tableau
  • On oublie le nombre de colonne avec lequel on travaille
  • Cela fonctionne aussi avec l'attribut rowspan 😀

Cependant :

  • La propriété CSS table-layout doit être à auto
  • La cellule avec cet attribut devra être obligatoirement la dernière
<table>
    <thead>
      <tr>
        <th>Name
        <th>Age
        <th colspan="2">Skills
    <tbody>
      <tr>
        <td>Harry<td>21<td>HTML<td>CSS
      <tr>
        <td>Bob<td>15<td>Sausage making<td>Harp
    <tbody>
      <tr>
        <td>Lisa<td>68<td rowspan="2">BMX<td>Stone masonry
      <tr>
        <td>Ted<td>40<td>Baking
    <tfoot>
      <tr>
        <td colspan="4">Data accurate as of 2011
</table>

<col> et <colgroup>

  • Existe depuis HTML 4.01
  • Divisions structurelles à l'intérieur d'une table
  • Beaucoup de bonnes idées jamais implémentées
  • Propriétée CSS  : background, border, width

Pourquoi ça reste intéressant :

  • Diminuer le nombre de classes HTML dans le markup
  • Simplifier vos sélecteurs CSS
  • CSS4 remet ça au goût du jour
    • col || td {}
    • text-align: "." center
tr > :first-child {
  background-color: yellow;
}
tr > :nth-child(n+2):nth-child(even):nth-child(-n+4) {
  background-image: repeating-linear-gradient(-45deg, #ccc, #ccc 13px, #ddd 13px, #ddd 26px);
}
Meals Hotels Transport subtotals
San Jose
25-Aug-97 37.74 112.00 45.00
26-Aug-97 27.28 112.00 45.00
subtotals 65.02 224.00 90.00 379.02
Seattle
27-Aug-97 96.25 109.00 36.00
28-Aug-97 35.00 109.00 36.00
subtotals 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27

visibility: collapse

  • Les éléments disparaissent sans impacter les autres
  • Fonctionne sur tbody, tr, colgroup, col
  • On ne joue pas avec les différentes valeurs de display
  • visibility: collapse s'utilise aussi avec Flexbox 😉

C'est bien mais :

  • Blink n'a toujours pas corrigé son bug
  • Le résultat va être différent en fonction de border-collapse
.types {
  /* cache les détails */
}
tbody:not(.selected) {
  /* affiche la ville selectionnée */
}
Meals Hotels Transport subtotals
San Jose
25-Aug-97 37.74 112.00 45.00
26-Aug-97 27.28 112.00 45.00
subtotals 65.02 224.00 90.00 379.02
Seattle
27-Aug-97 96.25 109.00 36.00
28-Aug-97 35.00 109.00 36.00
subtotals 131.25 218.00 72.00 421.25
Totals 196.27 442.00 162.00 800.27

visibility

visible > hidden

hidden : … Les fils de l'élément seront visibles s'ils ont visibility:visible

CSS 2.1

content

"string", url()
attr(), counters()
leader()

La propriété content peut cumuler différentes valeurs

head meta[name]::before {
  content: "<meta name=\""attr(name)"\" content=\""attr(content)"\">";
}
head meta[name^="twitter:"]::before {
  color: #55acee;
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAH7SURBVHja5Nbfa81xHMfxx2Z+pLTUFJNWJI2iFOVHUsqP+Q8MQ9nU3Ll0scKV3ZHakqz8uKBkWqHlYjeTTkmRsrQocoFdDJPCcfM+63ScX9+zc+zCq96d7/d7Pt/Ps8/n/fm+36+6dDrtX6veLKih49Z4NeY5hnZswByM4Q7OI3sr9+JlQ9zsxmpcqgD4AHtynm2O6MARNOM0lqA1Az2Eg3iHwQTAoTzAbLXiSVx/wWI0ZnK6In7vorNM4D7sL3PsJHoxgK4MdFHWgP6IhSUm6kywIwtwBltxMQN9nWfCMXQVOeFrEkDn4TpW4Wtmwmt5Bi5HH8ZxDlswN+v/iQTQ3zic+50O4WGBF1ri5I3iTYzrw7IE0DSapr9TzMcudOMqtqOuwMvNEUk1GTEN/YkrmMLnGhWh9/iRvb2/cBkrsanIKmeiF/lq74Ual9uRfNBPUTtrpcFCXeYmdmA48lstDeNDsdY2gdt4VUVoz1+tLee+LdpRtTSKx6WaeC/uVxF6oFzn0Bb5nalO4m0Su9KObTiFVAXA/mKGoL5EPh6F/UiiAZwoZcxyD9PScBIjeIaNCYBncbSkMYvG2o210bhbKljd80jFcLkWNIV7+Bb1NwnwKY5jfbnAzEq/40ZEUzjDnVgXjbwxmsAUPkZTTwWkkkOm7r9x+LMC/TMAN+Niz90ZNw4AAAAASUVORK5CYII=)
           "<meta name=\"" attr(name) "\" content=\"" attr(content) "\">";
}

 

CSS devrait bientôt disposer de véritables points de conduite (ligne de points) grâce à leader() \o/

\A ou \00000a

Un saut de ligne pour vos contenus générés.

.Element::before {
content: "Aperoweb Toulouse 2017";
/*white-space: pre;*/
}

z-index

z-index: -1

  • Le z-index est relatif à son contexte
  • Pour chaque contexte d'empilement, l'ordre est :
    • Bordures et background de l’élément racine
    • Éléments positionnés et z-index négatifs
    • Éléments block non-positionnés
    • Floats
    • Éléments inline non-positionnés
    • Éléments positionnés et z-index auto
    • Éléments positionnés et z-index positifs

Il est donc possible d'afficher un enfant derrière son parent !

.Element {
  position: relative;
  background: red;
}
.Element::before {
  background: blue;
  bottom: 0;
  /*content: "";*/
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  /*z-index: -1;*/
}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

body html

L'héritage inversé

Incoyable mais vrai, la spec. CSS laisse l'élément <html> utiliser la valeur calculée de background de son premier enfant (<body>).

html {
  background-color: transparent;
  background-image: none;
}
body {
  background-color: salmon;
}

.class {}

.\​ {}

En HTML5, tous les caractères sont autorisés comme valeur pour les attributs HTML id et class sauf un espace (&#32;).

HTMLCSS
<p class=".class">.\.class {}
<div id="". {} ou .\1F4A9 {}
<div class="404">.\34 04 {}
<div class="1/2@M">.\31 \/2\@M {}

CSS escapes tool

.\​ {}

Comme un grand pouvoir implique de grandes responsabilités, vous n'oublierez pas d'utiliser CSS.escape() dans les fonctions querySelector et querySelectorAll.

 

A polyfill for the CSS.escape

.class.class {}

Pour augmenter la spécificité d'une classe, vous pouvez la doubler. Pas besoin d'en ajouter.

.Foo .Bar {
  color: red;
}
.Bar {
  color: green;
}
Mon texte de couleur

Et bien d'autres

Il ne faut pas oublier

  • La syntaxe de background-position a évolué
    (ex. : bottom .5em right 10px)

  • Deux valeurs se sont rajoutées à la liste de background-repeat : space et round

  • animation-delay accepte les valeurs négatives
    (ex. : -.5s)

  • animation-iteration-count accepte les valeurs qui ne sont pas entières
    (ex. : .5)

  • IE n'accepte pas un espace dans translate(-50%, -50% )

Merci, questions ?

@7studio
slides.7studio.fr/aperoweb1