Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Savoir quand utiliser des préfixes CSS

    Partagez
    MasculinAge : 29Message(s) : 69
    Manumanu
    le Sam 23 Aoû 2014 - 22:50
    Ce tutoriel est directement repris de mon blog. Pour des raisons évidentes, je ne me contente pas de vous balancer le lien vers l'article, je vais le réécrire (très légèrement) ici.
    Il n'y a rien de caché ici, vous n'êtes pas obligés de poster pour voir.


    De l'utilisation des préfixes CSS



    Pour ceux d'entre toi, lecteur, qui ne comprendrais pas de quoi je parle, voici un chouette petit résumé explicatif !


    Les "préfixes propriétaires" (aussi connus sous le sobriquet de "préfixes vendeurs"), sont apparus afin d'intégrer dans le CSS des propriétés non-standardisées (la standardisation étant le travail du W3C, l'organisme chargé de chapeauter les technologies html/css). On ajoute donc un préfixe devant la propriété CSS, comme ça : -prefixe-propriété. En sachant qu'il y a plusieurs préfixes existants, on se retrouve souvent avec ceci :


    Code:
    élément {
       -webkit-propriété: valeur;
       -moz-propriété: valeur;
       -ms-propriété: valeur;
       -o-propriété: valeur;
       propriété: valeur;
    }

    Et là, tu vas me dire "Mais qu'est-ce que c'est ce foutoir ?" (et tu auras raison !). Hé bien chaque préfixe correspond à un moteur de rendu qui équipe différents navigateurs. En voici la liste non-exhaustive (car il y a PLEIN de navigateurs) avec seulement les principaux :



    • -webkit- : Préfixe pour le moteur WebKit, qui équipe Safari (et sa version mobile), Chromium, Chrome, Opera, Epiphany, Konqueror, Iron, Maxthon...

    • -moz- : Préfixe pour le moteur Gecko développé par Mozilla et qui est donc utilisé par Firefox, SeaMonkey...

    • -ms- : Préfixe pour le moteur Trident développé par Microsoft, utilisé par Internet Explorer et les anciennes version de Maxthon

    • -o- : Préfixe pour le moteur Presto, jusqu'à très récemment utilisé par Opera, qui a maintenant migré sur Blink, la version personnalisée de WebKit par Google (qui équipe aussi Chrome, donc).


    On voit parfois passer le préfixe -kthml-, mais il est bien moindre car correspond à un moteur très peu utilisé. Et si vous voyez -htm-, c'est facile : Il n'existe pas, c'est une erreur.



    Comment savoir quand utiliser un préfixe ?


    C'est là le but de ce post. En effet, les préfixes ont l'avantage de proposer des versions "beta" (non complètes) des propriétés en cours d'élaboration par le W3C (en contrepartie, leur prise en charge est parfois partielle et bancale) pour que les développeurs puissent commencer à travailler avec, mais ils posent aussi un problème de compatibilité, car un préfixe -moz- ne sera pas lu par un navigateur qui ne tourne pas sur Gecko, de même qu'un préfixe -webkit- ne sera pas pris en compte par un navigateur non-webkit. Mais ajouter des préfixes pour tous les navigateurs possible représente un travail conséquent et alourdit le code. De plus, les propriétés étant toujours en cours d'élaboration, leur syntaxe est susceptible de changer (c'est ce qui s'est passé avec linear-gradient). De plus dans certains cas, la propriété est finalisée depuis suffisamment longtemps pour que la plupart des navigateurs aient pu l'implémenter correctement, et les préfixes ne sont donc plus utiles. Dans certains cas, ils ne sont plus pris en charge par les versions récentes d'un navigateur (c'est le cas de -moz-border-radius).



    Mettez toujours la propriété finale (donc sans préfixes) après les propriétés préfixées. Ce n'est pas une lubie, mais un principe de logique : Le navigateur doit lire en dernier la propriété finale et l'appliquer à la place de la propriété préfixée.


    Une solution : Se renseigner


    Un site référence quelles propriétés sont disponibles avec ou sans préfixes, et pour quels navigateurs. Il s'agit de Can I Use. Il permet de voir, pour chaque propriété, la prise en charge pour chaque navigateur principal. Maintenant, voyons comment tirer parti de ces informations. Nous allons prendre pour ça l'exemple de la propriété transition, dont la page est ici. On constate que :



    • Il n'y a eu aucun préfixe pour aucune version d'IE, on peut donc se passer du préfixe -ms-

    • Firefox supporte la propriété finale depuis plus de 5 version, on peut donc raisonnablement se passer de -moz-

    • Chrome supporte la propriété finale depuis six versions, mais Safari que depuis la version 7. Pour iOS et Androïd Mobile, trop récent aussi ; il est donc judicieux d'utiliser -webkit-

    • Opera supportait la version finale en sa version dernière version sous Presto (12.1). Le pourcentage d'utilisateurs au-dessous de la version 12.1 étant très faible, on peut se passer de -o-. Bien qu'ils utilisent depuis Webkit comme moteur de rendu, il est inutile de s'en préoccuper ici, n'ayant jamais implémenté de version préfixée avec -webkit- de cette propriété.


    Notre code sera donc tout simplement :


    Code:
    élément {
       -webkit-transition: all 1s ease;
       transition: all 1s ease;
    }

    À refaire pour chaque propriété sur laquelle vous pourriez avoir un doute, bien entendu.



    Notez bien que les informations de cet articles sont valables à sa date de rédaction. Je ne le mettrai pas à jour chaque fois qu'une propriété change un poil, donc comprenez-en le sens mais notez que les propriétés présentées peuvent avoir été validées depuis longtemps au moment où vous lirez ceci.


    Un peu de javascript


    Léa Verou propose un petit fichier Javascript de sa création à télécharger ici, qui va s'occuper de gérer les préfixes à votre place ; la contrepartie, c'est que vous n'aurez pas la même finesse qu'en faisant le choix manuellement.



    Aide-mémoire


    Parce qu'un peu de généralités ne fait pas de mal !


    Propriétés CSS3 qui ne nécessitent plus de préfixes



    Linear-gradient


    La syntaxe la plus "compatible" possible (tout en étant raisonnable comme dans le reste du post) au jour d'aujourd'hui :


    Code:
    background: #59b8b5;
    background: -webkit-linear-gradient(top, #63c1be 0%,#59b8b5 100%);
    background: linear-gradient(to bottom, #63c1be 0%,#59b8b5 100%);

    À accorder bien sûr avec vos valeurs.


    Voir aussi : CSS Gradients sur CanIUseDocumentation W3C de linear-gradient



    Voilà !


    À votre charge de faire des codes propres à présent. Wink


    MasculinAge : 31Message(s) : 31698

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Mer 10 Sep 2014 - 12:53
    Très utile, je ne savais pas pour "opacity" que les préfixes n'étaient plus nécessaires d'ailleurs^^ Merci !
    Je déplace dans la section tutoriels du coup x)

    S'il y a besoin de l'éditer (vu que ça évolue tout le temps...) n'hésite pas à me le signaler et je le remettrais ici pour que tu puisses modifier les infos comme tu le souhaites.


    MasculinAge : 29Message(s) : 69
    Manumanu
    le Mer 10 Sep 2014 - 17:06
    D'accord, merci à toi. Wink


    Contenu sponsorisé
    Aujourd'hui à 16:36

      La date/heure actuelle est Sam 3 Déc 2016 - 16:36