CSS3 kodo žymėjimo laikymas plonas

Šis straipsnis yra dalis mūsų „HTML5 / CSS3 vadovų serija“ - skirta padėti jums tapti geresniu dizaineriu ir (arba) kūrėju. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

Žiniatinklio kūrėjai gali sutaupyti daug laiko naudodami sudėtingesnę CSS3 sintaksę. Vartotojai, apsilankę jūsų puslapyje, tikisi greičiausios įkelties trukmės - tai reiškia, kad esate atsakingas už failų dydžių mažinimą. Yra daug stenografinių triukų su CSS ir ypač pagal naująjį CSS3 modelį.

Aš pateikiau keletą šių idėjų žemiau esančiame vadove. Taip pat turėtume kreiptis į kitas sritis, pvz., CSS kodo redagavimą. Yra įrankių, galinčių padėti kūrėjams sukurti stiliaus kūrimo procesą, tačiau norite sujungti trumpuosius kodus su šio failo dydžio sumažinimu, kad galiausiai supaprastintumėte savo svetainės pateikimo procesą.

Pagrindiniai patarimai dėl formatavimo

Prieš pereinant į faktinę CSS sintaksę, noriu eiti per temą kaip rašyti savo CSS. Jei esate šiek tiek susipažinę su žiniatinklio dizainu, tikriausiai anksčiau matėte stilių lentelę, tikriausiai daugiau nei vieną kartą. Pirmoji kiekvienos komandos dalis vadinama selektorių. Tai nukreipia į elemento tipą, kuris gaus stilius, pridėtus garbanotais petnešomis, taip pat žinomas kaip savybės.

Inline lygis

Su inline stiliais kiekviena ypatybė yra parašyta vienas po kito, kad būtų atskirtos tik tarpai. Šis metodas geriausiai tinka selektoriams, kur jums reikia tik kelių savybių. Tai padės sutaupyti vietos puslapyje ir pereiti per savo stiliaus lapą bus daug greičiau. Jei anksčiau niekada nesusidūrėte su CSS, pridėjau nedidelį pavyzdį, nukreiptą į HTML inkarų nuorodas.

a spalva: # 648cc8; šrifto svoris: paryškintas;  a: Hover color: # 739cda; teksto apdaila: nėra;  a.alt color: # bd4949! svarbu;

Blokų lygis

Kita vertus, blokų stiliaus ypatybės įvedamos vienoje eilutėje už raktą / vertę ir dažnai įtraukiamos į spartesnius redagavimus, kai nuskaitomas kodas. Apie 99% švaresnių stilių lapų, kuriuos naudoju, naudoja šį formatavimą ir tapo daugelio dizainerių standartu. Jei jūsų selektorius naudoja daugiau kaip 6 arba 7 ypatybes, tai yra geriausias pritaikymas.

Kai atsižvelgiate į daugybę naujų CSS3 savybių, jūs taip pat suprantate, kaip greitai jūsų stilių lentelės užpildomos. Ir daugelis šių savybių palaiko konkrečias naršyklės kopijas, kurioms reikalingi beveik dvigubi kodo įrašai (pvz., Pasienio spindulys). Galite patikrinti mano pavyzdį, kuris yra žemiau pateikto bloko turto pavyzdys, nukreiptas į mėginio įvynioklio div.

.wrap display: block; įdėklas: 6px 10px; fonas: #FFF; pasienio spindulys: 4px; -moz-border-spindulys: 4px; -webkit-border-radius: 4px; -o-pasienio spindulys: 4px;

Nė vienas CSS rašymo būdas nėra geresnis nei kitas. Galų gale tai yra jūsų, kaip pageidaujamo stiliaus kūrėjo, pasirinkimas, ir netgi tai bus pagal projektą, kurį dirbate. Tai netgi įprasta rasti CSS, kur dizaineriai sumaišė abu kartu! Aš tai jaučiu “vykdomi darbai” būna lengviau su blokiniais stiliais, nes nuolat tiriu stilių lentelę, kad galėčiau padaryti pakeitimus ar papildymus. Tačiau eismo sunkiose srityse CSS failo redagavimas yra absoliutus geriausias būdas.

Laikykite juos plonomis

