Tarkib
- Maket
- Clearfix
- Qutini o'lchamlari
- Ko'p ustunli
- Hisob-kitoblar
- Uslub
- Shaffoflik
- Filtrlar
- Rasmni almashtirish
- Javob beruvchi video
- Funktsionallik
- Elementlarni osongina tanlash
- Yangi massivlar yaratish
- Hujjat va oyna moslamalarini tozalang
- Bu sizga yoqdimi? Buni o'qing!
Ushbu maqola birinchi marta veb-dizaynerlar va ishlab chiquvchilar uchun dunyodagi eng ko'p sotiladigan jurnal - .net jurnalining 234-sonida paydo bo'ldi.
Texnika, asosan, vazifani bajarish usulidir va oldingi ishlab chiquvchilar va dizaynerlar bo'lib, bizda juda ko'p vazifalar mavjud. Ya'ni, biz ushbu manzara qanchalik o'zgarganini tez-tez unutib qo'yamiz. 2002 yildan 2010 yilgacha bizning jamoamiz kodlar va resurslarning shishishi bilan chirigan bo'lib, ishlashga va xizmat ko'rsatishga to'sqinlik qildi. Buni bartaraf etish uchun biz "texnika" deb nomlagan bir qator maslahatlar, fokuslar va xakerlarni yaratdik. Biz hali ham vazifalarni eng samarali usulda emas, balki bajarayotgan edik.
So'nggi bir necha yil ichida 360-ni bajarish, yanada yaxshi standartlar va standartlarni hayotga tatbiq etishni ko'rdi, bu bizni hamjamiyat sifatida yangi va zamonaviy "texnika" ni rivojlantirishga imkon berdi. Ushbu yangi manzara "zamonaviy veb" hisoblanadi.
"Web 2.0" turg'un va tushunarsiz bo'lib qolgani sababli, "zamonaviy veb" ham shunday bo'ladi. Bunga vaqt bering. Ya'ni, hozircha biz ushbu atamani anglatadigan narsa haqida umumiy tushuncha mavjud bo'lgan taqdirda, uni ishlatishimiz va suiiste'mol qilishimiz mumkin.
2010 yilda HTML5 spetsifikatsiyasi tushib, butunlay yangi, yarim standartlashtirilgan veb-muhitni taqdim etdi. Opera, Firefox, Chrome va Safari kabi brauzerlar ushbu yangi to'lqinni qabul qildilar va o'z guruhlarini standartlarni joriy etish va API tadqiqotlarini yangi chegaralariga olib chiqdilar. Ushbu brauzerlarning qanchalik "bortda" ekanligi haqida ma'lumot berish uchun www.html5readiness.com ning HTML5 qo'llab-quvvatlashini o'zgartirish haqidagi tasavvurlarini tekshiring.
Internet Explorer-da qo'llab-quvvatlashning etishmasligi haqida tashvishlanmang. Biz Google Chrome Frame tufayli bu bilan kurashishimiz mumkin. Google 2010 yilda taqdim etganidan beri Internet Explorer-ni qo'llab-quvvatlash mexanizmi bo'ldi. IE-ning barcha versiyalari Chrome Frame-ga yo'naltirilishi mumkin, bu yangi foydalanuvchiga IE ichida Chrome-ning engil versiyasi bilan tanlangan veb-saytlarni taqdim etadigan plaginni yuklab olishga undaydi. Chrome Frame dasturini amalga oshirish uchun biz saytimiz boshiga quyidagi meta> yorlig'ini qo'shamiz.
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
Bu erdan biz IE foydalanuvchilariga plaginni, agar u hali o'rnatilmagan bo'lsa, JavaScript-ni yuklab olishlarini so'rashimiz mumkin:
skript turi = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
skript>
window.onload = function () {
CFInstall.check ({
rejimi: "qoplama",
boradigan joy: "http://www.yourdomain.com"
});
};
/ skript>
manzil plaginini o'rnatgandan so'ng foydalanuvchini ma'lum bir havolaga yuborish uchun o'rnatilishi mumkin. Ehtiyotkorlik bilan aytganda: Chrome Frame bizni chindan ham zamonaviy brauzerlar uchun ishlab chiqish usulini taklif qilsa ham, foydalanuvchi xohlamasa plaginni yuklab olmaslik imkoniyatiga ega ekanligini unutmasligimiz kerak. Agar ular bunday qilmasa va sizdan IE ning bir yoki boshqa turli xil versiyalarini qo'llab-quvvatlash talab etilsa, siz o'zingizning tajribangiz, o'zaro faoliyat brauzeringiz bilan nimalar bera olishingizni va nima qila olmasligingizni bilib olish uchun yana bir oz vaqt sarflashingiz kerak bo'ladi..
Ushbu kod yordamida zamonaviy veb-stekda rivojlanishi uchun ancha teng sharoitlar yaratib, biz o'z fikrlarimiz bilan bemalol oldinga siljiy olamiz. O'zingizning saytingizni to'g'ri kross-brauzerga moslashtirish uchun bir nechta brauzerga xos xakerliklarni yaratish, kesilgan rasmlaringiz bilan ishlatilishi uchun son-sanoqsiz bo'sh elementlarni yaratish yoki hatto juda ko'p yoki ortiqcha JavaScript-kodlarni yozish kerakligini eslashingiz mumkin. ishlash uchun eng oddiy funktsionallik. Bu og'riqlarning barchasi, qaysidir ma'noda, biz bugun tashvishlanayotgan muammolarimizdir. Biz hanuzgacha tartib, uslub va funksionallikka qarshi kurashish uchun ko'proq nazorat va yaxshi vositalar uchun kurashmoqdamiz, ammo etuk darajada.
Maket
Clearfix
Suzib yuruvchi element CSS 2.1-ga qayta kiritilgan, ammo hech qachon biz umid qilgan to'liq echim bo'lib chiqmagan. Eng katta muammolardan biri, pastki element suzilganda ota-ona elementlarining o'lchamlarini saqlab qolish edi. Buni hal qilish uchun clearfix texnikasi yaratildi.
Quyidagi HTMLni oling:
div>
div> ... / div>
div> ... / div>
/ div>
Ushbu texnikani Nikolas Gallager yozgan:
.clearfix: oldin,
.clearfix: keyin {
tarkib: "";
displey: jadval;
}
.clearfix: keyin {
aniq: ikkalasi ham;
}
.clearfix {
* kattalashtirish: 1;
}
Agar siz o'zingizning loyihalaringizni boshlash uchun HTML5Boilerplate-dan foydalansangiz, unda siz allaqachon Clearfix texnikasining ushbu versiyasini pishirgan bo'lasiz.
Qutini o'lchamlari
Ko'p yillar davomida ishlab chiquvchilar qaysi quti modelini amalga oshirish yanada mantiqiy bo'lganligi haqida bahslashdilar. Quirks va boshqalar Standartlar rejimi haqiqatan ham quyidagilarni anglatar edi: "elementning o'lchamlari o'rnatilgandan so'ng, chegaralar va to'ldirishlar qo'llanilganda o'zgarishi kerakmi yoki yo'qmi".
Chegaralar va to'ldirishlar element ichidagi bo'sh joyni olib qo'yishi va elementning kengligi yoki balandligiga qo'shilmasligi maqsadga muvofiqdir, deb endi keng kelishib oldilar. Bahs qutilarini o'lchamlarini keng tatbiq etilishi bilan ahamiyatsiz bo'lib qoldi. Aksincha, brauzer sizdan signallarni oladi.
Kris Koyyer va Pol Irish tomonidan ommalashgan, hamma narsani qamrab oladigan texnikani quyidagilar bilan amalga oshirish mumkin:
* {
-webkit-box-sizeing: border-box;
-moz-box-sizeing: border-box;
qutini o‘lchash: chegara qutisi;
}
CSS-da * selektordan foydalanish munozarali bo'lib, natijada ishlash qobiliyatlari xitlari tufayli. Agar veb-saytingiz / ilovangizning barcha boshqa jihatlarini optimallashtirmasangiz, bunday da'volar beparvo bo'ladi. Chegaradan foydalanib, brauzer mavjud bo'shliqlar qatoriga to'ldirish va chegaralarni qo'shadi. "Standartlar rejimi" dan qutining o'lchamlarini kontent qutisiga o'rnatish orqali foydalanish mumkin.
Ko'p ustunli
Internet yozma shakl va turdan juda ilhomlangan. Afsuski, biz pergament bosqichida qolib ketdik. Ushbu muammolarning ba'zilari uzoq vaqtdan beri kutilgan Paged-Media va CSS mintaqalari talablariga javob beradi. Ya'ni, jurnalga o'xshash tartiblarni yaratish bo'yicha birinchi qadamlar brauzerlar CSS ko'p ustunlarini amalga oshirishni boshlaganlarida amalga oshirildi. Ushbu effektni yaratish uchun kod juda sodda:
p {
-webkit-ustun-hisoblash: 2;
-moz-ustun-hisoblash: 2;
ustunlarni hisoblash: 2;
}
Siz CSS3 ko'p ustunli spetsifikatsiyasi, shuningdek, har qanday brauzer uchun qo'llab-quvvatlamaydigan JavaScript-ni qayta tiklash haqida ko'proq ma'lumotni A List Apart blogidan olishingiz mumkin.
Hisob-kitoblar
O'lchamlarni hisoblash qiyin bo'lishi mumkin. Qadimgi davrlarda bizda birlik hisob-kitoblari u yoqda tursin, birlik hisob-kitoblarini amalga oshirishning iloji yo'q edi. Hammasi kaltsiy tufayli o'zgardi. Dastlabki elementlarning kengligiga ta'sir qilmaydigan yoki qutini o'lchamiga o'xshash narsalardan foydalanmaydigan to'ldirilgan effekt yaratish: border-box; yaqin vaqtgacha faqat qo'shimcha elementlarni qo'shish orqali mumkin edi.
.padded {
margin: 0 avtomatik;
pozitsiya: nisbiy;
kengligi: -webkit-calc (100% - (20px * 2));
kengligi: -moz-kalts (100% - (20px * 2));
kengligi: kalts (100% - (20px * 2));
}
calc () .padded ning ota-onasining kengligi va belgilangan 20px to'ldirishni olib tashlagan holda, to'g'ri kenglikni hisoblashda g'amxo'rlik qiladi. Men elementimni ikkala tomoni uchun 2 ga ko'paytirdim, elementni nisbiy joylashishni va chap va o'ng chekkalarni avtomatik ravishda ishlatadigan elementni markazlashtirdim.
Uslub
Shaffoflik
Elementning to'g'ri uslubini olish har doim biz uchun CSS-da mavjud bo'lgan vositalar turiga bog'liq edi. Shaffoflik - bu 2000-yillarning o'rtalarida va o'rtalarida paydo bo'lgan birinchi qo'llab-quvvatlash variantlaridan biri.
HTML5 va ko'proq yo'naltirilgan standart harakatlar paydo bo'lishi bilan brauzerlar shaffoflik xususiyatini standart ravishda amalga oshiradilar va yangi Rang moduli spetsifikatsiyasiga binoan alfa kanallarni qo'llab-quvvatlamoqdalar. Bunga RGBA va HSLA ko'rsatmalari kiradi.
a {
rang: rgba (0,255,0,0.5);
fon: rgba (0,0,255,0.05);
chegara: rgba (255,0,0,0.5);
}
REXA yoki HSLA ranglarini HEX qiymatlarini qaerda topsangiz ishlatishingiz mumkin. Belgilangan nomlar bilan qiziqarli ranglarning kengaytirilgan ro'yxati ham mavjud, ularni spetsifikatsiyada tekshirishingiz mumkin. Elementlar o'rtasida dinamik aralashma yaratmoqchi bo'lganingizda, bular foydali bo'ladi.
Filtrlar
CSS filtrlari nihoyatda hayajonli. Uchinchi tomon plaginlariga ehtiyoj sezmasdan sahifadagi elementlarning ko'rinishini va ko'rinishini dinamik ravishda o'zgartirish qobiliyatiga ega bo'lish ajoyib va fotoshopda o'tkazadigan vaqtingizni qisqartirishga yordam beradi.
img src = "market.webp">
img {
-webkit-filtri: kul rang (100%);
}
CSS filtrlari hozirda faqat WebKit brauzerlarida qo'llab-quvvatlanmoqda, shuning uchun ulardan foydalanish qo'shma xarakterga ega bo'lishi kerak, lekin ularga bog'liq emas. Bu erda ko'proq ma'lumot oling.
Rasmni almashtirish
Matnni tasvirlar bilan almashtirish azaldan mavjud edi. Afsuski, tasvirni almashtirishning eng so'nggi va eng zamonaviy uslublarida kamchiliklar mavjud, ulardan foydalanish imkoniyati mavjud. Ammo yaqinda ikkitasi juda aqlli va o'z huquqlarida noyob bo'lganlar paydo bo'ldi. Birinchisi Skott Kellman tomonidan yozilgan:
h1 class = ’hide-text’> Mening veb-saytim logotipi / h1>
.hide-text {
matnli indent: 100%;
oq bo'shliq: nowrap;
toshib ketish: yashirin;
}
Ikkinchisini Nikolas Gallager yozgan:
.hide-text {
shrift: 0/0 a;
matn soyasi: yo'q;
rang: shaffof;
}
Javob beruvchi video
Ommaviy axborot vositalarini ta'sirchan muhitda to'g'ri miqyosga etkazish qiyin bo'lishi mumkin. Moslashuvchan dizaynga hurmat ko'rsatadigan veb-saytlar soni tobora ko'payib borayotganligi sababli, elementlarning o'lchamlari va tomonlarining nisbati bilan ishlash juda muhimdir.
O'rnatilgan video, uchinchi tomon xizmatlari tarkibni taqdim etishi sababli, tortishish uchun eng qiyin ommaviy axborot vositalaridan biri bo'ldi. Odatda YouTube embedasi quyidagicha ko'rinadi:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Iframe elementida Flash ob'ekti yoki ko'milgan element mavjud. Iframe {maxwidth: 100% kabi narsadan foydalanish; } ishlamaydi, chunki kenglik o'zgarganda ichki elementlarning o'lchamlari to'g'ri kelmaydi. Shunday qilib, biz hiyla-nayrang qilishimiz kerak.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Iframe-ni boshqa elementga o'rash bizni videoga to'g'ri javob beradigan funksiyalarni qo'shishimiz uchun boshqarishimizga imkon beradi.
.video {
pozitsiya: nisbiy;
pastki qism: 56,25%;
balandlik: 0;
toshib ketish: yashirin;
}
.video iframe,
.video ob'ekti,
.video joylashtirilgan {
pozitsiya: mutlaq;
yuqori: 0;
chapda: 0;
kengligi: 100%;
balandligi: 100%;
}
.Video plyonkasining pastki qismini o'rnatish: 56,25%; bu usul sehrdir. To'ldirishni ishlatish foizlarning ota-onaning kengligi asosida bo'lishini anglatadi; ‘56 .25% ’tomonlarning nisbati 16: 9 ni tashkil qiladi. Agar xohlasangiz, matematikani o'zingiz bajaring. 9/16 = 0,5625. 0.5625 * 100 = 56.25 (bu bizning foizimiz).
Funktsionallik
Elementlarni osongina tanlash
Bir qator JavaScript kutubxonalari (masalan, jQuery) mashhurligi bilan ECMAScript qo'mitasi va W3C standartlari ishlab chiquvchilarning asosiy funktsiyalaridan biri - yaxshi element tanloviga e'tibor qaratdilar. GetElementByID () va getElementByClassName () kabi usullar tezkor edi, ammo ishlab chiquvchilar jamoasidan keladigan selektor dvigatellari kabi moslashuvchan va mustahkam emas edi; querySelectorAll () mahalliy tanlangan usulda ba'zi bir moslashuvchanlikni taqlid qilishning standart organlari usuli edi.
var items = document.querySelectorAll ('# header .item');
querySelectorAll () bir nechta va aralash selektorlardan o'tkazilishi mumkin. Bu haqda ko'proq o'qing.
Yangi massivlar yaratish
Massiv ustida takrorlash yozish charchagan narsadir. () Ko'chadanlarni yozish va qayta yozish qiziq emas. JS 1.6 versiyasida map () usuli takrorlash va boshqasidan yangi qator yaratish uchun oson yo'lni qo'llab-quvvatlashni ta'minladi.
var people = ['Heather', 'Jeyms', 'Kari', 'Kevin'];
var welcomees = people.map (funktsiya (ism) {
return 'Hi' + name + '!';
});
Ushbu kodni ishga tushirish, agar biz console.log (kutib oladigan) bo'lsak, kutib olishning yangi qatori ['Hi Heather!', 'Hi James!', 'Hi Kari!', 'Hi Kevin!' ].
Hujjat va oyna moslamalarini tozalang
Uchinchi tomonning JavaScript kutubxonalari asl hujjat va oyna ob'ektlari bilan aralashishga moyil. Bu boshqa uchinchi tomon kutubxonalari va ularni ishlab chiquvchi uchun muammo bo'lishi mumkin. Ikkala tomon sifatida ikkala ob'ektning yangi nusxasini yaratish orqali ularning toza versiyasi bilan ishlashingizga ishonch hosil qiling. Buning eng yaxshi usuli - iframe elementini yaratish, uni DOM-ga qo'shish va ushbu ob'ektlarning yangi nusxalarini saqlash.
var iframe = document.createElement ('iframe');
iframe.style.display = "yo'q";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Veb-stekda katta yaxshilanishlar bo'lgan bo'lsa-da, loyihamizning tartibi, uslubi va funktsional imkoniyatlari oldida turgan muammolarni hal qilish uchun texnologik to'plamimizni takomillashtirish va takomillashtirishni davom ettirish hali ham juda muhimdir. Yaxshi o'sish ekotizimini saqlab qolish uchun biz standart organlar va brauzer sotuvchilarni yangi texnik xususiyatlar va innovatsion funktsiyalarni amalga oshirishda davom etishni rag'batlantirishimiz kerak. Ko'proq tushuncha, kamroq hack.
Darsi Klark mukofotga sazovor bo'lgan ishlab chiquvchi, WordPress mavzusi Themify va kundalik bitimlarni yig'uvchi DealPage asoschilaridan biri va jQuery Team a'zosi. U Polar Mobile-da UX-ning katta ishlab chiqaruvchisi sifatida ishlaydi.
Bu sizga yoqdimi? Buni o'qing!
- Ilovani qanday yaratish kerak
- Eng yaxshi bepul shriftlarni yuklab oling
- Har bir ijodkorda bo'lishi kerak bo'lgan bepul fotoshop cho'tkalari
- Illustrator qo'llanmalari: bugun sinab ko'rish uchun ajoyib g'oyalar!
- Doodle san'atining ajoyib namunalari
- Brilliant Wordpress o'quv qo'llanmasi tanlovi
- Dizaynerlar uchun eng yaxshi bepul veb-shriftlar
- Bepul to'qimalarni yuklab oling: yuqori aniqlikdagi va hozir foydalanishga tayyor
