Håll din CSS3-kod Markup Slim

Denna artikel är en del av vår "HTML5 / CSS3 Tutorials-serien" - dedikerad till att göra dig till en bättre designer och / eller utvecklare. Klicka här att se fler artiklar från samma serie.

Webbutvecklare kan spara mycket tid med hjälp av mer sofistikerad CSS3-syntax. Användare som besöker din sida förväntar sig snabbast möjliga laddningstid - vilket gör det till ditt ansvar att hålla filstorlekarna nere. Det finns gott om shorthand-trick med CSS och speciellt under den nya CSS3-modellen.

Jag har sammanställt några av dessa idéer i guiden nedan. Vi bör också ta kontakt med andra områden som att minska din CSS-kod. Det finns verktyg för webbläsare som kan hjälpa utvecklare i stylingsprocessen, men du vill kombinera kortnummer med den här storleken på filstorlek för att effektivisera renodlingsprocessen på din webbplats.

Grundläggande tips om formatering

Innan vi hoppar in i själva CSS-syntaxen vill jag gå över ämnet för på vilket sätt att skriva din CSS. Om du är lite bekant med webbdesign har du förmodligen sett ett stylesheet före, förmodligen mer än en gång. Den första delen av varje kommando kallas väljare. Detta riktar sig till den typ av element som kommer att få de stilar som läggs in i de lockiga axlarna, även känd som egenskaper.

Inline Level

Med inline-stilar skrivs varje egendom efter varandra med endast mellanslag för att skilja dem. Denna metod tillämpas bäst på väljare där du bara behöver ett par egenskaper. Det sparar utrymme på sidan och rullning genom ditt stilark blir mycket snabbare. Om du aldrig har stött på inline CSS tidigare har jag lagt till ett litet exempel under riktning mot HTML-ankarlänkar.

en färg: # 648cc8; font-weight: bold;  a: svävar färg: # 739cda; text-dekoration: ingen;  a.alt färg: # bd4949! viktigt;

Blocknivå

Å andra sidan anges blockformiga egenskaper i en rad per nyckel / värdepar och är ofta indragna för snabbare redigeringar när man skannar koden. Omkring 99% av de renare stylesheetsna som jag använder för att använda denna formatering, och det har blivit en industristandard för många designers. Om din väljare använder mer än 6 eller 7 egenskaper är det här den bästa formateringen som ska tillämpas.

När du tar hänsyn till de många nya CSS3-egenskaperna, inser du också hur snabbt dina stylesheets fyller upp. Och många av dessa egenskaper stödjer webbläsarspecifika kopior som kräver nästan dubbla kodposter (t.ex. gränsenradie). Du kan kolla in mitt exempel på en blockegenskap som är inställd under inriktning på en sample wrapper div.

.wrap display: block; vaddering: 6px 10px; bakgrund: #FFF; gränsstråle: 4px; -moz-gränsen-radien: 4px; -webkit-gräns-radie: 4px; -gränsradio: 4px;

Varken sätt att skriva CSS är specifikt bättre än det andra. I slutändan är det ditt val som utvecklare som du föredrar, och även det här kommer enligt det projekt du arbetar med. Det är även vanligt att hitta CSS där designers har blandat sig båda tillsammans! Jag känner personligen det “pågående arbeten” tenderar att vara enklare med blockformat eftersom jag ständigt undersöker stilarket för att göra ändringar eller tillägg. Men för trafik-tunga domäner som minskar din CSS-fil är det absolut bästa sättet att gå.

Hålla dem smala

Genom att använda de många kortkoder som finns tillgängliga i CSS3 kan du spara mycket utvecklingstid. Att redigera HTML-element blir mycket enklare när du förstår denna tidsbesparande lingo. Dessutom kommer din kod att visas mer renskuren och lättare att titta på.

Den enda nackdelen är att inte alla webbläsare stöder dessa egenskaper helt. Det finns lösningar för många av de befintliga problemen, som i Internet Explorer och Netscape. Lyckligtvis går webben alltid framåt och eftersom CSS3 växer i popularitet kommer vi utan tvekan att uppleva en tillväxt i webbläsarkompatibiliteten också.

