ເນື້ອຫາ
- ຮູບແບບ
- Clearfix
- ຂະ ໜາດ ກ່ອງ
- ຫລາຍຖັນ
- ການຄິດໄລ່
- ແບບ
- ຄວາມໂປ່ງໃສ
- ຕົວກອງ
- ການທົດແທນຮູບພາບ
- ວິດີໂອທີ່ຮັບຜິດຊອບ
- ໜ້າ ທີ່
- ເລືອກອົງປະກອບງ່າຍໆ
- ການສ້າງອາຄານ ໃໝ່
- ເຮັດຄວາມສະອາດເອກະສານແລະວັດຖຸປ່ອງຢ້ຽມ
- ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!
ບົດຂຽນນີ້ປາກົດເປັນຄັ້ງ ທຳ ອິດໃນສະບັບທີ 234 ຂອງວາລະສານ .net - ວາລະສານທີ່ຂາຍດີທີ່ສຸດໃນໂລກ ສຳ ລັບນັກອອກແບບແລະນັກພັດທະນາເວັບ.
ເຕັກນິກ, ໃນຫຼັກຂອງມັນ, ແມ່ນວິທີການໃນການປະຕິບັດວຽກງານແລະ, ໃນຖານະເປັນນັກພັດທະນາແລະນັກອອກແບບດ້ານ ໜ້າ, ພວກເຮົາມີ ໜ້າ ວຽກຫຼາຍຢ່າງ. ທີ່ເວົ້າວ່າ, ພວກເຮົາມັກຈະລືມວ່າພູມສັນຖານນີ້ໄດ້ປ່ຽນແປງຫຼາຍປານໃດ. ແຕ່ປີ 2002 ເຖິງປີ 2010 ຊຸມຊົນຂອງພວກເຮົາໄດ້ເປື້ອນດ້ວຍລະຫັດແລະເບື່ອຫນ່າຍຊັບພະຍາກອນ, ຂັດຂວາງການປະຕິບັດງານແລະຄວາມສາມາດຮັກສາໄດ້. ເພື່ອເອົາຊະນະສິ່ງດັ່ງກ່າວ, ພວກເຮົາໄດ້ສ້າງເຄັດລັບ, ເຄັດລັບແລະແຮັກເກີ້ທີ່ພວກເຮົາເອີ້ນວ່າ ‘ເຕັກນິກ’. ພວກເຮົາຍັງປະຕິບັດ ສຳ ເລັດ ໜ້າ ທີ່, ພຽງແຕ່ບໍ່ໄດ້ຜົນທີ່ສຸດ.
ເຮັດແບບ 360, ສອງສາມປີທີ່ຜ່ານມາໄດ້ເຫັນການຈັດຕັ້ງປະຕິບັດມາດຕະຖານແລະມາດຕະຖານທີ່ດີກວ່າພາກຮຽນ spring ເຖິງຊີວິດ, ເຮັດໃຫ້ພວກເຮົາເປັນຊຸມຊົນພັດທະນາເຕັກນິກ ໃໝ່ ແລະກ້າວ ໜ້າ ກວ່າເກົ່າ. ພູມສັນຖານ ໃໝ່ ນີ້ແມ່ນສິ່ງທີ່ຖືວ່າເປັນ 'ເວບໄຊທ໌ທີ່ທັນສະ ໄໝ'.
ຍ້ອນວ່າ 'Web 2.0' ກາຍເປັນສະພາບທີ່ສັບສົນແລະສັບສົນ, ເຊັ່ນດຽວກັນກັບ 'ເວບໄຊທ໌ທີ່ທັນສະ ໄໝ'. ໃຫ້ເວລາ. ທີ່ເວົ້າວ່າ, ໃນເວລານີ້, ພວກເຮົາສາມາດ ນຳ ໃຊ້ແລະລ່ວງລະເມີດ ຄຳ ສັບໄດ້ດົນເທົ່າທີ່ຈະມີຄວາມເຂົ້າໃຈທົ່ວໄປກ່ຽວກັບສິ່ງທີ່ມັນສະແດງອອກມາ.
ໃນປີ 2010 ການ ກຳ ນົດ HTML5 ໄດ້ລົງຈອດ, ສະ ໜອງ ສະພາບແວດລ້ອມເວບໄຊທ໌ແບບເຄິ່ງທີ່ມີມາດຕະຖານ ໃໝ່. ຕົວທ່ອງເວັບເຊັ່ນ Opera, Firefox, Chrome ແລະ Safari ໄດ້ຮັບເອົາຄື້ນ ໃໝ່ ນີ້ແລະໄດ້ຊຸກຍູ້ທີມ dev ຂອງພວກເຂົາໃຫ້ມີຂໍ້ ຈຳ ກັດ ໃໝ່ ໃນການຈັດຕັ້ງປະຕິບັດມາດຕະຖານແລະການ ສຳ ຫຼວດ API. ເພື່ອໃຫ້ທ່ານມີຄວາມຄິດກ່ຽວກັບວິທີການທີ່ "ຢູ່ເທິງຕົວທ່ອງເວັບ" ເຫຼົ່ານີ້, ກວດເບິ່ງສາຍຕາຂອງ www.html5readiness.com ກ່ຽວກັບການປ່ຽນແປງການສະ ໜັບ ສະ ໜູນ HTML5.
ຢ່າກັງວົນກ່ຽວກັບການຂາດການສະ ໜັບ ສະ ໜູນ ໃນ Internet Explorer. ພວກເຮົາສາມາດຕໍ່ສູ້ຂອບໃຈນີ້ກັບ Google Chrome Frame. ນັບຕັ້ງແຕ່ Google ໄດ້ແນະ ນຳ ມັນໃນປີ 2010 ມັນໄດ້ກາຍເປັນກົນໄກການສະ ໜັບ ສະ ໜູນ ສຳ ລັບ Internet Explorer. ທຸກຮຸ່ນຂອງ IE ສາມາດຖືກເປົ້າ ໝາຍ ໃສ່ກັບ Chrome Frame, ເຊິ່ງກະຕຸ້ນຜູ້ໃຊ້ ໃໝ່ ໃຫ້ດາວໂຫລດປັthatກອິນທີ່ປ່ອຍໃຫ້ເວັບໄຊທ໌ທີ່ເລືອກເຂົ້າມາພ້ອມກັບລຸ້ນ Chrome ທີ່ມີນ້ ຳ ໜັກ ເບົາ, ພາຍໃນ IE. ເພື່ອປະຕິບັດ Chrome Frame ພວກເຮົາເພີ່ມແທັກ meta ຕໍ່ໄປນີ້ຢູ່ພາຍໃນຫົວຂອງເວັບໄຊທ໌້ຂອງພວກເຮົາ> tag.
meta http-equiv = "X-UA-ເຂົ້າກັນໄດ້" ເນື້ອຫາ = "chrome = 1" />
ຈາກບ່ອນນີ້ພວກເຮົາສາມາດກະຕຸ້ນຜູ້ໃຊ້ IE ໃຫ້ດາວໂຫລດປັ,ກອິນ, ຖ້າບໍ່ໄດ້ຕິດຕັ້ງແລ້ວ, ໂດຍໃຊ້ JavaScript:
ປະເພດ script = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
script>
window.onload = function () {
CFInstall.check ({
ຮູບແບບ: "ການຊ້ອນກັນ",
ປາຍທາງ: "http://www.yourdomain.com"
});
};
/ script>
ຈຸດ ໝາຍ ປາຍທາງສາມາດຕັ້ງໃຫ້ສົ່ງຜູ້ໃຊ້ໄປຫາລິ້ງທີ່ແນ່ນອນຫລັງຈາກຕິດຕັ້ງປັ.ກອິນ. ຄຳ ເວົ້າທີ່ລະມັດລະວັງ: ເຖິງວ່າ Chrome Frame ຈະໃຫ້ພວກເຮົາມີວິທີການພັດທະນາຢ່າງເຂັ້ມງວດ ສຳ ລັບໂປແກຼມທ່ອງເວັບທີ່ທັນສະ ໄໝ, ພວກເຮົາບໍ່ຕ້ອງລືມວ່າຜູ້ໃຊ້ມີທາງເລືອກທີ່ຈະບໍ່ດາວໂຫລດປັifກອິນຖ້າພວກເຂົາບໍ່ຕ້ອງການ. ຖ້າພວກເຂົາບໍ່, ແລະທ່ານ ຈຳ ເປັນຕ້ອງໃຫ້ການສະ ໜັບ ສະ ໜູນ ສຳ ລັບ IE ຫຼືລຸ້ນອື່ນໆທີ່ແຕກຕ່າງກັນ, ທ່ານຈະຕ້ອງໃຊ້ເວລາອີກໃນການຊອກຫາສິ່ງທີ່ທ່ານສາມາດແລະບໍ່ສາມາດຕອບສະ ໜອງ ໄດ້, ກັບປະສົບການຂອງທ່ານ, ຜ່ານ browser.
ດ້ວຍລະຫັດນີ້ໃຫ້ຂໍ້ມູນການຫຼີ້ນລະດັບທີ່ ໜ້າ ສົນໃຈຫຼາຍຂຶ້ນເຊິ່ງຈະເປັນການພັດທະນາເທິງເວັບໄຊຕ໌ທີ່ທັນສະ ໄໝ, ພວກເຮົາສາມາດກ້າວໄປຂ້າງ ໜ້າ ດ້ວຍຄວາມຄິດຂອງພວກເຮົາຢ່າງສະບາຍ. ທ່ານອາດຈະຈື່ໄດ້ວ່າຕ້ອງສ້າງ ຈຳ ນວນແຮັກເກີ້ທີ່ເຈາະຈີ້ມໃນໂປແກຼມ browser ເພື່ອໃຫ້ເວັບໄຊທ໌ຂອງທ່ານມີໂຄງສ້າງຂ້າມ browser ທີ່ຖືກຕ້ອງ, ສ້າງ ຈຳ ນວນອົງປະກອບທີ່ບໍ່ມີປະໂຫຍດທີ່ຈະໃຊ້ກັບຮູບພາບຂອງທ່ານ, ຫຼືແມ້ກະທັ້ງຂຽນລະຫັດ JavaScript ຫລາຍເກີນໄປຫລືຊ້ ຳ ອີກເພື່ອໃຫ້ໄດ້ ງ່າຍດາຍທີ່ສຸດຂອງການເຮັດວຽກທີ່ຈະເຮັດວຽກ. ຄວາມເຈັບປວດທັງ ໝົດ ນີ້, ໃນແງ່ ໜຶ່ງ, ແມ່ນບັນຫາດຽວກັນທີ່ພວກເຮົາກັງວົນໃນປະຈຸບັນ. ພວກເຮົາຍັງຕໍ່ສູ້ເພື່ອຄວບຄຸມແລະເຄື່ອງມືທີ່ດີກວ່າເກົ່າເພື່ອຕໍ່ສູ້ກັບຮູບແບບ, ຮູບແບບແລະການເຮັດວຽກແຕ່ໃນລະດັບທີ່ແກ່ແລ້ວ.
ຮູບແບບ
Clearfix
ອົງປະກອບເລື່ອນໄດ້ຖືກ ນຳ ສະ ເໜີ ຄືນໃນ CSS 2.1 ແຕ່ວ່າບໍ່ເຄີຍເປັນທາງອອກທີ່ສົມບູນແບບທີ່ພວກເຮົາຫວັງມາ. ໜຶ່ງ ໃນບັນຫາໃຫຍ່ທີ່ສຸດແມ່ນການຮັກສາຂະ ໜາດ ຂອງອົງປະກອບພໍ່ແມ່ເມື່ອອົງປະກອບຂອງເດັກຖືກເລື່ອນໄປ. ເພື່ອແກ້ໄຂບັນຫານີ້, ເຕັກນິກ clearfix ຖືກສ້າງຂື້ນ.
ເອົາ HTML ຕໍ່ໄປນີ້:
div>
div> ... / div>
div> ... / div>
/ div>
ເຕັກນິກນີ້ຖືກຂຽນໂດຍ Nicolas Gallagher:
.clearfix: ກ່ອນ,
.clearfix: ຫຼັງຈາກ {
ເນື້ອໃນ: "";
ສະແດງ: ຕາຕະລາງ;
}
.clearfix: ຫຼັງຈາກ {
ຈະແຈ້ງ: ທັງສອງ;
}
.clearfix {
* ຊູມ: 1;
}
ຖ້າທ່ານໃຊ້ HTML5Boilerplate ເພື່ອເລີ່ມຕົ້ນໂຄງການຂອງທ່ານ, ຫຼັງຈາກນັ້ນທ່ານຈະມີເຕັກນິກ clearfix ລຸ້ນນີ້ແລ້ວ.
ຂະ ໜາດ ກ່ອງ
ເປັນເວລາຫລາຍປີທີ່ນັກພັດທະນາໄດ້ໂຕ້ວາທີວ່າການຈັດຕັ້ງປະຕິບັດຕົວແບບກ່ອງໃດມີຄວາມ ໝາຍ ຫຼາຍຂື້ນ ຮູບແບບ Quirks vs ມາດຕະຖານ ໝາຍ ຄວາມວ່າ: 'ຄວນມີຂະ ໜາດ ຂອງອົງປະກອບປ່ຽນແປງ, ຫຼັງຈາກ ກຳ ນົດ, ເມື່ອມີການ ນຳ ໃຊ້ຊາຍແດນແລະແຜ່ນຮອງ, ຫຼືບໍ່'.
ປະຈຸບັນມັນໄດ້ຕົກລົງກັນຢ່າງກວ້າງຂວາງວ່າມັນມີຄວາມ ໝາຍ ຫຼາຍຂື້ນ ສຳ ລັບຊາຍແດນແລະແຜ່ນຮອງທີ່ຈະເອົາໄປຈາກພື້ນທີ່ທີ່ມີຢູ່ພາຍໃນອົງປະກອບ ໜຶ່ງ, ແລະບໍ່ເພີ່ມຄວາມກວ້າງຫລືຄວາມສູງຂອງອົງປະກອບ. ການໂຕ້ວາທີແມ່ນບໍ່ມີຄວາມກ່ຽວຂ້ອງກັບການຈັດຕັ້ງປະຕິບັດຢ່າງກວ້າງຂວາງຂອງການຊອກຫາຊ່ອງທາງ. ໂປຣແກຣມທ່ອງເວັບຈະເອົາຂໍ້ມູນຂອງມັນມາຈາກທ່ານແທນທີ່ຈະເປັນທາງກັບກັນ.
ໄດ້ຮັບຄວາມນິຍົມຈາກ Chris Coyier ແລະ Paul Irish, ເຕັກນິກທີ່ແຂງແຮງທັງ ໝົດ ສາມາດປະຕິບັດໄດ້ດ້ວຍດັ່ງຕໍ່ໄປນີ້:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ການ ນຳ ໃຊ້ຕົວເລືອກ * ໃນ CSS ໄດ້ຖືກໂຕ້ວາທີ, ຍ້ອນຜົນກະທົບທີ່ອາດເກີດຂື້ນ. ປະເພດຂອງການຮຽກຮ້ອງເຫຼົ່ານີ້ແມ່ນບໍ່ມີປະໂຫຍດຖ້າທ່ານບໍ່ໄດ້ເພີ່ມປະສິດທິພາບດ້ານອື່ນໆໃນເວັບໄຊທ໌ / ແອັບ your ຂອງທ່ານ. ການໃຊ້ box-border ຈະເຮັດໃຫ້ browser ເພີ່ມ padding ແລະຊາຍແດນພາຍໃນຊຸດທີ່ມີຢູ່. 'ຮູບແບບມາດຕະຖານ' ສາມາດ ນຳ ໃຊ້ໄດ້ໂດຍການຕັ້ງຄ່າກ່ອງຂະ ໜາດ ໃຫ້ກັບເນື້ອຫາໃນປ່ອງ.
ຫລາຍຖັນ
ເວັບໄຊຕ໌ໄດ້ຮັບການດົນໃຈຢ່າງຫຼວງຫຼາຍຈາກຮູບແບບແລະປະເພດທີ່ຂຽນ. ແຕ່ຫນ້າເສຍດາຍ, ພວກເຮົາໄດ້ຕິດຢູ່ໃນໄລຍະ parchment. ບາງບັນຫາເຫຼົ່ານີ້ແມ່ນ ກຳ ລັງຈະຖືກ ນຳ ສະ ເໜີ ໂດຍສະເພາະ Paged-Media ແລະ CSS Regions specifications ທີ່ລໍຄອຍມາດົນແລ້ວ. ສິ່ງນັ້ນກ່າວວ່າ, ບາດກ້າວ ທຳ ອິດຕໍ່ການຈັດວາງວາລະສານທີ່ຄ້າຍຄືກັບວາລະສານຫຼາຍກວ່າແມ່ນຖືກປະຕິບັດເມື່ອຕົວທ່ອງເວັບເລີ່ມປະຕິບັດ CSS ຫຼາຍຄໍ ລຳ. ລະຫັດເພື່ອສ້າງຜົນກະທົບນີ້ແມ່ນກົງໄປກົງມາ:
ໜ້າ {
-webkit-column-count: 2;
-moz-column-count: 2;
ຖັນນັບ: 2;
}
ທ່ານສາມາດຮຽນຮູ້ເພີ່ມເຕີມກ່ຽວກັບການລະບຸຫລາຍຄໍລໍາຂອງ CSS3, ພ້ອມທັງການຫຼຸດລົງຂອງ JavaScript ທີ່ທ່ານສາມາດໃຊ້ ສຳ ລັບໂປແກຼມທ່ອງເວັບໃດໆໂດຍບໍ່ໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ, ຈາກ blog ຂອງ A List Apart.
ການຄິດໄລ່
ການຄິດໄລ່ຂະ ໜາດ ສາມາດຍາກ. ກັບໄປໃນສະ ໄໝ ກ່ອນ, ພວກເຮົາບໍ່ມີທາງທີ່ຈະຄິດໄລ່ ໜ່ວຍ ໃດກໍ່ຕາມ, ບໍ່ໃຫ້ຄິດໄລ່ການຄິດໄລ່ຫົວ ໜ່ວຍ ປະສົມ. ນັ້ນແມ່ນການປ່ຽນແປງທັງ ໝົດ ຍ້ອນຂອບໃຈ. ການສ້າງກະເປົາທີ່ບໍ່ມີຜົນກະທົບຕໍ່ຄວາມກວ້າງຂອງອົງປະກອບໃນເບື້ອງຕົ້ນຫລື ນຳ ໃຊ້ບາງສິ່ງບາງຢ່າງເຊັ່ນ: ການຂະ ໜາດ ກ່ອງ: border-box; ແມ່ນ, ຈົນກ່ວາບໍ່ດົນມານີ້, ພຽງແຕ່ເປັນໄປໄດ້ໂດຍການເພີ່ມອົງປະກອບທີ່ປະກອບດ້ວຍພິເສດ.
. ເມັດ {
ຂອບ: 0 ອັດຕະໂນມັດ;
ຕຳ ແໜ່ງ: ພີ່ນ້ອງ;
width: -webkit-calc (100% - (20px * 2));
width: -moz-calc (100% - (20px * 2));
width: calc (100% - (20px * 2));
}
calc () ເບິ່ງແຍງການຄິດໄລ່ຄວາມກວ້າງທີ່ ເໝາະ ສົມໂດຍອີງໃສ່ຄວາມກວ້າງຂອງພໍ່ແມ່ .padded ແລະເຄື່ອງ ໝາຍ ລົບ 20px ທີ່ຖືກ ກຳ ນົດ. ຂ້າພະເຈົ້າໄດ້ຄູນດ້ວຍ 2 ສຳ ລັບຂ້າງຂອງອົງປະກອບຂອງຂ້າພະເຈົ້າ, ເປັນຈຸດໃຈກາງຂອງອົງປະກອບໂດຍ ນຳ ໃຊ້ ຕຳ ແໜ່ງ ທີ່ກ່ຽວຂ້ອງແລະອັດຕະໂນມັດດ້ານຊ້າຍແລະຂວາ.
ແບບ
ຄວາມໂປ່ງໃສ
ການໄດ້ຮັບຮູບແບບທີ່ຖືກຕ້ອງຂອງອົງປະກອບໃດ ໜຶ່ງ ແມ່ນຂື້ນກັບເຄື່ອງມືປະເພດຕ່າງໆທີ່ພວກເຮົາມີໃຫ້ພວກເຮົາໃນ CSS. ຄວາມໂປ່ງໃສແມ່ນ ໜຶ່ງ ໃນບັນດາຕົວປ່ຽນແປງທີ່ໃຫ້ການສະ ໜັບ ສະ ໜູນ ທຳ ອິດທີ່ທ່ານຈະ ດຳ ເນີນໃນຕົ້ນປີຫາກາງຊຸມປີ 2000.
ດ້ວຍການມາເຖິງຂອງ HTML5 ແລະຄວາມພະຍາຍາມມາດຕະຖານທີ່ເຂັ້ມຂຸ້ນກວ່າເກົ່າ, ຕົວທ່ອງເວັບມີການຈັດຕັ້ງປະຕິບັດມາດຕະຖານຂອງຄຸນລັກສະນະ opacity, ແລະໄດ້ເປີດເຜີຍການສະ ໜັບ ສະ ໜູນ ຊ່ອງທາງ alpha ຕາມການລະບຸສີ Module ໃໝ່. ນີ້ປະກອບມີ ຄຳ ແນະ ນຳ ຂອງ RGBA ແລະ HSLA.
ເປັນ {
ສີ: rgba (0,255,0,0,5);
ພື້ນຫລັງ: rgba (0,0,255,0.05);
ຊາຍແດນ: rgba (255,0,0,0,5);
}
ທ່ານສາມາດໃຊ້ສີ RGBA ຫຼື HSLA ທຸກບ່ອນທີ່ທ່ານຈະເຫັນຄຸນຄ່າຂອງ HEX. ນອກນັ້ນຍັງມີລາຍຊື່ສີສັນມ່ວນໆຕື່ມອີກພ້ອມດ້ວຍຊື່ທີ່ຖືກ ກຳ ນົດເຊິ່ງທ່ານສາມາດກວດສອບໄດ້ທັນທີໃນສະເພາະ. ສິ່ງເຫຼົ່ານີ້ມີປະໂຫຍດເມື່ອທ່ານຕ້ອງການສ້າງການຜະສົມຜະສານລະຫວ່າງອົງປະກອບຕ່າງໆ.
ຕົວກອງ
ຕົວກອງ CSS ແມ່ນ ໜ້າ ຕື່ນເຕັ້ນທີ່ສຸດ. ມີຄວາມສາມາດໃນການປ່ຽນແປງຮູບແບບແລະຄວາມຮູ້ສຶກຂອງອົງປະກອບໃນຫນ້າເວັບໂດຍບໍ່ຕ້ອງໃຊ້ plug-ins ຂອງບຸກຄົນທີສາມແມ່ນເຮັດໃຫ້ປະລາດ, ແລະຈະຊ່ວຍຫຼຸດຜ່ອນເວລາຂອງທ່ານໃນ Photoshop ຢ່າງຫຼວງຫຼາຍ.
img src = "market.webp">
img {
-webkit-filter: grayscale (100%);
}
ການກັ່ນຕອງ CSS ແມ່ນໄດ້ຮັບການສະ ໜັບ ສະ ໜູນ ໃນປະຈຸບັນນີ້ໃນໂປແກຼມທ່ອງເວັບ WebKit ເທົ່ານັ້ນສະນັ້ນການ ນຳ ໃຊ້ຂອງພວກມັນຄວນມີລັກສະນະເພີ່ມເຕີມ, ບໍ່ແມ່ນຂື້ນກັບ. ອ່ານເພີ່ມເຕີມທີ່ນີ້.
ການທົດແທນຮູບພາບ
ການປ່ຽນແທນຂໍ້ຄວາມດ້ວຍຮູບພາບແມ່ນມີມາເປັນເວລາດົນນານແລ້ວ. ແຕ່ໂຊກບໍ່ດີ, ມັນຍັງມີຂໍ້ບົກຜ່ອງ, ຄວາມສາມາດເຂົ້າເຖິງ - ສະຫລາດ, ກັບເຕັກນິກການທົດແທນຮູບພາບທີ່ລ້າສຸດແລະທັນສະ ໄໝ ທີ່ສຸດ. ແຕ່ສອງຄົນມາຮອດບໍ່ດົນມານີ້ທີ່ສະຫລາດທີ່ສຸດ, ແລະມີເອກະລັກສະເພາະໃນສິດທິຂອງຕົນເອງ. ທຳ ອິດແມ່ນຂຽນໂດຍ Scott Kellman:
h1 class = 'hide-text'> ໂລໂກ້ / h1> ເວບໄຊທ໌ຂອງຂ້ອຍ
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
ຄັ້ງທີສອງແມ່ນຂຽນໂດຍ Nicolas Gallagher:
.hide-text {
font: 0/0 ກ;
text-shadow: ບໍ່ມີ;
ສີ: ໂປ່ງໃສ;
}
ວິດີໂອທີ່ຮັບຜິດຊອບ
ການໄດ້ຮັບສື່ໃນການປັບຂະ ໜາດ ຢ່າງຖືກຕ້ອງໃນສະພາບແວດລ້ອມທີ່ຕອບຮັບສາມາດເປັນສິ່ງທ້າທາຍ. ມີຫລາຍໆເວັບໄຊທ໌ນັບຖືການອອກແບບທີ່ປັບຕົວໄດ້, ມັນ ຈຳ ເປັນທີ່ຈະຕ້ອງຈັດການກັບຂະ ໜາດ ແລະອັດຕາສ່ວນຂອງອົງປະກອບຢ່າງຖືກຕ້ອງ.
ວິດີໂອທີ່ຝັງຢູ່ນີ້ແມ່ນ ໜຶ່ງ ໃນປະເພດສື່ທີ່ທ້າທາຍຫຼາຍກວ່າເກົ່າໃນການລອກແບບເພາະວິທີການທີ່ການບໍລິການຂອງພາກສ່ວນທີສາມໃຫ້ບໍລິການເນື້ອຫາ. ການຝັງ YouTube ແບບ ທຳ ມະດາມີລັກສະນະບາງຢ່າງ:
iframe width = "640" ຄວາມສູງ = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
ອົງປະກອບ iframe ຫຼັງຈາກນັ້ນປະກອບມີວັດຖຸ Flash ຫຼືອົງປະກອບຝັງ. ການ ນຳ ໃຊ້ບາງສິ່ງບາງຢ່າງເຊັ່ນ: iframe {ສູງສຸດ: 100%; } ຈະບໍ່ເຮັດວຽກເພາະວ່າອົງປະກອບທີ່ຢູ່ໃນຮັງບໍ່ໄດ້ປັບຂະ ໜາດ ໃຫ້ຖືກຕ້ອງເມື່ອຄວາມກວ້າງຂອງການປ່ຽນແປງ. ດັ່ງນັ້ນ, ພວກເຮົາຕ້ອງໄດ້ເຮັດບາງຢ່າງທີ່ຫຼອກລວງ.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
ການຫໍ່ iframe ໃນອົງປະກອບອື່ນຈະຊ່ວຍໃຫ້ພວກເຮົາມີການຄວບຄຸມທີ່ພວກເຮົາຕ້ອງການເພີ່ມການເຮັດວຽກທີ່ຕອບສະ ໜອງ ໃຫ້ ເໝາະ ສົມກັບວິດີໂອ.
.video {
ຕຳ ແໜ່ງ: ພີ່ນ້ອງ;
padding-bottom: 56.25%;
ລະດັບຄວາມສູງ: 0;
overflow: hidden;
}
ifvideo,
ວັດຖຸວີດີໂອ,
ຝັງວີດີໂອ
ຕຳ ແໜ່ງ: ເດັດຂາດ;
ດ້ານເທິງ: 0;
ຊ້າຍ: 0;
ຄວາມກວ້າງ: 100%;
ລະດັບຄວາມສູງ: 100%;
}
ການ ກຳ ນົດພື້ນທີ່ດ້ານລຸ່ມຂອງເຄື່ອງຫໍ່ຂອງວີດີໂອ: 56,25%; ແມ່ນວິເສດໃນວິທີການນີ້. ການໃຊ້ກະເປົາ ໝາຍ ຄວາມວ່າເປີເຊັນທີ່ໃຊ້ຈະອີງໃສ່ຄວາມກວ້າງຂອງພໍ່ແມ່; '56 .25% 'ຈະສ້າງອັດຕາສ່ວນ 16: 9. ເຮັດເລກຄະນິດສາດດ້ວຍຕົວທ່ານເອງ, ຖ້າທ່ານຕ້ອງການ. 9/16 = 0.5625. 0.5625 * 100 = 56.25 (ນີ້ແມ່ນເປີເຊັນຂອງພວກເຮົາ).
ໜ້າ ທີ່
ເລືອກອົງປະກອບງ່າຍໆ
ດ້ວຍຄວາມນິຍົມຂອງຫ້ອງສະ ໝຸດ JavaScript ຈຳ ນວນ ໜຶ່ງ (jQuery, ຍົກຕົວຢ່າງ), ຄະນະ ກຳ ມະການ ECMAScript ແລະມາດຕະຖານ W3C ໄດ້ ຄຳ ນຶງເຖິງ ໜຶ່ງ ໃນຕ່ອນຫຼັກຂອງນັກພັດທະນາການເຮັດວຽກທີ່ຂາດພື້ນເມືອງ - ການເລືອກອົງປະກອບທີ່ດີ. ວິທີການຕ່າງໆເຊັ່ນ getElementByID () ແລະ getElementByClassName () ແມ່ນໄວແຕ່ບໍ່ມີຄວາມຍືດຫຍຸ່ນແລະແຂງແຮງຄືກັບເຄື່ອງຈັກຄັດເລືອກມາຈາກຊຸມຊົນນັກພັດທະນາ; querySelectorAll () ແມ່ນວິທີການຂອງຮ່າງກາຍມາດຕະຖານຂອງການຮຽນແບບບາງສ່ວນຂອງຄວາມຍືດຫຍຸ່ນນັ້ນໃນວິທີການເລືອກແບບພື້ນເມືອງ.
var items = document.querySelectorAll ('# ຫົວ .item');
querySelectorAll () ສາມາດຜ່ານການຄັດເລືອກແບບປະສົມແລະຫຼາຍແບບ. ອ່ານເພີ່ມເຕີມກ່ຽວກັບເລື່ອງນີ້.
ການສ້າງອາຄານ ໃໝ່
ຄວາມສັບສົນຫຼາຍກວ່າອາເລແມ່ນສິ່ງທີ່ ໜ້າ ເບື່ອໃນການຂຽນ. ການຂຽນແລະຂຽນຄືນ ສຳ ລັບ () ວົງຈອນບໍ່ມ່ວນ. ໃນເວີຊັນ JS 1.6 ແຜນທີ່ () ວິທີການລົງຈອດໄດ້ສະ ໜອງ ການສະ ໜັບ ສະ ໜູນ ສຳ ລັບວິທີທີ່ງ່າຍຕໍ່ການແກ້ໄຂແລະສ້າງອາຄານ ໃໝ່ ຈາກບ່ອນອື່ນ.
var ປະຊາຊົນ = ['Heather', 'James', 'Kari', 'Kevin'];
var ຍິນດີຕ້ອນຮັບ = people.map (function (ຊື່) {
ກັບຄືນ 'Hi' + ຊື່ + '!';
});
ການແລ່ນລະຫັດນີ້, ຖ້າພວກເຮົາໄດ້ console.log (ຍິນດີ), ທ່ານຈະເຫັນວ່າການຕ້ອນຮັບແມ່ນສິ່ງ ໃໝ່ໆ ['Hi Heather!', 'Hi James!', 'Hi Kari!', 'Hi Kevin!' ].
ເຮັດຄວາມສະອາດເອກະສານແລະວັດຖຸປ່ອງຢ້ຽມ
ຫ້ອງສະຫມຸດ JavaScript ຂອງບຸກຄົນທີສາມແມ່ນມັກຈະເຮັດໃຫ້ສັບສົນກັບເອກະສານພື້ນເມືອງແລະວັດຖຸປ່ອງຢ້ຽມ. ນີ້ສາມາດເປັນປັນຫາ ສຳ ລັບຫ້ອງສະຫມຸດຂອງພາກສ່ວນທີສາມອື່ນໆ, ແລະນັກພັດທະນາລວມທັງພວກມັນ. ໃນຖານະເປັນທັງສອງຝ່າຍ, ຮັບປະກັນວ່າທ່ານ ກຳ ລັງເຮັດວຽກກັບສະບັບທັງສອງຢ່າງທີ່ສະອາດໂດຍການສ້າງຕົວຢ່າງ ໃໝ່ໆ ຂອງມັນ. ວິທີທີ່ດີທີ່ສຸດໃນການເຮັດສິ່ງນີ້ແມ່ນໂດຍການສ້າງອົງປະກອບ iframe, ໃສ່ມັນເຂົ້າໃນ DOM ແລະເກັບຮັກສາຕົວຢ່າງ ໃໝ່ໆ ຂອງວັດຖຸເຫຼົ່ານັ້ນ.
var iframe = document.createElement ('iframe');
iframe.style.display = "ບໍ່ມີ";
iframe = ເອກະສານ .body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
ເຖິງວ່າຈະມີການປັບປຸງເວັບໄຊຕ໌ໃຫຍ່, ການສືບຕໍ່ຮອບດ້ານແລະເຕັກໂນໂລຢີທີ່ ເໝາະ ສົມກັບເຕັກໂນໂລຢີຂອງພວກເຮົາເພື່ອຕອບສະ ໜອງ ກັບສິ່ງທ້າທາຍຕ່າງໆທີ່ພວກເຮົາປະເຊີນຢູ່ພາຍໃນແຜນຜັງ, ຮູບແບບແລະການເຮັດວຽກຂອງໂຄງການແມ່ນຍັງມີຄວາມ ສຳ ຄັນຫຼາຍ. ເພື່ອຮັກສາລະບົບນິເວດການຈະເລີນເຕີບໂຕທີ່ດີພວກເຮົາຕ້ອງໄດ້ຊຸກຍູ້ອົງການມາດຕະຖານແລະຜູ້ຂາຍໂປແກຼມທ່ອງເວັບໃຫ້ສືບຕໍ່ກ້າວ ໜ້າ ດ້ວຍຂໍ້ສະເພາະແລະການປະຕິບັດຄຸນລັກສະນະ ໃໝ່ໆ ໃນຂະນະທີ່ແບ່ງປັນຄວາມຮູ້ຂອງພວກເຮົາເອງກັບນັກພັດທະນາແລະຜູ້ອອກແບບ. ຄວາມເຂົ້າໃຈຫຼາຍ, ແຮັກເກີ້ຫນ້ອຍ.
Darcy Clarke ແມ່ນຜູ້ພັດທະນາທີ່ໄດ້ຮັບລາງວັນ, ຜູ້ຮ່ວມກໍ່ຕັ້ງບໍລິສັດຫົວຂໍ້ WordPress Themify ແລະຜູ້ຮ່ວມມື Deal Deal ປະ ຈຳ ວັນ DealPage, ແລະສະມາຊິກຂອງທີມ jQuery. ລາວເຮັດວຽກຢູ່ Polar Mobile ເປັນນັກພັດທະນາ UX ຊັ້ນສູງ.
ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!
- ວິທີການສ້າງແອັບ.
- ດາວໂຫລດຕົວອັກສອນທີ່ບໍ່ເສຍຄ່າທີ່ດີທີ່ສຸດ
- Photoshop ຟຣີແປງທຸກຄວາມຄິດສ້າງສັນຕ້ອງມີ
- ບົດແນະ ນຳ ພາບປະກອບ: ແນວຄວາມຄິດທີ່ ໜ້າ ຕື່ນຕາຕື່ນໃຈທີ່ຈະລອງມື້ນີ້!
- ຕົວຢ່າງທີ່ດີຂອງສິນລະປະ doodle
- ການເລືອກໂປຼແກຼມ Wordpress Brilliant
- ຕົວອັກສອນເວັບຟຣີທີ່ດີທີ່ສຸດ ສຳ ລັບນັກອອກແບບ
- ດາວໂຫລດໂຄງສ້າງທີ່ບໍ່ເສຍຄ່າ: ຄວາມລະອຽດສູງແລະພ້ອມທີ່ຈະ ນຳ ໃຊ້ດຽວນີ້
