Holder din CSS3-kode Markup Slim

Denne artikel er en del af vores "HTML5 / CSS3 Tutorials serie" - dedikeret til at gøre dig til en bedre designer og / eller udvikler. Klik her at se flere artikler fra samme serie.

Webudviklere kan spare meget tid ved hjælp af mere sofistikeret CSS3-syntaks. Brugere, der besøger din side, forventer den hurtigste mulige belastningstid - hvilket gør det til dit ansvar at holde filstørrelserne nede. Der er masser af shorthand tricks med CSS og især under den nye CSS3 model.

Jeg har sammensat et par af disse ideer i vejledningen nedenfor. Vi bør også røre på andre områder som at minificere din CSS-kode. Der er værktøjer til browser til rådighed for at hjælpe udviklere i stylingsprocessen, men du vil gerne kombinere kortkoder med denne filstørrelsesreduktion for i sidste ende at strømline renderingsprocessen på dit websted.

Grundlæggende tips om formatering

Før vi hopper ind i den egentlige CSS-syntaks, vil jeg gå over emnet for hvordan at skrive dit CSS. Hvis du er lidt bekendt med webdesign, har du sandsynligvis set et stylesheet før, sandsynligvis mere end én gang. Den første del af hver kommando hedder vælgeren. Dette retter sig mod den type element, der vil modtage de stilarter, der er tilføjet inden for de krøllede bånd, også kendt som ejendomme.

Inline Level

Med inline-stilarter er hver ejendom skrevet efter hinanden med kun mellemrum for at adskille dem. Denne metode anvendes bedst på selektorer, hvor du kun har brug for et par egenskaber. Det sparer plads på siden, og rulle gennem dit stylesheet bliver meget hurtigere. Hvis du aldrig har oplevet inline CSS før, har jeg tilføjet et lille eksempel under målretning af HTML anker links.

en farve: # 648cc8; font-weight: bold;  a: svever farve: # 739cda; tekst dekoration: ingen;  a.alt farve: # bd4949! vigtigt;

Blokniveau

På den anden side indtastes blok-stil egenskaber i en linje pr nøgle / værdi par og er ofte indrykket for hurtigere redigeringer, når du scanner koden. Omkring 99% af de renere stylesheets, jeg løber ind, bruger denne formatering, og det er blevet en industristandard for mange designere. Hvis din vælger bruger mere end 6 eller 7 egenskaber, er dette den bedste formatering, der skal anvendes.

Når du tager højde for de mange nye CSS3-egenskaber, indser du også, hvor hurtigt dine stylesheets fylder. Og mange af disse egenskaber understøtter browserspecifikke kopier, der kræver næsten dobbelt kodede poster (f.eks. Grænseradius). Du kan tjekke mit eksempel på en blokegenskab, der er angivet under målretningen for en sample wrapper div.

.wrap display: block; polstring: 6px 10px; baggrund: #FFF; grænse-radius: 4px; -moz-grænse-radius: 4px; -webkit-grænse-radius: 4px; -grense-radius: 4px;

Hverken måde at skrive CSS på er specifikt bedre end den anden. I sidste ende er det dit valg som en udvikler, hvilken stil du foretrækker, og selv dette vil ske i henhold til det projekt du arbejder på. Det er endda almindeligt at finde CSS, hvor designere har blandet dem begge sammen! Jeg føler det personligt “igangværende værker” tendens til at være lettere med blok-stilarter, da jeg konstant undersøger stilarket for at lave redigeringer eller tilføjelser. Men for trafik-tunge domæner, der mindsker din CSS-fil, er den absolutte bedste vej at gå.

Holde dem slanke

Ved at udnytte de mange kortkoder, der er tilgængelige i CSS3, kan du spare en masse udviklingstid. Redigering af HTML-elementer bliver meget lettere, da du forstår denne tidsbesparende lingo. Derudover vil din kode blive mere renskåret og lettere at se på.

Den eneste ulempe er, at ikke alle browsere understøtter disse egenskaber fuldt ud. Der findes løsninger til mange af de eksisterende problemer som i Internet Explorer og Netscape. Heldigvis går internettet altid fremad, og da CSS3 vokser i popularitet, vil vi utvivlsomt opleve en vækst i browserkompatibiliteten også.

