Récemment, nous avons étudié comment utiliser LESS.js pour améliorer votre CSS et vous faire gagner un temps considérable en développement. Aujourd'hui, nous allons examiner eCSStender, un autre outil JavaScript qui vous permet d'implémenter des propriétés CSS3 complexes avec très peu de code.
eCSStender peut être un peu déroutant à comprendre par vous-même, mais une fois que vous avez tout compris, il vous faudra littéralement moins d’une minute pour l’installer et l’utiliser. Ci-dessous, je vais vous présenter un exemple de base utilisant un certain nombre d'extensions eCSStender.
Qu'est-ce que eCSStender?
Le flux de travail de base de eCSStender est le suivant: recherchez et téléchargez une extension, insérez-la dans votre répertoire de site Web, créez un lien vers celle-ci dans votre code HTML, implémentez le code CSS.
Les principaux avantages de eCSStender ont été discutés en détail dans le récent article d'Aaron Gustafson, Stop Forking with CSS3 (Aaron Gustafson est le créateur de eCSStender). Un des plus gros problèmes avec CSS3 est bien sûr le long code nécessaire pour le mettre en œuvre de manière multi-navigateur.
Par exemple, si nous souhaitons créer des coins arrondis et une ombre portée d'une boîte simple, le code suivant est nécessaire:
Nous ajoutons essentiellement deux styles, mais cela prend six lignes de code! eCSStender réduit le travail nécessaire ici en vous permettant de taper une seule ligne de code qui exécute automatiquement toutes les versions de style recommandées.
Pour voir comment cela fonctionne, construisons un exemple basique.
La boîte
Pour que les choses restent ridiculement simples, construisons simplement une page Web avec un carré et du texte.
Le balisage ici est super basique. Voici le code HTML:
Et voici le CSS à ce stade:
Télécharger eCSStender
Pour rendre notre boîte ennuyeuse plus excitante, nous devons d’abord télécharger eCSStender. Ce que vous obtenez dans ce téléchargement est un gros fouillis de fichiers qui vous laisseront confus et intimidé.
Heureusement, vous n'avez besoin de vous préoccuper que d'un seul fichier ici. Il suffit de saisir? ECSStender.js? de la? src? dossier et mélanger le reste. Les utilisateurs avancés devraient se sentir libres de parcourir tous les exemples et la documentation, mais pour les besoins de ce didacticiel, le fichier JavaScript principal conviendra parfaitement.
Téléchargement d'extensions
eCSStender ne fait pas grand chose d’emblée. Au lieu de cela, vous créez et / ou téléchargez des extensions gratuites pour répondre à vos besoins. Rendez-vous sur la page eCSStender Extensions pour voir ce qui est disponible.
Comme vous pouvez le constater, eCSStender en est encore aux premières étapes de son développement. Il n’ya donc qu’une poignée d’extensions pour le moment, dont certaines sont encore en construction.
Lorsque vous cliquez sur l'un des liens ci-dessus, vous accédez à une page sur laquelle vous pouvez télécharger l'extension, voir une démonstration et découvrir son implémentation.
Notre premier test: coins arrondis
Pour voir comment tout cela fonctionne, téléchargez l'extension arrière-plans et bordures. Là encore, vous allez obtenir un téléchargement assez lourd pour attraper un seul fichier. Prenez le fichier nommé? ECSStender.css3-backgrounds-and-borders.js? et le jeter dans votre répertoire de site Web.
Lier les fichiers
Maintenant que eCSStender et une extension sont installés, il est temps de les charger dans votre document HTML. Cela se fait exactement comme n'importe quel autre fichier .js, ajoutez simplement un lien dans la partie principale de votre document.
Comme vous pouvez le constater, j’ai décidé que le nom de fichier de l’extension Fonds et Contours était trop long et je l’ai renommé? ECSStenderBB.js? garder les choses simples. N'hésitez pas à ignorer cette étape si vous le souhaitez, assurez-vous simplement que vos noms de fichiers correspondent à ceux affichés dans votre code HTML.
Le CSS
Comme vous pouvez le constater, il n’ya pas eu beaucoup de travail à ce jour. La plupart du contenu ci-dessus concerne l'explication, l'arrière-plan, etc. Tout ce que nous avons vraiment fait jusqu'à présent est de télécharger un fichier et de le lier dans notre code HTML, comme vous le feriez avec jQuery.
Lorsque vous implémentez une extension donnée dans le code CSS de votre site, veillez à consulter la page de téléchargement pour connaître la syntaxe appropriée. Dans notre cas, le code suivant fait le travail:
C'est tout ce qu'on peut en dire. eCSStender fera sa magie et veillera à ce que ce code soit correctement transformé pour fonctionner dans la plupart des navigateurs modernes.
Maintenant, vous remarquerez que cela nous a donné une forme assez funky. C'est parce que chaque coin est défini sur un rayon différent. Je suis un peu comme l’idée de base ici, donc je vais y revenir pour qu’un coin soit assez net et que les autres soient uniformément arrondis dans une plus grande mesure.
Ajout de plus
Juste pour vous assurer de comprendre l'essentiel, ajoutons deux propriétés supplémentaires. Commencez par télécharger les extensions de transition et de transformation.
Prenez les fichiers .js nécessaires comme dans l'exemple précédent et jetez-les dans le dossier de votre site. Sur la page de téléchargement de chaque extension, nous pouvons voir que la syntaxe est la suivante:
Comme vous pouvez le constater, la syntaxe de transition est assez basique: sélectionnez le type de transition, définissez une durée et définissez une facilité. Avec la propriété de transformation, vous devez d'abord définir une origine, puis répertorier la transformation que vous souhaitez effectuer ainsi qu'un indicateur numérique. Dans ce cas, nous avons fait pivoter l'objet de 15 degrés.
Donc, pour appliquer cela à notre exemple, créons un effet de survol amusant.
Alors maintenant, lorsque vous passez la souris sur la boîte, elle pivote, change de couleur et change la taille de la police, le tout avec une belle transition.
Chacune de ces propriétés CSS3 aurait normalement pris environ quatre lignes de code. Comme vous pouvez le constater, nous nous sommes économisés beaucoup de code.
eCSStender vs LESS: Quel est le verdict?
Dans l'ensemble, eCSSstender était vraiment amusant à jouer. Cependant, comme je me suis beaucoup amusé de ces outils CSS ces derniers temps, je ne peux tout simplement pas m'empêcher de les comparer tous à MOINS.
Jetons un coup d'œil sur quelques domaines dans lesquels chaque système excelle. LESS est plus puissant dès le départ car il transforme CSS en un véritable langage de programmation avec variables, opérations, etc. Cela ajoute une certaine souplesse au codage et à la syntaxe que vous ne obtenez pas avec eCSStender. LESS n’exige pas non plus que les utilisateurs recherchent et téléchargent plusieurs extensions et se connectent à une multitude de documents JS. Enfin, LESS peut être utilisé immédiatement par n'importe qui, sans souci de compatibilité, car ce qui est finalement téléchargé est tout simplement du vieux CSS.
eCSStender facilite la création de plug-ins personnalisés pour les développeurs. Cette solution peut donc s'avérer être la solution la plus puissante et la plus robuste à long terme (à condition que les développeurs y adhèrent). eCSStender est également utile car vous pouvez ignorer l'étape de compilation inhérente à la méthode LESS (les fichiers .LESS sont compilés en fichiers .CSS). Il existe également quelques autres raisons techniques pour lesquelles vous pourriez préférer eCSStender dans la section FAQ. Par exemple, un préprocesseur [comme LESS] ne peut pas exploiter cette nuance pour implémenter des animations basées sur JavaScript comme alternative aux animations basées sur CSS, si elles ne sont pas prises en charge, car les pré-processeurs (tels qu'ils sont actuellement construits) prendre une taille unique? approche de la gestion des CSS: tout le monde a la même chose.
Cependant, malgré tout cela, même le site Web eCSStender admet qu’il n’est tout simplement pas pratique de l’utiliser dans de nombreuses circonstances. Pour ma part, je ne me vois jamais vraiment utiliser eCSStender pour plus de plaisir et d’expérimentation (à moins que de gros changements ne soient apportés).
Pour une raison quelconque, eCSStender a juste pris beaucoup plus? que MOINS de tout faire fonctionner correctement. Par exemple, je voudrais que eCSStender soit opérationnel sur Safari, mais dans ce cas, cela ne fonctionnerait pas sous Chrome (ce qui est bizarre, car ce sont tous les deux Webkit) et plantage fréquemment Firefox.
En fin de compte, de tels outils visent à améliorer et à simplifier votre flux de travail. Donnez-leur une chance de voir si cette intention se concrétise. Si SASS, LESS, eCSStender ou tout autre outil similaire a pour effet d’ajouter du temps à votre processus de codage, lancez-les et revenez au bon vieux code HTML et CSS comme prévu.
Rejoindre la conversation
Laissez un commentaire ci-dessous et indiquez-nous quels outils d'extension ou de modification CSS que vous avez utilisés. Dites-nous ce que vous pensez de LESS et de eCSStender. Aimez-vous l'un et détestez-vous l'autre, aimez-vous les deux ou ne voyez-vous aucune raison d'exister?
En tant que développeurs dans le monde réel, vous décidez finalement de ce qui sera adopté et de ce qui ne l’est pas et nous voulons connaître votre opinion!