Naudodami daugelį trumpų kodų, galimų CSS3, galite sutaupyti daug laiko. HTML elementų redagavimas taps daug lengviau, nes suprasite šį laiko taupymo lingą. Be to, jūsų kodas bus aiškesnis ir lengviau apžiūrimas.

Vienintelis trūkumas yra tai, kad ne visos naršyklės visiškai palaiko šias savybes. Yra daugybė esamų problemų, pvz., „Internet Explorer“ ir „Netscape“. Laimei, žiniatinklis visuomet vyksta į priekį ir CSS3 populiarėja, be abejonės, pernelyg didės naršyklės suderinamumas..

RGBa spalvų skaidrumas / nepermatomumas

Naujasis RGBavalue nėra tiksliai CSS3 nuosavybė, bet alfa skaidrumas būdingas tik CSS3. Vietoj bendrų „Raudonosios žaliosios mėlynos“ vertybių, kurias jūs dabar perduodate spalvai įtraukti ketvirtą spalvų skaidrumo galimybę. Dėl šios priežasties žiniatinklio kūrėjai beveik visiškai atliekami su skaidriais PNG.

Pagrindinei sintaksei reikia vertės nuo 0 iki 255 pirmosiose trijose (3) lizdose ir 0-1,0 alfa padėtyje. Spalvų diapazonas yra konkretus, kiek kiekvieno atspalvio (RGB) matoma, kai 0 yra nieko ir 255 pilnas.

 / ** sintaksė ** / fonas: rgba (value_name, value_name, value_name, value_name, opacity_value); / ** pavyzdys ** / div fonas: rgba (255, 255, 255, 0,3);

Kryžminio naršyklės suderinamumas

Kitas turtas neskaidrumas galima naudoti tam tikromis aplinkybėmis. Tačiau tai paveiks visą HTML elementą ir vidinį turinį, o ne tik foną, kaip matėte mano pavyzdyje.

Deja, „Internet Explorer“ nepalaiko RGBa spalvų vertės. Paprastai šioms mažiau standartinėms naršyklėms turėtumėte turėti atsarginę nuosavybę, visiškai neskaidrią. Šią vertę nustatysite tokiomis pačiomis vertėmis, išskyrus 4-ą (neskaidrumą). Atrodytų kažką panašaus rgba (255, 255, 255)

Be to, „Internet Explorer“ gali būti truputį tvarkingiau tvarkoma naudojant sąlyginius parametrus. Iš tikrųjų galite patikrinti, ar naršyklė veikia IE, ir komandoje rodomas patentuotas „Microsoft CSS“ filtras. Tai parodiau toliau pateiktame pavyzdyje (atkreipkite dėmesį, kad tai būtų rodoma kažkur HTML faile):

CSS3 pasienio spindulys

Aš perskaičiau keletą painių forumo temų apie suapvalintų sienų su CSS3 kūrimu - ne tiek daug, kaip tai padaryta, bet ir su blyškiu naršyklės palaikymu, žiniatinklio kūrėjai koduoja, kad paprasčiausias kodas, kuriuo būtų galima nukristi ir veiktų taip, kaip tikėtasi.

 / ** sintaksė ** / sienos spindulys: viršutiniame kairiajame viršutiniame dešiniajame apatiniame dešiniajame apačioje;

The pasienio spindulys nuosavybė turi panašią sintaksę, kad būtų sukurta standartinė riba, išskyrus tokį atvejį, kai nukreipiame langelio kampus. Ši savybė iš tikrųjų priims 1–4 reikšmes, o kiekviena jų nukreipia į kitą kampų sąranką.

1 reikšmė: Visi keturi kampai yra suapvalinti iki tos pačios vertės
2 reikšmės: Pirmoji vertė taikoma viršuje kairėje ir apačioje dešinėje o antroji vertė pasiekiama viršutinis dešinysis ir apačioje kairėje
3 reikšmės: Pirma taikoma viršuje kairėje kampas, antrasis yra abu apačioje kairėje & viršutinis dešinysis o trečioji ir galutinė vertė yra taikoma apačioje dešinėje
4 reikšmės: Visos keturios vertės nukreipiamos į kampus tokia tvarka: viršutiniame kairiajame, viršutiniame dešiniajame, apatiniame dešiniajame, apatiniame kairiajame kampe

 / ** pavyzdys ** / div pasienio spindulys: 4px 4px 8px 4px;  div pasienio spindulys: 4px 4px 8px;