RGBa Färgtransparens / opacitet

Den nya RGBavalue är inte exakt en CSS3 fast egendom, men alfa genomskinlighet är endast specifik för CSS3. Istället för de gemensamma "Red Green Blue" -värdena passerar du in för färg du kan nu Inkludera ett fjärde alternativ för transparens av färg. På grund av detta, är webbutvecklare gjort med genomskinliga PNG nästan helt.

Den grundläggande syntaxen kräver ett värde från 0-255 i de första tre (3) spåren och 0-1.0 i alfapositionen. Färgintervallet är specifikt för hur mycket av varje nyans (RGB) är synlig med 0 som ingenting och 255 full.

 / ** syntax ** / bakgrund: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** exempel ** / div bakgrund: rgba (255, 255, 255, 0,3);

Kompatibilitet med webbläsare

En annan egenskap opacitet kan användas under vissa omständigheter. Detta kommer dock att påverka hela HTML-elementet och det inre innehållet, inte bara bakgrunden som du såg i mitt exempel.

Tyvärr stöder Internet Explorer inte RGBa-färgvärdet än det än. Du bör allmänt inkludera en återgångsegenskap med full opacitet för dessa mindre vanliga webbläsare. Du ställer upp detta med samma värden men med undantag för den fjärde (opacitet). Det skulle se ut som om rgba (255, 255, 255)

Dessutom kan Internet Explorer hanteras lite mer graciöst genom conditionals. Du kan faktiskt kontrollera om webbläsaren kör IE och visa ett eget Microsoft CSS-filter på kommandot. Jag har visat detta i mitt exempel nedan (notera att detta skulle visas någonstans i din HTML-fil):

CSS3 Border Radius

Jag har läst några förvirrande forumtrådar om att skapa avrundade gränser med CSS3 - inte så mycket på sidan av hur det är gjort, men med fina webbläsarsupport, krypterar webbutvecklare att den enklaste koden ska släppa in och fungera som förväntat.

 / ** syntax ** / border-radius: övre vänster övre-höger längst ned-höger längst ned till vänster;

De border-radius Egenskapen delar samma syntax för att skapa en standardgräns, förutom i det här fallet riktar vi in i rutthörnen. Den här egenskapen kommer faktiskt att acceptera 1 - 4 värden och de riktar sig varje gång till en annan inställning av hörn.

1 värde: Alla fyra hörnen är avrundade till samma värde
2 värden: Det första värdet gäller för övre vänstra och nere till höger medan det andra värdet träffas överst till höger och nedre vänstra
3 värden: Först gäller för övre vänstra hörn, den andra är båda nedre vänstra & överst till höger medan det tredje och sista värdet tillämpas på nere till höger
4 värden: Alla 4 värdena riktar sig i hörnen i följande ordning: övre vänster, övre högra, nedre högra, nedre vänstra

 / ** exempel ** / div gränsstråle: 4px 4px 8px 4px;  div gränsstråle: 4px 4px 8px;

Så i koden ovan använder vi border-radius att tillämpa en 4px rundad effekt på allt utom nere till höger gränsen som får en 8px jämn kurva. Om du märkte det, kommer båda dessa koder faktiskt att tillämpa samma stilseffekt.

Kompatibilitet med webbläsare

Nu är huvudproblemet det border-radius stöds bara inom några webbläsare. Internet Explorer 9 har nyligen lagt till bra stöd och Opera kommer också att göra det här. Men även Opera har skapat sin egen egendom med -o-border-radius riktade mot sin specifika webbläsarfunktion. Dessutom -moz-border-radius stöds av Firefox / Gecko-programvara och -webkit-border-radius för Google Chrome / Safari.

Koden nedan är ett exempel på mina benmallar för att skapa rundade hörn med det största globala webbläsarstöd.

 div border-radius: 4px 4px 8px 4px; -webkit-gräns-radie: 4px 4px 8px 4px ;; -moz-gränsen-radie: 4px 4px 8px 4px; -gränsradio: 4px 4px 8px 4px;

