CSS3-koodi märgistuse hoidmine Slim
Veebiarendajad saavad palju keerulisemat CSS3 süntaksit kasutades säästa palju aega. Kasutajad, kes külastavad teie lehte, ootavad võimalikult kiiret laadimisaega, mis muudab teie vastutuse failide suuruse säilitamise eest. CSS-i ja eriti uue CSS3 mudeli puhul on palju stenogramme.
Olen koostanud mõned neist ideedest allpool toodud juhendis. Peaksime puudutama ka teisi valdkondi, nagu CSS-koodi minimeerimine. On olemas brauseri tööriistu, mis on abiks arendajate abistamiseks stiiliprotsessis, kuid soovite kombineerida selle failisuuruse vähendamise lühikoode, et sujuvamaks muuta veebisaidi esitlusprotsessi.
Põhilised nõuanded vormindamise kohta
Enne kui me hüppame tegelikusse CSS-süntaksisse, tahan minna üle teemale kuidas CSS-i kirjutamiseks. Kui oled veebidisaini tuttav, olete tõenäoliselt juba varem, tõenäoliselt rohkem kui üks, leidnud stiili. Iga käsu esimest osa nimetatakse valija. See on suunatud elemendi tüübile, mis saab stiilid, mis on lisatud lokkis traksid, mida tuntakse ka kui omadused.
Sisemine tase
Sisemise stiiliga kirjutatakse iga omadus üksteise järel ainult nende eraldamiseks. Seda meetodit kasutatakse kõige paremini selektoritele, kus vajate vaid paari omadust. See säästab teie lehel ruumi ja sirvides oma stiilitabelit on palju kiirem. Juhul kui te pole kunagi varem sisse loginud CSS-i, siis olen lisanud allpool väikese näite HTML-ankurlinkide kohta.
a color: # 648cc8; fondi kaal: rasvane; a: hover color: # 739cda; teksti kaunistus: mitte; a.alt color: # bd4949! oluline;
Block Level
Teisest küljest sisestatakse plokk-stiilis omadused ühe rea / väärtuse paari kohta ja need on sageli koodina skannimisel kiiremini redigeeritud. Umbes 99% puhtamate töölehtede kasutamisest kasutan seda vormingut ja see on muutunud paljude disainerite tööstusstandardiks. Kui teie valija kasutab rohkem kui 6 või 7 omadust, on see parim vormindamine.
Kui arvestate paljude uute CSS3 omadustega, mõistate ka, kui kiiresti teie stiililehed täidavad. Paljud neist omadustest toetavad brauseripõhiseid koopiaid, mis nõuavad peaaegu topeltkoodide sisestamist (näiteks raadiuse raadius). Saate vaadata minu näiteid blokeerimisest, mis on määratud allpool, suunates proovi mähkija div.
.wrap display: block; polster: 6px 10px; taust: #FFF; raadius: 4x; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-raadius: 4px;
Kumbki CSS-i kirjutamise viis pole teistest parem. Lõppkokkuvõttes on see teie valik arendajana, millist stiili eelistate, ja isegi see sõltub projektist, millega töötate. On isegi tavaline leida CSS, kus disainerid on mõlemad kokku seganud! Ma tunnen seda isiklikult “pooleliolevad tööd” kipuvad olema lihtsamad plokk-stiilidega, sest ma uurin stiili alati pidevalt, et teha muudatusi või täiendusi. Kuid liiklus-raskete domeenide puhul on CSS-faili redigeerimine absoluutselt parim viis.
Hoidke neid Slim
Kasutades palju CSS3-s saadaval olevaid lühikoode, saate salvestada palju arendusaega. HTML-elementide redigeerimine muutub palju lihtsamaks, kui mõistate seda aega säästvat lingot. Lisaks sellele näib teie kood olevat puhtam ja lihtsam vaadata.
Ainus negatiivne külg on see, et kõik brauserid neid omadusi täielikult ei toeta. Paljude olemasolevate probleemide puhul, näiteks Internet Exploreris ja Netscape'is, on lahendusi. Õnneks on Web alati edenemas ja CSS3 populaarsuse kasvades kogeme ka kahtlemata brauseri ühilduvuse kasvu..
RGBa värvi läbipaistvus / läbipaistmatus
Uus RGBavalue pole täpselt CSS3 vara, aga alfa-läbipaistvus on ainult CSS3 suhtes spetsiifiline. Tavapäraste "Punase Rohelise Sinise" väärtuste asemel, mida te nüüd värvi järgi liigete sisaldab neljandat värvi läbipaistvuse võimalust. Sellepärast tehakse veebiarendajad peaaegu täielikult läbipaistvate PNG-de abil.
Põhiline süntaks vajab väärtust vahemikus 0-255 esimeses kolmes (3) pilus ja 0-1,0 alfa-asendis. Värvivalik on konkreetne, kui palju iga tooni (RGB) on nähtav, kui 0 on midagi ja 255 täis.
/ ** süntaks ** / taust: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** näide ** / div taust: rgba (255, 255, 255, 0,3);
Brauseri ühilduvus
Teine vara läbipaistmatus võib teatud olukordades kasutada. Kuid see mõjutab kogu HTML-elementi ja sisemist sisu, mitte ainult tausta, mida nägin minu näites.
Kahjuks ei toeta Internet Explorer RGBa värviväärtust. Üldjuhul peaksite nende vähem standardsete brauserite jaoks sisaldama varukoopiat, mis on täielikult läbipaistmatu. Sa seadistad selle samade väärtustega, välja arvatud neljas (läbipaistmatus). See näeks välja nagu rgba (255, 255, 255)
Lisaks saab Internet Exploreri käsitseda natukene graatsilisemalt tingimuste kaudu. Saate tegelikult kontrollida, kas brauser töötab IE-s ja kuvab käsul Microsoft CSS-i filtri. Olen näidanud seda allpool toodud näites (märkige, et see kuvatakse kusagil HTML-failis):
CSS3 piiri raadius
Olen lugenud mõned segadust tekitavad foorumi teemad CSS3-ga ümardatud piiride loomise kohta - mitte niivõrd selle kohta, kuidas see on tehtud, vaid ka brauseri tuge toetades on veebiarendajad skrambleerinud lihtsaima koodiga, mis on oodatud.
/ ** süntaks ** / äärisraadius: üleval vasakul üleval paremal üleval paremal;
The raadius vara jagab sarnase süntaksiga standardse piiri loomisega, välja arvatud juhul, kui me sihime kasti nurgad. See omadus aktsepteerib tegelikult 1–4 väärtust ja igaüks suunab oma nurkade teise seadistuse.
- 1 väärtus: Kõik neli nurka ümardatakse samale väärtusele
- 2 väärtust: Esimene väärtus kehtib
üleval vasakuljaparemalt alumineteine väärtus tababüleval paremaljaall vasakul - 3 väärtust: Esiteks kehtib
üleval vasakulnurgas, teine on mõlemadall vasakul&üleval paremal3. ja lõpliku väärtuse rakendamiselparemalt alumine - 4 väärtust: Kõik 4 väärtust suunavad nurgad järgmises järjekorras: üleval vasakul, üleval paremal, alt-paremal, all vasakul
/ ** näide ** / div piiri-raadius: 4px 4px 8px 4px; div piiri-raadius: 4px 4px 8px;
Nii et ülalolevas koodis kasutame raadius 4px ümardatud mõju rakendamine kõikidele peale paremalt alumine 8px silutud kõver. Kui märkasite seda, rakendavad mõlemad koodid tegelikult sama stiili efekti.
Brauseri ühilduvus
Nüüd on peamine probleem see raadius on toetatud vaid mõne brauseri kaudu. Internet Explorer 9 hiljuti lisanud suure toetuse ja Opera muudab selle ka. Kuid isegi Opera on loonud oma vara -o-piiri raadius oma konkreetse brauserimootoriga. Lisaks sellele -moz-border-radius toetab Firefox / Gecko tarkvara ja -webkit-border-radius Google Chrome'i / Safari jaoks.
Allolev kood on näide minu palja luu mallist, et luua ümarate nurkadega suurima ülemaailmse brauseritoega.
div piiri-raadius: 4px 4px 8px 4px; -webkit-piiri-raadius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-piiri-raadius: 4px 4px 8px 4px;
Fancy Drop Shadow?
Teine tõeliselt vinge CSS3 tahk on toetus kasti ja teksti varjud. See on varem olnud selline probleem arendajatele, kuna taustpildid olid ainus realistlik valik. See süntaks järgib tegelikult stenogrammi rolli, mis on palju lihtsam kui teised meie poolt kaetud omadused. Esmalt on keeruline meeles pidada põhiväärtuste õiget järjekorda - kuid mida rohkem praktikat te kasutate, seda lihtsam on see muutuda.
Kahjuks on Internet Explorer veel kord paaritu. Iga teine suurem brauser, sealhulgas Firefox, Google Chrome, Safari ja Opera, toetavad täielikult teksti vari vara. Arendajad on püüdnud luua oma IE tuge, kuid on endiselt väga piiratud. Põhiline süntaks on kirjutatud järgmiselt:
/ ** süntaks ** / teksti-vari: x-offset y-offset-raadius-värv; / ** näide ** / div text-shadow: 2px 2px 1px # 111;
X ja Y nihutamine ütleb brauserile, kui kaugel paremal ja madalal varjus peaks ilmuma. Negatiivseid väärtusi saab kasutada varju paigutamiseks vastavalt vasakule ja vasakule. Aga see tuleb välja väga ebamugavalt, nii et ma soovitan positiivseid täisarvu. Samuti võib jäikade servade silumiseks kasutada hägususe raadiuse väärtust, kui teksti vari tundub ebaloomulik.
See süntaks vaatab vaid ühe põhirõhu efekti loomisel põhilist märget. Kõrgelt arenenud disainerid on õppinud samaaegselt looma mitu varjundit! Viitan sellele awesome'i blogipostile alates 2011. aasta aprillist, mis on väga üksikasjalik teksti varjude kehtestamise kohta. Kui sul on aega, vajuta sisu läbi ainult selleks, et saada täpsemate funktsioonide ettekujutus ja kindlasti järjehoidja see tulevase viitena!
Brauseri ühilduvus
Suurim detractor, mida me sattume, on Internet Explorer. Microsoft on ikka ja jälle oma brauserite renderdamismootori välja viinud, mis on parimatele parameetritele jõudnud. Nüüd, isegi kui CSS3 võtab teksti valitsemisaeg, on IE ikka veel maha jäänud. Seal on suurepärane demo veebisait, kust leiate koodide näiteid ja traditsioonilisi CSS-tingimusi.
Põhimõtteliselt soovid kontrollida, kas teie poolt kasutatav brauser sobib Internet Explorer 9 või selle alla kuuluva versiooniga. Seejärel kasutame MS-filtrite abil varju igasse tekstielementi (eespool, kasutame lõiget).
Üleminekute lihtsustamine
CSS3 üleminek on vanaema flapjacks! Veebidisainerid on teinud sellist kära puhta CSS-i üleminekuga, kuigi tugi on peamiselt piiratud Webkit-brauseritega. Saate muidugi kasutada Mozilla ja Opera sekundaarseid omadusi ja selliseid. Kuid lühikirjeldus on tõesti põnev, eriti kui teil on mis tahes põhjusel vastu JavaScript-animatsioone.
Kõigepealt vaatame algset üleminekuomadust. Selleks on vaja 4 väärtust, mida võiks ka ise omadusteks jaotada. Need vastavad üleminekule vara(milline on mõju), kestus(kui kaua see välja võtta), ajastusfunktsioon(kiiruse muutused animatsiooni üle) ja viivitust(sekundite arv enne animatsiooni ootamist).
/ ** süntaks ** / üleminek: vara kestuse ajastuse funktsiooni viivitus; / ** näide ** / img ülemineku-omadus: läbipaistmatus; ülemineku kestus: 2s; ülemineku-ajastamise funktsioon: lihtsus; ülemineku viivitus: 0,5 s;
Peaksite intuitiivselt mõistma enamiku nende omaduste eesmärki, välja arvatud võimalik ajastusfunktsioon. Kuigi alguses segadust tekitab see omadus lihtsalt teie üleminekut erinevalt, nii et efekt hakkab aeglasemalt, aeglasemalt või midagi sarnast.
W3 koolidel on ajaline funktsioon doc online, kus on loetletud kõik võimalikud väärtused, mida saate proovida. Leian end pidevalt nende juhendite jaoks Google'ile, kuid nad teevad selliseid mugavaid järjehoidjaid.
Brauseri ühilduvus
Nüüd tooge kogu brauseri tugi mängima. Vaikimisi on üleminekufunktsioon ainult toetab Safari uuemaid versioone. Kuid paljud kasutajad vajavad ikka veel -webkit eesliide, mis kehtib ka Google Chrome'i ja sarnaste renderimootorite kohta. Allpool on a “lõpetatud” koodiploki mall Soovitan salvestada ja kasutada, kui vajate üleminekutoetust enamikust veebibrauseritest.
img üleminek: läbipaistmatus 2s lihtsus 1s; -webkit-üleminek: läbipaistmatus 2s lihtsus 1s; / * kroom, safari, kari * / -moz-üleminek: läbipaistmatus 2s lihtsus 1s; / * mozilla + gecko * / -o-üleminek: läbipaistmatus 2s lihtsus 1s; / * ooper * /
Tekstilöögi efektid
See omadus ei ole tohutu ja te ei leia paljusid veebi disainereid, kes seda täna kasutavad. Aga te saate seda kasutada teksti-insult ehitada oma fontidega tõeliselt puhas mõju. Webkit-brauserid, nagu Safari ja Chrome, on siiani ainus tõeline toetaja. Opera ja Firefoxil on raskusi tekstiobjektide esitamisega nende samade visanditega.
/ ** süntaks ** / p -webkit-text-stroke: laiuse värv; / ** näide ** / p -webkit-text-stroke: 1px # 222;
Brauseri ühilduvus
Kui tunnete vajadust tekste tekitada, peate alati lisama varundusvärvi. Mozilla ja Opera saavad seda teha, kuid Internet Exploreri kasutajatel pole muid võimalusi. Kahjuks on see üks uuemaid CSS3 omadusi, mis lihtsalt ei ole veebibrauseri arendajate kogukonnast piisavalt toetanud. Peaksite seda aega mängima selle suurepärase veebitööriista abil, mis on spetsiaalselt loodud nende CSS3 teksti visandite loomiseks.
Kasti suurus
Kasti suuruse omadus annab teile rohkem kontrolli mis tahes plokielemendi kogu laiuse / kõrguse üle. Vaikimisi moodustavad laiuse / kõrguse + serva + marginaali + polsterdamise kasti suuruse. Kuid piiripunkti kasutamine teie sisule surub kõik teie polsterdused ja marginaalid sissepoole hoida laius täpselt sama. Selle omaduse jaoks on ainult kaks väärtust sisu-kast vaikimisi.
div laius: 550 px; polsterdus: 9px; kastide suurus: piirikast; / * laius jääb 550px * /
Nagu te võite ette kujutada, on see CSS-i karjääri ajal mõnevõrra mugav. Polsterdus ja marginaalid võivad olla tõeline valu ja piiride lisamisel kipuvad te kaotama pikslite jälje.
Brauseri ühilduvus
Opera ja IE 8 toetavad seda uut vara vaikimisi. IE7 ja allpool on sisukasti seadistusega kinni jäänud, kui külastajad ei kasuta quirks-režiimi. Ainus täiendus, mida peaksite teadma spetsiaalselt veebipaketi ja Mozilla toega brauserimootoritest.
div -webkit-box-sizing: piiri-box; / * Safari / Chrome * / -moz-box-suurus: piirikast; / * Firefox * / kasti suurus: piirikast; / * Opera / IE8 + * /
Puhtad CSS3 veerud
Veerud on CSS3-ga veidi keerulised, kuid neid on võimalik saavutada minimaalse koodiga. 2 omadust, millele soovite keskenduda, on veergude arv ja veeru vahe. Loend viitab veergude koguarvule, mida soovite rakendada, samas kui lõhe loob iga üksiku vahelise marginaali.
div # cols column-count: 3; veeru vahe: 10px;
Minu näites näeme ID #cols kasutamist konteinerina. Me jagame divi kolmeks veeruks, mille vahele jääb 10tk. Lisaks saate määrata veeru laius mida kasutatakse iga veeru laiuse määramiseks, selle asemel, et loetleda kindel number.
Brauseri ühilduvus
Midagi enne IE8 ei saa seda vara lihtsalt kasutada. Kuid nagu oleme näinud kõigis näidetes, pakuvad Mozilla ja Webkit oma lahendusi mitme brauseri jaoks. Kui vajate malli, vaadake allpool minu väikese näite koodi:
div # külgriba laius: 210px; -moz-column-count: 3; -moz-kolonni vahe: 7px; -webkit-column-count: 3; -webkit-veergu: 7px; veergude arv: 3; veergu: 7px;
Kohandatud @ font-nägu
Te peate kuulnud CSS3 kohandatud fontide põnevusest. Hästi, kasutades @ font-face omadust, saame importida väliseid fondi stiile ja kasutada neid nagu iga teine perekond. Süntaks on mõnevõrra keerdunud ja peate veetma aega, et seda õigesti saada. Blokeeri @ font-face kasutatakse perekonnanime määramiseks, seejärel saate seda kasutada oma font-pere omadused!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Ainult Internet Explorer * / Nii et näete eespool Ma ei ole sihtinud ühtegi konkreetset fonditüüpi, kuid süntaks on see, mis peaks välja paistma. Pange tähele, et Internet Explorer toetab ainult .eot kirjatüübid .ttf ja .otf on teiste brauserite populaarsed valikud. Samuti on oluline, et sa peaksid aru saama, et saate sisestada fontide URLid otseühendustest, st. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
Selle seadistusega ei ole tegelikku brauseriprobleemi, kuna kõik renderdamismootorid võivad neid fondifailide tüüpe analüüsida. Pea meeles, et IE toe puhul peate lisama nii algversiooni kui ka originaali. Ma arvan, et W3 koolide artiklil on kataloog, mis sisaldab kõige olulisemat teavet, mida peaksite kontrollima.
Konverteerimine miniatuurseks CSS-ks
Seda teemat arutatakse sageli, kuna see teenib iga projekti jaoks teist eesmärki. Ühelt poolt kulutavad veebiarendajad palju aega oma stiilide kirjutamiseks. Seda tüüpi lihttekstiandmeid ei saa krüptida ja varjata silma peal. Kui üritate hoida teisi oma koodi jultunud varastamise eest, on parim, mida saate teha, takistada stiilid ja eemaldada kõik reavahetused / tühikud.
Seda protsessi saab märgistada kui miniatureerimine oma koodi. Üldiselt kirjutavad arendajad CSS-i standardvormingusse ja eemaldavad seejärel kõik tühimärgid enne veebiserverisse laadimist. Siis on teil kohalik koopia, mida saab kiiresti redigeerida, pakkudes samas väiksemat versiooni otseülekandele. See meetod võib ilmselt olla kasulik lehekülje koormuste vähendamiseks koos koodide kaaperdajate hoidmisega.
Lingil, mille ma postitasin, mis viib Minify CSS-ile, on teemal kohutav lugemismaterjal. Saidil on ka brauseripõhine vahend sellise tühimärgi eemaldamiseks ja võtme tagasipöördumine teie koodist. CSS-i kompressor on veel üks võimalus, mis pakub lihtsat liidest, mis töötab otse teie veebibrauseris. Olen ka kuulnud häid asju Clean CSS-i kohta, kuigi ma pole seda rakendust kunagi kasutanud.
seotud lingid
Et edasi lükata, olen ma pakkunud kuue käepärase lingi üle veebi. Nende hulka kuuluvad mitte ainult lühikirjeldus, vaid ka abivalmis juhendid ja õpetused, mis on kättesaadavad uue stsenaariumi CSS koodi kasutamisel.
- CSS3 algaja juhend
- CSS lühikirjeldusjuhend
- Kas kasutate CSS3-d asjakohaselt?
- CSS sisu ja brauseri ühilduvuse diagramm
- CSS3 + progressiivne täiustamine = nutikas disain
- Täielik CSS / CSS3 omaduste indeks
Järeldus
CSS-koodi kirjutamiseks kulub palju pühendumist ja praktikat, et luua konkreetne ajakava, mida saate iga projekti puhul järgida. Enamik veebidisainereid tunneb heameelt uute projektide ja ideede vastuvõtmise üle, seega leiate kindlasti aega nende kasulike kodeerimisnõuete praktiseerimiseks. Proovige kopeerida väike referentsleht enda mugavuse huvides, kui te ei leia pettuslehti või isegi hullem, kui te kaotate Interneti-ühenduse!
Kas teate mõnda muud kasulikku CSS3 omadust või otseteed? Soovime kuulata teie mõtteid ja ideid arutelu kommentaarides. Veebiarendajad nõuavad rohkem standardimist W3C-s ja selgelt on üleminek olnud lihtsam. CSS3 pakub fantastilisi eeliseid ja kui saate kasutada lühikirjete kodeerimist, hoiab see teie failide suurust madalana ja takistab koopiate varastamist teie koodi.