Taigi pirmiau pateiktame kode mes naudojame pasienio spindulys taikyti 4px suapvalintą efektą viskas, išskyrus apačioje dešinėje pasienio kreivę. Jei pastebėjote, abu šie kodai iš tikrųjų taikys tą patį stiliaus efektą.

Kryžminio naršyklės suderinamumas

Dabar pagrindinė problema yra ta pasienio spindulys yra palaikoma tik keliose naršyklėse. „Internet Explorer 9“ neseniai pridėjo didelę paramą ir „Opera“ taip pat tai padarys. Tačiau net ir Opera sukūrė savo turtą -o-pasienio spindulys nukreipti į konkrečią naršyklės variklį. Be to -moz-border-spindulys palaiko Firefox / Gecko programinė įranga ir -webkit-border-spindulys „Google Chrome“ / „Safari“.

Toliau pateiktas kodas yra mano kaulų šablono pavyzdys, leidžiantis suapvalinti kampus su didžiausia pasaulyje naršyklės pagalba.

 div pasienio spindulys: 4px 4px 8px 4px; -webkit sienos spindulys: 4px 4px 8px 4px ;; -moz-border-spindulys: 4px 4px 8px 4px; -o-pasienio spindulys: 4px 4px 8px 4px;

Fancy a Drop Shadow?

Kitas tikrai nuostabus CSS3 aspektas yra palaikymas dėžė ir teksto šešėliai. Tai buvo tokia problema kūrėjams praeityje, nes foniniai vaizdai buvo vienintelis realus variantas. Ši sintaksė iš tikrųjų seka trumpesnį vaidmenį, kuris yra daug lengviau nei kitos savybės. Pradžioje sunku prisiminti tinkamą pagrindinių vertybių tvarką - bet kuo daugiau praktikos, kurią lengviau padaryti.

Deja, „Internet Explorer“ dar kartą yra keista. Kiekviena kita pagrindinė naršyklė, įskaitant „Firefox“, „Google Chrome“, „Safari“ ir „Opera“, visiškai palaiko teksto šešėlis nuosavybė. Kūrėjai bandė sukurti savo IE palaikymą, tačiau vis dar labai riboja. Pagrindinė sintaksė parašyta taip:

 / ** sintaksė ** / teksto šešėlis: x-offset y-offset-spindulio spalva; / ** pavyzdys ** / div text-shadow: 2px 2px 1px # 111;

„X“ ir „Y“ poslinkiai nurodo naršyklei, kiek toli ir žemiau šešėlis turėtų pasirodyti. Galite naudoti neigiamas reikšmes, kad šešėlis būtų išdėstytas atitinkamai virš ir virš. Bet tai atsitinka ieškant labai nepatogu, todėl aš rekomenduoju teigiamus sveikuosius skaičius. Taip pat gali būti naudojama neryškumo spindulio vertė, kad išlygintumėte standžius kraštus, jei teksto šešėlis atrodo nenatūralus.

Ši sintaksė tiesiog išanalizuoja pagrindinį žymėjimą kurdama vieną lašų šešėlį. Labai pažangūs dizaineriai studijavo, kad netgi sukurtų keletą šešėlių vienu metu! Šį nuostabų dienoraščio įrašą nurodau nuo 2011 m. Balandžio mėn., Kuriame išsamiai aptariama teksto šešėliai. Jei turite laiko, nuvilkite turinį tik norėdami sužinoti apie pažangesnes funkcijas ir būtinai pažymėkite jį kaip būsimą nuorodą!

Kryžminio naršyklės suderinamumas

Didžiausias veiksnys, kurį mes patiriame, yra „Internet Explorer“. Vėl ir dar kartą „Microsoft“ išstūmė savo naršyklės atvaizdavimo variklį, kuris geriausiu atveju atliko sub-par. Dabar, net jei CSS3 ima valdyti teksto šešėlį, IE vis dar atsilieka. Yra puiki demo svetainė, kurioje galite rasti kodų pavyzdžius ir tradicinius CSS komentarus.

