CSS3 koda marķējuma saglabāšana slim
Web izstrādātāji var ietaupīt daudz laika, izmantojot sarežģītāku CSS3 sintaksi. Lietotāji, kas apmeklē jūsu lapu, sagaida ātrāko iespējamo ielādes laiku, kas padara to par atbildīgu saglabāt faila izmērus. Ar CSS un jo īpaši jauno CSS3 modeli ir daudz stenogrāfisko triku.
Esmu apkopojusi dažas no šīm idejām tālāk sniegtajā rokasgrāmatā. Mums vajadzētu arī pievērsties citām jomām, piemēram, CSS koda saīsināšanai. Ir pieejami pārlūkprogrammas rīki, kas palīdz izstrādātājiem veidošanas procesā, bet jūs vēlaties apvienot īsceļus ar šo faila lieluma samazinājumu, lai galu galā racionalizētu jūsu vietnes atveidošanas procesu.
Pamata padomi par formatēšanu
Pirms mēs pāriet uz faktisko CSS sintaksi, es gribu iet pār tematu kā rakstīt CSS. Ja esat mazliet pazīstams ar tīmekļa dizainu, jūs, iespējams, esat redzējuši stilu, iespējams, vairāk nekā vienu reizi. Katras komandas pirmo daļu sauc par selektoru. Tas ir vērsts uz elementa tipu, kas saņems stilus, kas pievienoti cirtainu lencēm, kas pazīstams arī kā īpašības.
Inline līmenis
Ar iekšējiem stiliem katrs īpašums tiek uzrakstīts viens pēc otra ar tikai atstarpēm, lai tos atdalītu. Šī metode vislabāk tiek pielietota uz selektoriem, kur jums ir nepieciešamas tikai dažas īpašības. Tas ietaupīs vietu lapā, un ritināšana caur stilu būs daudz ātrāka. Gadījumā, ja jūs nekad neesat saskārušies ar iekšējo CSS iepriekš, es esmu pievienojis nelielu piemēru, kas ir vērsts uz HTML enkura saitēm.
a krāsa: # 648cc8; font-weight: bold; a: lidināties krāsa: # 739cda; teksta apdare: nav; a.alt color: # bd4949! svarīgi;
Bloka līmenis
No otras puses, bloku stila rekvizīti tiek ievadīti vienā rindiņā uz atslēgas / vērtības pāri, un tie bieži tiek iekļauti ātrākos labojumos, skenējot kodu. Aptuveni 99% no tīrākām stilu lapām es izmantoju šo formatējumu, un tas ir kļuvis par nozares standartu daudziem dizaineriem. Ja jūsu selektors izmanto vairāk nekā 6 vai 7 rekvizītus, tas ir labākais formatējums.
Kad ņemat vērā daudzās jaunās CSS3 īpašības, jūs saprotat, cik ātri jūsu stilu tabulas tiek aizpildītas. Un daudzi no šiem rekvizītiem atbalsta pārlūkprogrammas specifiskas kopijas, kurām nepieciešami gandrīz dublēti kodu ieraksti (piemēram, robežu rādiuss). Jūs varat pārbaudīt manu piemēru bloka īpašumam, kas ir iestatīts zemāk, mērķējot parauga iesaiņojuma div.
.wrap display: block; polsterējums: 6px 10px; fons: #FFF; robežu rādiuss: 4px; -moz-border-rādiuss: 4px; -webkit-robežu rādiuss: 4px; -o-robežu rādiuss: 4px;
Neviens no CSS rakstīšanas veidiem nav īpaši labāks par otru. Galu galā tā ir jūsu izvēle kā attīstītājs, kurš dod priekšroku, un pat tas būs saskaņā ar projektu, kurā strādājat. Tas ir pat izplatīts, lai atrastu CSS, kur dizaineri ir sajaukuši abus kopā! Es to personīgi jūtu “nepabeigti darbi” ir vieglāk ar bloku stiliem, jo es nepārtraukti pārbaudu stilu, lai veiktu labojumus vai papildinājumus. Bet satiksmes smagajiem domēniem CSS faila sasmalcināšana ir absolūti labākais veids, kā iet.
Turiet tos Slim
Izmantojot daudzos īsos kodus, kas pieejami CSS3, jūs varat ietaupīt daudz laika. HTML elementu rediģēšana kļūs daudz vieglāka, jo sapratīsiet šo laika taupīšanas lingo. Turklāt jūsu kods parādīsies vairāk tīrs un vieglāk apskatāms.
Vienīgais trūkums ir tas, ka ne visas pārlūkprogrammas pilnībā atbalsta šīs īpašības. Pastāv problēmas daudzām esošajām problēmām, piemēram, Internet Explorer un Netscape. Par laimi, Web vienmēr virzās uz priekšu un CSS3 popularitāte pieaug, mēs neapšaubāmi piedzīvosim arī pārlūkprogrammas saderības pieaugumu.
RGBa krāsu pārredzamība / necaurredzamība
Jaunais RGBavalue nav tieši CSS3 īpašums, bet alfa pārredzamība ir raksturīga tikai CSS3. Parastās "sarkanzaļās zilās" vērtības vietā, kuras jums tagad ir iespējama ietver ceturto krāsu pārredzamības iespēju. Šī iemesla dēļ tīmekļa izstrādātāji gandrīz pilnībā tiek veikti ar pārredzamiem PNG.
Pamata sintakse prasa vērtību no 0 līdz 255 pirmajās trīs (3) vietās un 0-1.0 alfa pozīcijā. Krāsu diapazons ir specifisks attiecībā uz to, cik daudz no katra nokrāsojuma (RGB) ir redzama, 0 ir nekas un 255 pilna.
/ ** sintakse ** / fons: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** piemērs ** / div fons: rgba (255, 255, 255, 0,3);
Pārrobežu pārlūkprogrammu saderība
Vēl viens īpašums dūmainība var izmantot dažos gadījumos. Tomēr tas ietekmēs visu HTML elementu un iekšējo saturu, nevis tikai fonu, kā jūs redzējāt manā piemērā.
Diemžēl Internet Explorer neatbalsta RGBa krāsu vērtību. Parasti šiem mazāk standartizētajiem pārlūkiem ir jāietver rezerves īpašums ar pilnīgu necaurredzamību. Jūs to iestatāt ar tādām pašām vērtībām, izņemot 4. (necaurredzamība). Tas izskatās kaut kas līdzīgs rgba (255, 255, 255)
Turklāt pārlūkprogrammu Internet Explorer var apstrādāt nedaudz vieglāk, izmantojot nosacījumus. Jūs faktiski varat pārbaudīt, vai pārlūkprogrammā darbojas IE, un komandā parādās patentēts Microsoft CSS filtrs. Es to parādīju zemāk redzamajā piemērā (ņemiet vērā, ka tas parādīsies kaut kur jūsu HTML failā):
CSS3 robežu rādiuss
Esmu izlasījis dažus neskaidrus foruma pavedienus par noapaļotu robežu izveidi ar CSS3 - ne tik daudz par to, kā tas ir paveikts, bet ar burtiskā pārlūkprogrammas atbalstu tīmekļa izstrādātāji ir sajaukuši, lai vienkāršākais kods, lai samazinātu un darbotos, kā paredzēts.
/ ** sintakse ** / robežu rādiuss: augšējā kreisā augšējā labajā apakšējā labajā stūrī;
The robežu rādiuss īpašumam ir līdzīga sintakse, lai izveidotu standarta robežu, izņemot šajā gadījumā mērķauditorijas atlasi kastes stūros. Šī īpašība patiešām pieņems 1 - 4 vērtības, un katra no tām ir vērsta uz citu stūriem.
- 1 vērtība: Visi četri stūri ir noapaļoti līdz vienādai vērtībai
- 2 vērtības: Pirmā vērtība attiecas uz
augšējais kreisaisunapakšējā labajā stūrīkamēr otra vērtība tiek sasniegtalabajā pusēunapakšā pa kreisi - 3 vērtības: Pirmkārt attiecas uz
augšējais kreisaisstūrī, otrs ir absapakšā pa kreisi&labajā pusēkamēr tiek piemērota 3. un galīgā vērtībaapakšējā labajā stūrī - 4 vērtības: Visas 4 vērtības vērš stūri šādā secībā: augšējā kreisajā, augšējā labajā, apakšējā labajā, apakšējā kreisajā pusē
/ ** piemērs ** / div robežu rādiuss: 4px 4px 8px 4px; div robežu rādiuss: 4px 4px 8px;
Tātad iepriekš minētajā kodā mēs izmantojam robežu rādiuss pielietot 4px noapaļotu efektu uz visu, izņemot apakšējā labajā stūrī robežu, kas iegūst 8px izlīdzinātu līkni. Ja to pamanīsiet, abi šie kodi faktiski piemēros to pašu stila efektu.
Pārrobežu pārlūkprogrammu saderība
Tagad galvenā problēma ir tā robežu rādiuss tiek atbalstīts tikai dažās pārlūkprogrammās. Internet Explorer 9 nesen pievienoja lielu atbalstu un Opera to darīs. Tomēr pat Opera ir izveidojusi savu īpašumu -o-robežu rādiuss mērķauditorijas atlase pēc konkrētā pārlūka dzinēja. Papildus -robežu rādiuss atbalsta Firefox / Gecko programmatūra un -webkit-robežu rādiuss Google Chrome / Safari.
Zemāk redzamais kods ir mana tukša kaula veidnes piemērs, lai izveidotu noapaļotus stūri ar lielāko globālā pārlūkprogrammas atbalstu.
div border-rādiuss: 4px 4px 8px 4px; -webkit-robežu rādiuss: 4px 4px 8px 4px ;; -moz-border-rādiuss: 4px 4px 8px 4px; -o-robežu rādiuss: 4px 4px 8px 4px;
Fancy Drop Shadow?
Otrs īstais CSS3 aspekts ir atbalsts lodziņā un teksta ēnas. Šāda problēma ir bijusi attīstītājiem agrāk, jo fona attēli bija vienīgā reālā iespēja. Šī sintakse faktiski seko stenogrāfijas lomai, kas ir daudz vieglāka nekā pārējās īpašības, kuras mēs esam aptvērušas. Sākotnēji ir grūti atcerēties pareizo galveno vērtību secību, bet, jo vairāk prakses jūs ieviesīsiet, jo vieglāk tā kļūs.
Diemžēl Internet Explorer atkal ir nepāra. Katrs cits lielākais pārlūks, ieskaitot Firefox, Google Chrome, Safari un Opera, pilnībā atbalsta teksta ēna īpašums. Izstrādātāji ir centušies veidot savu IE atbalstu, bet joprojām ir ļoti ierobežojošs. Pamata sintakse ir rakstīta šādi:
/ ** sintakse ** / teksta-ēna: x-offset y-nobīdes rādiusa krāsa; / ** piemērs ** / div text-shadow: 2px 2px 1px # 111;
X un Y nobīde informē pārlūkprogrammu, cik tālu uz labo pusi un zemu ēnu parādās. Jūs varat izmantot negatīvās vērtības, lai novietotu ēnu augšā un pa kreisi. Bet tas nāk off izskatās ļoti neērti, tāpēc es ieteiktu pozitīvus veselus skaitļus. Arī izplūduma rādiusa vērtību var izmantot, lai izlīdzinātu cietās malas, ja teksta ēna parādās nedabiska.
Šī sintakse tikai ieskatās pamata notācijā, veidojot vienu pilienu ēnu efektu. Augsti attīstīti dizaineri ir mācījušies vienlaikus radīt vairākas ēnas! Es atsaucos uz šo awesome emuāra ierakstu no 2011. gada aprīļa, kas sniedz ļoti detalizētu informāciju par teksta ēnu parādīšanu. Ja jums ir laiks, izlaidiet saturu tikai, lai iegūtu priekšstatu par uzlabotajām funkcijām, un pārliecinieties, ka esat to atzīmējis kā turpmāko atsauci!
Pārrobežu pārlūkprogrammu saderība
Lielākais detraktors, kuru mēs iesakām, ir Internet Explorer. Atkal un atkal Microsoft ir izspiedusi savu pārlūkprogrammas renderēšanas dzinēju, kas vislabāk ir veicis apakšparametrus. Tagad pat ar CSS3, kad valda valdība pie teksta ēnām, IE joprojām atpaliek. Ir lieliska demo tīmekļa vietne, kurā var atrast kodu piemērus un tradicionālos CSS nosacītus komentārus.
Būtībā jūs vēlaties pārbaudīt, vai pārlūkprogramma, ko lietotājs izmanto, atbilst jebkurai Internet Explorer 9 vai jaunākai versijai. Tad, izmantojot MS filtrus, varam izmantot ēnu jebkurā teksta elementā (iepriekš, mēs izmantojam punktu).
Pāreju atvieglošana
CSS3 pāreju ir karstākais īpašums dizaina tirgū kopš vecmāmiņas flapjacks! Tīmekļa dizaineri ir radījuši šādu satraukumu par tīrajām CSS pārejām, lai gan atbalsts galvenokārt attiecas uz Webkit pārlūkprogrammām. Protams, jūs varat izmantot Mozilla un Opera sekundāras īpašības. Bet stenogrāfiskais apzīmējums ir patiesi aizraujošs, it īpaši, ja kāda iemesla dēļ esat pret JavaScript animācijām.
Pirmkārt, apskatīsim sākotnējo pārejas īpašumu. Tam būs nepieciešamas 4 vērtības, kuras jūs varētu arī sadalīt īpašumos. Tie atbilst pārejai īpašums(kāda ir ietekme), ilgums(cik ilgi to izvilkt), laika funkcija(ātruma izmaiņas animācijas laikā) un kavēšanās(sekundes, kas jāgaida pirms animācijas).
/ ** sintakse ** / pāreja: īpašību ilguma laika funkcijas funkcija; / ** piemērs ** / img pārejas īpašums: dūmainība; pārejas ilgums: 2s; pārejas laika noteikšanas funkcija: vieglums; pārejas aizkave: 0,5s;
Jums intuitīvi jāsaprot vairumam šo īpašību, izņemot, iespējams, laika funkciju. Kaut arī sākumā tas ir mulsinoši, šī īpašība vienkārši atveido jūsu pāreju citādi, lai efekts sāktu palēnināties, beigtos lēnāk vai kaut kas līdzīgs.
W3 skolām ir laika noteikšanas funkcija doc tiešsaistē, kurā uzskaitītas visas iespējamās vērtības, kuras varat izmēģināt. Es pastāvīgi atrodu Google vadībā par šīm rokasgrāmatām, tomēr tās dara tādas ērtas grāmatzīmes.
Pārrobežu pārlūkprogrammu saderība
Tagad pieņemsim spēlēt pilnu pārlūkprogrammas atbalstu. Pēc noklusējuma pārejas īpašums ir tikai atbalsta jaunākās Safari versijas. Tomēr daudzi lietotāji joprojām pieprasa -webkit prefikss, kas attiecas arī uz Google Chrome un līdzīgiem renderēšanas dzinējiem. Zemāk ir “pabeigta” koda bloka veidne Es ieteiktu saglabāt un lietot, ja jums ir nepieciešams pārejas atbalsts no lielākās daļas tīmekļa pārlūkprogrammu.
img pāreja: necaurredzamība 2s vieglums 1s; -webkit pāreja: dūmainība 2s vieglums 1s; / * hroms, safari, ganāmpulka * / -moz-pāreja: dūmainība 2s vieglums 1s; / * mozilla + gecko * / -o-pāreja: neskaidrības 2s vieglums 1s; / * opera * /
Teksta stroke efekti
Šis īpašums nav milzīgs, un jūs šodien neatradīsiet daudzus tīmekļa dizainerus. Bet jūs varat izmantot teksta takts veidot dažus patiesi veiklus efektus ar saviem fontiem. Webkit pārlūkprogrammas, piemēram, Safari un Chrome, līdz šim ir vienīgie patiesie šī īpašuma atbalstītāji. Opera un Firefox ir grūtības padarīt teksta objektus ar šīm pašām iezīmēm.
/ ** sintakse ** / p -webkit-text-stroke: platuma krāsa; / ** piemērs ** / p -webkit-text-stroke: 1px # 222;
Pārrobežu pārlūkprogrammu saderība
Ja jūtat vajadzību pēc teksta stroke efektiem, vienmēr jāiekļauj rezerves krāsa. Mozilla un Opera var nokļūt, taču Internet Explorer lietotājiem nav citu iespēju. Diemžēl tas ir viens no jaunākajiem CSS3 rekvizītiem, kas vienkārši nav ieguvuši pietiekamu atbalstu no tīmekļa pārlūkprogrammu izstrādātāju kopienas. Jums vajadzētu pavadīt laiku, spēlējot apkārt ar šo lielisko tīmekļa rīku, kas īpaši izveidots šo CSS3 teksta izklāstu veidošanai.
Kastes izmēri
Kastes izmēra īpašība dod jums lielāku kontroli pār jebkura bloka elementa kopējo platumu / augstumu. Pēc noklusējuma platums / augstums + robeža + starpība + polsterējums veido kastes kopējo izmēru. Tomēr, izmantojot satura lodziņu jūsu saturā, tiek iespiesti visi jūsu polsterējumi un margas uz iekšu lai saglabātu platumu tieši tādu pašu. Šim īpašumam ir tikai divas vērtības ar satura lodziņā ir noklusējuma.
div platums: 550px; polsterējums: 9px; kastes izmēri: robežkaste; / * platums paliks 550px * /
Kā jūs varat iedomāties, tas būs ērts kādā CSS karjeras laikā. Padding un margas var būt reālas sāpes, un, pievienojot robežu, jūs mēdzat zaudēt pikseļu izsekošanu.
Pārrobežu pārlūkprogrammu saderība
Opera un IE 8 atbalsta šo jauno īpašumu pēc noklusējuma. IE7 un zemāk ir iestrēdzis satura lodziņa iestatījums, ja vien apmeklētāji neizmanto quirks režīmu. Vienīgie papildinājumi, kas jums jāzina par konkrētiem mērķauditorijas tīkliem un pārlūkprogrammas Mozilla darbināmiem dzinējiem.
div -webkit-box-sizing: robežkaste; / * Safari / Chrome * / -moz-box-izmērs: rāmis; / * Firefox * / kastes izmēri: rāmis; / * Opera / IE8 + * /
Tīra CSS3 kolonnas
Kolonnas ir mazliet grūts ar CSS3, bet tās var veikt ar minimālu kodu. 2 īpašības, uz kurām vēlaties koncentrēties, ir kolonnu skaits un kolonnu starpība. Skaitlis norāda kopējo kolonnu skaitu, ko vēlaties izmantot, bet starpība rada starpību starp katru.
div # cols kolonnu skaits: 3; kolonnu starpība: 10px;
Manā piemērā mēs redzam, ka ID #cols tiek izmantots kā konteiners. Inside mēs sadalām divus kolonnas ar 10px atstarpi starp katru. Tālāk jūs varētu iestatīt kolonnas platums kuru izmanto, lai iestatītu katra kolonnas kopējo platumu, nevis norādītu cieto numuru.
Pārrobežu pārlūkprogrammu saderība
Viss pirms IE8 vienkārši nevarēs izmantot šo īpašumu. Bet, kā mēs redzējām katrā piemērā, Mozilla un Webkit piedāvā savus risinājumus vairākiem pārlūkiem. Ja jums ir nepieciešama veidne, pārbaudiet manu mazo piemēru kodu:
div # sānjosla platums: 210px; -moz-column-count: 3; -moz-kolonnas sprauga: 7px; -webkit-column-count: 3; -webkit kolonnu starpība: 7px; kolonnu skaits: 3; kolonnu starpība: 7px;
Pielāgota @ fontu seja
Jums ir dzirdējuši par uztraukumu par CSS3 pielāgotajiem fontiem. Labi izmantojot @ font-face īpašumu, varam importēt ārējos fontu stilus un izmantot tos tāpat kā jebkuru citu ģimeni. Sintakse ir nedaudz saliekta, un jums būs jāpavada laiks, lai tas būtu pareizi. Bloks @ font-face tiek izmantots, lai definētu ģimenes vārdu, pēc tam to var izmantot savā font-family īpašības!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Tikai Internet Explorer * / Tātad jūs redzat iepriekš es neesmu mērķauditoriju ar kādu konkrētu fontu tipu, bet sintakse ir tas, kam vajadzētu izcelties. Ievērojiet, ka programma Internet Explorer atbalsta tikai .eot fonta tipus .ttf un .otf ir populāras iespējas citām pārlūkprogrammām. Ir svarīgi arī saprast, ka jūs varat pārsūtīt fontu URL no tiešajām saitēm, ti,. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
Ar šo iestatījumu nav īstas pārrobežu pārlūkprogrammas problēmas, jo visi renderēšanas dzinēji var analizēt šos fontu failu tipus. Vienkārši atcerieties, ka IE atbalstam ir jāietver gan eot versija, gan oriģināls. Es uzskatu, ka W3 skolu rakstam ir vissvarīgākās informācijas katalogs, kas jums jāpārbauda.
Konvertēšana uz miniatūru CSS
Šis temats bieži tiek apspriests, jo tas katram projektam kalpo citam mērķim. No vienas puses, tīmekļa izstrādātāji daudz laika velta rakstīt savu stilu. Nav iespējams šifrēt šāda veida teksta datus un paslēpt to no snooping acīm. Ja jūs mēģināt saglabāt citus no acīmredzamas koda zādzības, labākais, ko jūs varat darīt, ir pārblīvēt stilu un noņemt visus rindas pārtraukumus / atstarpes.
Šo procesu var marķēt kā miniaturizēšana jūsu kodu. Parasti izstrādātāji CSS ierakstīs standarta formātā un pēc tam izņems visu atstarpi pirms augšupielādes tīmekļa serverī. Tad jums ir vietējā kopija, lai ātri rediģētu, vienlaikus nodrošinot mazāku versiju tiešajā projektā. Šī metode, protams, var būt noderīga, lai samazinātu lappušu slodzes kopā ar koda nolaupītāju aizturēšanu.
Saitei, kuru es ievietojis iepriekš, kas noved pie Minify CSS, ir daži drausmīgi lasāmie materiāli par šo tēmu. Vietne nodrošina arī pārlūkprogrammas rīku, lai noņemtu šādu atstarpi un atslēgas atgriežas no jūsu koda. CSS kompresors ir vēl viena iespēja, kas piedāvā vienkāršu interfeisu, kas darbojas tieši jūsu tīmekļa pārlūkprogrammā. Esmu arī dzirdējis labas lietas par Clean CSS, lai gan es nekad neesmu izmantojis lietotni pats.
Saistītās saites
Lai saglabātu jums virzību uz priekšu, esmu nodrošinājis sešas ērtas saites no visas Web. Tie ietver ne tikai stenogrāfijas apzīmējumus, bet arī noderīgus ceļvežus un konsultācijas, lai piekļūtu, ja tiek izmantots šis jaunais īss CSS kods.
- Iesācēja ceļvedis CSS3
- CSS īsfilmu rokasgrāmata
- Vai Jūs izmantojat CSS3 atbilstoši?
- CSS saturs un pārlūkprogrammas saderības diagramma
- CSS3 + progresīvais uzlabojums = gudrs dizains
- Pilnīgs CSS / CSS3 rekvizītu indekss
Secinājums
Lai izveidotu konkrētu grafiku, ko jūs varat sekot katram projektam, ir nepieciešams daudz uzticības un prakses rakstot CSS kodu. Lielākā daļa tīmekļa dizaineru ir priecīgi uzņemt jaunus projektus un idejas, tāpēc jūs noteikti atradīsiet laiku, lai praktizētu šos noderīgos kodēšanas padomus. Mēģiniet kopēt nelielu atsauces lapu savām ērtībām, ja jūs nevarat atrast nevienu krāpniecisku lapu vai pat sliktāk zaudējat interneta savienojumu!
Vai jūs zināt, kādas citas noderīgas CSS3 īpašības vai īsceļi? Mēs labprāt dzirdētu jūsu domas un idejas diskusiju komentāros. Web izstrādātāji cenšas panākt lielāku standartizāciju W3C ietvaros, un, protams, pāreja ir kļuvusi vieglāka. CSS3 sniedz fantastiskus ieguvumus, un, ja jūs varat apgūt īsfilmu kodēšanu, tas saglabās zemus faila izmērus un atturēs kopijas no zagt jūsu kodu.