Fancy a Drop Shadow?

Den andra riktigt fantastiska fasaden av CSS3 är stödet till låda och textskuggor. Detta har varit ett sådant problem för utvecklare tidigare eftersom bakgrundsbilder var det enda realistiska alternativet. Denna syntax följer faktiskt en stenografi roll som är mycket lättare än de andra egenskaperna vi har täckt. Det är svårt att komma ihåg den korrekta ordningen av nyckelvärdena först - men ju mer träning du lägger in desto lättare blir det.

Tyvärr är Internet Explorer återigen den udda ut. Alla andra stora webbläsare inklusive Firefox, Google Chrome, Safari och Opera stöder hela text-shadow fast egendom. Utvecklare har försökt bygga sitt eget IE-stöd men är fortfarande mycket begränsande. Den grundläggande syntaxen är skriven enligt följande:

 / ** syntax ** / text-skugga: x-offset y-offset-färg / ** exempel ** / div text-skugga: 2px 2px 1px # 111;

X och Y-offset berätta för webbläsaren hur långt över höger och låg skuggan ska visas. Du kan använda negativa värden för att placera skuggan ovanför respektive över vänster. Men det här kommer inte att se väldigt besvärligt så jag rekommenderar positiva heltal. Också suddningsradiusvärdet kan användas för att släta ut de styva kanterna, om textskuggan uppträder onaturligt.

Denna syntax tittar bara på den grundläggande notationen när man skapar en enda droppskuggningseffekt. Mycket avancerade designers har studerat för att till och med skapa flera skuggor samtidigt! Jag hänvisar till det här fantastiska blogginlägget från och med i april 2011, vilket går i stor detalj om att införa textskuggor. Om du har tid, skumma igenom innehållet bara för att få en uppfattning om de mer avancerade funktionerna, och var noga med att boka det som en framtida referens!

Kompatibilitet med webbläsare

Den största motorn vi stöter på är Internet Explorer. Ibland har Microsoft skjutit ut sin egen webbläsare som har utfört underparallet i bästa fall. Nu, även om CSS3 tar regimerna i textskuggor, är IE fortfarande kvar. Det finns en bra demo webbplats där du kan hitta kod exempel och traditionella CSS villkorliga kommentarer.

I grund och botten letar du efter om webbläsaren din användare körs matchar någon version av Internet Explorer 9 eller senare. Sedan använder vi MS-filter kan vi applicera en skugga i något textelement (ovan använder vi en paragraf).

Lättransitions

CSS3 övergång är den hetaste egenskapen på designmarknaden sedan granny's flapjacks! Webbdesigners har gjort så mycket krångel om rena CSS-övergångar, även om support är huvudsakligen begränsat till webkit-webbläsare. Du kan självklart använda sekundära egenskaper för Mozilla och Opera och så. Men shorthand notationen är verkligen fängslande, speciellt om du är emot JavaScript-animeringar av någon anledning.

Låt oss först titta på den ursprungliga övergångsegenskapen. Detta kommer att kräva 4 värden som du också kan bryta ner i egenskaper själva. De motsvarar övergången fast egendom(vad är effekten), varaktighet(hur länge att rita ut det), timing-funktion(hastighetsändringar över animationen) och fördröjning(antal sekunder att vänta innan animering).

/ ** syntax ** / övergång: tidsfördröjning av egenskapsvaraktighet; / ** exempel ** / img övergångsegenskap: opacitet; övergångsperiod: 2s; övergångstidsfunktion: inlämning övergångsfördröjning: 0,5s;

Du bör intuitivt förstå syftet med de flesta av dessa egenskaper utom möjligen tidsfunktionen. Även om det är förvirrande först, animerar den här egenskapen helt enkelt din övergång annorlunda så effekten börjar långsammare, slutar långsammare eller något liknande.

W3 skolor har en tidsfunktion doc online som listar alla möjliga värden du kan prova. Jag ständigt finner mig själv Googling för dessa guider, men de gör så praktiska bokmärken.

Kompatibilitet med webbläsare