Iš esmės ieškote, ar naršyklė, kurią naudoja jūsų vartotojas, atitinka bet kurią „Internet Explorer 9“ ar žemesnę versiją. Tada naudojant MS filtrus galime taikyti šešėlį bet kuriame teksto elemente (aukščiau, mes naudojame pastraipą).

Perkėlimų palengvinimas

CSS3 perėjimas yra karščiausias turtas dizaino rinkoje nuo močiutės flapjacks! Žiniatinklio dizaineriai tokį šurmulį padarė dėl grynų CSS perėjimų, nors palaikymas daugiausia apsiriboja „Webkit“ naršyklėmis. Žinoma, galite naudoti „Mozilla“ ir „Opera“ antrines savybes. Tačiau trumpas žymėjimas tikrai žavi, ypač jei prieš bet kokią priežastį esate prieš „JavaScript“ animacijas.

Pirma, pažvelkime į originalią perėjimo turtą. Tam reikės 4 vertybių, kurias taip pat galite suskirstyti į savybes. Jie atitinka perėjimą nuosavybė(koks yra poveikis), trukmė(kiek laiko tai padaryti), laiko funkcija(greičio pokyčiai per animaciją) ir delsimas(sekundžių skaičius laukti prieš animaciją).

/ ** sintaksė ** / perėjimas: nuosavybės trukmės laiko funkcijų uždelsimas; / ** pavyzdys ** / img perėjimas-nuosavybė: neskaidrumas; perėjimo trukmė: 2s; pereinamojo laiko nustatymo funkcija: lengvumas; perėjimo delsimas: 0,5 s;

Jūs turėtumėte intuityviai suprasti daugumos šių savybių tikslą, išskyrus galimą laiko nustatymo funkciją. Nors pradžioje tai paini, ši ypatybė paprasčiausiai suaktyvina jūsų perėjimą kitaip, kad efektas prasidėtų lėčiau, baigsis lėčiau, ar kažkas panašaus.

W3 mokyklos turi laiko nustatymo funkciją doc internete, kurioje išvardijamos visos galimos vertės, kurias galite išbandyti. Nuolat atsiduriu „Google“ šiems vadovams, tačiau jie daro tokias patogias žymes.

Kryžminio naršyklės suderinamumas

Dabar leiskite atkurti visą naršyklės palaikymą. Pagal nutylėjimą pereinamasis turtas yra tik palaiko naujesnės „Safari“ versijos. Tačiau daugelis vartotojų vis dar reikalauja -žiniatinklio rinkinys prefiksas, kuris taip pat taikomas „Google Chrome“ ir panašiems atvaizdavimo varikliams. Žemiau yra a “baigtas” kodo bloko šablonas Rekomenduoju išsaugoti ir naudoti, jei jums reikia pereinamojo laikotarpio palaikymo iš daugumos žiniatinklio naršyklių.

 img perėjimas: neskaidrumas 2s lengvumas 1s; -webkit-perėjimas: neskaidrumas 2s lengvumas 1s; / * chromo, safari, pulko * / -moz-perėjimas: neskaidrumas 2s lengvumas 1s; / * mozilla + gecko * / -o-perėjimas: neskaidrumas 2s paprastumas 1s; / * opera * /

Teksto smūgio efektai

Ši savybė nėra didžiulė ir jūs nerasite daugelio interneto dizainerių. Bet galite naudoti teksto smūgis sukurti kai kuriuos tikrai tvarkingus efektus su šriftais. „Webkit“ naršyklės, pvz., „Safari“ ir „Chrome“, iki šiol yra vieninteliai tikri šio objekto šalininkai. „Opera“ ir „Firefox“ turi sunkumų pateikdami teksto objektus šiais pačiais kontūrais.

 / ** sintaksė ** / p -webkit-text-stroke: pločio spalva;  / ** pavyzdys ** / p -webkit-text-stroke: 1px # 222;

Kryžminio naršyklės suderinamumas

Jei manote, kad reikia teksto smūgio efektų, visada turėtumėte turėti atsarginę spalvą. „Mozilla“ ir „Opera“ gali gauti, tačiau „Internet Explorer“ naudotojai neturi kitų parinkčių. Deja, tai yra viena iš naujesnių CSS3 savybių, kurios tiesiog nepadėjo pakankamai paramos iš interneto naršyklės kūrėjų bendruomenės. Šį puikų internetinį įrankį, specialiai sukurtą šiems CSS3 tekstams apibūdinti, turėtumėte praleisti šiek tiek laiko.

