{"id":5865,"date":"2016-05-16T14:45:57","date_gmt":"2016-05-16T12:45:57","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=5865"},"modified":"2016-05-16T17:07:03","modified_gmt":"2016-05-16T15:07:03","slug":"des-proprietes-css-supportees-par-firefox","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/des-proprietes-css-supportees-par-firefox","title":{"rendered":"Des propri\u00e9t\u00e9s CSS support\u00e9es par Firefox\u2026"},"content":{"rendered":"

Firefox supporte certaines fonctionnalit\u00e9s que j’ai h\u00e2te d’utiliser en production, mais qui ne sont, \u00e0 l’heure d’\u00e9criture de ces lignes, pas support\u00e9es par Chrome, ni Opera. Prenez donc cet article comme une invitation \u00e0 motiver les autres navigateurs \u00e0 aller de l’avant, et \u00e9galement comme une possibilit\u00e9 de faire de l’am\u00e9lioration progressive dans certains cas.<\/p>\n

<\/p>\n

Cet article est une traduction et adaptation autoris\u00e9es de l’article de Brainless Developer<\/a> originellement en anglais. Vous pouvez suivre @brainlessdev<\/a> sur Twitter.<\/p>\n

Peut-\u00eatre que vous n’avez jamais entendu parler de ces fonctionnalit\u00e9s, et pour cause, elles sont plut\u00f4t mal support\u00e9es par le panel de navigateurs \u00e0 ce jour. Faisons une pr\u00e9sentation de certaines d’entre elles.<\/p>\n

\n

Contenu de l’article<\/h2>\n
    \n
  1. CSS Scroll Snap Points<\/a><\/li>\n
  2. Les c\u00e9sures avec Hyphenation<\/a><\/li>\n
  3. La fonction CSS element()<\/code><\/a><\/li>\n
  4. La propri\u00e9t\u00e9 position: sticky;<\/code><\/a><\/li>\n<\/ol>\n<\/div>\n

    CSS Scroll Snap Points<\/h2>\n

    Scroll Snap Points<\/strong> est une m\u00e9thode qui permet d’ajouter une dose de pr\u00e9cision lors d’une action de d\u00e9filement dans un \u00e9l\u00e9ment donn\u00e9.
    \nCet aspect est particuli\u00e8rement int\u00e9ressant pour contraindre la m\u00e9thode de navigation, ou l’harmoniser entre les terminaux des utilisateurs, je pense notamment aux terminaux tactiles. Imaginez la chose dans une galerie d’image, o\u00f9 l’on souhaite passer image par image : peu importe le mouvement de gliss\u00e9, ou le scroll effectu\u00e9, un mouvement dans un sens pour passer \u00e0 la suivante, un mouvement dans l’autre pour revenir \u00e0 la pr\u00e9c\u00e9dent, le navigateur s’occupe d’arr\u00eater le d\u00e9filement au bon endroit suivant l’entendu du mouvement.<\/p>\n

    Il y a quelques biblioth\u00e8ques qui proposent ce genre de comportement tout en supportant l’ensemble des navigateurs (ou presque), comme par exemple pagePiling.js<\/a>. (qui fait \u00e9galement bien d’autres choses) Mais la propri\u00e9t\u00e9 native en CSS est encore trop mal support\u00e9e.<\/p>\n

    Si vous naviguez sur Firefox, voici une d\u00e9monstration fonctionnelle propos\u00e9e sur CodePen.<\/p>\n

    \nVoir CSS Scroll Snap Points Full Height dans CodePen<\/p>\n\n

    Voici le support de cette propri\u00e9t\u00e9 qui pourrait \u00e9voluer assez rapidement, en tout cas je l’esp\u00e8re.<\/p>\n

    Can I Use css-snappoints?<\/a><\/div>\n\t\t