Låt oss nu få fullständigt webbläsarsupport till spel. Som standard är övergångsegenskapen endast stöds av nyare versioner av Safari. Ändå kräver många användare fortfarande -webkit prefix som också gäller för Google Chrome och liknande återgivningsmotorer. Nedan är en “slutfört” kodbladsmall Jag rekommenderar att du sparar och använder om du behöver övergångsstöd från flertalet webbläsare.

 img övergång: opacitet 2s lätthet 1s; -webkit-övergång: Opacity 2s Lätt-in 1s; / * krom, safari, flock * / -moz-övergång: opacitet 2s lätthet 1s; / * mozilla + gecko * / -o-övergång: opacity 2s lätthet 1s; / * opera * /

Text-strokeffekter

Den här egenskapen är inte stor och du hittar inte många webbdesigners som använder den idag. Men du kan använda text-stroke att bygga några riktigt snygga effekter med dina teckensnitt. Webkit webbläsare som Safari och Chrome är hittills den enda sanna anhängare av den här egenskapen. Opera och Firefox har svårigheter att göra textobjekt med samma skisser.

 / ** syntax ** / p -webkit-text-stroke: breddfärg;  / ** exempel ** / p -webkit-text-stroke: 1px # 222;

Kompatibilitet med webbläsare

Om du känner behovet av textstrokeffekter, bör du alltid inkludera en backupfärg. Mozilla och Opera kan komma förbi, men Internet Explorer-användare har inga andra alternativ. Tyvärr är detta en av de nyare CSS3-egenskaperna, som bara inte har fått tillräckligt med stöd från webbläsarutvecklarens community. Du borde spendera lite tid med att leka med det här fantastiska webbverktyget som skapats specifikt för att bygga dessa CSS3-textlinjer.

Box-dimensionering

Box-size-egenskapen ger dig större kontroll över den totala bredden / höjden på ett blockelement. Som standard utgör bredden / höjden + gränsen + marginal + vadderingen den totala storleken på en ruta. Använd dock gränsvärde på ditt innehåll genom att trycka på alla dina vadderingar och marginaler inåt för att hålla bredden exakt densamma. Det finns bara två värden för den här egenskapen, med innehåll-box är standard.

div bredd: 550px; vaddering: 9px; box-dimensionering: gränsvärde; / * bredden kommer att ligga vid 550px * /

Som du kan föreställa dig, kommer detta att vara användbart vid någon tidpunkt under din CSS-karriär. Padding och marginaler kan vara en verklig smärta och när du lägger till i gränserna tenderar du att förlora spår av pixlar.

Kompatibilitet med webbläsare

Opera och IE 8 stöder denna nya egendom som standard. IE7 och nedan håller fast med inställning av innehållsruta om inte dina besökare använder quirks-läge. De enda tillägg som du bör veta om specifikt rikta webkit och Mozilla-powered webbläsarmotorer.

div -webkit-box-size: border-box; / * Safari / Chrome * / -moz-box-dimensionering: border-box; / * Firefox * / box-dimensionering: gränslåda; / * Opera / IE8 + * /

Rena CSS3-kolumner

Kolumner är lite knepiga med CSS3 men kan uppnås med minimal kod. De 2 fastigheterna du vill fokusera på är kolonn-count och kolonn-gap. Räknaren refererar till det totala antal kolumner du vill använda medan klyftan skapar en marginal mellan var och en.

 div # cols kolumnräkning: 3; kolumnavstånd: 10px;

I mitt exempel kan vi se att ID # cols används som en behållare. Inuti delar vi div i 3 kolumner med ett 10px mellanrum mellan varandra. Vidare kan du ställa in kolumnbredd som används för att ställa in den totala bredden för varje kolumn istället för att ange ett fast nummer.

Kompatibilitet med webbläsare

Något före IE8 kommer helt enkelt inte att kunna använda denna egenskap. Men som vi har sett i varje exempel erbjuder Mozilla och Webkit sina egna lösningar för flera webbläsare. Om du behöver en mall, kolla in mina små exempelkod nedan:

 div # sidebar width: 210px; -moz-kolonnräkning: 3; -moz-kolonn-gapet: 7px; -webkit-kolumnräkning: 3; -webkit-kolumnavstånd: 7px; kolumnräkning: 3; kolumnavstånd: 7px;

