Share
Il y a quelques temps, l'impressionnant Jeffrey Way avait créé un outil appelé Prefixr, destiné à faciliter la tâche onéreuse de gestion des préfixes de fournisseur dans vos feuilles de style. Cela a fonctionné en analysant votre feuille de style et en ajoutant automatiquement la version préfixée par le fournisseur de différentes règles dans une sortie que vous pourriez ensuite coller dans votre fichier. C'était un outil assez lisse.
Malheureusement, maintenant que le site est devenu un dodo bird et après que plusieurs utilisateurs nous ont envoyé une requête ping à ce sujet, nous avons voulu proposer des solutions de rechange pouvant aider à fournir des fonctionnalités similaires..
La première option qui se rapproche le plus des fonctionnalités de Prefixr est un site appelé Express Prefixr. Ceci a été créé par l'impressionnant TJ Holowaychuk qui, en plus d'être un expert du développement de Node.js, a également créé le cadre d'application Web Express pour Node.js..
Avec Express Prefixr, vous êtes présenté avec deux zone de texte champs, un pour saisir vos styles et le second pour recevoir la sortie préfixée du service. Ceci est très similaire à la façon dont Prefixr a fonctionné:
Pour tester cela, je prends le même exemple de code que Jeffrey a utilisé dans son article original:
.boîte opacité: .5; .container box-shadow: 20px; -moz-transition: box-shadow 2s; -webkit-border-radius: 4px; animation: diapositive 1 alternée; arrière-plan: dégradé linéaire (haut, # e3e3e3 10%, blanc); @ -webkit-keyframes "slide" 0% left: 0; 100% left: 50px;
Puis en appuyant sur le "Le préfixer!"bouton, je peux immédiatement recevoir mes styles préfixés:
Voici le résultat complet:
.box -webkit-opacity: .5; -moz-opacité: 0,5; -ms-opacité: .5; -o-opacité: 0,5; .container -webkit-box-shadow: 20px; -moz-box-shadow: 20px; -ms-box-shadow: 20px; -o-box-shadow: 20px; -moz - webkit-transition: box-shadow 2s; -moz-transition: box-shadow 2s; -ms-transition: box-shadow 2s; -o-transition: box-shadow 2s; -webkit - webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; -webkit-animation: diapositive 1 alternée; -moz-animation: diapositive 1 alternée; -ms-animation: diapositive 1s alternée; -o-animation: diapositive 1 alternée; arrière-plan: dégradé linéaire (haut, # e3e3e3 10%, blanc); arrière-plan: -webkit-linear-gradient (en haut, # e3e3e3 10%, blanc); arrière-plan: -moz-linear-gradient (en haut, # e3e3e3 10%, blanc); arrière-plan: -ms-linear-gradient (haut, # e3e3e3 10%, blanc); arrière-plan: -o-linear-gradient (haut, # e3e3e3 10%, blanc); @ -webkit-keyframes "slide" 0% left: 0; 100% left: 50px;
Allant plus loin, Express Prefixr fournit également une API que vous pouvez exploiter pour l’intégrer à vos applications ou utiliser des outils tiers, tels que boucle. Donc, en prenant l'extrait suivant:
curl http://expressprefixr.herokuapp.com/api/processor -d css = "body border-radius: 10px"
Et le coller dans mon Terminal La fenêtre me donne les résultats suivants:
reys-mbp: ~ rey $ curl http://expressprefixr.herokuapp.com/api/processor -d css = "body border-rayon: 10px" body -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px;
Un dernier atout majeur à propos d’Express Prefixr, c’est que le code est disponible sur GitHub, ce qui vous permet de le convertir facilement et de personnaliser le logiciel selon vos besoins..
L'option suivante est en réalité conçue pour s'intégrer davantage dans votre flux de travail, plutôt que d'être un outil d'interface graphique. Autoprefixer ajoute en fait des préfixes, le cas échéant, en utilisant les règles fournies par le site populaire Can I Use. Le slogan d'Autoprefixer est:
"Écrivez vos règles CSS sans les préfixes du vendeur (en fait, oubliez-les complètement")
Et c'est vrai. Cela signifie que dans vos feuilles de style, vous pouvez vous concentrer sur l'utilisation de la syntaxe basée sur des normes. Autoprefixer se chargera de l'ajout des règles préfixées si nécessaire..
Regardons un code:
: plein écran a transition: transformer 1s
Le code ci-dessus sera mis à jour par Autoprefixer comme suit:
: -webkit-full-screen une -webkit-transition: -webkit-transform 1s; transition: transformation 1s: - moz-plein-écran a transition: transformation 1s: - ms-plein écran a transition: transformation 1s: plein écran a -webkit-transition: -webkit-transform 1s; transition: transformer 1s
Regardez de près la syntaxe. Notez que le transition Cette règle a été pratiquement laissée de côté, à l'exception de l'ajout des deux entrées spécifiques à Webkit. En effet, le préfixe automatique applique uniquement les préfixes de fournisseur lorsque cela convient. Dans ce cas, transition est largement supporté par les navigateurs modernes et n'a pas vraiment besoin d'être préfixé.
Mais le :plein écran La pseudo-classe est toujours en évolution et doit être correctement préfixée. Le préfixe automatique, utilisant les données Puis-je utiliser, est assez intelligent pour déterminer quand préfixer quelque chose en fonction du niveau de prise en charge par un navigateur pour une fonctionnalité. Très sympa!
La chose à noter est que Autoprefixer est destiné à être incorporé dans votre flux de travail de déploiement normal. Ce n'est pas une bibliothèque côté client et vous l'exploitez via plusieurs intégrations tierces. Ceci comprend:
Accentsconagua
rails auto-préfixeurs gemmeEt tant d'autres options. Même le nouvel éditeur Atom a maintenant le paquet atom-autoprefixer qui montre que Autoprefixer est bien maintenu..
Si vous souhaitez voir Autoprefixer en action, passez à la démonstration suivante et ajoutez un ensemble de règles CSS que vous utilisiez traditionnellement avec le préfixe du fournisseur pour voir comment cela fonctionne pour vous..
La dernière option est une superbe bibliothèque côté client de Lea Verou appelée -prefix-free. Lea préconise depuis longtemps le développement inter-navigateurs et a construit cette bibliothèque pour, en quelque sorte, faire en sorte que votre site utilise tous les préfixes de fournisseur appropriés. Elle l'a construite à un moment où, malheureusement, de nombreux développeurs Web oubliaient simplement d'ajouter tous les préfixes appropriés, ce qui empêchait les sites de s'afficher correctement dans tous les navigateurs modernes..
La principale différence entre cela et les deux autres que j'ai mentionnées précédemment est que -prefix-free est une bibliothèque JavaScript qui examine vos feuilles de style au moment de l'exécution et ajoute les préfixes du fournisseur en cas de besoin..
Utiliser la bibliothèque est aussi simple que d’ajouter la ligne suivante au tête de votre page:
Non sérieusement. C'est tout. La bibliothèque gère le traitement de chaque feuille de style dans lien ou style éléments et ajoute un préfixe de vendeur si nécessaire. Ceci est particulièrement utile pour les sites déjà déployés et il peut ne pas être possible de revenir en arrière et de le mettre à jour..
Il est également compatible avec IE9 +, Opera 10+, Firefox 3.5+, Safari 4+ et Chrome sur ordinateur de bureau et Mobile Safari, navigateur Android, Chrome et Opera Mobile sur mobile..
C'est formidable d'avoir des alternatives à Prefixr et ces solutions font certainement l'affaire. En fin de compte, cependant, les préfixes de vendeurs sont devenus plus compliqués qu’ils ne valent la peine, et de nombreux développeurs ne respectent pas leur intention initiale (par exemple, désigner expérimental fonctionnalités) et en les exploitant dans les systèmes de production, espérons qu'ils disparaîtront dans un proche avenir.
Heureusement, quand ils ont annoncé leur moteur de rendu Blink, Google a annoncé qu'il passerait à un modèle d'indicateur de fonctionnalité qui masquerait les fonctionnalités expérimentales derrière des indicateurs difficiles à définir qui ne sont pas accessibles via le code. Dieu merci!