RGBa Farve Gennemsigtighed / Opacitet

Den nye RGBavalue er ikke ligefrem en CSS3 ejendom, men alfa gennemsigtighed er kun specifik for CSS3. I stedet for de fælles "Red Green Blue" -værdier går du ind for farve, du kan nu inkludere en fjerde mulighed for farve gennemsigtighed. På grund af dette er webudviklere næsten fuldstændigt færdige med gennemsigtige PNG'er.

Den grundlæggende syntaks kræver en værdi fra 0-255 i de første tre (3) slots og 0-1.0 i alfa-positionen. Farveområdet er specifikt for, hvor meget af hver farvetone (RGB) er synligt, idet 0 er intet og 255 fyldt.

 / ** syntaks ** / baggrund: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** eksempel ** / div baggrund: rgba (255, 255, 255, 0,3);

Kompatibilitet på tværs af browseren

En anden ejendom Gennemsigtighed kan bruges under visse omstændigheder. Dette vil dog påvirke hele HTML-elementet og det indre indhold, ikke kun baggrunden som du så i mit eksempel.

Desværre understøtter Internet Explorer endnu ikke RGBa-farvensværdien. Du bør generelt indeholde en tilbagekaldelsesegenskab med fuld opacitet for disse mindre standard browsere. Du opsætter dette med de samme værdier, men udelukker den fjerde (opacitet). Det ville se noget ud rgba (255, 255, 255)

Derudover kan Internet Explorer håndteres lidt mere grasiøst gennem conditionals. Du kan faktisk kontrollere, om browseren kører IE og vise et proprietært Microsoft CSS-filter på kommando. Jeg har demonstreret dette i mit eksempel nedenfor (bemærk dette vises et sted i din HTML-fil):

CSS3 Border Radius

Jeg har læst et par forvirrende forumtråde om at skabe afrundede grænser med CSS3 - ikke så meget på siden af, hvordan det er gjort, men med en fin browser understøttes webudviklere for at den nemmeste kode kan falde ind og fungere som forventet.

 / ** syntaks ** / grænsestråle: øverst til venstre øverst til højre nederst til højre nederst til venstre;

Det border-radius Egenskaber deler lignende syntaks for at oprette en standardgrænse, medmindre vi i dette tilfælde målretter mod boksens hjørner. Denne egenskab vil faktisk acceptere 1 - 4 værdier, og de retter sig hver især mod en anden opsætning af hjørner.

1 værdi: Alle fire hjørner afrundes til samme værdi
2 værdier: Den første værdi gælder for øverst til venstre og nederst til højre mens den anden værdi rammer øverst til højre og nederst til venstre
3 værdier: Gælder først for øverst til venstre hjørne, den anden er begge nederst til venstre & øverst til højre mens den 3. og sidste værdi anvendes til nederst til højre
4 værdier: Alle 4 værdier målretter hjørner i følgende rækkefølge: øverst til venstre, øverst til højre, nederst til højre, nederst til venstre

 / ** eksempel ** / div grænse-radius: 4px 4px 8px 4px;  div border-radius: 4px 4px 8px;

Så i koden ovenfor bruger vi border-radius at anvende en 4px afrundet effekt på alt undtagen nederst til højre grænse, der får en 8px glatt kurve. Hvis du har bemærket det, vil begge disse koder faktisk anvende samme stil effekt.

Kompatibilitet på tværs af browseren

Nu er hovedproblemet det border-radius understøttes kun inden for nogle få browsere. Internet Explorer 9 tilføjede for nylig stor støtte, og Opera vil også gøre det her. Men selv Opera har skabt sin egen ejendom med -o-border-radius målrettet mod deres specifikke browsermotor. Derudover -Moz-border-radius understøttes af Firefox / Gecko software og -webkit-border-radius til Google Chrome / Safari.

Koden nedenfor er et eksempel på min bare-knogle skabelon for at skabe afrundede hjørner med den største globale browser support.

 div border-radius: 4px 4px 8px 4px; -webkit-grænse-radius: 4px 4px 8px 4px ;; -moz-grænse-radius: 4px 4px 8px 4px; -radio-radius: 4px 4px 8px 4px;