Anpassat @ font-ansikte

Du måste ha hört talas om spänningen i CSS3-anpassade teckensnitt. Tja med att använda @ font-face-egenskapen kan vi importera externa typsnittstyp och använda dessa som alla andra familjer. Syntaxen är något trång och du måste lägga lite tid på att få det rätt. Kvarteret för @ Font-face används för att definiera ett efternamn, efteråt kan du använda detta i din typsnittsfamilj egenskaper varhelst!

 @ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Endast Internet Explorer * /

Så du ser ovan är jag inte inriktad på någon särskild typsnitt, men syntaxen är vad som ska sticka ut. Observera att Internet Explorer endast stöder .EOT typsnitt, medan .ttf och .otf är populära alternativ för andra webbläsare. Också viktigt bör du förstå att du kan skicka in fontadresser från direktlänkar, dvs. url ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');

Det finns ingen riktig cross-browser problem med denna inställning eftersom alla återgivningsmotorer kan analysera dessa typsnittstyptyper. Kom bara ihåg att för IE-support måste du inkludera en eot-version samt ditt original. Jag tycker att W3 Schools artikel har en katalog över den viktigaste informationen du bör kolla in.

Konvertera till miniatyr CSS

Detta ämne debatteras ofta eftersom det tjänar ett annat syfte för varje projekt. Å ena sidan spenderar webbutvecklare mycket tid på att skriva sina stylesheets. Det finns inget sätt att kryptera denna typ av rentextdata och gömma det från snooping-ögon. Om du försöker hålla andra från att blatant stjäla din kod är det bästa du kan göra att kladda upp stilar och ta bort alla radbrytningar / mellanslag.

Denna process kan märkas som miniatyrisering din kod. Generellt kommer utvecklarna att skriva CSS i standardformat och sedan ta bort alla blankutrymmen innan de laddas upp till webbservern. Sedan har du en lokal kopia för att redigera snabbt samtidigt som du ger en mindre version på live-projektet. Denna metod kan självklart vara användbar för att minska sidladdningar tillsammans med att hålla koden kapare i sjön.

Länken jag skrev upp ovan som ledde till Minify CSS har ett fantastiskt läsematerial om ämnet. Webbplatsen tillhandahåller också ett webbläsarbaserat verktyg för att ta bort sådan blankutrymme och nyckelavkastning från din kod. CSS Compressor är ett annat alternativ med ett enkelt gränssnitt som går direkt i din webbläsare. Jag har också hört bra saker om Clean CSS, men jag har aldrig använt appen själv.

relaterade länkar

För att hålla dig framåt har jag gett sex praktiska länkar från hela webben. Dessa inkluderar inte bara shorthand notation men hjälpsamma guider och handledning för att få tillgång till när du övar denna nya shorthand CSS-kod.

Nybörjarens guide till CSS3
CSS Shorthand Guide
Använder du CSS3 på lämpligt sätt?
CSS-innehåll och webbkompatibilitetsschema
CSS3 + Progressiv Förbättring = Smart Design
Komplett CSS / CSS3 Properties Index

Slutsats

Det tar mycket engagemang och övning att skriva CSS-kod för att bygga ett konkret schema som du kan följa för varje projekt. De flesta webbdesigners är glada att hämta nya projekt och idéer, så du kommer säkert att hitta tid att träna dessa användbara kodningstips. Försök att kopiera ner ett litet referensblad för din egen bekvämlighet, om du inte hittar några fusk-lakan eller ännu värre förlorar du Internetanslutning!

Känner du till några andra användbara CSS3-egenskaper eller genvägar? Vi skulle gärna höra dina tankar och idéer i diskussionskommentarerna. Webbutvecklare driver för mer standardisering inom W3C och tydligt har övergången blivit enklare. CSS3 ger fantastiska fördelar och om du kan behärska stenografi kodning kommer detta att hålla dina filstorlekar låga och avskräcka copycats från att stjäla din kod.