Sisu
- Paigutus
- Clearfix
- Kasti suuruse määramine
- Mitmeveerulised
- Arvutused
- Stiil
- Läbipaistvus
- Filtrid
- Kujutise asendamine
- Automaatselt reageeriv video
- Funktsionaalsus
- Elementide lihtne valimine
- Uute massiivide loomine
- Puhastage dokumendi- ja aknaobjektid
- Meeldis see? Loe neid!
See artikkel ilmus esmakordselt ajakirja .net 234. numbris - maailma enimmüüdud ajakiri veebidisaineritele ja arendajatele.
Tehnika on oma olemuselt viis ülesande täitmiseks ning olles eessuunaliste arendajate ja disaineritena on meil palju ülesandeid. Sellest hoolimata unustame sageli, kui palju see maastik on muutunud. Aastatel 2002–2010 oli meie kogukond mädanenud koodi ja ressursside paisutamise tõttu, takistades jõudlust ja hooldatavust. Selle ületamiseks lõime hulga näpunäiteid, nippe ja häkke, mille nimetasime „tehnikaks“. Täitsime ikka ülesandeid, lihtsalt mitte kõige tõhusamal viisil.
360-aastastega on viimastel aastatel ellu tõusnud paremad standardid ja nende rakendamine, mis võimaldab meil kogukonnana välja töötada uuemaid ja arenenumaid tehnikaid. Seda uut maastikku peetakse nüüdisaegseks veebiks.
Kui ‘Web 2.0’ muutus soiku ja segaseks, muutub ka ‘moodne veeb’. Andke talle aega. See tähendab, et praegu võime seda terminit kasutada ja kuritarvitada, kui on olemas ühine arusaam sellest, mida see esindab.
2010. aastal jõudis HTML5 spetsifikatsioon, pakkudes täiesti uut, pooleldi standardiseeritud veebikeskkonda. Sellised brauserid nagu Opera, Firefox, Chrome ja Safari võtsid selle uue laine omaks ja viisid oma arendusmeeskonnad standardite juurutamise ja API-de uurimise uute piiride juurde. Kui soovite aimu saada, kuidas need brauserid pardal on, vaadake www.html5readiness.com HTML5 toe muutmise visualiseeringuid.
Ärge muretsege Internet Exploreri toe puudumise pärast. Saame selle vastu võidelda tänu Google Chrome Frame'ile. Alates Google'i 2010. aastal kasutuselevõtust on sellest saanud Internet Exploreri tugitoetus. Kõiki IE versioone saab sihtida Chrome Frame'iga, mis sunnib uut kasutajat IE-s alla laadima pistikprogrammi, mis muudab valitud saidid Chrome'i kerge versiooniga. Chrome Frame'i juurutamiseks lisame oma saidi head> märgendisse järgmise meta> märgendi.
meta http-equiv = "X-UA-ühilduv" content = "chrome = 1" />
Siit saame paluda IE kasutajatel pistikprogramm alla laadida, kui see pole veel installitud, JavaScripti abil:
skripti tüüp = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / skript>
skript>
window.onload = function () {
CFInstall.check ({
režiim: "ülekate",
sihtkoht: "http://www.yourdomain.com"
});
};
/ skript>
sihtkoha saab seadistada saatma kasutaja pärast pistikprogrammi installimist teatud lingile. Sõna ettevaatusega: kuigi Chrome Frame annab meile meetodi, mille abil saaksime töötada välja tõeliselt kaasaegsete brauserite jaoks, ei tohi me unustada, et kasutajal on võimalus pistikprogrammi mitte alla laadida, kui ta seda ei soovi. Kui nad seda ei tee ja te peate pakkuma IE ühe või teise erineva versiooni tuge, peate veetma veel mõnda aega, et teada saada, mida saate ja mida ei saa pakkuda oma kogemustega, brauserite vahel.
Selle koodiga, mis pakub tunduvalt võrdsemaid võimalusi areneda kaasaegses veebipakis, saame meelsasti edasi liikuda. Võib-olla mäletate, et peate oma saidi struktureeritud õige ristbrauseri loomiseks looma mitu brauserispetsiifilist häkkimist, looma lugematul hulgal tühje elemente, mida teie viilutatud piltidega kasutada, või isegi kirjutama liiga verbuse või üleliigse JavaScripti koodi, et saada lihtsaim funktsionaalsus. Kõik need valud on mõnes mõttes samad probleemid, mille pärast me täna muretseme. Me võitleme endiselt suurema kontrolli ja paremate tööriistade eest, et võidelda kujunduse, stiili ja funktsionaalsuse vastu, kuid küpsel tasandil.
Paigutus
Clearfix
Ujuv element viidi CSS 2.1-sse tagasi, kuid ei osutunud kunagi lootuks terviklahenduseks. Üks suurimaid probleeme oli vanemelemendi mõõtmete säilitamine lapseelemendi ujutamisel. Selle lahendamiseks loodi clearfix-tehnika.
Valige järgmine HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Selle tehnika kirjutas Nicolas Gallagher:
.clearfix: enne,
.clearfix: pärast {
sisu: " ";
kuva: tabel;
}
.clearfix: pärast {
selge: mõlemad;
}
.clearfix {
* suum: 1;
}
Kui kasutate HTML5Boilerplate'i oma projektide käivitamiseks, on see Clearfixi tehnika versioon juba küpsetatud.
Kasti suuruse määramine
Aastaid arutasid arendajad, millise kastimudeli rakendamine oli mõttekam. Režiim Quirks vs Standards tähendas tõepoolest: "kas elemendi mõõtmed peaksid pärast seadistamist muutuma, kui äärised ja polsterdused on rakendatud või mitte".
Nüüd on laialt levinud kokkulepe, et piiridel ja polsterdustel on mõttekam võtta elemendis olevast vabast ruumist ära ning mitte lisada elemendi laiusele ega kõrgusele. Arutelu on kastide suuruse laialdase rakendamise tõttu muutunud ebaoluliseks. Brauser võtab vastupidi asemel teilt vihjeid.
Chris Coyieri ja Paul Irishi poolt populariseeritud kõikehõlmava tehnika saab rakendada järgmiselt:
* {
-webkit-box-sizing: piirikast;
-moz-box-sizing: piirikast;
kasti suurus: piirikarp;
}
Valija * kasutamise üle CSS-is on võimalike jõudlushitite tõttu vaieldud. Sellised väited on kergemeelsed, kui te ei optimeeri oma veebisaidi / rakenduse kõiki muid aspekte hüperoptimeerimisel. Äärise kasti kasutamine paneb brauseri olemasoleva ruumi sisse lisama polstrid ja äärised. Standardrežiimi saab kasutada, määrates kasti suuruse sisukasti.
Mitmeveerulised
Veeb inspireerus suuresti kirjalikust vormist ja tüübist. Paraku jäime pärgamendi faasi kinni. Mõni neist probleemidest on jõudmas kauaoodatud Paged-Media ja CSS Regions spetsifikatsioonidega. See tähendab, et esimesed sammud ajakirja-laadse kujunduse poole tehti siis, kui brauserid hakkasid CSS-i mitmeveerulisi rakendusi tegema. Selle efekti genereerimiseks mõeldud kood on üsna lihtne:
p {
-webkit-veergude arv: 2;
-moz-veergude arv: 2;
veergude arv: 2;
}
A List Aparti ajaveebist saate lisateavet mitme veeru CSS3 spetsifikatsiooni ja JavaScripti varuvarude kohta, mida saate kasutada mis tahes brauseri jaoks ilma toeta.
Arvutused
Mõõtmete arvutamine võib olla keeruline. Vanasti ei olnud meil mingit võimalust teha mingeid ühikute arvutusi, rääkimata segatud ühikute arvutustest. See kõik on muutunud tänu calc. Polsterdatud efekti loomine, mis ei mõjuta elementide esialgset laiust ega kasuta kasti suuruse taolist: border-box; oli kuni viimase ajani võimalik ainult lisavate elementide lisamisega.
.padded {
veeris: 0 automaatne;
positsioon: sugulane;
laius: -webkit-calc (100% - (20px * 2));
laius: -moz-calc (100% - (20px * 2));
laius: arvutatud (100% - (20px * 2));
}
calc () hoolitseb korraliku laiuse arvutamise eest, võttes aluseks .padded vanema laiuse ja miinus määratletud 20px polsterduse. Korrutasin selle oma elemendi mõlemal küljel 2-ga, tsentreerides elemendi, kasutades suhtelist positsioneerimist ning vasaku ja parema veerise automaatset kasutamist.
Stiil
Läbipaistvus
Elemendi õige stiili saamine on alati sõltunud sellest, milliseid tööriistu meil CSS-is saada on olnud. Läbipaistvus on üks esimesi tugivariante, millega võiksite kokku puutuda 2000. aastate alguses ja keskel.
HTML5 ja fokusseeritumate standardipüüdluste tulekuga on brauseritel omadus läbipaistmatus standardse rakendusega ja nad pakuvad alfakanali tuge vastavalt uue värvimooduli spetsifikatsioonile. See hõlmab RGBA ja HSLA juhiseid.
a {
värvus: rgba (0,255,0,0,5);
taust: rgba (0,0255,0,05);
piir: rgba (255,0,0,0,5);
}
Võite kasutada RGBA või HSLA värve kõikjal, kust leiate HEXi väärtused. Seal on ka laiendatud nimekiri lõbusatest värvidest koos määratletud nimedega, mida saate vaadata otse spetsifikatsioonist. Need on kasulikud, kui soovite luua dünaamilise segu elementide vahel.
Filtrid
CSS-filtrid on äärmiselt põnevad. Võimalus lehe elementide välimust ja olemust dünaamiliselt muuta ilma kolmanda osapoole pistikprogrammide vajaduseta on hämmastav ja aitab oluliselt vähendada Photoshopis veedetud aega.
img src = "market.webp">
img {
-webkit-filter: halltoon (100%);
}
CSS-filtreid toetatakse praegu ainult WebKiti brauserites, nii et nende kasutamine peaks olema aditiivne, mitte sõltuv. Loe lähemalt siit.
Kujutise asendamine
Teksti asendamine piltidega on olnud pikka aega. Kahjuks on uusimate ja kõige keerukamate piltide asendamise tehnikate jaoks endiselt puudusi ligipääsetavuse osas. Kuid kaks on hiljuti päevavalgele tulnud, mis on äärmiselt nutikad ja ainulaadsed oma õiguste poolest. Esimese kirjutas Scott Kellman:
h1 class = ’hide-text’> Minu veebisaidi logo / h1>
.hide-text {
teksti taane: 100%;
tühik: nowrap;
ülevool: varjatud;
}
Teise kirjutas Nicolas Gallagher:
.hide-text {
font: 0/0 a;
teksti vari: puudub;
värv: läbipaistev;
}
Automaatselt reageeriv video
Meedia korrektseks muutmiseks reageerivas keskkonnas võib olla keeruline. Kuna üha rohkem veebisaite austavad adaptiivset kujundust, on elementide mõõtmete ja kuvasuhtega nõuetekohane käitlemine hädavajalik.
Manustatud video on olnud üks keerulisemaid meediumitüüpe, mille pärast on vaja kolmanda osapoole teenuseid sisu edastada. Tüüpiline YouTube'i manustamine näeb välja umbes selline:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Seejärel sisaldab iframe-element Flash-objekti või manustatud elementi. Kasutades midagi näiteks iframe {maxwidth: 100%; } ei tööta, kuna pesastatud elementide suurus ei muutu laiuse muutumisel korralikult. Nii et me peame natuke trikke tegema.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Iframe'i mähkimine teise elemendi sisse annab meile kontrolli, mida peame lisama videole õige reageeriva funktsionaalsuse.
.video {
positsioon: sugulane;
polsterdus: 56,25%;
kõrgus: 0;
ülevool: varjatud;
}
.video iframe,
.video objekt,
.video embed {
positsioon: absoluutne;
ülemine: 0;
vasakul: 0;
laius: 100%;
kõrgus: 100%;
}
.Video ümbrise polsterduspõhja määramine: 56,25%; on selle meetodi võlu. Polsterduse kasutamine tähendab, et kasutatud protsent põhineb vanema laiusel; ‘56 .25% ’loob kuvasuhte 16: 9. Tehke matemaatikat ise, kui soovite. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (see on meie protsent).
Funktsionaalsus
Elementide lihtne valimine
Mitmete JavaScripti teekide (näiteks jQuery) populaarsuse tõttu võtsid ECMAScripti komitee ja W3C standardid teadmiseks, et funktsionaalsuse arendajate üks põhilisi osi oli loomulikult puudulik - hea elementide valik. Sellised meetodid nagu getElementByID () ja getElementByClassName () olid kiired, kuid mitte nii paindlikud ja vastupidavad kui arendajaskonnast pärit valimismootorid; querySelectorAll () oli standardiorgani viis imiteerida osa sellest paindlikkusest natiivvalija meetodil.
var items = document.querySelectorAll (’# header .item’);
querySelectorAll () saab edastada mitu ja segavalijat. Lisateavet selle kohta.
Uute massiivide loomine
Massiivi kohal kordamine on kirjutamiseks muutunud tüütuks. () Silmuste kirjutamine ja ümberkirjutamine pole tore. JS versioonis 1.6 jõudis meetod map (), pakkudes tuge hõlpsaks kordamiseks ja teise massiivi loomiseks.
var people = [’Heather’, ’James’, ’Kari’, ’Kevin’];
var welcome = inimesed.map (funktsioon (nimi) {
tagastama ’Tere’ + nimi + ’!’;
});
Selle koodi käivitamine, kui peaksime konsooli.log (tervitab) nägema, et tervitatav, on uus massiiv [‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Kevin!’ ].
Puhastage dokumendi- ja aknaobjektid
Kolmandate osapoolte JavaScripti teegid on altid natiivsete dokumentide ja aknaobjektidega segamini ajama. See võib olla probleemiks teistele kolmandate osapoolte raamatukogudele ja ka arendajale. Kummagi osapoolena veenduge, et töötaksite mõlema objekti puhta versiooniga, luues neist uue eksemplari. Parim viis seda teha on luua iframe-element, sisestada see DOM-i ja salvestada nende objektide uued eksemplarid.
var iframe = document.createElement (’iframe’);
iframe.style.display = "pole";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Ehkki veebipaketis on tehtud suuri täiustusi, on meie tehnoloogiakomplekti jätkuv täiendamine ja täiustamine, et tulla toime meie projekti kujunduses, stiilis ja funktsionaalsusega silmitsi seisvate väljakutsetega. Hea majanduskasvu ökosüsteemi säilitamiseks peame julgustama standardiorganisatsioone ja brauserimüüjaid jätkama uute spetsifikatsioonide ja uuenduslike funktsioonide juurutamistega, jagades samal ajal oma teadmisi teiste arendajate ja disaineritega. Rohkem teadmisi, vähem häkke.
Darcy Clarke on auhinnatud arendaja, WordPressi teemaettevõtte Themify ja igapäevaste tehingute koguja DealPage kaasasutaja ning jQuery meeskonna liige. Ta töötab Polar Mobile'is vanema UX-i arendajana.
Meeldis see? Loe neid!
- Rakenduse loomine
- Laadige alla parimad tasuta fondid
- Tasuta Photoshopi harjad peavad olema igal loomingul
- Illustratori õpetused: hämmastavad ideed, mida täna proovida!
- Doodle'i kunsti suurepärased näited
- Geniaalne Wordpressi õpetuse valik
- Parimad tasuta veebifondid disaineritele
- Laadige alla tasuta tekstuurid: kõrge eraldusvõimega ja kohe kasutamiseks valmis
