Nilalaman
- Layout
- Clearfix
- Pagpapalaki ng kahon
- Mga Multi-haligi
- Kalkulasyon
- Istilo
- Aninaw
- Mga filter
- Kapalit ng imahe
- Tumutugon na video
- Pag-andar
- Madaling pumili ng mga elemento
- Lumilikha ng mga bagong array
- Malinis na mga dokumento at mga bagay sa window
- Nagustuhan ito? Basahin ang mga ito!
Ang artikulong ito ay unang lumitaw sa isyu ng 234 ng .net magazine - ang pinakamabentang magazine sa buong mundo para sa mga web designer at developer.
Ang isang diskarteng, sa core nito, ay isang paraan upang maisakatuparan ang isang gawain at, pagiging mga frontend developer at taga-disenyo, marami kaming mga gawain. Sinabi nito, madalas nating nakakalimutan kung magkano ang nagbago ng tanawin na ito. Mula 2002 hanggang 2010 ang aming komunidad ay bulok ng code at resource bloat, hadlang sa pagganap at mapanatili. Upang mapagtagumpayan ito, gumawa kami ng maraming tip, trick at hack na tinawag naming 'diskarteng'. Natapos pa rin namin ang mga gawain, hindi lamang sa pinakamabisang pamamaraan.
Ang paggawa ng isang 360, sa huling ilang taon ay nakakita ng mas mahusay na mga pamantayan at pagpapatupad ng pamantayan na nabuhay, na nagbibigay-daan sa amin bilang isang pamayanan na bumuo ng mas bago at mas advanced na 'mga diskarte. Ang bagong tanawin na ito ay ang itinuturing na 'modernong web'.
Tulad ng 'Web 2.0' na naging stagnant at nakalilito, ganoon din ang 'modernong web'. Bigyan mo ng oras. Sinabi iyan, sa ngayon, maaari naming gamitin at abusuhin ang term hangga't mayroong isang karaniwang pag-unawa sa kung ano ang kinakatawan nito.
Noong 2010 nakarating ang pagtutukoy ng HTML5, na nagbibigay ng isang bagong tatak, semi-standardisadong kapaligiran sa web. Ang mga browser tulad ng Opera, Firefox, Chrome at Safari ay yumakap sa bagong alon na ito at itinulak ang kanilang mga pangkat ng dev sa mga bagong limitasyon ng mga pamantayan sa pagpapatupad at pagsaliksik sa API. Upang mabigyan ka ng ideya kung paano 'onboard' ang mga browser na ito, suriin ang mga visualisasyon ng www.html5readiness.com ng pagbabago ng suporta sa HTML5.
Huwag mag-alala tungkol sa kakulangan ng suporta sa Internet Explorer. Maaari naming labanan ito salamat sa Google Chrome Frame. Dahil ipinakilala ito ng Google noong 2010 naging mekanismo ng suporta para sa Internet Explorer. Ang lahat ng mga bersyon ng IE ay maaaring ma-target sa Chrome Frame, na mag-udyok sa isang bagong gumagamit na mag-download ng isang plug-in na nag-render ng mga naka-opt in na website na may isang magaan na bersyon ng Chrome, sa loob ng IE. Upang maipatupad ang Chrome Frame idaragdag namin ang sumusunod na meta> tag sa loob ng ulo ng aming site> tag.
meta http-equiv = "X-UA-Compatible" na nilalaman = "chrome = 1" />
Mula dito maaari naming i-prompt ang mga gumagamit ng IE na i-download ang plug-in, kung hindi pa naka-install, gamit ang JavaScript:
script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
script>
window.onload = function () {
CFInstall.check ({
mode: "overlay",
patutunguhan: "http://www.yourdomain.com"
});
};
/ script>
ang destinasyon ay maaaring itakda upang ipadala ang gumagamit sa isang tiyak na link pagkatapos mai-install ang plug-in. Isang salita ng pag-iingat: kahit na binibigyan kami ng Chrome Frame ng isang pamamaraan upang mabuo nang mahigpit para sa tunay na modernong mga browser, hindi namin dapat kalimutan na ang gumagamit ay may pagpipilian na hindi i-download ang plug-in kung ayaw nila. Kung hindi nila ginawa, at hinihiling kang magbigay ng suporta para sa isa o iba pang iba't ibang mga bersyon ng IE, gugugol ka ng mas maraming oras upang malaman kung ano ang maaari mong maibigay at hindi maibigay, sa iyong mga karanasan, cross-browser.
Gamit ang code na ito na nagbibigay ng isang mas higit na antas ng paglalaro ng patlang kung saan bubuo sa modernong web stack, maaari tayong umusad sa ating mga isipan nang madali. Maaari mong tandaan na lumikha ng isang bilang ng mga hack na tukoy sa browser upang maisaayos ang tamang pag-cross-browser ng iyong site, lumilikha ng hindi mabilang na bilang ng mga walang laman na elemento upang magamit sa iyong mga hiniwang imahe, o kahit na pagsusulat ng labis na pagsasalita o kalabisan na JavaScript code upang makuha ang pinakasimpleng pag-andar upang gumana. Ang lahat ng mga sakit na ito ay, sa ilang mga kahulugan, ang parehong mga problema na pinag-aalala natin ngayon. Nakikipaglaban pa rin kami para sa higit na kontrol at mas mahusay na mga tool upang labanan ang layout, istilo at pag-andar ngunit sa isang antas na mature.
Layout
Clearfix
Ang lumulutang na elemento ay ipinakilala pabalik sa CSS 2.1 ngunit hindi talaga naging kumpletong solusyon na inaasahan namin. Ang isa sa mga pinakamalaking problema ay ang pagpapanatili ng mga sukat ng isang sangkap ng magulang kapag ang isang elemento ng bata ay pinalutang. Upang matugunan ito, nilikha ang diskarteng malinaw.
Kunin ang sumusunod na HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Ang pamamaraan na ito ay isinulat ni Nicolas Gallagher:
.clearfix: dati,
.clearfix: pagkatapos ng {
nilalaman: "";
ipakita: mesa;
}
.clearfix: pagkatapos ng {
malinaw: pareho;
}
.clearfix {
* zoom: 1;
}
Kung gumagamit ka ng HTML5Boilerplate upang simulan ang iyong mga proyekto, magkakaroon ka na ng bersyon na ito ng diskarteng malinaw na lutong.
Pagpapalaki ng kahon
Sa loob ng maraming taon pinagtatalunan ng mga developer kung aling pagpapatupad ng modelo ng kahon ang may kahulugan. Talagang sinadya ng mode ng Quirks vs Standards: 'dapat bang magbago ang mga sukat ng isang elemento, pagkatapos na maitakda, kapag inilapat ang mga hangganan at padding, o hindi'.
Malawak na napagkasunduan ngayon na mas may katuturan para sa mga hangganan at padding na alisin ang magagamit na puwang sa loob ng isang elemento, at hindi idaragdag sa lapad o taas ng elemento. Ang debate ay ginawang walang katuturan sa laganap na pagpapatupad ng box-sizing. Kukuha ng browser ang mga pahiwatig nito sa iyo sa halip na kabaligtaran.
Na-populize ni Chris Coyier at Paul Irish, ang isang malawak na pamamaraan na maaaring maipatupad sa mga sumusunod:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Ang debate sa paggamit ng * selector sa CSS ay pinagtatalunan, dahil sa mga potensyal na hit sa pagganap. Ang mga ganitong uri ng mga paghahabol ay walang halaga kung hindi ka nag-e-optimize ng lahat ng iba pang mga aspeto ng iyong website / app. Ang paggamit ng border-box ay gagawing magdagdag ng browser ng browser at mga hangganan sa loob ng magagamit na hanay ng puwang. Maaaring magamit ang 'Standards Mode' sa pamamagitan ng pagtatakda ng box-siizing sa content-box.
Mga Multi-haligi
Ang web ay lubos na inspirasyon ng nakasulat na form at uri. Sa kasamaang palad, natigil kami sa yugto ng pergamino. Ang ilan sa mga isyung ito ay napupunta sa isang ulo na may pinakahihintay na mga pagtutukoy ng Paged-Media at CSS Regions. Sinabi nito, ang mga unang hakbang patungo sa mas maraming mga layout na tulad ng magazine ay kinuha nang magsimulang ipatupad ng mga browser ang maraming mga haligi ng CSS. Ang code upang mabuo ang epektong ito ay prangka:
p {
-webkit-haligi-bilang: 2;
-moz-haligi-bilang: 2;
bilang ng haligi: 2;
}
Maaari kang matuto nang higit pa tungkol sa pagtutukoy ng maraming haligi ng CSS3, pati na rin ang isang fallback ng JavaScript na maaari mong gamitin para sa anumang browser nang walang suporta, mula sa blog ng Isang List Apart.
Kalkulasyon
Ang pagkalkula ng mga sukat ay maaaring maging mahirap. Noong unang panahon, wala kaming paraan upang gumawa ng anumang uri ng mga kalkulasyon ng yunit, pabayaan ang magkahalong mga kalkulasyon ng yunit. Ang lahat ng iyon ay nagbago salamat sa calc. Lumilikha ng isang padded na epekto na hindi nakakaapekto sa paunang mga elemento ng lapad o gumamit ng isang bagay tulad ng box-sizing: border-box; ay, hanggang kamakailan lamang, posible lamang sa pamamagitan ng pagdaragdag ng labis na naglalaman ng mga elemento.
.padded {
margin: 0 auto;
posisyon: kamag-anak;
lapad: -webkit-calc (100% - (20px * 2));
lapad: -moz-calcul (100% - (20px * 2));
lapad: calc (100% - (20px * 2));
}
Ang calcul () ay nangangalaga sa tamang pagkalkula ng lapad batay sa .padded's parent width at minus ng tinukoy na 20px padding. Pinarami ko ito ng 2 para sa magkabilang panig ng aking elemento, na nakasentro sa elemento na gumagamit ng kamag-anak na pagpoposisyon at isang kaliwa at kanang margin auto.
Istilo
Aninaw
Ang pagkuha ng tamang istilo ng isang elemento ay palaging nakasalalay sa uri ng mga tool na magagamit namin sa amin sa CSS. Ang transparency ay isa sa mga unang pagkakaiba-iba ng suporta na nais mong makatagpo sa simula hanggang kalagitnaan ng 2000.
Sa pag-usbong ng HTML5 at higit na nakatuon na mga pagsisikap sa pamantayan, ang mga browser ay may pamantayang pagpapatupad ng pagmamay-ari ng opacity, at inilantad ang suporta sa alpha channel ayon sa bagong detalye ng Module ng Kulay. Kasama rito ang mga alituntunin ng RGBA at HSLA.
isang {
kulay: rgba (0,255,0,0.5);
background: rgba (0,0,255,0.05);
hangganan: rgba (255,0,0,0.5);
}
Maaari mong gamitin ang mga kulay ng RGBA o HSLA saan ka man makakita ng mga halagang HEX. Mayroon ding isang pinalawig na listahan ng mga nakakatuwang kulay na may tinukoy na mga pangalan na maaari mong suriin mismo sa detalye. Ang mga ito ay madaling gamitin kapag nais mong lumikha ng isang pabagu-bagong timpla sa pagitan ng mga elemento.
Mga filter
Ang mga filter ng CSS ay lubos na kapanapanabik. Ang pagkakaroon ng kakayahang pabago-bagong baguhin ang hitsura at pakiramdam ng mga elemento sa isang pahina nang hindi nangangailangan ng mga third party na plug-in ay kamangha-mangha, at makakatulong upang lubos na mabawasan ang iyong oras na ginugol sa Photoshop.
img src = "market.webp">
img {
-webkit-filter: grayscale (100%);
}
Kasalukuyang sinusuportahan lamang ang mga filter ng CSS sa mga browser ng WebKit kaya't ang paggamit nito ay dapat na may katangian na additive, hindi umaasa. Magbasa pa dito.
Kapalit ng imahe
Ang pagpapalit ng teksto ng mga imahe ay matagal na. Sa kasamaang palad, may mga drawbacks pa rin, madaling ma-access, sa pinakabago at pinaka sopistikadong mga diskarte sa pagpapalit ng imahe. Ngunit dalawa ang kamakailan-lamang na napakita na napakatalino, at natatangi sa kanilang sariling mga karapatan. Ang una ay isinulat ni Scott Kellman:
h1 class = 'hide-text'> Logo ng Aking Website / h1>
.tago-text {
indent sa teksto: 100%;
puting-puwang: nowrap;
overflow: nakatago;
}
Ang pangalawa ay isinulat ni Nicolas Gallagher:
.tago-text {
font: 0/0 a;
text-shadow: wala;
kulay: transparent;
}
Tumutugon na video
Ang pagkuha ng media sa tamang sukat sa isang tumutugon na kapaligiran ay maaaring maging isang mahirap. Sa higit pa at maraming mga website na nirerespeto ang agpang disenyo, mahalaga na mahawakan nang maayos ang mga sukat ng elemento at aspeto ng aspeto.
Ang naka-embed na video ay naging isa sa mga mas mapaghamong uri ng media na nakikipaglaban dahil sa paraan kung saan ihinahatid ng mga serbisyo ng third-party ang nilalaman. Ang isang karaniwang pag-embed ng YouTube ay ganito ang hitsura:
iframe width = "640" taas = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Naglalaman ang elemento ng iframe ng isang Flash na bagay o naka-embed na elemento. Paggamit ng isang bagay tulad ng iframe {maxwidth: 100%; } ay hindi gagana sapagkat ang mga naka-salim na elemento ay hindi nagbabago nang maayos nang nagbago ang lapad. Kaya, kailangan nating gumawa ng isang panloloko.
div>
iframe width = "640" taas = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Ang pagbabalot ng iframe sa isa pang elemento ay magbibigay sa amin ng kontrol na kailangan namin upang magdagdag ng wastong tumutugon na pag-andar sa video.
.video {
posisyon: kamag-anak;
padding-ilalim: 56.25%;
taas: 0;
overflow: nakatago;
}
.video iframe,
.video object,
.video embed {
posisyon: ganap;
itaas: 0;
kaliwa: 0;
lapad: 100%;
taas: 100%;
}
Itinatakda ang padding -video ng balot sa ibaba: 56.25%; ay ang mahika sa pamamaraang ito. Ang paggamit ng padding ay nangangahulugang ang porsyento na ginamit ay batay sa lapad ng magulang; Ang '56 .25% 'ay lilikha ng isang 16: 9 na ratio ng aspeto. Gawin ang matematika sa iyong sarili, kung nais mo. 9/16 = 0.5625. 0.5625 * 100 = 56.25 (ito ang aming porsyento).
Pag-andar
Madaling pumili ng mga elemento
Sa katanyagan ng isang bilang ng mga library ng JavaScript (halimbawa, jQuery), ang komite ng ECMAScript at mga pamantayan ng W3C ay naitala ang isa sa mga pangunahing piraso ng mga tagabuo ng pagpapaandar na kulang sa katutubong - mahusay na pagpili ng elemento. Ang mga pamamaraan tulad ng getElementByID () at getElementByClassName () ay mabilis ngunit hindi gaanong kakayahang umangkop at matatag tulad ng mga selector engine na nagmumula sa komunidad ng developer; Ang querySelectorAll () ay ang pamantayan ng paraan ng katawan ng paggaya ng ilan sa kakayahang umangkop sa isang katutubong pamamaraan ng pagpili.
var item = document.querySelectorAll (’# header .item’);
Ang querySelectorAll () ay maaaring maipasa sa maraming at magkahalong mga selectors. Magbasa nang higit pa tungkol dito.
Lumilikha ng mga bagong array
Ang pagtutuon sa isang array ay isang bagay na naging nakakapagod magsulat. Ang pagsulat at pagsusulat muli para sa () mga loop ay hindi masaya. Sa bersyon ng JS 1.6 ang map () na pamamaraan na nakalapag na nagbibigay ng suporta para sa isang madaling paraan upang umulit at lumikha ng isang bagong hanay mula sa iba pa.
var people = ['Heather', 'James', 'Kari', 'Kevin'];
tinatanggap ng var = people.map (pagpapaandar (pangalan) {
ibalik ang 'Hi' + pangalan + '!';
});
Ang pagpapatakbo ng code na ito, kung gagamitin namin ang console.log (maligayang pagdating) na makikita mo ang pagtanggap ay isang bagong hanay ['Hi Heather!', 'Hi James!', 'Hi Kari!', 'Hi Kevin!' ]
Malinis na mga dokumento at mga bagay sa window
Ang mga library ng third party na JavaScript ay madaling kapitan ng gulo sa katutubong dokumento at mga window object. Maaari itong maging isang problema para sa iba pang mga aklatan ng third party, at kasama ng developer ang mga ito. Bilang alinmang partido, tiyaking nagtatrabaho ka sa isang malinis na bersyon ng parehong mga bagay sa pamamagitan ng paglikha ng isang bagong halimbawa ng mga ito. Ang pinakamahusay na paraan upang gawin ito ay sa pamamagitan ng paglikha ng isang elemento ng iframe, ipasok ito sa DOM at itago ang mga bagong pagkakataon ng mga bagay na iyon.
var iframe = document.createElement ('iframe');
iframe.style.display = "none";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Kahit na mayroong maraming mga pagpapabuti sa web stack, patuloy na pag-ikot at sopistikado ang aming suite ng teknolohiya upang matugunan ang mga hamon na kinakaharap namin sa loob ng layout ng aming proyekto, estilo at pagpapaandar ay napakahalaga pa rin. Upang mapanatili ang isang mahusay na ecosystem ng paglago dapat nating hikayatin ang mga pamantayan ng mga katawan at mga vendor ng browser na magpatuloy sa pag-unlad sa mga bagong pagtutukoy at makabagong pagpapatupad ng tampok habang ibinabahagi ang aming sariling kaalaman sa mga kapwa developer at taga-disenyo. Higit pang mga pananaw, mas kaunting mga pag-hack.
Si Darcy Clarke ay isang nagwaging award-developer, co-founder ng temang tema ng WordPress na Themify at pang-araw-araw na deal na pinagsama-sama ng deal sa DealPage, at isang kasapi ng jQuery Team. Nagtatrabaho siya sa Polar Mobile bilang isang senior UX developer.
Nagustuhan ito? Basahin ang mga ito!
- Paano bumuo ng isang app
- I-download ang pinakamahusay na libreng mga font
- Libreng Photoshop brushes bawat malikhaing dapat magkaroon
- Mga tutorial ng ilustrador: kamangha-manghang mga ideya upang subukan ngayon!
- Mahusay na halimbawa ng doodle art
- Napili ng napili ng tutorial ng Wordpress
- Ang pinakamahusay na libreng mga web font para sa mga tagadisenyo
- Mag-download ng mga libreng texture: mataas na resolusyon at handa nang gamitin ngayon