Har lyst på en dropskygge?

Den anden rigtig fantastiske facet af CSS3 er støtten til boks og tekstskygger. Dette har været et problem for udviklere i fortiden, da baggrundsbilleder var den eneste realistiske mulighed. Denne syntaks følger faktisk en shorthand-rolle, der er meget nemmere end de andre egenskaber, vi har dækket. Det er svært at huske den rigtige rækkefølge af nøgleværdier i starten - men jo mere praksis du lægger i, jo lettere bliver det.

Desværre er Internet Explorer endnu en gang den ulige ud. Hver anden større browser, herunder Firefox, Google Chrome, Safari og Opera, understøtter fuldt ud tekst-skygge ejendom. Udviklere har forsøgt at opbygge deres egen IE-støtte i, men er stadig meget begrænsende. Den grundlæggende syntaks er skrevet som følger:

 / ** syntaks ** / tekst-skygge: x-offset y-offset blur-radius farve; / ** eksempel ** / div tekst-skygge: 2px 2px 1px # 111;

X- og Y-forskydningen fortæller browseren, hvor langt over højre og lav skyggen skal vises. Du kan bruge negative værdier til at placere skyggen over og over til venstre. Men dette kommer ud ser meget akavet, så jeg anbefaler positive heltal. Også blur-radiusværdien kan bruges til at udjævne de stive kanter, hvis tekstskyggen forekommer unaturlig.

Denne syntaks kigger bare på den grundlæggende notation, når der oprettes en enkelt drop-shadow-effekt. Meget avancerede designere har studeret for at til og med skabe flere skygger samtidigt! Jeg henviser til dette fantastiske blogindlæg fra tilbage i april 2011, som går i detaljer om indførende tekstskygger. Hvis du har tid, skim gennem indholdet bare for at få en ide om de mere avancerede funktioner, og sørg for at bogmærke det som en fremtidig reference!

Kompatibilitet på tværs af browseren

Den største svaghed vi kører ind er Internet Explorer. Til tider har Microsoft skubbet ud deres egen browsergengivelsesmaskine, der i bedste fald har udført subpar. Nu selv med at CSS3 tager regimene i tekstskygger, er IE stadig bag. Der er en fantastisk demo hjemmeside, hvor du kan finde kode eksempler og traditionelle CSS betingede kommentarer.

I grund og grund søger du at kontrollere, om browseren din bruger kører, passer til enhver version af Internet Explorer 9 eller derunder. Derefter bruger vi MS-filtre, vi kan anvende en skygge i ethvert tekstelement (ovenover bruger vi et afsnit).

Lette overgange

CSS3 overgang er den hotteste ejendom på designmarkedet siden granny's flapjacks! Webdesignere har gjort sådan en uenighed om rene CSS-overgange, selv om support hovedsagelig er begrænset til Webkit-browsere. Du kan selvfølgelig udnytte sekundære egenskaber til Mozilla og Opera og sådan. Men shorthand notationen er virkelig fængslende, især hvis du er imod JavaScript-animationer uanset årsag.

Lad os først se på den oprindelige overgangsejendom. Dette vil kræve 4 værdier, som du også kan bryde ned i egenskaberne selv. De svarer til overgangen ejendom(hvad er effekten), varighed(hvor lang tid at tegne det ud), timing-funktion(ændringer i hastigheden over animationen), og forsinke(antal sekunder at vente før animering).

/ ** syntaks ** / overgang: tidsbegrænset funktion forsinkelse; / ** eksempel ** / img overgangsejendom: opacitet; overgangsperiode: 2s; Overgangstidsfunktion: Indlæsning; overgangsforsinkelse: 0,5s;

Du bør intuitivt forstå formålet med de fleste af disse egenskaber undtagen muligvis timingfunktionen. Selvom forvirrende i starten, animerer denne egenskab simpelthen din overgang forskelligt, så effekten begynder langsommere, slutter langsommere eller noget lignende.

W3 Skoler har en timingfunktion doc online, som viser alle mulige værdier, du kan prøve. Jeg finder mig hele tiden Googling for disse guider, men de gør så nyttige bogmærker.

Kompatibilitet på tværs af browseren