Dėžutės dydis

Dėžutės dydžio ypatybė suteikia daugiau galimybių valdyti bet kurio bloko elemento plotį / aukštį. Pagal numatytuosius nustatymus plotis / aukštis + kraštas + paraštė + pamušalas sudaro bendrą langelio dydį. Vis dėlto naudojant turinį, naudodamiesi „box-box“, visi jūsų paminkštinimai ir paraštės į vidų išlaikyti tą patį plotį. Šiai savybei yra tik dvi reikšmės: turinio dėžutė yra numatytasis.

div plotis: 550px; paminkštinimas: 9px; dėžutės dydžio: rėmelis; / * plotis išliks 550px * /

Kaip galite įsivaizduoti, tai bus naudinga tam tikru metu savo CSS karjeros metu. Dailylentės ir paraštės gali būti tikras skausmas, o įdėjus į sienas, jūs prarandate pikselių stebėjimą.

Kryžminio naršyklės suderinamumas

Opera ir IE 8 palaiko šią naują nuosavybę pagal nutylėjimą. IE7 ir žemiau yra sujungtos su turinio dėžutės nustatymu, nebent lankytojai naudojasi „quirks“ režimu. Vieninteliai papildymai, kuriuos turėtumėte žinoti apie konkrečius „Webkit“ ir „Mozilla“ naudojamus naršyklės variklius.

div -webkit-box-sizing: pasienio dėžutė; / * „Safari“ / „Chrome“ * / -moz-box-dydis: rėmelis; / * „Firefox“ * / dėžutės dydis: rėmelis; / * Opera / IE8 + * /

Pure CSS3 stulpeliai

Stulpeliai yra šiek tiek sudėtingi su CSS3, bet gali būti atlikti minimaliu kodu. 2 ypatybės, kurias norite sutelkti, yra stulpelių skaičius ir stulpelio atotrūkis. Skaičius nurodo bendrą stulpelių, kuriuos norite taikyti, skaičių, o tarpas sukuria skirtumą tarp kiekvienos.

 div # cols column-count: 3; stulpelio tarpas: 10px;

Mano pavyzdyje matome, kad ID #cols yra naudojamas kaip konteineris. Viduje mes padalijome divą į 3 stulpelius, kurių tarpas tarp 10px. Toliau galite nustatyti stulpelio plotis kuris naudojamas bendram kiekvieno stulpelio pločiui nustatyti, užuot įtraukus kietąjį numerį.

Kryžminio naršyklės suderinamumas

Viskas prieš IE8 paprasčiausiai negalės pasinaudoti šia nuosavybe. Tačiau, kaip matėme visuose pavyzdžiuose, „Mozilla“ ir „Webkit“ siūlo savo sprendimus kelioms naršyklėms. Jei jums reikia šablono, patikrinkite mano mažo pavyzdžio kodą:

 div # šoninė juosta plotis: 210px; -moz-column-count: 3; -moz-stulpelio tarpas: 7px; -webkit-column-count: 3; -webkit-stulpelio tarpas: 7px; stulpelių skaičius: 3; stulpelio tarpas: 7px;

Pasirinktinis @ šriftas

Turite būti girdėję apie jaudulį dėl CSS3 pasirinktinių šriftų. Gerai naudojant „@ font-face“ nuosavybę galime importuoti išorinius šriftų stilius ir naudoti juos kaip ir bet kurią kitą šeimą. Sintaksė yra šiek tiek susukta, ir jūs turėsite praleisti laiką, kad jis būtų teisingas. Užblokuoti @ šrifto veidas yra naudojamas šeimos vardui apibrėžti, po to galite jį naudoti savo šrifto šeima savybės visur!

 @ šrifto-veido font-family: „MyNewFont“; src: url ('New_Font.ttf'), URL ('New_Font.eot'); / * Tik „Internet Explorer“ * /

