Recentemente abbiamo esaminato come utilizzare LESS.js per migliorare il tuo CSS e risparmiare un sacco di tempo di sviluppo. Oggi esamineremo eCSStender, un altro strumento JavaScript che ti consente di implementare complicate proprietà CSS3 con un codice molto piccolo.
eCSStender può essere un po 'confuso per capire da solo, ma una volta capito tutto ciò richiederà letteralmente meno di un minuto per l'installazione e l'uso. Di seguito ti illustrerò come creare un esempio di base che utilizza numerose estensioni di eCSStender.
Cos'è eCSStender?
Il flusso di lavoro di base di eCSStender è il seguente: trovare e scaricare un'estensione, inserirla nella directory del sito Web, collegarla ad essa nel codice HTML, implementare il CSS.
I principali vantaggi di eCSStender sono stati discussi in dettaglio nel recente articolo di Aaron Gustafson, Stop Forking con CSS3 (Aaron Gustafson è il creatore di eCSStender). Uno dei maggiori problemi con CSS3 è ovviamente il lungo codice necessario per implementarlo in modo cross-browser.
Ad esempio, se abbiamo una casella semplice che vogliamo dare angoli arrotondati e un'ombra esterna, è necessario il seguente codice:
Stiamo essenzialmente aggiungendo solo due stili, ma occorrono sei righe di codice! eCSStender riduce il lavoro necessario qui, consentendo di digitare una singola riga di codice che esegue automaticamente tutte le versioni di stile consigliate.
Per vedere come funziona, costruiamo un esempio di base.
La scatola
Per mantenere le cose ridicolmente semplici, costruiamo semplicemente una pagina web con un quadrato e un testo.
Il markup qui è super base. Ecco l'HTML:
Ed ecco il CSS a questo punto:
Download di eCSStender
Per rendere la nostra noiosa scatola più emozionante, dovremo prima scaricare eCSStender. Quello che ottieni in questo download è un gran casino di file che ti lasceranno confuso e intimidito.
Fortunatamente, devi solo preoccuparti di un singolo file qui. Basta prendere? ECSStender.js? dal? src? cartella e gettare il resto. Gli utenti esperti dovrebbero sentirsi liberi di esaminare tutti gli esempi e la documentazione, ma per gli scopi di questo tutorial il file JavaScript principale andrà benissimo da solo.
Download di estensioni
eCSStender non fa molto subito fuori dalla scatola. Invece, puoi creare e / o scaricare estensioni gratuite per soddisfare le tue esigenze. Vai alla pagina Estensioni eCSStender per vedere cosa è disponibile.
Come puoi vedere, eCSStender è ancora nelle prime fasi di sviluppo quindi al momento ci sono solo poche estensioni, alcune delle quali sono ancora in costruzione.
Quando fai clic su uno dei link sopra riportati, sarai indirizzato a una pagina in cui puoi scaricare l'estensione, vedere una demo e conoscere la sua implementazione.
Il nostro primo test: angoli arrotondati
Per vedere come funziona tutto questo, scarica l'estensione per sfondi e bordi. Anche in questo caso si otterrà un download piuttosto pesante solo per catturare un singolo file. Prendi il file chiamato? ECSStender.css3-backgrounds-and-borders.js? e lanciarlo nella directory del tuo sito web.
Collegamento dei file
Ora che abbiamo sia eCSStender sia un'estensione installata, è ora di caricarli nel tuo documento HTML. Questo è fatto esattamente come qualsiasi altro file .js, basta inserire un link nella parte principale del documento.
Come puoi vedere, ho deciso che il nome del file per l'estensione degli sfondi e dei bordi era troppo lungo e lo hai rinominato? ECSStenderBB.js? per mantenere le cose semplici Sentiti libero di ignorare questo passaggio se vuoi, ma assicurati che i tuoi nomi dei file corrispondano a quelli mostrati nel tuo HTML.
Il CSS
Come puoi vedere, non c'è stato molto lavoro fino ad ora. La maggior parte dei contenuti di cui sopra sono spiegazioni, background, ecc. Tutto ciò che abbiamo veramente fatto fino a questo punto è scaricare un file e collegarlo nel nostro HTML, proprio come faresti con jQuery.
Quando implementi una determinata estensione nel CSS del tuo sito, assicurati di consultare la pagina di download per una sintassi corretta. Nel nostro caso, il seguente codice ottiene il lavoro fatto:
Questo è tutto ciò che c'è da fare. eCSStender farà la sua magia e farà in modo che questo codice venga opportunamente trasformato per funzionare nella maggior parte dei browser moderni.
Ora, noterai che questo ci ha dato una forma piuttosto funky. Questo perché ogni angolo è impostato su un raggio diverso. In questo caso, mi piace l'idea di base, quindi procederò a ripristinarla in modo tale che un angolo sia abbastanza nitido e gli altri siano arrotondati uniformemente in misura maggiore.
Aggiungere altro
Solo per assicurarti di aver capito la sostanza, aggiungiamo altre due proprietà. Innanzitutto, scarica entrambe le estensioni di transizione e trasformazione.
Prendi i file .js necessari proprio come nell'esempio precedente e buttali nella cartella del tuo sito. Dalla pagina di download di ogni estensione possiamo vedere che la sintassi è la seguente:
Come puoi vedere, la sintassi della transizione è abbastanza semplice: seleziona cosa passare, imposta una durata e imposta una facilità. Con la proprietà transform è necessario prima impostare un'origine, quindi elencare la trasformazione che si desidera effettuare insieme a un indicatore numerico. In questo caso abbiamo ruotato l'oggetto di 15 gradi.
Quindi, per applicare questo al nostro esempio, facciamo un divertente effetto hover.
Così ora, quando passi il mouse sopra la scatola, ruoterà, cambierà colore e cambierà dimensione carattere con una bella transizione.
Ognuna di queste proprietà CSS3 normalmente avrebbe richiesto circa quattro righe di codice. Quindi, come puoi vedere, abbiamo sicuramente risparmiato un bel po 'di programmazione.
eCSStender vs. LESS: Qual è il verdetto?
Nel complesso, eCSSstender è stato sicuramente divertente con cui giocare. Tuttavia, poiché ultimamente ho lavorato con molti di questi strumenti CSS, semplicemente non posso fare a meno di confrontarli tutti con MENO.
Diamo un'occhiata ad alcune delle aree in cui ogni sistema eccelle. LESS è immediatamente più potente perché trasforma i CSS in un vero linguaggio di programmazione con variabili, operazioni, ecc. Ciò aggiunge una certa flessibilità alla codifica e alla sintassi che non si ottiene con eCSStender. MENO inoltre non richiede agli utenti di scovare e scaricare più estensioni e collegarsi a una pletora di documenti JS. Infine, LESS può essere utilizzato immediatamente da chiunque senza preoccuparsi della compatibilità perché ciò che viene caricato in ultima analisi è semplicemente un vecchio CSS.
eCSStender rende facile agli sviluppatori la creazione di plug-in personalizzati, quindi a lungo termine potrebbe essere la soluzione più potente e robusta (a patto che gli sviluppatori salti a bordo). eCSStender è anche bello perché puoi saltare la fase di compilazione inerente al metodo LESS (i file .LESS sono compilati in file .CSS). Ci sono anche alcuni altri motivi tecnici che potrebbero piacerti eCSStender meglio trovato nella sezione FAQ. Ad esempio, un pre-processore [come LESS] non può sfruttare quella sfumatura per implementare animazioni basate su JavaScript come alternativa a quelle basate su CSS, se non sono supportate perché pre-processori (così come sono attualmente costruite) prendere una taglia unica? approccio alla gestione dei CSS: tutti ricevono la stessa cosa.
Tuttavia, nonostante tutto ciò, anche il sito Web eCSStender ammette che non è semplicemente pratico da usare in molte circostanze. Da parte mia, non riesco a vedermi mai davvero usando eCSStender per qualcosa di più di un po 'di divertimento e sperimentazione (a meno che non vengano apportate alcune modifiche importanti).
Per qualsiasi motivo, eCSStender ha appena preso molto di più? di MENO per far funzionare tutto correttamente. Per esempio, avrei ottenuto eCSStender installato e funzionante su Safari, ma poi non funzionerebbe in Chrome (bizzarro dal momento che sono entrambi Webkit) e avrebbe spesso bloccato Firefox.
In definitiva, strumenti come questi hanno lo scopo di migliorare e semplificare il tuo flusso di lavoro. Date loro una possibilità per vedere se quell'intenzione effettivamente si risolve. Se SASS, MENO, eCSStender, o altri strumenti simili, in realtà aggiungono tempo alla tua procedura di codifica, quindi li butta e ripristina il buon vecchio HTML e CSS nel modo in cui erano destinati.
Unisciti alla conversazione
Lascia un commento qui sotto e facci sapere quali strumenti di estensione o modifica CSS hai provato. Dicci cosa ne pensi di LESS ed eCSStender. Ti piace uno e odia l'altro, li ami entrambi, o non riesci a vedere una ragione per nessuno di esistere?
Come sviluppatori nel mondo reale, alla fine decidi cosa viene adottato e cosa no e vogliamo sentire le tue opinioni!