Lad os nu bringe fuld browser support til spil. Som standard er overførselsegenskaben kun understøttet af nyere versioner af Safari. Alligevel kræver mange brugere stadig -webKit præfiks, som også gælder for Google Chrome og lignende gengivelsesmotorer. Nedenfor er en “færdiggjort” kodeblokskabelon Jeg anbefaler at gemme og bruge, hvis du har brug for overgangsstøtte fra de fleste webbrowsere.

 img overgang: opacity 2s let-in 1s; -webkit-overgang: opacity 2s let-in 1s; / * krom, safari, flock * / -moz-overgang: opacity 2s let-in 1s; / * mozilla + gecko * / -o-overgang: opacity 2s let-in 1s; / * opera * /

Tekst-slagvirkninger

Denne ejendom er ikke stor, og du kan ikke finde mange webdesignere, der bruger det i dag. Men du kan bruge tekst-takts at bygge nogle rigtig pæne effekter med dine skrifttyper. Webkit browsere som Safari og Chrome er de eneste sande tilhængere af denne ejendom hidtil. Opera og Firefox har svært ved at gengive tekstobjekter med de samme konturer.

 / ** syntaks ** / p -webkit-tekst-slag: bredde farve;  / ** eksempel ** / p -webkit-tekst-slag: 1px # 222;

Kompatibilitet på tværs af browseren

Hvis du føler behov for tekststrejseffekter, skal du altid inkludere en backupfarve. Mozilla og Opera kan komme forbi, men Internet Explorer-brugere har ingen andre muligheder. Desværre er det en af de nyere CSS3-egenskaber, der netop ikke har fået nok support fra webbrowserudviklerne. Du bør bruge lidt tid på at lege med dette store webværktøj, der er specielt oprettet til opbygning af disse CSS3-tekstlinjer.

Box-dimensionering

Den boksformede egenskab giver dig mere kontrol over den samlede bredde / højde af et hvilket som helst blokelement. Som standard udgør bredden / højden + grænsen + margin + polstring den samlede størrelse af en boks. Men ved brug af grænsefelt på dit indhold skubbes alle dine polstring og margener indad for at holde bredden nøjagtig den samme. Der er kun to værdier for denne ejendom, med indhold-box er standard.

div bredde: 550px; polstring: 9px; box-dimensionering: border-box; / * Bredden forbliver på 550px * /

Som du kan forestille dig, vil dette komme til nytte på et tidspunkt under din CSS karriere. Padding og marginer kan være en reel smerte, og når du tilføjer i grænser, har du tendens til at miste spor af pixels.

Kompatibilitet på tværs af browseren

Opera og IE 8 understøtter som standard denne nye ejendom. IE7 og nedenunder sidder fast i indholds boksens opsætning, medmindre dine besøgende bruger quirks-tilstand. De eneste tilføjelser du bør vide om specifikt målrettet webkit og Mozilla-drevne browsermotorer.

div -webkit-box-dimensionering: border-box; / * Safari / Chrome * / -moz-box-dimensionering: grænsefelt; / * Firefox * / box-dimensionering: border-box; / * Opera / IE8 + * /

Pure CSS3-kolonner

Kolonner er lidt vanskelige med CSS3, men kan opnås med minimal kode. De 2 egenskaber, du vil fokusere på, er kolonne-count og kolonne-kløften. Tallet refererer til det samlede antal kolonner, du ønsker at anvende, mens afstanden skaber en margen mellem hver enkelt.

 div # cols kolonne-count: 3; kolonne-gap: 10px;

I mit eksempel kan vi se, at ID # cols bruges som en container. Indenfor deler vi div i 3 kolonner med 10 px mellemrum. Yderligere kan du sætte kolonne bredde som bruges til at indstille den samlede bredde af hver kolonne i stedet for at notere et fast nummer.

Kompatibilitet på tværs af browseren

Alt før IE8 vil simpelthen ikke være i stand til at gøre brug af denne ejendom. Men som vi har set i hvert eksempel, tilbyder Mozilla og Webkit deres egne løsninger til flere browsere. Hvis du har brug for en skabelon, skal du tjekke min lille eksempelkode nedenfor:

 div # sidebar bredde: 210px; -moz-kolonneantal: 3; -moz-column-gap: 7px; -webkit-kolonneantal: 3; -webkit-kolonne-mellemrum: 7px; kolonneantal: 3; kolonne-gap: 7px;

