Nyligen tittade vi på hur man använder LESS.js för att förbättra din CSS och spara dig massor av utvecklingstid. Idag ser vi på eCSStender, ett annat JavaScript-verktyg som gör att du kan implementera komplicerade CSS3 egenskaper med mycket liten kod.
eCSStender kan vara lite förvirrande att räkna ut på egen hand, men när du förstår allt det kommer det bokstavligen att ta dig mindre än en minut att installera och använda. Nedan följer jag dig genom att bygga ett grundläggande exempel som använder ett antal eCSStender-tillägg.
Vad är eCSStender?
Det grundläggande arbetsflödet för eCSStender är som följer: hitta och ladda ner en filtillägg, kasta den i din webbkatalog, länka till den i din HTML, implementera CSS.
De stora fördelarna med eCSStender diskuterades i detalj i Aaron Gustafsons senaste artikel, Stop Forking med CSS3 (Aaron Gustafson är skapare av eCSStender). Ett av de största problemen med CSS3 är självklart den långa koden som krävs för att implementera den i ett webbläsare.
Om vi till exempel har en enkel låda som vi vill ge avrundade hörn och en droppskugga är följande kod nödvändig:
Vi lägger i princip bara två stilar, men det tar sex rader kod! eCSStender reducerar det arbete som behövs här genom att du kan skriva en enda kodlinje som automatiskt utför alla rekommenderade stilversioner.
För att se hur det fungerar, låt oss bygga ett grundläggande exempel.
Lådan
För att hålla sakerna löjligt enkelt, låt oss bara bygga en webbsida med en kvadrat och en del text.
Markeringen här är super grundläggande. Här är HTML:
Och här är CSS på den här tiden:
Hämtar eCSStender
För att göra vår tråkiga låda mer spännande måste vi först ladda ner eCSStender. Vad du får i denna nedladdning är en stor röra av filer som kommer att lämna dig förvirrad och skrämmad.
Lyckligtvis behöver du bara oroa sig för en enda fil här. Ta bara tag? ECSStender.js? från? src? mapp och släng resten. Avancerade användare borde gärna gräva igenom alla exemplen och dokumentationen, men i den här handledningen är det viktigaste JavaScript-filen som gör bara bra själv.
Hämtar tillägg
eCSStender gör inte mycket rätt ut ur lådan. Istället skapar du och / eller laddar ner gratis tillägg för att komplettera dina behov. Gå vidare till sidan eCSStender Extensions för att se vad som är tillgängligt.
Som du kan se är eCSStender fortfarande i de tidiga utvecklingsstadierna, så det finns bara en handfull förlängningar för tillfället, varav några fortfarande är under uppbyggnad.
När du klickar på en av länkarna som visas ovan kommer du att hämtas till en sida där du kan ladda ner tillägget, se en demo och lära dig om dess genomförande.
Vårt första test: Avrundade hörn
För att se hur allting fungerar, ladda ner bakgrunden och gränserna. Här kommer du att få en ganska stor nedladdning bara för att kunna vara en enda fil. Ta tag i filen heter? ECSStender.css3-backgrounds-and-borders.js? och kasta den i din hemsida katalog.
Länka filerna
Nu när vi har både eCSStender och en förlängning installerad, är det dags att ladda dem in i ditt HTML-dokument. Detta görs precis som alla andra .js-filer, bara kasta in en länk i huvuddelen av ditt dokument.
Som du kan se bestämde jag mig för att filnamnet för bakgrunderna och gränserna var långt för länge och bytt namn till det? ECSStenderBB.js? för att hålla saker enkelt. Glöm inte att ignorera det här steget om du vill, bara se till att dina filnamn matchar det som visas i din HTML.
CSS
Som du kan se har det hittills inte funnits mycket arbete. Det mesta av innehållet ovan är förklaring, bakgrund etc. Allt vi verkligen har gjort upp till denna punkt är att ladda ner en fil och länka den i vår HTML, så mycket som du skulle göra med jQuery.
När du implementerar en viss förlängning i CSS på din webbplats, se till att hämta sidan för korrekt syntax. I vårt fall får följande kod jobbet gjort:
Det är allt som finns där. eCSStender kommer att göra sin magi och se till att den här koden är lämpligt förvandlad till arbete i de flesta moderna webbläsare.
Nu märker du att det här gav oss en ganska funkig form. Det beror på att varje hörn är inställd på en annan radie. Jag gillar en grundtank här, men så kommer jag att återställa det så att ett hörn är ganska skarp och de andra är jämnt rundade i större utsträckning.
Lägger till mer
Bara för att se till att du får kärnan, låt oss lägga till ytterligare två egenskaper. Först, ladda ner både övergångs- och transformationstillägg.
Ta de nödvändiga .js-filerna precis som i föregående exempel och släng dem i din sajtmapp. Från varje tilläggs nedladdningssida kan vi se att syntaxen är som följer:
Som du kan se är övergångssyntaxen ganska grundläggande: välj vad som ska överföras, ange en varaktighet och ställ in en lätthet. Med omvandlingsegenskapen måste du först ange ett ursprung, lista sedan den transformation du vill göra tillsammans med en numerisk indikator. I detta fall roterade vi objektet 15 grader.
Så för att tillämpa detta på vårt exempel, låt oss göra en rolig svävareffekt.
Så nu när du svävar över rutan, kommer den att rotera, ändra färg och ändra typsnittstorlek alla med en fin övergång.
Var och en av dessa CSS3 egenskaper skulle normalt ha tagit runt fyra rader av kod. Så som du kan se har vi definitivt sparat oss ganska lite av kodning.
eCSStender vs MINDRE: Vad är dom?
Totalt var eCSSstender definitivt kul att leka med. Men eftersom jag har lekt runt med många av dessa CSS-verktyg på sistone, kan jag helt enkelt inte låta bli att jämföra dem alla till MINDRE.
Låt oss ta en titt på några av de områden där varje system utmärker sig. Utanför lådan känns LESS mer kraftfull eftersom det blir CSS till ett riktigt programmeringsspråk med variabler, operationer etc. Det ger viss flexibilitet till kodningen och syntaxen som du inte får med eCSStender. MINDER kräver inte att användare ska jaga och ladda ner flera tillägg och länka till en mängd JS-dokument. Slutligen kan LESS användas direkt av någon utan oro för kompatibilitet eftersom det som slutligen laddas upp är vanlig CSS.
eCSStender gör det enkelt för utvecklare att skapa anpassade plugins så på lång sikt kan detta faktiskt vara den mer kraftfulla och robusta lösningen (så länge som utvecklare hoppa ombord). eCSStender är också bra eftersom du kan hoppa över kompileringsteget som är inneboende i LESS-metoden (.LESS-filer kompileras till .CSS-filer). Det finns också några fler tekniska skäl som du kanske tycker om eCSStender, bättre hittade under FAQ-sektionen. Till exempel kan en förprocessor [som LESS] inte utnyttja den nyansen för att implementera JavaScript-baserade animeringar som ett alternativ till CSS-baserade sådana om de inte stöds eftersom preprocessorer (som de är för närvarande byggda) ta en? en storlek passar alla? tillvägagångssätt för hantering av CSS: alla får samma sak.?
Men trots allt detta medger även eCSStender-webbplatsen att det helt enkelt inte är allt som är praktiskt att använda under många omständigheter. För egen del kan jag inte se mig själv använda eCSStender för mer än lite roligt och experiment (om inte några stora förändringar görs).
Oavsett orsak tog eCSStender bara mycket mer? Fiddling? än mindre för att få allt som fungerar ordentligt. Till exempel skulle jag få eCSStender igång på Safari, men då skulle det inte fungera i Chrome (bisarrt eftersom de båda är Webkit) och skulle ofta krascha Firefox.
I slutändan är verktyg som dessa avsedda för att förbättra och förenkla ditt arbetsflöde. Ge dem ett skott för dig själv för att se om den meningen verkligen spelar ut. Om SASS, LESS, eCSStender eller något annat liknande verktyg resulterar i att du faktiskt lägger till tid för din kodningsprocess, kastar du dem och återgår till bra gamla HTML och CSS som de var avsedda att vara.
Gå med i konversationen
Lämna en kommentar nedan och meddela vilken CSS som utökar eller ändrar verktyg du har försökt. Berätta vad du tycker om LESS och eCSStender. Gillar du en och hatar den andra, älskar dem båda, eller kan inte se en anledning att antingen existera?
Som utvecklare i den verkliga världen bestämmer du slutligen vad som antas och vad som inte gör det och vi vill höra era åsikter!