Ohranjanje oznake za kodo CSS3 Slim
Spletni razvijalci lahko prihranijo veliko časa z uporabo prefinjene sintakse CSS3. Uporabniki, ki obiščejo vašo stran, pričakujejo najhitrejši možni čas nalaganja - zato je vaša odgovornost, da ohranite velikost datotek. Obstaja veliko stenografskih trikov s CSS-jem in še posebej pod novim modelom CSS3.
V spodnjem priročniku sem sestavil nekaj teh idej. Prav tako se moramo dotakniti drugih področij, kot je zmanjšanje vaše kode CSS. Na voljo so orodja v brskalniku, ki pomagajo razvijalcem v procesu oblikovanja, vendar bi radi združili kratke kode s tem zmanjšanjem velikosti datotek, da bi na koncu racionalizirali proces upodabljanja vaše spletne strani..
Osnovni nasveti za oblikovanje
Preden skočimo v dejansko sintakso CSS, želim prebrati temo kako napisati CSS. Če ste seznanjeni s spletnim oblikovanjem, ste verjetno že videli slogovne sloge, verjetno več kot enkrat. Prvi del vsakega ukaza se imenuje izbirnik. Ta je usmerjena na vrsto elementa, ki bo prejel sloge, dodane znotraj zavitih oklepajev, znanih tudi kot lastnosti.
Inline Level
Z inline slogi je vsaka lastnost napisana ena za drugo s samo presledki, ki jih ločujejo. Ta metoda je najbolje uporabiti na selektorjih, kjer potrebujete le nekaj lastnosti. To vam bo prihranilo prostor na strani in drsenje skozi vaš slog bo veliko hitreje. V primeru, da še niste naleteli na inline CSS, sem dodal majhen primer spodaj usmerjenih povezav za sidranje HTML.
a barva: # 648cc8; font-weight: krepko; a: hover color: # 739cda; dekoracija besedila: nobena; a.alt color: # bd4949!
Raven bloka
Po drugi strani se lastnosti sloga bloka vnesejo v eni vrstici na par ključ / vrednost in so pogosto nameščene za hitrejše urejanje pri skeniranju kode. Približno 99% čistejših stilskih listov uporabljam pri oblikovanju in postalo je industrijski standard za mnoge oblikovalce. Če izbirnik uporablja več kot 6 ali 7 lastnosti, je to najboljša oblika za uporabo.
Ko upoštevate številne nove lastnosti CSS3, se zavedate tudi, kako hitro se vaši slogi dopolnijo. Številne od teh lastnosti podpirajo kopije, specifične za brskalnik, ki zahtevajo skoraj podvojene vnose kode (kot je radij obrobe). Lahko si ogledate moj primer lastnosti bloka spodaj, ki je ciljno usmerjena na razdelku vzorca ovojnice.
.wrap display: block; oblazinjenje: 6px 10px; ozadje: #FFF; obrobni polmer: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-obmejni polmer: 4px;
Noben način pisanja CSS ni posebej boljši od drugega. Navsezadnje je to vaša izbira razvijalca, ki vam je všeč, in tudi to bo odvisno od projekta, na katerem delate. To je celo pogosto, da bi našli CSS, kjer so oblikovalci mešani skupaj! To osebno čutim “nedokončana dela” ponavadi lažje s stili blokov, saj stalno pregledujem slogovne sloge, da urejam ali dodajam. Toda za prometno težke domene, ki zmanjšujejo vašo datoteko CSS, je absolutno najboljši način.
Ohranjanje Slim
Z uporabo številnih kratkih kod, ki so na voljo v CSS3, lahko prihranite veliko časa za razvoj. Urejanje elementov HTML bo postalo veliko lažje, ko boste razumeli ta jezik, ki varčuje s časom. Poleg tega bo vaša koda videti bolj čista in lažja za ogled.
Edina pomanjkljivost je, da vsi brskalniki ne podpirajo teh lastnosti. Obstajajo rešitve za številna obstoječa vprašanja, na primer v Internet Explorerju in Netscapeu. K sreči je splet vedno napredoval naprej in ker CSS3 raste v priljubljenosti, bomo nedvomno doživeli tudi rast v združljivosti brskalnikov..
RGBa Barvna prosojnost / nepreglednost
Nova RGBavalue ni ravno CSS3 nepremičnine, ampak Transparentnost alfa je značilna samo za CSS3. Namesto skupnih "Red Green Blue" vrednosti, ki jih prenašate za barvo, ki jo lahko zdaj vključuje četrto možnost preglednosti barv. Zaradi tega so spletni razvijalci skoraj v celoti izvedeni s preglednimi PNG-ji.
Osnovna skladnja zahteva vrednost od 0-255 v prvih treh (3) slotih in 0-1,0 v položaju alfa. Barvni razpon je specifičen za količino vsakega odtenka (RGB), ki je viden, ko je 0 nič in polno 255.
/ ** sintaksa ** / ozadje: rgba (ime_vrednosti, ime_vrednosti, ime_vrednosti, ime_vrednosti, opacity_value); / ** primer ** / div ozadje: rgba (255, 255, 255, 0.3);
Združljivost med brskalniki
Druga lastnina motnosti v nekaterih okoliščinah. Vendar bo to vplivalo na celoten element HTML in notranjo vsebino, ne le na ozadje, kot ste videli v mojem primeru.
Žal Internet Explorer še ne podpira vrednosti barv RGBa. Na splošno morate vključiti nadomestno lastnost s polno neprosojnostjo za te manj standardne brskalnike. To nastavite z enakimi vrednostmi, vendar brez četrtega (motnosti). Izgledalo bi nekako tako rgba (255, 255, 255)
Poleg tega je Internet Explorer mogoče obdelati nekoliko bolj elegantno prek pogojev. Lahko dejansko preverite, ali brskalnik izvaja IE in prikažete lastniški Microsoft CSS filter na ukaz. To sem prikazal v spodnjem primeru (upoštevajte, da se bo ta pojavila nekje v datoteki HTML):
Območje obrobe CSS3
Prebral sem nekaj nejasnih tem na forumu o ustvarjanju zaokroženih robov s CSS3 - ne toliko na strani, kako je to narejeno, temveč s prefinjeno podporo brskalnika, spletni razvijalci se premeščajo za najlažjo kodo, ki jo je treba spustiti in delovati, kot je pričakovano.
/ ** sintaksa ** / obrobni polmer: zgornji levi zgoraj desno spodaj desno spodaj levo;
The polmer meje lastnost ima podobne sintakse kot ustvarjanje standardne meje, razen v tem primeru ciljamo na vogale. Ta lastnost bo dejansko sprejela 1 - 4 vrednosti, vsaka od njih pa cilja na drugačno nastavitev vogalov.
- 1 vrednost: Vsi štirje vogali so zaokroženi na isto vrednost
- 2 vrednosti: Prva vrednost velja za
zgoraj levoinspodaj desnomedtem ko druga vrednost zadenezgoraj desnoinspodaj levo - 3 vrednosti: Prvo velja za
zgoraj levodrugi je obojespodaj levo&zgoraj desnomedtem ko je tretja in končna vrednost uporabljena zaspodaj desno - 4 vrednosti: Vse štiri vrednosti ciljajo vogale v naslednjem vrstnem redu: zgoraj levo, zgoraj desno, spodaj desno, spodaj levo
/ ** primer ** / div border-radius: 4px 4px 8px 4px; div border-radius: 4px 4px 8px;
Torej v zgornji kodi uporabljamo polmer meje uporabite zaokrožen učinek 4px na vse, razen na. \ t spodaj desno meja, ki dobi 8 px zglajeno krivuljo. Če ste opazili, bodo obe kodi dejansko uporabljali enak učinek slog.
Združljivost med brskalniki
Zdaj je glavni problem to polmer meje je podprt samo v nekaj brskalnikih. Internet Explorer 9 je pred kratkim dodal veliko podpore in Opera bo to tudi naredila. Vendar pa je tudi Opera ustvarila lastno lastnino -o-polmer meje ciljanje njihovega specifičnega motorja brskalnika. Dodatno -moz-border-radius podpira programska oprema Firefox / Gecko in -webkit-border-radius za Google Chrome / Safari.
Spodnja koda je primer moje predloge za golo kost za ustvarjanje zaobljenih kotov z največjo podporo za globalni brskalnik.
div border-radius: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-obmejni polmer: 4px 4px 8px 4px;
Fancy a Drop Shadow?
Druga res odlična plati CSS3 je podpora za škatla in besedilne sence. To je bil v preteklosti tako velik problem za razvijalce, saj so bile slike v ozadju edina realna možnost. Ta skladnja dejansko sledi kratki vlogi, ki je veliko lažja od drugih lastnosti, ki smo jih pokrili. Na začetku je težko zapomniti pravilen vrstni red ključnih vrednosti, toda več kot je praksa, lažje bo.
Na žalost je Internet Explorer spet čuden. Vsak drug večji brskalnik, vključno z Firefoxom, Google Chrome, Safari in Opera, v celoti podpira text-shadow nepremičnine. Razvijalci so poskušali zgraditi lastno podporo za IE, vendar je še vedno zelo omejujoča. Osnovna skladnja je napisana takole:
/ ** skladnja ** / text-shadow: x-offset y-offset barva zamegljenosti-polmera; / ** primer ** / div text-shadow: 2px 2px 1px # 111;
Z odstopanjem X in Y brskalniku povemo, kako daleč čez desno in levo naj se pojavi senca. Z negativnimi vrednostmi lahko postavite senco nad in nad levo. Ampak to prihaja off videti zelo nerodno, zato priporočam pozitivna cela števila. Tudi vrednost polmera zamegljenosti se lahko uporabi za izravnavanje togih robov, če je senca besedila videti nenaravna.
Ta sintaksa samo preučuje osnovni zapis, ko ustvarjate en učinek sence padca. Visoko napredni oblikovalci so se učili, da hkrati ustvarijo več senc! Sklicujem na ta super blog post od aprila 2011, ki gre v podrobnosti o uvedbi besedila senc. Če imate čas, prelistajte vsebino, da dobite idejo o bolj naprednih funkcijah, in se prepričajte, da ste jo zaznali kot referenco v prihodnosti!
Združljivost med brskalniki
Največji obtoževalec, na katerega naletimo, je Internet Explorer. Znova in znova Microsoft je potisnil svoj lastni motor za upodabljanje brskalnika, ki je v najboljšem primeru deloval pod par. Sedaj, tudi če CSS3 prevzame vladavino v senci besedila, IE še vedno zaostaja. Na voljo je odlična demo spletna stran, kjer lahko najdete primere kod in tradicionalne CSS pogojne komentarje.
V bistvu iščete preverjanje, ali se brskalnik, ki ga uporablja uporabnik, ujema s katero koli različico Internet Explorerja 9 ali manj. Nato lahko s pomočjo filtrov MS uporabimo senco v katerem koli elementu besedila (zgoraj, uporabljamo odstavek).
Sproščanje prehodov
CSS3 prehod je najbolj vroča nepremičnina na trgu oblikovanja od babičinih piščancev! Spletni oblikovalci so se tako zapletli glede čistih prehodov CSS, čeprav je podpora večinoma omejena na brskalnike Webkit. Seveda lahko uporabite sekundarne lastnosti za Mozilla in Opera in podobno. Ampak kratica zapisov je zares privlačna, še posebej, če ste iz kakršnega koli razloga nasprotovali JavaScript animacijam.
Najprej si poglejmo prvotno lastnost prehoda. To bo zahtevalo 4 vrednosti, ki jih lahko tudi razčlenite na lastnosti. Ustrezajo prehodu nepremičnine(kakšen je učinek), trajanje(koliko časa želite izvleči), časovna funkcija(spremembe hitrosti animacije) in zamude(število sekund za čakanje, preden animirate).
/ ** sintaksa ** / prehod: zakasnitev funkcije časa trajanja lastnosti; / ** primer ** / img transition-property: motnost; prehodno trajanje: 2s; prehodna časovna funkcija: enostavnost; zamuda pri prehodu: 0,5s;
Intuitivno morate razumeti namen za večino teh lastnosti, razen morda časovne funkcije. Čeprav sprva zmedeno, ta lastnost preprosto animira vaš prehod drugače, tako da se bo učinek začel počasnejši, končati počasneje ali kaj podobnega.
Šole W3 imajo časovno funkcijo doc online, ki navaja vse možne vrednosti, ki jih lahko preizkusite. Neprestano se znajdem v Googlu za te vodnike, vendar pa ustvarjajo tako priročne zaznamke.
Združljivost med brskalniki
Zdaj pa v igro vključimo polno podporo brskalnika. Privzeto je lastnost prehoda samo podpira novejša različica programa Safari. Vendar mnogi uporabniki še vedno potrebujejo -webkit predpono, ki velja tudi za Google Chrome in podobne motorje za upodabljanje. Spodaj je a “končan” Predloga za kodni blok priporočam shranjevanje in uporabo, če potrebujete podporo prehoda iz večine spletnih brskalnikov.
img transition: nepreglednost 2s enostavnost v 1s; -webkit-prehod: nepreglednost 2s enostavnost v 1s; / * chrome, safari, flock * / -moz-transition: nepreglednost 2s enostavnost v 1s; / * mozilla + gecko * / -o-prehod: nepreglednost 2s enostavnost v 1s; / * opera * /
Učinki besedilne poteze
Ta lastnost ni velika in ne boste našli veliko spletnih oblikovalcev, ki jo uporabljajo danes. Lahko pa ga uporabiš text-stroke da bi z vašimi pisavami ustvarili resnično čiste učinke. Brskalniki Webkit, kot sta Safari in Chrome, so edini pravi podporniki te lastnine. Opera in Firefox težko prikazujeta besedilne objekte s temi istimi obrisi.
/ ** skladnja ** / p -webkit-text-stroke: širina barve; / ** primer ** / p -webkit-text-stroke: 1px # 222;
Združljivost med brskalniki
Če čutite potrebo po učinkih besedilne poteze, morate vedno vključiti barvo varnostne kopije. Mozilla in Opera lahko dobita, vendar uporabniki Internet Explorerja nimajo drugih možnosti. Na žalost je to ena od novejših lastnosti CSS3, ki preprosto ni dobila dovolj podpore skupnosti razvijalcev spletnih brskalnikov. Moral bi preživeti nekaj časa z igranjem s tem velikim spletnim orodjem, ki je posebej ustvarjeno za izdelavo teh besedil CSS3.
Dimenzioniranje škatel
Lastnost box-sizing vam omogoča večji nadzor nad celotno širino / višino katerega koli elementa bloka. Privzeto širina / višina + obroba + rob + oblazinjenje predstavlja skupno velikost polja. Vendar pa z uporabo obrobnega polja na vaši vsebini potiskate vse vaše oblazinjenje in robove navznoter da bo širina popolnoma enaka. Za to lastnost sta samo dve vrednosti, z vsebina-box privzeto.
div širina: 550px; oblazinjenje: 9px; velikost škatle: obrobno polje; / * širina bo ostala 550px * /
Kot si lahko predstavljate, se bo to zgodilo v nekem trenutku med vašo kariero CSS. Oblazinjenje in robovi so lahko resnična bolečina in ko dodajate meje, se ponavadi izgubijo piksli.
Združljivost med brskalniki
Opera in IE 8 privzeto podpirata to novo lastnost. IE7 in spodaj so obtičali z nastavitvijo polja z vsebinami, razen če vaši obiskovalci uporabljajo način quirks. Edini dodatki, ki bi jih morali poznati, so posebej usmerjeni v brskalnike s spletnim strežnikom in spletnim brskanjem.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: mejna škatla; / * Firefox * / box-sizing: mejni okvir; / * Opera / IE8 + * /
Čisti stolpci CSS3
Stolpci so s CSS3 malce zapleteni, vendar se lahko izvedejo z minimalno kodo. 2 lastnosti, na katere se želite osredotočiti, sta štetje stolpcev in vrzel stolpca. Števec se nanaša na skupno število stolpcev, ki jih želite uporabiti, medtem ko vrzel ustvari mejo med vsako od njih.
div # cols število-kolona: 3; vrzel stolpca: 10px;
V mojem primeru lahko vidimo, da se ID #cols uporablja kot vsebnik. Znotraj razdelimo div na 3 stolpce z 10px vrzeljo med vsako od njih. Nadalje lahko nastavite širina stolpca ki se uporablja za nastavitev skupne širine vsakega stolpca namesto navajanja polnega števila.
Združljivost med brskalniki
Karkoli pred IE8 preprosto ne bodo mogli uporabiti te nepremičnine. Toda kot smo videli v vsakem primeru, Mozilla in Webkit nudita lastne rešitve za več brskalnikov. Če potrebujete predlogo, si oglejte spodnjo majhno kodo:
div # sidebar width: 210px; -moz-column-count: 3; -moz-column-gap: 7px; -webkit-column-count: 3; -webkit-column-gap: 7px; štetje kolone: 3; vrzel stolpca: 7px;
Po meri @ font-face
Verjetno ste slišali za navdušenje glede pisav po meri CSS3. Z uporabo lastnosti @ font-face lahko uvozimo zunanje sloge pisav in jih uporabljamo tako kot vse druge družine. Sintaksa je nekoliko zavita in boste morali nekaj časa preživeti. Blok za @ font-face se uporablja za definiranje priimka, nato pa ga lahko uporabite v svojem družina pisav lastnosti!
@ font-face družina pisav: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Samo Internet Explorer * / Torej vidite zgoraj nisem ciljno usmerjen na katero koli določeno vrsto pisave, toda sintaksa je tista, ki mora izstopati. Internet Explorer podpira samo .eot vrste pisav, medtem ko .ttf in .otf so priljubljene možnosti za druge brskalnike. Prav tako je pomembno, da razumete, da lahko v pisave URL prenašate iz neposrednih povezav, tj. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
Pri tej nastavitvi ni pravega navzkrižnega brskalnika, saj lahko vsi motorji za upodabljanje razčlenijo te vrste datotek pisav. Ne pozabite, da za IE podporo morate vključiti eot različico, kot tudi vaš original. Menim, da ima članek W3 Schools katalog najpomembnejših informacij, ki jih morate preveriti.
Pretvarjanje v miniaturni CSS
O tej temi pogosto razpravljamo, saj služi različnemu namenu za vsak projekt. Po eni strani spletni razvijalci porabijo veliko časa za pisanje svojih slogovnih slogov. Ni mogoče šifrirati te vrste podatkov z golim besedilom in jih skriti pred očmi. Če skušate druge preprečiti, da bi kritizirali vašo kodo, je najbolje, da naredite sloge in odstranite vse prelome vrstic / presledke.
Ta postopek lahko označimo kot miniaturiziranje kodo. Na splošno bodo razvijalci napisali CSS v standardnem formatu in nato odstranili vse presledke, preden jih naložijo na spletni strežnik. Potem imate lokalno kopijo, ki jo lahko hitro uredite in hkrati zagotovite manjšo različico projekta v živo. Ta metoda je očitno lahko koristna za zmanjšanje obremenitev strani in ohranitev kode odtujevalnikov.
Povezava, ki sem jo objavil zgoraj, ki vodi do Uskladi CSS, ima nekaj odličnega branja na to temo. Spletno mesto ponuja tudi orodje, ki temelji na brskalniku, za odstranjevanje takšnega presledka in vrnitev ključev iz vaše kode. CSS Compressor je še ena možnost, ki se ponaša s preprostim vmesnikom, ki deluje neposredno v vašem spletnem brskalniku. Slišal sem tudi dobre stvari o čisti CSS, čeprav te aplikacije nikoli nisem uporabil.
Sorodne povezave
Da bi vas nadaljevali naprej, sem zagotovil šest priročnih povezav z vsega spleta. Ti vključujejo ne samo stenografski zapis, temveč tudi koristne vodnike in vadnice za dostop, ko uporabljate to novo kodo CSS.
- Vodnik za začetnike za CSS3
- Kratica za CSS
- Ali uporabljate ustrezno CSS3?
- Vsebina CSS in tabela združljivosti brskalnika
- CSS3 + Progressive Enhancement = Pametno oblikovanje
- Popoln CSS / CSS3 indeks lastnosti
Zaključek
Potrebno je veliko predanosti in prakse pisanja kode CSS za izdelavo konkretnega urnika, ki ga lahko spremljate za vsak projekt. Večina spletnih oblikovalcev je z veseljem prevzela nove projekte in ideje, zato boste zagotovo našli čas za vadbo teh koristnih nasvetov za kodiranje. Poskusite kopirati majhen referenčni list za lastno udobje v primeru, da ne najdete nobenih listov za goljufije, ali še slabše, če izgubite internetno povezavo!
Ali veste za katerekoli druge priročne lastnosti CSS3 ali bližnjice? Radi bi slišali vaše misli in ideje v komentarjih razprave. Spletni razvijalci si prizadevajo za večjo standardizacijo znotraj W3C in jasno je, da je prehod postajal vse lažji. CSS3 ponuja fantastične prednosti in če lahko obvladate kodirano kodiranje, bo to ohranilo nizke velikosti datotek in odvrnilo kopirnice pred krajo kode..