Brugerdefineret @ skrifttype-ansigt

Du skal have hørt om spændingen vedrørende CSS3 brugerdefinerede skrifttyper. Nå ved hjælp af @ font-face-ejendommen kan vi importere eksterne skrifttypestile og bruge disse som enhver anden familie. Syntaxen er noget forfærdet, og du bliver nødt til at bruge lidt tid på at få det rigtigt. Blokken til @ Font-face bruges til at definere et efternavn, derefter kan du bruge dette i din font-family ejendomme hvor!

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

Så du ser ovenfor, jeg er ikke målrettet mod en bestemt skrifttype, men syntaxen er, hvad der skal skille sig ud. Bemærk, at Internet Explorer kun understøtter .EOT skrifttyper, mens .ttf og .OHF er populære muligheder for de andre browsere. Det er også vigtigt, at du forstår, at du kan videresende font-adresser fra direkte links, dvs.. url ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');

Der er ikke noget ægte cross-browser problem med denne opsætning, da alle gengivelsesmotorer kan analysere disse skrifttype filtyper. Bare husk at for IE support skal du inkludere en eot version samt din original. Jeg mener, at W3 Schools artikel har et katalog over de vigtigste oplysninger, du bør tjekke ud.

Konvertering til Miniature CSS

Dette emne diskuteres ofte, da det tjener et andet formål for hvert projekt. På den ene side bruger webudviklere meget tid på at skrive deres stylesheets. Der er ingen måde at kryptere denne type plaintext-data og skjule det fra snooping-øjne. Hvis du forsøger at holde andre fra at blatant stjæle din kode, er det bedste, du kan gøre, at forstyrre stilarterne og fjerne alle linjeskift / mellemrum.

Denne proces kan mærkes som miniaturizing din kode. Generelt vil udviklere skrive CSS i standardformat og derefter fjerne alle whitespace før upload til webserveren. Så har du en lokal kopi til at redigere hurtigt, samtidig med at du får en mindre version på live-projektet. Denne metode kan naturligvis være nyttig for at reducere sidebelastninger sammen med at holde kodekapere i bugt.

Linket, jeg skrev ovenstående, der fører til Minify CSS, har nogle fantastiske læserematerialer om emnet. Webstedet indeholder også et browserbaseret værktøj til fjernelse af sådan whitespace og key returns fra din kode. CSS Compressor er en anden mulighed, der har en enkel grænseflade, der kører direkte i din webbrowser. Jeg har også hørt gode ting om Clean CSS, selvom jeg aldrig har brugt appen selv.

relaterede links

For at holde dig skubbe fremad har jeg leveret seks nyttige links fra hele verden. Disse omfatter ikke kun kortfattet notation, men hjælpsomme hjælpelinjer og vejledninger til at få adgang til, når du praktiserer denne nye shorthand CSS-kode.

Begyndervejledning til CSS3
CSS Shorthand Guide
Bruger du CSS3 korrekt?
CSS indhold og browser kompatibilitet diagram
CSS3 + Progressiv Forbedring = Smart Design
Komplet CSS / CSS3 Egenskaber Indeks

Konklusion

Det kræver en masse dedikation og praksis at skrive CSS kode for at opbygge en konkret tidsplan, som du kan følge for hvert projekt. De fleste webdesignere er glade for at afhente nye projekter og ideer, så du vil helt sikkert finde tid til at øve disse nyttige kodningstips. Prøv at kopiere et lille referenceliste til din egen bekvemmelighed, hvis du ikke kan finde nogen snydeark eller endda værre, du mister internetforbindelsen!

Kender du til andre nyttige CSS3 egenskaber eller genveje? Vi vil gerne høre dine tanker og ideer i diskussions kommentarer. Webudviklere presser på for mere standardisering inden for W3C og det er klart, at overgangen er blevet lettere. CSS3 giver fantastiske fordele, og hvis du kan mestre stenografi kodning vil dette holde dine filstørrelser lave og afskrække copycats fra at stjæle din kode.