Čuvanje Vašeg CSS3 koda oznake Slim
Web programeri mogu uštedjeti mnogo vremena koristeći sofisticiraniju CSS3 sintaksu. Korisnici koji posjećuju vašu stranicu očekuju najbrže moguće vrijeme učitavanja - zbog čega je vaša odgovornost da smanjite veličine datoteka. Postoji mnogo kratkih trikova s CSS-om i posebno pod novim CSS3 modelom.
Stavio sam nekoliko ovih ideja u vodič u nastavku. Trebali bismo se dotaknuti i drugih područja kao što je smanjenje Vašeg CSS koda. Na raspolaganju su alati u pregledniku koji pomažu razvojnim inženjerima u procesu oblikovanja, ali želite kombinirati kratke kodove s ovim smanjenjem veličine datoteke kako biste u konačnici pojednostavili proces prikazivanja vaše web-lokacije.
Osnovni savjeti za oblikovanje
Prije nego što skočimo u stvarnu CSS sintaksu, želim preći na temu kako da napišete svoj CSS. Ako ste malo upoznati s web dizajnom, vjerojatno ste prije vidjeli stilske, vjerojatno više od jednom. Prvi dio svake naredbe naziva se selektor. To cilja na vrstu elementa koji će primiti stilove dodane u vitičastim zagradama, također poznatima kao nekretnine.
Inline Level
Kod inline stilova svaka se osobina ispisuje jedna za drugom, s tim da se razdvajaju samo razmaci. Ova metoda se najbolje primjenjuje na selektore gdje je potrebno samo nekoliko svojstava. To će vam uštedjeti prostor na stranici i pomicanje kroz vaš stilski list bit će mnogo brže. U slučaju da se prije niste susreli s ugrađenim CSS-om, dodao sam mali primjer ispod ciljanja veza za HTML sidro.
a boja: # 648cc8; font-weight: bold; a: hover color: # 739cda; text-decoration: none; a.alt color: # bd4949!
Razina bloka
S druge strane, svojstva blok-stila unose se u jedan redak po paru ključ / vrijednost i često se uvode za brže uređivanje kod skeniranja koda. Oko 99% čistijih stilskih listova koristim ovo formatiranje i postalo je industrijski standard mnogim dizajnerima. Ako vaš izbornik koristi više od 6 ili 7 svojstava, ovo je najbolje oblikovanje.
Kada uzmete u obzir mnoga nova svojstva CSS3, također shvatite koliko brzo se vaši stilovi popunjavaju. A mnoga od tih svojstava podržavaju kopije specifične za preglednik koje zahtijevaju gotovo dvostruke unose koda (kao što je radijus obruba). Možete pogledati moj primjer svojstva bloka postavljenog ispod ciljanja uzorka dijela omotača.
.wrap display: block; obloga: 6px 10px; pozadina: #FFF; granični radijus: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -o-granični radijus: 4px;
Ni jedan od načina pisanja CSS-a nije posebno bolji od drugog. Na kraju krajeva, to je vaš izbor kao developera koji stil želite, pa čak i to prema projektu na kojem radite. Čak je i zajednički CSS gdje su se dizajneri međusobno miješali! Osobno to osjećam “radovi su u tijeku” Uobičajeno je lakše raditi s stilovima blokova jer neprestano pregledavam stilsku ploču kako bih uređivao ili dodavao. Ali za prometne domene s teškim učinkom na CSS datoteku apsolutno je najbolji način.
Držati ih vitkim
Korištenjem mnogih kratkih kodova dostupnih u CSS3 možete uštedjeti mnogo vremena za razvoj. Uređivanje HTML elemenata postat će puno lakše jer razumete ovaj jezik koji štedi vrijeme. Osim toga, vaš će se kôd pojaviti čišći i lakši za gledanje.
Jedini nedostatak je to što svi preglednici ne podržavaju ta svojstva. Postoje mnoga rješenja za mnoga postojeća pitanja kao što su Internet Explorer i Netscape. Srećom, web uvijek napreduje naprijed i kako CSS3 raste u popularnosti, nesumnjivo ćemo također doživjeti rast kompatibilnosti preglednika..
RGBa Prozirnost boja / neprozirnost
Novi RGBavalue nije baš CSS3 svojstvo, ali alfa transparentnost je specifična samo za CSS3. Umjesto uobičajenih vrijednosti "Crveno zelene plave", možete proći u boji koju sada možete uključuju četvrtu opciju transparentnosti boja. Zbog toga se web-programeri gotovo u potpunosti obavljaju s transparentnim PNG-ovima.
Osnovna sintaksa zahtijeva vrijednost od 0-255 u prva tri (3) slota i 0-1.0 u alfa poziciji. Raspon boja je specifičan za to koliko je od svakog tona (RGB) vidljivo ako je 0 ništa i 255 puna.
/ ** sintaksa ** / pozadina: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** primjer ** / div pozadina: rgba (255, 255, 255, 0.3);
Kompatibilnost među preglednicima
Još jedna nekretnina neprozirnost može se koristiti u nekim okolnostima. Međutim, to će utjecati na cijeli HTML element i unutarnji sadržaj, a ne samo na pozadinu koju ste vidjeli u mom primjeru.
Nažalost, Internet Explorer još ne podržava vrijednost boje RGBa. Općenito trebate uključiti rezervno svojstvo s potpunom neprozirnošću za ove manje standardne preglednike. Postavili ste to s istim vrijednostima, ali bez 4. (neprozirnosti). Izgledalo bi nešto tako rgba (255, 255, 255)
Osim toga, Internet Explorer se može obraditi nešto gracioznije preko uvjeta. Možete zapravo provjeriti radi li preglednik IE i prikazati vlastiti Microsoft CSS filtar na naredbu. Ovo sam prikazao u primjeru u nastavku (imajte na umu da će se to pojaviti negdje u HTML datoteci):
CSS3 radijus obruba
Pročitao sam nekoliko zbunjujućih tema u forumima o stvaranju zaobljenih granica s CSS3 - ne toliko na strani kako se to radi, već s finom podrškom za preglednike, web programeri pokušavaju pronaći najjednostavniju šifru da ispadne i funkcionira kako se očekuje.
/ ** sintaksa ** / border-radius: gornji lijevi gornji desni donji desni donji lijevi;
granica-radijus svojstvo dijeli sličnu sintaksu s kreiranjem standardne granice, osim u ovom slučaju ciljamo kutove kutije. Ovo svojstvo će zapravo prihvatiti 1 - 4 vrijednosti i svaka od njih cilja drugačije postavljanje kutova.
- 1 vrijednost: Sva četiri ugla su zaokružena na istu vrijednost
- 2 vrijednosti: Prva vrijednost vrijedi
gore lijevoidolje desnodok druga vrijednost udaraGore desnoidno-lijevo - 3 vrijednosti: Prvo se odnosi na
gore lijevodrugi je obojedno-lijevo&Gore desnodok je treća i konačna vrijednost primijenjena nadolje desno - 4 vrijednosti: Sve 4 vrijednosti ciljaju uglove sljedećim redoslijedom: gore lijevo, gore desno, dolje desno, dolje lijevo
/ ** primjer ** / div granični radijus: 4px 4px 8px 4px; div granični radijus: 4px 4px 8px;
Dakle, u gornjem kodu koristimo granica-radijus primijeniti efekt zaokruživanja 4px na sve osim na dolje desno granica koja dobiva krivulju od 8 piksela. Ako ste to primijetili, oba ova koda zapravo će primijeniti isti stilski efekt.
Kompatibilnost među preglednicima
Sada je glavni problem to granica-radijus je podržan samo u nekoliko preglednika. Internet Explorer 9 nedavno je dodao veliku podršku, a Opera će i ovo prikazati. Međutim, čak je i Opera stvorila vlastitu imovinu -o granica-radijus ciljanje njihovog specifičnog motora preglednika. Dodatno -Moz granica-radijus podržava Firefox / Gecko softver i -webkit-granica-radijus za Google Chrome / Safari.
Kôd ispod je primjer mog golog kosti predloška za stvaranje zaobljenih kutova s najvećom globalnom podrškom preglednika.
div granični radij: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px ;; -moz-border-radius: 4px 4px 8px 4px; -o-border-radius: 4px 4px 8px 4px;
Lijepa sjena pada?
Drugi stvarno strašan aspekt CSS3 je podrška za kutija i sjene teksta. To je bio problem za programere u prošlosti jer su pozadinske slike bile jedina realna opcija. Ova sintaksa zapravo slijedi skraćenu ulogu koja je mnogo lakša od ostalih svojstava koje smo pokrili. Prvo je teško zapamtiti pravilan redoslijed ključnih vrijednosti - ali što više vježbate, to će lakše postati.
Nažalost, Internet Explorer je opet neparan. Svaki drugi glavni preglednik, uključujući Firefox, Google Chrome, Safari i Opera u potpunosti podržava text-shadow nekretnine. Programeri su pokušali izgraditi vlastitu IE podršku, ali još uvijek vrlo ograničavajuće. Osnovna sintaksa je napisana kako slijedi:
/ ** sintaksa ** / text-shadow: x-offset y-offset boja zamućenja-radijusa; / ** primjer ** / div text-shadow: 2px 2px 1px # 111;
Pomak X i Y obavijestit će preglednik koliko bi se sjena trebala pojaviti. Možete koristiti negativne vrijednosti za pozicioniranje sjene iznad i iznad lijeve. Ali to dolazi off izgleda vrlo nespretan pa preporučujem pozitivne integers. Također, vrijednost polumjera zamućenja može se upotrijebiti za izglađivanje krutih rubova, ako se tekstualna sjena čini neprirodnom.
Ova sintaksa samo gleda u osnovni zapis pri stvaranju jednog efekta sjene kapi. Visoko napredni dizajneri proučavali su istovremeno stvaranje više sjena! Ja referenca ovaj strašan blog post od natrag u travnju 2011 koji ide u velikom detalj na impozantan tekst sjene. Ako imate vremena, prelistajte sadržaj da biste dobili ideju o naprednijim značajkama i označite ga kao buduću referencu!
Kompatibilnost među preglednicima
Najveći kritičar na koji nailazimo je Internet Explorer. Uvijek iznova Microsoft je gurnuo vlastiti mehanizam za prikazivanje preglednika koji je u najboljem slučaju radio pod-par. Sada čak i kada CSS3 preuzima vladavinu u tekstualnim sjenkama, IE je još uvijek iza. Postoji izvrsna demo web-lokacija na kojoj možete pronaći primjere koda i tradicionalne CSS-ove uvjetne komentare.
Uglavnom želite provjeriti odgovara li preglednik koji je pokrenut korisniku bilo koju verziju programa Internet Explorer 9 ili niže. Zatim pomoću MS filtera možemo primijeniti sjenu na bilo koji tekstualni element (gore, koristimo odlomak).
Olakšavanje prijelaza
CSS3 tranzicija je najtoplija nekretnina na tržištu dizajna od bakica je flapjacks! Web dizajneri su stvarali takvu frku oko čistih CSS prijelaza, iako je podrška uglavnom ograničena na Webkit preglednike. Naravno, možete koristiti sekundarna svojstva za Mozilla i Opera i slično. Ali skraćenica je zaista zadivljujuća, pogotovo ako ste protiv JavaScript animacija iz bilo kojeg razloga.
Prvo pogledajmo izvorno svojstvo prijelaza. To će zahtijevati 4 vrijednosti koje također možete podijeliti na svojstva. Oni odgovaraju tranziciji svojstvo(što je učinak), trajanje(koliko dugo treba izvući), vrijeme-funkcije(promjene brzine preko animacije), i odgoditi(broj sekundi za čekanje prije animacije).
/ ** sintaksa ** / prijelaz: odgoda funkcije vremenskog trajanja svojstva; / ** primjer ** / img transition-property: neprozirnost; trajanje tranzicije: 2s; funkcija prijelaza-vrijeme: olakšavanje; odgoda prijelaza: 0,5s;
Trebali biste intuitivno razumjeti svrhu većine tih svojstava, osim možda funkcije vremenskog usklađivanja. Iako je u početku zbunjujuće, ovo svojstvo jednostavno animira vaš prijelaz na drugačiji način, tako da se efekt pokrene sporije, završi sporije ili nešto slično.
W3 Škole imaju online funkciju vremenske funkcije koja sadrži popis svih mogućih vrijednosti koje možete isprobati. Stalno pronalazim Googling za ove vodiče, ali oni čine takve zgodne knjižne oznake.
Kompatibilnost među preglednicima
Sada ćemo predstaviti punu podršku preglednika. Prema zadanim postavkama svojstvo prijelaza je samo podržane novijim verzijama Safarija. Ipak, mnogi korisnici još uvijek zahtijevaju -WebKit koji se odnosi i na Google Chrome i slične motore za prikazivanje. Ispod je a “finaliziran” predložak blok koda Preporučujem spremanje i korištenje ako vam je potrebna podrška za prijelaz od većine web preglednika.
img transition: prozirnost 2s jednostavnost u 1s; -webkit-prijelaz: neprozirnost 2s jednostavnost u 1s; / * chrome, safari, flock * / -moz-transition: jednostavnost 2s jednostavnost u 1s; / * mozilla + gecko * / -o-transition: jednostavnost 2s u 1s; / * opera * /
Efekti teksta
Ova nekretnina nije velika i nećete naći mnogo web dizajnera koji je koriste danas. Ali možete koristiti text-stroke izgraditi neke stvarno uredne efekte s vašim fontovima. Webkit preglednici kao što su Safari i Chrome jedini su pravi pristaše ove imovine. Opera i Firefox imaju poteškoća s prikazivanjem tekstualnih objekata s istim obrisima.
/ ** sintaksa ** / p -webkit-text-stroke: boja širine; / ** primjer ** / p -webkit-text-stroke: 1px # 222;
Kompatibilnost među preglednicima
Ako osjećate potrebu za tekstualnim efektima moždanog udara, uvijek biste trebali uključiti boju sigurnosne kopije. Mozilla i Opera mogu se probiti, ali korisnici Internet Explorera nemaju drugih opcija. Nažalost, ovo je jedna od novijih CSS3 svojstava koja jednostavno nije dobila dovoljno podrške od zajednice programera web-preglednika. Trebali biste provesti neko vrijeme igrajući se s ovim izvrsnim web-alatom posebno stvorenim za izradu ovih CSS3 tekstualnih obrisa.
Box-kalibracija
Svojstvo veličine kutije daje vam veću kontrolu nad ukupnom širinom / visinom bilo kojeg elementa bloka. Prema zadanim postavkama širina / visina + obrub + margina + obloga čini ukupnu veličinu okvira. Međutim, upotrebom graničnog okvira na vašem sadržaju gura sve vaše obloge i margine unutra da bi širina ostala ista. Za ovo svojstvo postoje samo dvije vrijednosti, s sadržaj kutija biti zadana.
div širina: 550px; padding: 9px; dimenzioniranje kutije: granični okvir; / * širina će ostati 550px * /
Kao što možete zamisliti, to će vam biti korisno u nekom trenutku tijekom CSS karijere. Obloge i margine mogu biti pravi bol i kad dodate granice, obično izgubite točku piksela.
Kompatibilnost među preglednicima
Opera i IE 8 zadano podržavaju ovo novo svojstvo. IE7 i niže zaglavljeni su s postavkom okvira sadržaja ako vaši posjetitelji ne koriste quirks način. Jedine dodatke koje biste trebali znati o posebno ciljanim webkit i Mozilla pokretačkim pogonima.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: granični okvir; / * Firefox * / dimenzioniranje okvira: granični okvir; / * Opera / IE8 + * /
Čisti stupci CSS3
Stupci su malo komplicirani s CSS3, ali se mogu ostvariti s minimalnim kodom. 2 svojstva na koja se želite usredotočiti su kolona-count i kolona-gap. Brojanje se odnosi na ukupan broj stupaca koje želite primijeniti, dok razmak stvara maržu između svake od njih.
div # cols broj kolona: 3; jaz stupca: 10px;
U mom primjeru možemo vidjeti ID-ove koji se koriste kao spremnik. Unutar smo podijeliti div u 3 stupca s 10px jaz između svakog od njih. Dalje možete postaviti stupac širine koja se koristi za postavljanje ukupne širine svakog stupca umjesto popisa punog broja.
Kompatibilnost među preglednicima
Sve prije IE8 jednostavno neće moći iskoristiti ovu imovinu. No, kao što smo vidjeli u svakom primjeru, Mozilla i Webkit nude vlastita rješenja za više preglednika. Ako vam je potreban predložak, pogledajte moj primjerak malog koda u nastavku:
div # sidebar width: 210px; -moz-kolona-broj: 3; -moz-gap-gap: 7px; -broj zbrajanja-stupca: 3; -webkit-stupac-gap: 7px; broj kolona: 3; jaz u stupcu: 7px;
Custom @ font-face
Sigurno ste čuli za uzbuđenje vezano uz CSS3 prilagođene fontove. Pomoću svojstva @ font-face možemo uvesti vanjske stilove fontova i koristiti ih kao i bilo koju drugu obitelj. Sintaksa je pomalo zamršena i morat ćete potrošiti neko vrijeme kako biste je ispravno shvatili. Blok za 'Font-lica se koristi za definiranje prezimena, a zatim ga možete koristiti u svom font-family svojstva gdje god!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Samo Internet Explorer * / Tako da vidite gore ne ciljam bilo koju određenu vrstu fonta, ali sintaksa je ono što bi trebalo isticati. Primijetite da Internet Explorer podržava samo .EOT vrste slova, dok .TTF i .OTf popularne su opcije za druge preglednike. Također od važnosti, trebali biste razumjeti da možete prenijeti URL-ove fontova iz izravnih veza, tj. URL ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');
Ne postoji pravi cross-browser problem s ovom postavkom jer svi motori za renderovanje mogu analizirati te vrste datoteka fontova. Samo zapamtite da za IE podršku morate uključiti eot verziju kao i original. Osjećam da članak W3 Škole ima katalog najvažnijih informacija koje biste trebali provjeriti.
Pretvaranje u minijaturni CSS
O ovoj se temi često raspravlja jer služi različitom cilju za svaki projekt. S jedne strane, web programeri troše puno vremena na pisanje stilova. Ne postoji način da se šifrira ovaj tip čistog teksta i sakrije ga od njuškala očiju. Ako pokušavate spriječiti druge da napadno kradu vaš kôd, najbolje što možete učiniti je zagušiti stilove i ukloniti sve prijelaze / razmake linija.
Taj se postupak može označiti kao mini- jaturiziranje kod. Općenito, programeri će napisati CSS u standardnom formatu, a zatim ukloniti sve razmake prije učitavanja na web poslužitelj. Tada imate lokalnu kopiju za brzo uređivanje, a također i manju verziju projekta uživo. Ova metoda očito može biti korisna za smanjenje opterećenja stranice, uz zadržavanje koda otmičara.
Poveznica koju sam postavio iznad koja vodi do Umanji CSS ima nevjerojatan materijal za čitanje o toj temi. Web-lokacija nudi i alat koji se temelji na pregledniku za uklanjanje takvog razmaka i vraća ključa iz vašeg koda. CSS Compressor je još jedna mogućnost sportskog jednostavnog sučelja koje se pokreće izravno u vašem web pregledniku. Također sam čuo dobre stvari o Clean CSS-u, iako nikada nisam koristio tu aplikaciju.
povezani Linkovi
Da biste nastavili napredovati, dao sam šest praktičnih veza s cijelog weba. To uključuje ne samo skraćenice, nego i korisne vodiče i upute za pristup prilikom korištenja ovog novog kratkog CSS koda.
- Vodič za početnike za CSS3
- Kratki vodič za CSS
- Koristite li prikladno CSS3?
- CSS sadržaj i tablica kompatibilnosti preglednika
- CSS3 + progresivno poboljšanje = pametan dizajn
- Cijeli CSS / CSS3 svojstva indeksa
Zaključak
Potrebno je mnogo predanosti i prakse pisanja CSS koda za izgradnju konkretnog rasporeda koji možete pratiti za svaki projekt. Većina web dizajnera rado će pokupiti nove projekte i ideje, tako da ćete sigurno pronaći vremena za prakticiranje ovih korisnih savjeta za kodiranje. Pokušajte kopirati mali referentni list za vlastitu udobnost u slučaju da ne možete pronaći bilo kakve varalice, ili još gore, ako izgubite internetsku vezu!
Znate li za neke druge zgodne CSS3 osobine ili prečace? Voljeli bismo čuti vaše misli i ideje u komentarima o raspravi. Web-programeri se zalažu za veću standardizaciju unutar W3C-a i jasno je da je tranzicija sve lakša. CSS3 pruža fantastične prednosti, a ako možete ovladati skeniranim kodiranjem to će zadržati niske veličine datoteka i spriječiti krađe vašeg koda.
