Udržiavanie značiek kódu CSS3 Slim
Weboví vývojári môžu ušetriť veľa času pomocou sofistikovanejšej syntaxe CSS3. Používatelia, ktorí navštívia vašu stránku, očakávajú najrýchlejší možný čas načítania - čo znemožňuje zachovanie veľkosti súborov. Existuje veľa skratových trikov s CSS a najmä pod novým CSS3 modelom.
Zostavil som niekoľko týchto myšlienok v sprievodcovi nižšie. Mali by sme sa tiež zaoberať inými oblasťami, ako je zmenšenie kódu CSS. K dispozícii sú nástroje v prehliadači, ktoré pomáhajú vývojárom v štýlovom procese, ale chcete skombinovať kópie s týmto zmenšením veľkosti súboru, aby ste v konečnom dôsledku zjednodušili proces vykresľovania vašich webových stránok.
Základné tipy pre formátovanie
Skôr než sa dostaneme do syntaxe CSS, chcem prejsť na tému ako napísať svoj CSS. Ak ste trochu oboznámení s dizajnom webových stránok, pravdepodobne ste už predtým videli štýl, pravdepodobne viackrát. Prvá časť každého príkazu sa nazýva volič. To sa zameriava na typ prvku, ktorý bude prijímať štýly pridané vo vnútri kučeravých zátvoriek, tiež známy ako vlastnosti.
Inline Level
V inline štýle každá vlastnosť je napísaná jedna po druhej s len medzerami na ich oddelenie. Táto metóda sa najlepšie uplatňuje na selektory, pri ktorých potrebujete iba niekoľko vlastností. Umožní vám to ušetriť miesto na stránke a posúvanie sa v šablóne štýlov bude oveľa rýchlejšie. V prípade, že ste sa nikdy predtým nenachádzali s integrovaným CSS, pridal som malý príklad nižšie, ktorý je zameraný na odkazy na ukotvenie vo formáte HTML.
a farba: # 648cc8; font-weight: tučné; a: vznášať sa color: # 739cda; textová výzdoba: žiadne; a.alt farba: # bd4949! dôležité;
Bloková úroveň
Vlastnosti štýlu bloku sú navyše zadávané v jednom riadku na pár kľúčov a hodnôt a sú často členené pre rýchlejšie úpravy pri skenovaní kódu. Asi 99% čistejších šablón štýlov používam toto formátovanie a stalo sa priemyselným štandardom pre mnohých dizajnérov. Ak váš selektor používa viac ako 6 alebo 7 vlastností, je to najlepšie formátovanie, ktoré sa má použiť.
Keď vezmeme do úvahy množstvo nových vlastností CSS3, uvedomíte si, ako rýchlo sa vaše štýly naplnia. Mnohé z týchto vlastností podporujú kopírovanie špecifické pre prehliadač, ktoré vyžadujú takmer duplicitné kódy (napríklad polomer okrajov). Môžete si pozrieť môj príklad bloku vlastností nastavených nižšie na zacielenie vzorky obal div.
.wrap zobrazenie: blok; polstrovanie: 6px 10px; pozadie: #FFF; polomer okrajov: 4px; -moz-okraj-polomer: 4px; -webkit-border-radius: 4px; -o-okraj-polomer: 4px;
Ani jeden spôsob písania CSS nie je konkrétne lepší ako druhý. V konečnom dôsledku je to vaša voľba ako vývojár, ktorý uprednostňujete, a dokonca aj to bude podľa projektu, na ktorom pracujete. Je dokonca bežné nájsť CSS, kde dizajnéri zmiešali obaja spolu! Ja osobne to cítim “práca prebieha” majú tendenciu byť jednoduchšie pri blokových štýloch, pretože neustále skúmajú šablónu so štýlmi a robia úpravy alebo doplnenia. Ale pre domény s vysokou návštevnosťou, ktoré minimalizujú váš súbor CSS, je absolútne najlepší spôsob, ako ísť.
Udržať ich štíhle
Použitím mnohých krátkych kódov dostupných v CSS3 môžete ušetriť veľa času vývoja. Úprava prvkov HTML sa stane oveľa jednoduchšou, pretože pochopíte časovo úsporné jazyky. Okrem toho sa váš kód bude zobrazovať čistejšie a ľahšie sa bude pozerať.
Jedinou nevýhodou je, že nie všetky prehliadače plne podporujú tieto vlastnosti. Existujú zástupné riešenia pre mnohé existujúce problémy, ako napríklad v programe Internet Explorer a Netscape. Našťastie sa web stále zlepšuje a CSS3 rastie v popularite, nepochybne zažijeme rast kompatibilného prehliadača.
RGBa Transparency / Opacity farieb
Nový kód RGBavalue nie je presne CSS3 vlastnosť, ale alfa transparentnosť je špecifická len pre CSS3. Namiesto bežných hodnôt "červenej zelenej modrej", ktoré odovzdáte farbu, môžete teraz obsahuje štvrtú možnosť transparentnosti farieb. Z tohto dôvodu sa weboví vývojári vykonávajú s transparentnými PNG takmer úplne.
Základná syntax vyžaduje hodnotu od 0-255 v prvých troch (3) slotych a 0-1.0 v alfa pozícii. Rozsah farieb je špecifický pre to, koľko z každého odtieňa (RGB) je viditeľné, pričom 0 je nič a 255 je plné.
/ ** syntax ** / pozadia: rgba (hodnota_zmenu, hodnota_zmeny, hodnota_zmeny, hodnota_zmeny, opacita_value); / ** príklad ** / div pozadie: rgba (255, 255, 255, 0.3);
Kompatibilita s viacerými prehliadačmi
Ďalšia nehnuteľnosť nepriehľadnosť môžu byť použité za určitých okolností. To však ovplyvní celý prvok HTML a vnútorný obsah, a to nielen pozadie, ako ste videli v mojom príklade.
Bohužiaľ program Internet Explorer nepodporuje farebnú hodnotu RGBa. Pre tieto menej štandardné prehliadače by ste mali vo všeobecnosti zahrnúť záložnú vlastnosť s úplnou nepriehľadnosťou. Nastavíte to s rovnakými hodnotami, ale bez 4. (opacity). Bude to vyzerať niečo ako rgba (255, 255, 255)
Program Internet Explorer je navyše možné riešiť trochu elegantnejšie cez podmienené podmienky. V skutočnosti môžete skontrolovať, či prehliadač používa IE a na príkaz zobrazí vlastný filter Microsoft CSS. Ukázal som to v mojom príklade nižšie (poznamenajte si, že sa objaví niekde vo vašom súbore HTML):
Polomer okraja CSS3
Prečítal som niekoľko zmätočných fóliových vlákien o vytvorení zaokrúhlených hraníc s CSS3 - nie toľko na strane toho, ako sa to deje, ale s vyhranenou podporou prehliadačov, vývojári webu sa snažia o to, aby najjednoduchší kód klesol a fungoval podľa očakávania.
/ ** syntax ** / polomer okrajov: hore vľavo hore hore pravý spodný pravý ľavý dolný okraj;
border-radius vlastníctvo zdieľa podobnú syntaxu s vytvorením štandardnej hranice, s výnimkou toho, že sme v tomto prípade zacielení na rohy boxu. Táto vlastnosť skutočne akceptuje 1 - 4 hodnoty a každý z nich je zameraný na iné nastavenie rohov.
- 1: Všetky štyri rohy sú zaokrúhlené na rovnakú hodnotu
- 2: Prvá hodnota platí pre
hore v ľavoavpravo dolezatiaľ čo druhá hodnota hityhore vpravoadole vľavo - 3 hodnoty: Najskôr sa vzťahuje na
hore v ľavoroh, druhý je obojedole vľavo&hore vpravozatiaľ čo na tretiu a konečnú hodnotuvpravo dole - 4 hodnoty: Všetky 4 hodnoty zacieľujú rohy v nasledujúcom poradí: hore vľavo, hore pravý, spodný pravý, spodný ľavý
/ ** Príklad ** / div okraj-polomer: 4px 4px 8px 4px; div okraj-polomer: 4px 4px 8px;
Takže vo vyššie uvedenom kóde používame border-radius použiť 4px zaoblený efekt na všetko okrem vpravo dole hranicu, ktorá má vyhnutú 8-násobnú krivku. Ak ste si to všimli, oba tieto kódy skutočne budú mať rovnaký efekt štýlu.
Kompatibilita s viacerými prehliadačmi
Teraz je hlavným problémom to border-radius je podporovaná iba v niekoľkých prehliadačoch. Aplikácia Internet Explorer 9 nedávno pridala skvelú podporu a Opera to urobí rovnako dobre. Avšak aj Opera si vytvorila svoj vlastný majetok -o-border-radius ktoré sú zamerané na ich špecifický prehliadač. ďalej -moz-border-radius je podporovaný programom Firefox / Gecko a -WebKit-border-radius pre Google Chrome / Safari.
Nižšie uvedený kód je príkladom môjho holého šablóny na vytváranie zaoblených rohov s najväčšou globálnou podporou prehliadača.
div okraj-polomer: 4px 4px 8px 4px; -webkit-border-radius: 4px 4px 8px 4px; -moz-okraj-polomer: 4px 4px 8px 4px; -o-okraj-polomer: 4px 4px 8px 4px;
Fancy a Drop Shadow?
Ďalšou skutočne úžasnou stránkou CSS3 je podpora box a textové tiene. To bol taký problém pre vývojárov v minulosti, pretože obrázky na pozadí boli jedinou realistickou možnosťou. Táto syntax sa skutočne riadi skratkou, ktorá je oveľa jednoduchšia ako ostatné vlastnosti, ktoré sme pokryli. Je ťažké zapamätať si správny poriadok kľúčových hodnôt na prvý pohľad - ale čím viac ste dali do praxe, tým ľahšie sa to stane.
Bohužiaľ Internet Explorer je opäť výnimočný. Každý ďalší dôležitý prehliadač, vrátane programov Firefox, Google Chrome, Safari a Opera, plne podporuje text-shadow vlastnosť. Vývojári sa pokúsili vybudovať vlastnú podporu IE, ale stále sú veľmi obmedzujúce. Základná syntax je napísaná nasledovne:
/ ** syntax ** / text-tieň: x-offset y-offset farba rozostrenia-polomer; / ** Príklad ** / div text-shadow: 2px 2px 1px # 111;
Odsadenie X a Y informuje prehliadač o tom, ako ďaleko presahuje pravý a nízko zobrazený tieň. Pomocou záporných hodnôt môžete umiestniť tieň nad a nad ľavou stranou. Ale to vyzerá veľmi nepríjemne, takže odporúčam kladné celé čísla. Rovnako je možné použiť hodnotu polomeru rozmazania kvôli vyhladeniu tuhých okrajov, ak sa textový tieň javí ako neprirodzený.
Táto syntax práve hľadá základnú notáciu pri vytváraní jedného efektu tieňovej kvapky. Vysoko pokročilí dizajnéri študovali dokonca aj niekoľko stínov! Odvolávam sa na tento úžasný blogový príspevok z obdobia v apríli 2011, ktorý sa venuje veľkému detailu uloženiu textových tieňov. Ak máte čas, prejdite cez obsah len preto, aby ste získali predstavu o pokročilejších funkciách a nezabudnite si ho označiť ako budúcu referenciu!
Kompatibilita s viacerými prehliadačmi
Najväčším útočníkom, ktorému narazíme, je Internet Explorer. Znova a znova spoločnosť Microsoft vytlačila svoj vlastný vykresľovací motor, ktorý v najlepšom prípade vykonal sub-par. Teraz dokonca aj v prípade, že CSS3 vezme vlády v textových tieňoch, IE je stále za sebou. Je tu skvelá demo webová stránka, kde nájdete príklady kódov a tradičné komentáre k podmienkam CSS.
V podstate sa snažíte skontrolovať, či váš prehliadač, ktorý váš používateľ používa, zodpovedá akejkoľvek verzii programu Internet Explorer 9 alebo nižšej. Potom pomocou filtrov MS môžeme použiť tieň do akéhokoľvek textového elementu (vyššie, používame odsek).
Uvoľnenie prechodov
CSS3 prechod je najhorúcejšou vlastnosťou na trhu s dizajnom od babylonských flapjacks! Web dizajnéri robia takýto rozruch o čistých prechodoch CSS, hoci podpora je prevažne obmedzená na prehliadače Webkit. Môžete samozrejme využívať sekundárne vlastnosti pre Mozilla a Opera a podobne. Stenografická notácia je však naozaj podmanivá, najmä ak ste z ľubovoľného dôvodu proti JavaScriptovým animáciám.
Najprv sa pozrime na pôvodný majetok prechodu. To bude vyžadovať 4 hodnoty, ktoré by ste mohli rozdeliť aj na samotné vlastnosti. Zodpovedajú prechodu vlastnosť(aký je účinok), trvanie(ako dlho ho vytiahnete), časovanie-funkcie(zmeny rýchlosti v priebehu animácie) a oneskorenie(počet sekúnd počkať pred animáciou).
/ ** syntax ** / prechod: doba trvania vlastnosti oneskorenie funkcie časovania; / ** príklad ** / img transition-property: opacity; prechod-trvanie: 2s; prechod-časovanie-funkcia: jednoduchosť; oneskorenie prechodu: 0,5s;
Mali by ste intuitívne pochopiť účel pre väčšinu týchto vlastností s výnimkou prípadnej funkcie časovania. Hoci to na prvý pohľad mätú, táto vlastnosť jednoducho animuje váš prechod inak, takže efekt sa spustí pomalšie, skončí pomalšie alebo niečo podobné.
W3 Schools má funkciu načasovania online, ktorá obsahuje zoznam všetkých možných hodnôt, ktoré môžete vyskúšať. Neustále som sa ocitol Googling pre týchto sprievodcov, ale robia také užitočné záložky.
Kompatibilita s viacerými prehliadačmi
Teraz si dovoľte plnú podporu prehliadača. Štandardne je vlastnosť prechodu iba podporované novšími verziami Safari. Avšak mnohí užívatelia stále požadujú -WebKit prefix, ktorý sa vzťahuje aj na prehliadače Google Chrome a podobné renderovacie motory. Nižšie je “dokončené” šablóna bloku kódov Doporučujem ukladať a používať, ak potrebujete prechodovú podporu z väčšiny webových prehliadačov.
img prechod: nepriehľadnosť 2s easy-in 1s; -webkit-transition: opacita 2s jednoduchosť v 1s; / * chróm, safari, hejno * / -moz-prechod: opacita 2s ľahkosť 1s; / * mozilla + gecko * / -o-prechod: opacita 2s jednoduchosť v 1s; / * opera * /
Textové efekty
Táto vlastnosť nie je obrovská a nenájdete mnoho webových dizajnérov, ktorí ju dnes používajú. Ale môžete použiť text-mŕtvica stavať niektoré skutočne čisté efekty s vašimi písma. Prehliadače Webkit, ako sú napríklad Safari a Chrome, sú jedinými skutočnými zástancami tejto nehnuteľnosti. Opera a Firefox majú ťažkosti s vykresľovaním textových objektov s týmito istými obrysmi.
/ ** syntax ** / p -webkit-text-stroke: šírka farby; / ** príklad ** / p -webkit-text-stroke: 1px # 222;
Kompatibilita s viacerými prehliadačmi
Ak máte pocit, že je potrebné zdvihnúť textové efekty, vždy by ste mali obsahovať záložnú farbu. Mozilla a Opera sa môžu dostať, ale používatelia programu Internet Explorer nemajú žiadne ďalšie možnosti. Bohužiaľ, toto je jedna z novších vlastností CSS3, ktorá práve nedosiahla dostatočnú podporu od komunity vývojárov webových prehliadačov. Mali by ste stráviť nejaký čas hraním okolo s týmto skvelým webovým nástrojom vytvoreným špeciálne pre vytváranie týchto textových obrysov CSS3.
Box-sizing
Vlastnosť veľkosti skrinky vám dáva väčšiu kontrolu nad celkovou šírkou / výškou akéhokoľvek prvku bloku. V predvolenom nastavení šírka / výška + okraj + okraj + polstrovanie tvorí celkovú veľkosť krabice. Pomocou rámčeka na vašom obsahu však tlačíte všetky polstrovanie a okraje dovnútra aby bola šírka presne rovnaká. Pre túto vlastnosť sú iba dve hodnoty, s content-box ako predvolené.
div šírka: 550px; polstrovanie: 9px; rozmery v políčku: okrajové pole; / * šírka zostane na 550px * /
Ako si viete predstaviť, príde to v niektorých bodoch počas vašej kariéry CSS. Padnutie a okraje môžu byť skutočnou bolesťou a pri pridávaní do hraníc máte tendenciu strácať stopu pixelov.
Kompatibilita s viacerými prehliadačmi
Opera a IE 8 štandardne podporujú túto novú vlastnosť. IE7 a nižšie sú prilepené s nastavením boxu obsahu, pokiaľ návštevníci nepoužívajú režim quirks. Jediné dodatky, ktoré by ste mali vedieť o špecifických cieľových webových a webových prehliadačoch Mozilla.
div -webkit-size-box: border-box; / * Safari / Chrome * / -moz-box veľkosť: okraj-box; / * Firefox * / veľkokapacita: rámček; / * Opera / IE8 + * /
Čisté stĺpce CSS3
Stĺpce sú trochu komplikované s CSS3, ale môžu byť vykonané s minimálnym kódom. 2 vlastnosti, na ktoré sa chcete sústrediť, sú Kolóna-count a stĺpec medzery. Počet zobrazuje celkový počet stĺpcov, ktoré chcete použiť, zatiaľ čo medzera vytvára medzery medzi jednotlivými stĺpcami.
div # cols počet stĺpcov: 3; medzera medzi stĺpcami: 10px;
V mojom príklade vidíme ID #cols, ktorý sa používa ako kontajner. Vnútri rozdelíme div na 3 stĺpce s rozdielom 10px medzi každou. Ďalej môžete nastaviť stĺpec šírky ktorý sa používa na nastavenie celkovej šírky každého stĺpca namiesto zadania pevného čísla.
Kompatibilita s viacerými prehliadačmi
Všetko pred IE8 jednoducho nebude môcť využiť túto vlastnosť. Ale ako sme videli v každom príklade, Mozilla a Webkit ponúkajú vlastné riešenia pre viacero prehliadačov. Ak potrebujete šablónu, pozrite si môj malý príklad kód:
div # bočný panel šírka: 210px; -moz-počet stĺpcov: 3; -moz-column-gap: 7px; -webkit-počet stĺpcov: 3; -webkit-column-gap: 7px; počet stĺpcov: 3; medzera medzi stĺpcami: 7px;
Vlastné @ font-face
Museli ste počuť o vzrušení týkajúce sa vlastných písiem CSS3. Pomocou vlastnosti @ font-face môžeme importovať externé štýly písma a používať ich ako všetky ostatné rodiny. Syntax je trochu komplikovaný a budete musieť stráviť nejaký čas tým, že sa dostanete správne. Blok pre @ Font-face sa používa na definovanie priezviska, potom ho môžete použiť vo svojom font-family vlastnosti kdekoľvek!
@ písmo-tvár font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Iba Internet Explorer * / Takže vidíte vyššie, že necítim žiadny konkrétny typ písma, ale syntax je to, čo by malo vyniknúť. Všimnite si, že program Internet Explorer podporuje iba .EOT typy písiem, zatiaľ čo .ttf a .OTF sú obľúbené možnosti pre ostatné prehliadače. Taktiež dôležité, mali by ste pochopiť, že môžete odoslať adresy URL písiem z priamych odkazov, tj. url ( 'https://www.hongkiat.com/css3/fonts/myfont.ttf');
Neexistuje žiadny reálny problém s týmto prehliadačom, pretože všetky renderovacie motory môžu analyzovať tieto typy súborov písma. Len si pamätajte, že pre IE podporu musíte zahrnúť eot verziu rovnako ako originál. Mám pocit, že článok W3 Schools obsahuje katalóg najdôležitejších informácií, ktoré by ste mali skontrolovať.
Prevod na miniatúrny CSS
Táto téma sa často diskutuje, pretože pre každý projekt slúži inému účelu. Na jednej strane weboví vývojári trávia veľa času písaním svojich štýlov. Neexistuje žiadny spôsob, ako zašifrovať tento typ čistých textov a skryť ho zo snoopingových očí. Pokiaľ sa snažíte zabrániť druhým, aby neoprávnene ukradli kód, najlepšie, čo môžete urobiť, je neporiadok štýlov a odstránenie všetkých zlomov / priestorov.
Tento proces môže byť označený ako miniaturizácii váš kód. Všeobecne budú vývojári písať CSS v štandardnom formáte a potom odstránia všetky medzery pred odovzdaním na webový server. Potom máte lokálnu kópiu, ktorú chcete rýchlo upraviť, zatiaľ čo poskytujete aj menšiu verziu v živom projekte. Táto metóda môže byť samozrejme užitočná na zníženie zaťaženia stránky spolu s udržiavaním únoscov kódu v zátoke.
Odkaz, ktorý som uverejnil vyššie vedie k minify CSS má nejaké úžasné čítanie materiálu na túto tému. Stránka tiež poskytuje prehliadačový nástroj na odstránenie takýchto medzery a kľúčových vrátených údajov z vášho kódu. Kompresor CSS je ďalšou možnosťou, ktorá využíva jednoduché rozhranie, ktoré beží priamo vo vašom webovom prehliadači. Taktiež som počul dobré veci o Clean CSS, aj keď som sám nepoužil aplikáciu.
súvisiace odkazy
Aby som vás neustále tlačil dopredu, poskytol som šesť šikovných odkazov z celého webu. Patria sem nielen stenografická notácia, ale aj užitočné príručky a výukové programy, ktoré majú prístup k praxi tohto nového skráteného kódu CSS.
- Príručka pre začiatočníkov pre CSS3
- CSS Príručka skratky
- Používate CSS3 správne?
- Obsah CSS a graf kompatibility prehliadača
- CSS3 + progresívne vylepšenie = inteligentný dizajn
- Kompletný index vlastností CSS / CSS3
záver
Trvalo veľa odhodlania a praxe písania kódu CSS na vytvorenie konkrétneho plánu, ktorý môžete sledovať pre každý projekt. Väčšina webových dizajnérov je rád, že vyzdvihne nové projekty a nápady, takže si určite nájdeš čas praktizovať tieto užitočné tipy pre kódovanie. Skúste skopírovať malý referenčný list pre vaše pohodlie v prípade, že nemôžete nájsť nejaké podsieňové listy, alebo ešte horšie stratíte internetové pripojenie!
Poznáte nejaké iné praktické vlastnosti alebo skratky pre CSS3? Radi by sme počuli svoje myšlienky a nápady v diskusných komentároch. Weboví vývojári sa snažia o väčšiu štandardizáciu v rámci W3C a jasne sa zjednodušuje prechod. CSS3 poskytuje fantastické výhody a ak môžete zvládnuť skrátenú kódovanie, bude to mať nízku veľkosť súborov a zabrániť kopírovaniu od krádeže vášho kódu.