Taigi, jūs matote aukščiau, nesu nukreipiu jokio konkretaus šrifto tipo, bet sintaksė turėtų išsiskirti. Atkreipkite dėmesį, kad „Internet Explorer“ palaiko tik .eot šrifto tipai .ttf ir .otf yra populiarios kitos naršyklės parinktys. Be to, svarbu suprasti, kad galite persiųsti šrifto URL iš tiesioginių nuorodų, ty. URL („https://www.hongkiat.com/css3/fonts/myfont.ttf“);

Su šia sąranka nėra jokios tikros tarpinės naršyklės problemos, nes visi atvaizdavimo varikliai gali išanalizuoti šiuos šriftų failų tipus. Tiesiog nepamirškite, kad IE palaikymui turite įtraukti ir eot versiją, taip pat originalą. Manau, kad W3 mokyklų straipsnyje yra svarbiausios informacijos, kurią turėtumėte patikrinti, katalogas.

Konvertavimas į miniatiūrinį CSS

Ši tema dažnai diskutuojama, nes kiekvienam projektui ji skirta kitokiam tikslui. Viena vertus, žiniatinklio kūrėjai daug laiko praleidžia rašydami savo stilių lenteles. Nėra jokio būdo šifruoti šio tipo paprastųjų tekstų duomenis ir paslėpti nuo snooping akių. Jei stengiatės išlaikyti kitus akivaizdžiai pavogiančius savo kodą, geriausia, ką galite padaryti, yra netvarkyti stilių ir pašalinti visas linijų pertraukas / tarpas.

Šis procesas gali būti pažymėtas kaip miniatiūrinis kodą. Paprastai kūrėjai parašys CSS standartiniu formatu ir po to ištrins visą tarpą prieš įkeldami į žiniatinklio serverį. Tada turite vietinę kopiją, kad galėtumėte greitai redaguoti, o taip pat pateikti mažesnę gyvo projekto versiją. Šis metodas, žinoma, gali būti naudingas siekiant sumažinti puslapių apkrovas kartu su kodo užgrobėjų laikymu.

Nuoroda, kurią aš paskelbiau aukščiau, vedantį į „Minify CSS“, turi tam tikrą siaubingą skaitymo medžiagą šia tema. Svetainėje taip pat yra naršyklės įrankis, leidžiantis pašalinti tokią tarpą ir raktas grįžta iš kodo. „CSS Compressor“ yra dar viena galimybė sportuoti paprastą sąsają, kuri veikia tiesiogiai jūsų naršyklėje. Taip pat girdėjau gerų dalykų apie „Clean CSS“, nors aš niekada nesinaudojau programa.

Susijusios nuorodos

Norėdamas, kad jūs stumtumėtės į priekį, aš teikiau šešias patogias nuorodas iš interneto. Tai apima ne tik trumpalaikį žymėjimą, bet ir naudingus vadovus bei vadovus, kuriais galima susipažinti, kai praktikuojate šį naują „CSS“ kodą.

Pradedančiųjų vadovas CSS3
CSS trumpasis vadovas
Ar tinkamai naudojate CSS3?
CSS turinys ir naršyklės suderinamumo diagrama
CSS3 + pažangusis tobulinimas = protingas dizainas
Pilnas CSS / CSS3 savybių indeksas

Išvada

Tam, kad sukurtumėte konkretų grafiką, kurį galite sekti kiekvienam projektui, užtrunka daug atsidavimo ir CSS kodo rašymo. Dauguma žiniatinklio dizainerių džiaugiasi galėdami pasiimti naujus projektus ir idėjas, todėl tikrai rasite laiko praktikuoti šiuos naudingus kodavimo patarimus. Pabandykite nukopijuoti mažą informacinį lapą savo patogumui, jei negalite rasti jokių apgaulingų lapų, arba dar blogiau, kai prarandate interneto ryšį!

Ar žinote kitų patogių CSS3 savybių ar nuorodų? Norėtume išgirsti jūsų mintis ir idėjas diskusijų komentaruose. Žiniatinklio kūrėjai siekia daugiau standartizacijos W3C sistemoje ir aišku, kad pereinamasis procesas tapo lengvesnis. CSS3 suteikia fantastišką naudą ir, jei galite valdyti trumpąjį kodavimą, tai padės išlaikyti mažą failo dydį ir neleis kopijuoti pavogti jūsų kodo.