Share
Bon nombre d'entre vous savent peut-être que nous avons récemment lancé un service Web utile, appelé Nettuts + Prefixr. Heureusement, l'outil a parcouru un long chemin depuis le lancement initial, car j'ai éliminé d'innombrables bugs et ajouté de nouvelles fonctionnalités intéressantes. Je voudrais vous donner un bref aperçu de l'état actuel de l'outil, ainsi que de son utilisation..
Prefixr prend tous ces préfixes embarrassants CSS3 que nous devons taper encore et encore, et les supprime! Si vous créez vos feuilles de style à l'aide de la syntaxe officielle, vous pouvez ensuite, lors du déploiement, exécuter votre feuille de style vierge via Prefixr, qui sera instantanément mise à jour pour inclure tous les préfixes requis..
De cette façon, vous n'avez pas à vous rappeler si une propriété CSS3 particulière nécessite ou non une -Mme préfixe ou pas. Cette connaissance est intégrée à Prefixr.
Passons en revue un exemple rapide. Ci-dessous, j'ai quelques CSS épars qui ont grandement besoin d'être mis à jour. Notez que, à certains endroits, nous avons seulement déclaré -moz préfixe; dans d'autres domaines, nous avons utilisé la syntaxe officielle, etc..
.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;
Copiez le code ci-dessus et collez-le dans Prefixr. En retour, vous recevrez:
.box -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)"; filtre: alpha (opacité = 50); opacité: 0,5; .container -webkit-box-shadow: 20px; -moz-box-shadow: 20px; box-shadow: 20px; -webkit-transition: box-shadow 2s; -moz-transition: box-shadow 2s; -o-transition: box-shadow 2s; -ms-transition: box-shadow 2s; transition: boîte-ombre 2s; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-animation: diapositive 1 alternée; -moz-animation: diapositive 1 alternée; -ms-animation: diapositive 1s alternée; animation: diapositive 1 alternée; background-image: -webkit-gradient (linéaire, gauche haut, bas gauche, couleur-stop (10%, # e3e3e3), à (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: -o-linear-gradient (haut, # e3e3e3 10%, blanc); arrière-plan: -ms-linear-gradient (haut, # e3e3e3 10%, blanc); arrière-plan: dégradé linéaire (haut, # e3e3e3 10%, blanc); @keyframes "slide" 0% left: 0; 100% left: 50px; @ -moz-keyframes "slide" 0% left: 0; 100% left: 50px; @ -webkit-keyframes "slide" 0% left: 0; 100% left: 50px; @ -ms-keyframes "slide" 0% left: 0; 100% left: 50px;
Wow - c'est beaucoup de style en double. Mais, malheureusement, c'est nécessaire pour le moment. Si vous souhaitez que vos applications Web soient aussi cohérentes que possible d'un navigateur à l'autre, vous devez utiliser ces différents préfixes. Cependant, comme vous pouvez l’imaginer, cela peut rapidement alourdir votre code. Voilà pourquoi Prefixr est si utile!
Créez vos feuilles de style en utilisant la syntaxe officielle, puis exécutez-les via Prefixr lorsque vous déployez ou lorsque vous avez besoin d'une conversion..
Pas de soucis! Moi non plus. Visiter Prefixr.com n'est qu'un moyen de mettre à jour vos feuilles de style. Je préfère de loin l'utiliser dans mon éditeur de code préféré. Grâce à divers utilisateurs, il existe une poignée de plugins et de scripts disponibles pour les éditeurs les plus populaires. Par exemple, en tant qu'utilisateur de Sublime Text, j'utilise personnellement le plug-in "Sublime Prefixr" de Will Bond, qui fonctionne à merveille..
Maintenant, je n'ai jamais à visiter manuellement Prefixr, copier et coller ma feuille de style. Je sélectionne simplement le bit de CSS que je souhaite optimiser et je tape ctrl + alt + x sous Windows et Linux, ou cmd + ctrl + x sur OSX.
Voir ci-dessous la liste actuelle des éditeurs supportés..
Il existe d'innombrables utilisateurs de TextMate. créons une commande qui exécutera une sélection via Prefixr et placerons le résultat dans le presse-papiers. Dans TextMate, accédez à l'éditeur d'ensembles et créez une nouvelle commande..
Collez le texte suivant dans la zone de texte "Commande". Cela prendra le texte sélectionné, l'exécutera à travers Prefixr et copiera la réponse dans votre presse-papiers. Ensuite, attribuez une clé d'activation et vous êtes prêt! Ceci est utile si vous préférez stocker les résultats préfixés dans une feuille de style distincte..
curl -sSd "css = $ TM_SELECTED_TEXT" "http://prefixr.com/api/index.php" | pbcopy
Ou, si vous préférez que le résultat soit compressé, modifiez la commande comme suit:
curl -sSd "css = $ TM_SELECTED_TEXT & compress_option = true" "http://prefixr.com/api/index.php" | pbcopy
Maintenant, si votre feuille de style affiche:
.box border-radius: 5px;
Sélectionnez la feuille de style, tapez la clé d'activation que vous avez attribuée et les éléments suivants devraient maintenant être stockés dans votre presse-papiers (en supposant que vous utilisiez l'option de compression).
.box -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
Prefixr n'est pas du même type de préprocesseur que Less, Stylus ou Sass. J'aime ceux - Sass et Stylus en particulier. Prefixr est plutôt destiné aux personnes qui n'aiment pas l'idée de les utiliser. Cela dit, les variables sont utiles, donc si vous souhaitez les utiliser dans Prefixr, les feuilles de style seront automatiquement mises à jour. Par exemple:
@variables site_width: 960px; .container width: var (site_width);
Exécutez-le via Prefixr, et nous obtenons:
.conteneur width: 960px;
Il est important de noter qu'il s'agit d'une fonctionnalité facultative. Si vous pensez que les variables compliquent CSS, alors n'utilisez pas cette fonctionnalité!
Nettuts + Prefixr est en cours de développement. Si vous remarquez un bogue ou souhaitez implémenter une nouvelle fonctionnalité, laissez un commentaire ci-dessous ou cliquez sur le bouton "Commentaires" du site Prefixr.com..
Accentsconagua