ຄູ່ມືແນະ ນຳ ຂອງການອອກແບບເວັບຕອບສະ ໜອງ

ເນື້ອຫາ

• ຮູບພາບທີ່ຮັບຜິດຊອບ
• ການປະຕິບັດ
• ການໂຫຼດທີ່ມີເງື່ອນໄຂແລະຂີ້ກຽດ
• ປະເພດການຕອບຮັບ
• ການສອບຖາມສື່ໃນ JavaScript
• ການປັບປຸງແບບກ້າວ ໜ້າ
• ຮູບແບບ
• ຮູບແບບຕາຂ່າຍໄຟຟ້າ CSS
• ສຸດທ້າຍ

ການອອກແບບເວັບທີ່ຕອບສະ ໜອງ ແມ່ນງ່າຍດາຍທີ່ສຸດ. ເລືອກໃຊ້ຕາຂ່າຍໄຟຟ້າທີ່ມີຄວາມຍືດຫຍຸ່ນ ສຳ ລັບການຈັດວາງ, ໃຊ້ສື່ທີ່ມີຄວາມຍືດຫຍຸ່ນ (ຮູບພາບ, ວີດີໂອ, iframes) ແລະ ນຳ ໃຊ້ແບບສອບຖາມສື່ເພື່ອປັບປຸງການວັດແທກເຫຼົ່ານີ້ເພື່ອຈັດແຈງເນື້ອຫາທີ່ດີທີ່ສຸດໃນມຸມມອງໃດ ໜຶ່ງ. ໃນການປະຕິບັດຕົວຈິງພວກເຮົາໄດ້ຮຽນຮູ້ວ່າມັນບໍ່ແມ່ນເລື່ອງງ່າຍແທ້ໆ. ບັນຫາເລັກໆນ້ອຍໆທີ່ເກີດຂື້ນໃນລະຫວ່າງທຸກໆໂຄງການເຮັດໃຫ້ພວກເຮົາຂູດຫົວຂອງພວກເຮົາ, ແລະບາງຄັ້ງກໍ່ມີການແກະສະຫຼັກເລັບຢູ່ເທິງໂຕະຂອງພວກເຮົາ.

ນັບຕັ້ງແຕ່ຂ້າພະເຈົ້າເລີ່ມຕົ້ນຈັດການປະກາດຂ່າວກ່ຽວກັບການອອກແບບ Responsive Design Weekly, ຂ້າພະເຈົ້າມີຄວາມໂຊກດີພໍທີ່ຈະເວົ້າກັບສະມາຊິກຂອງຊຸມຊົນຫຼາຍຄົນແລະໄດ້ຍິນປະສົບການຂອງພວກເຂົາ. ຂ້າພະເຈົ້າຢາກຊອກຮູ້ສິ່ງທີ່ຊຸມຊົນຢາກຮຽນແທ້, ສະນັ້ນຂ້າພະເຈົ້າໄດ້ສົ່ງບົດ ສຳ ຫຼວດໃຫ້ຜູ້ອ່ານ. ນີ້ແມ່ນຜົນໄດ້ຮັບດ້ານເທີງ:

1. ຮູບພາບທີ່ຮັບຜິດຊອບ
2. ການປັບປຸງການປະຕິບັດງານ
3. ປະເພດການຕອບຮັບ
4. ການສອບຖາມສື່ໃນ JavaScript
5. ຄວາມຄືບ ໜ້າ ການປັບປຸງ
6. ຮູບແບບ

ດ້ວຍຫົວຂໍ້ເຫຼົ່ານັ້ນທີ່ຢູ່ໃນໃຈ, ຂ້າພະເຈົ້າໄດ້ຕິດຕັ້ງໂປແກຼມ podc ​​asts ເພື່ອຖາມບາງຫົວ ໜ້າ ອຸດສາຫະ ກຳ ຂອງພວກເຮົາ ສຳ ລັບຄວາມຄິດຂອງພວກເຂົາ. ໃນການຕອບສະ ໜອງ ຂອງພວກເຂົາ, ຈຸດ ໜຶ່ງ ແມ່ນເປັນເອກະພາບ: ສຸມໃສ່ການສ້າງພື້ນຖານໃຫ້ຖືກຕ້ອງກ່ອນທີ່ທ່ານຈະເລີ່ມກັງວົນກ່ຽວກັບເຕັກນິກທີ່ ໜ້າ ຕື່ນເຕັ້ນແລະກ້າວ ໜ້າ. ໂດຍການ ນຳ ສິ່ງຕ່າງໆກັບພື້ນຖານ, ພວກເຮົາສາມາດສ້າງອິນເຕີເຟດທີ່ເຂັ້ມແຂງ ສຳ ລັບທຸກຄົນ, ການຈັດວາງຄຸນລັກສະນະຕ່າງໆເມື່ອອຸປະກອນຫຼືສະພາບຂອງຜູ້ໃຊ້ອະນຸຍາດ.

ຂ້ອຍໄດ້ຍິນເຈົ້າຖາມ. ຂ້າພະເຈົ້າຄິດວ່າ Stephen Hay ສະຫຼຸບມັນດີທີ່ສຸດເມື່ອລາວເວົ້າວ່າ: 'ເຕັກນິກ RWD ສຸດຍອດແມ່ນເລີ່ມຕົ້ນໂດຍບໍ່ໃຊ້ເຕັກນິກ RWD ຂັ້ນສູງໃດໆ. ເລີ່ມຕົ້ນດ້ວຍເນື້ອຫາທີ່ມີໂຄງສ້າງແລະສ້າງວິທີການຂອງທ່ານ. ພຽງແຕ່ເພີ່ມຈຸດເດັ່ນໃນເວລາທີ່ການອອກແບບແຕກແຍກແລະເນື້ອຫາລະບຸມັນແລະ ... ນັ້ນແມ່ນມັນ. '

ໃນບົດຂຽນນີ້, ຂ້າພະເຈົ້າຈະເລີ່ມຕົ້ນດ້ວຍພື້ນຖານແລະເພີ່ມຂັ້ນຕອນຂອງຄວາມສັບສົນຕ່າງໆຕາມທີ່ສະຖານະການອະນຸຍາດ, ສ້າງຂຶ້ນກັບເຕັກນິກທີ່ກ້າວ ໜ້າ ເຫຼົ່ານັ້ນ. ໃຫ້ເລີ່ມຕົ້ນ.

ຮູບພາບທີ່ຮັບຜິດຊອບ

ສື່ນ້ ຳ ແມ່ນສ່ວນ ໜຶ່ງ ທີ່ ສຳ ຄັນຂອງ RWD ເມື່ອມັນຖືກ ກຳ ນົດໂດຍ Ethan Marcotte. ຄວາມກວ້າງ: 100%; , ຄວາມກວ້າງສູງສຸດ: 100%; ຍັງເຮັດວຽກຢູ່ໃນທຸກວັນນີ້, ແຕ່ພູມສັນຖານພາບທີ່ຕອບສະ ໜອງ ໄດ້ກາຍເປັນຄວາມສັບສົນຫຼາຍ. ດ້ວຍການເພີ່ມ ຈຳ ນວນຂະ ໜາດ ໜ້າ ຈໍ, ຄວາມ ໜາ ແໜ້ນ ຂອງ pixels ແລະອຸປະກອນຕ່າງໆເພື່ອຮອງຮັບພວກເຮົາຕ້ອງການການຄວບຄຸມຫຼາຍຂື້ນ.

ສາມຄວາມກັງວົນຕົ້ນຕໍໄດ້ຖືກ ກຳ ນົດໂດຍກຸ່ມຕອບສະ ໜອງ ຮູບພາບຊຸມຊົນ (RICG):

1. ຂະ ໜາດ ກິໂລໄບຂອງຮູບທີ່ພວກເຮົາ ກຳ ລັງສົ່ງຜ່ານສາຍ
2. ຂະ ໜາດ ຂອງຮູບພາບທີ່ພວກເຮົາ ກຳ ລັງສົ່ງໄປຫາອຸປະກອນ DPI ສູງ
3. ຮູບພາບການປູກພືດໃນຮູບແບບຂອງທິດທາງສິນລະປະ ສຳ ລັບຂະ ໜາດ ສະເພາະຂອງມຸມມອງ

Yoav Weiss, ໂດຍການຊ່ວຍເຫຼືອຈາກ Indiegogo, ໄດ້ເຮັດວຽກສ່ວນໃຫຍ່ໃນການຈັດຕັ້ງປະຕິບັດ Blink - ຄວາມຍາວຂອງສ້ອມຂອງ Google ຂອງ WebKit, ແລະໃນເວລາທີ່ທ່ານ ກຳ ລັງອ່ານເລື່ອງນີ້ມັນຈະຖືກສົ່ງໄປໃນ Chrome ແລະ Firefox. Safari 8 ຈະສົ່ງອອກ srcset, ເຖິງຢ່າງໃດກໍ່ຕາມຄຸນລັກສະນະຂະ ໜາດ ແມ່ນພຽງແຕ່ໃນການກໍ່ສ້າງໃນຕອນກາງຄືນແລະຮູບພາບ> ຍັງບໍ່ທັນໄດ້ປະຕິບັດເທື່ອ.

ດ້ວຍການມາເຖິງຂອງສິ່ງ ໃໝ່ໆ ໃນຂັ້ນຕອນການພັດທະນາເວບໄຊທ໌ຂອງພວກເຮົາ, ມັນອາດຈະຍາກທີ່ຈະເລີ່ມຕົ້ນ. ຂໍໃຫ້ ດຳ ເນີນໄປເປັນແຕ່ລະບາດກ້າວ.

img! - ປະກາດຮູບພາບ backback ສຳ ລັບໂປແກຼມທ່ອງເວັບທີ່ບໍ່ສະ ໜັບ ສະ ໜູນ ຮູບພາບທັງ ໝົດ -> src = "horse-350.webp"! - ປະກາດທັງ ໝົດ ຂະ ໜາດ ພາບໃນ srcset. ລວມຄວາມກວ້າງຂອງຮູບພາບໂດຍໃຊ້ w descriptor ເພື່ອແຈ້ງໃຫ້ຕົວທ່ອງເວັບເຖິງຄວາມກວ້າງຂອງແຕ່ລະຮູບພາບ .--> srcset = "ມ້າ -35.webp 350w, ມ້າ-500.webp 500w, ມ້າ -1024.webp 1024w, horse.webp 2000w "! - ຂະ ໜາດ ແຈ້ງໃຫ້ຕົວທ່ອງເວັບຂອງຮູບແບບເວັບໄຊທ໌້ຂອງພວກເຮົາ. ໃນທີ່ນີ້ພວກເຮົາ ກຳ ລັງເວົ້າ ສຳ ລັບສະຖານທີ່ແຫ່ງ ໜຶ່ງ ທີ່ມີ 64 ຂະ ໜາດ ແລະໃຫຍ່ກວ່າ, ໃຊ້ຮູບພາບທີ່ສາມາດຄອບຄອງໄດ້ 70% ຂອງຊ່ອງທາງການເບິ່ງ -> ຂະ ໜາດ = "(min-width: 64em) 70vw,! - ໃຫຍ່, ຫຼັງຈາກນັ້ນ ສຳ ລັບສະຖານທີ່ແຫ່ງ ໜຶ່ງ ທີ່ມີຂະ ໜາດ ໃຫຍ່ກວ່າ 37.5ems ແລະໃຫຍ່ກວ່າ, ໃຫ້ໃຊ້ຮູບພາບທີ່ຄອບຄອງ 95% ຂອງຊ່ອງທາງການເບິ່ງ -> (ຂະ ໜາດ ຄວາມກວ້າງ: 37.5em) 95vw,! - ແລະຖ້າວ່າຊ່ອງທາງຂະ ໜາດ ນ້ອຍກວ່ານັ້ນ, ໃຫ້ໃຊ້ ຮູບພາບທີ່ຄອບຄອງພື້ນທີ່ເບິ່ງ 100% -> 100vw "! - ມີຕົວ ໜັງ ສືສະ ເໝີ .--> alt =" ມ້າ "/>

ຈາກມຸມມອງປະສິດທິພາບມັນບໍ່ ສຳ ຄັນຖ້າທ່ານໃຊ້ຄວາມກວ້າງຂອງຄວາມກວ້າງຫລືຄວາມກວ້າງສູງສຸດໃນຂະ ໜາດ ຂອງຄຸນລັກສະນະຕ່າງໆ - ແຕ່ ຄຳ ສັ່ງຂອງແຫຼ່ງແມ່ນບໍ່ ສຳ ຄັນ. ຕົວທ່ອງເວັບຈະໃຊ້ຂະ ໜາດ ທີ່ກົງກັບ ທຳ ອິດສະ ເໝີ.

ນອກຈາກນີ້, ຈົ່ງຈື່ໄວ້ວ່າພວກເຮົາ ກຳ ລັງລະຫັດຂະ ໜາດ ທີ່ຄຸນລັກສະນະທີ່ຈະຖືກ ກຳ ນົດໂດຍກົງກັບການອອກແບບຂອງພວກເຮົາ. ນີ້ອາດຈະເຮັດໃຫ້ບັນຫາກ້າວໄປຂ້າງ ໜ້າ. ຕົວຢ່າງ: ຖ້າທ່ານອອກແບບ ໃໝ່ ເວັບໄຊທ໌້, ທ່ານຈະຕ້ອງໄດ້ເບິ່ງຄືນທັງ ໝົດ ຂອງ img> ຫຼືຮູບພາບ> s ແລະ ກຳ ນົດຂະ ໜາດ ຕ່າງໆ. ຖ້າທ່ານ ກຳ ລັງໃຊ້ CMS, ສິ່ງນີ້ສາມາດເອົາຊະນະເປັນສ່ວນ ໜຶ່ງ ຂອງຂະບວນການສ້າງຂອງທ່ານ.

WordPress ມີປັpluginກອິນເພື່ອຊ່ວຍແລ້ວ. ມັນ ກຳ ນົດຄ່າ srcset ໃສ່ແນວພັນຮູບພາບມາດຕະຖານ WP ແລະຊ່ວຍໃຫ້ທ່ານສາມາດປະກາດຂະ ໜາດ ຕ່າງໆໃນສະຖານທີ່ໃຈກາງ. ເມື່ອ ໜ້າ ເວັບຖືກສ້າງຈາກຖານຂໍ້ມູນ, ມັນຈະບົ່ງບອກບາງສິ່ງທີ່ກ່າວເຖິງກ່ຽວກັບ img> ແລະປ່ຽນແທນພວກມັນດ້ວຍການສ້າງຮູບພາບ.

ພື້ນຖານ

• ຄິດກ່ຽວກັບວ່າທ່ານຕ້ອງການລວມເອົາຮູບພາບໃດ ໜຶ່ງ. ແມ່ນເນື້ອຫາຫຼັກຂອງຮູບພາບ, ຫລືມັນຕົກແຕ່ງ? ຮູບພາບ ໜ້ອຍ ໜຶ່ງ ຈະ ໝາຍ ເຖິງເວລາໂຫຼດໄວ
• ເພີ່ມປະສິດທິພາບຮູບພາບຕ່າງໆທີ່ທ່ານຕ້ອງການລວມເອົາການໃຊ້ ImageOptim
• ກຳ ນົດ headers ໝົດ ອາຍຸ ສຳ ລັບຮູບພາບຂອງທ່ານຢູ່ໃນ server ຫຼືໄຟລ໌ .htaccess ຂອງທ່ານ (ເບິ່ງລາຍລະອຽດພາຍໃຕ້ 'Performance')
• PictureFill ໃຫ້ການສະ ໜັບ ສະ ໜູນ polyfill ສຳ ລັບຮູບພາບ

ຂັ້ນສູງ

• ເຮັດໃຫ້ຮູບພາບຂອງທ່ານຂີ້ກຽດໂດຍໃຊ້ໂປແກຼມ Lazy Load plugin ຂອງ jQuery
• ໃຊ້ HTMLImageElement.Sizes ແລະ HTMLPictureElement ສຳ ລັບການກວດຫາຄຸນສົມບັດ.
• ໂປແກຼມໂປແກຼມ PictureFill WP ທີ່ກ້າວ ໜ້າ, ພົບໃນ Github, ຈະຊ່ວຍໃຫ້ທ່ານສາມາດ ກຳ ນົດຄວາມກວ້າງຂອງຮູບພາບແລະຄ່າຂະ ໜາດ

ການປະຕິບັດ

ເພື່ອໃຫ້ໄດ້ຮັບການປະຕິບັດທີ່ຖືກຮັບຮູ້ທີ່ໄວທີ່ສຸດໃນຫນ້າເວັບຕ່າງໆຂອງພວກເຮົາ, ພວກເຮົາຕ້ອງການທຸກໆ HTML ແລະ CSS ທີ່ຕ້ອງການເພື່ອໃຫ້ພາກສ່ວນເທິງສຸດຂອງ ໜ້າ ເວັບພາຍໃນການຕອບຮັບຄັ້ງ ທຳ ອິດຈາກ server. ຈຳ ນວນມະຫັດສະຈັນນັ້ນແມ່ນ 14kb ແລະອີງໃສ່ຂະ ໜາດ ຂອງປ່ອງຢ້ຽມຄວາມແອອັດສູງສຸດພາຍໃນເວລາເດີນທາງຮອບ ທຳ ອິດ (RTT).

Patrick Hamann, ຜູ້ ນຳ ດ້ານເຕັກນິກດ້ານ ໜ້າ ຮ້ານຢູ່ Guardian, ແລະທີມງານຂອງລາວໄດ້ຈັດການທີ່ຈະ ທຳ ລາຍສິ່ງກີດຂວາງ 1000ms ໂດຍ ນຳ ໃຊ້ເຕັກນິກປະສົມຂອງ ໜ້າ ຈໍແລະດ້ານຫລັງ. ວິທີການຂອງ Guardian ແມ່ນເພື່ອຮັບປະກັນເນື້ອຫາທີ່ ຈຳ ເປັນ - ບົດຂຽນ - ສົ່ງໃຫ້ຜູ້ໃຊ້ໄດ້ໄວເທົ່າທີ່ຈະໄວໄດ້ແລະພາຍໃນເລກ 14 magic.

ໃຫ້ເບິ່ງຂະບວນການ:

1. ຜູ້ໃຊ້ຄລິກໃສ່ລິ້ງ Google ກັບເລື່ອງຂ່າວ
2. ຄໍາຮ້ອງຂໍການສະກັດກັ້ນດຽວແມ່ນຖືກສົ່ງໄປຫາຖານຂໍ້ມູນ ສຳ ລັບບົດຂຽນ. ບໍ່ມີການເລົ່າເລື່ອງຫລື ຄຳ ເຫັນທີ່ກ່ຽວຂ້ອງ
3. HTML ແມ່ນຖືກບັນຈຸ CSS ທີ່ ສຳ ຄັນ
4. ໃນຫົວ>
5. ຂະບວນການ ‘ຕັດ ໝາກ ໂມ’ ແມ່ນຖືກປະຕິບັດແລະສ່ວນປະກອບທີ່ມີເງື່ອນໄຂໂດຍອີງໃສ່ຄຸນລັກສະນະຂອງຜູ້ໃຊ້ແມ່ນຖືກໂຫລດ
6. ເນື້ອຫາໃດໆທີ່ກ່ຽວຂ້ອງກັບຫຼືສະ ໜັບ ສະ ໜູນ ບົດຂຽນນັ້ນເອງ (ຮູບພາບບົດຂຽນທີ່ກ່ຽວຂ້ອງ, ຄວາມຄິດເຫັນຂອງບົດຄວາມແລະອື່ນໆ) ແມ່ນຂີ້ຕົວະ

ການເພີ່ມປະສິດທິພາບຂອງເສັ້ນທາງທີ່ ສຳ ຄັນເຊັ່ນນີ້ ໝາຍ ຄວາມວ່າຫົວ> ຍາວ 222 ເສັ້ນ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ເນື້ອຫາ ສຳ ຄັນທີ່ຜູ້ ນຳ ໃຊ້ເຂົ້າເບິ່ງກໍ່ຍັງມີຢູ່ພາຍໃນຄ່າ ທຳ ນຽມເບື້ອງຕົ້ນ 14kb ເມື່ອຖືກ gzipped. ມັນແມ່ນຂະບວນການນີ້ທີ່ຊ່ວຍ ທຳ ລາຍສິ່ງກີດຂວາງທີ່ສະແດງເຖິງ 1000ms.

ການໂຫຼດທີ່ມີເງື່ອນໄຂແລະຂີ້ກຽດ

ການໂຫຼດແບບມີເງື່ອນໄຂປັບປຸງປະສົບການຂອງຜູ້ໃຊ້ໂດຍອີງໃສ່ຄຸນລັກສະນະຂອງອຸປະກອນຂອງພວກເຂົາ. ເຄື່ອງມືເຊັ່ນ Modernizr ຊ່ວຍໃຫ້ທ່ານສາມາດທົດສອບຄຸນລັກສະນະເຫຼົ່ານີ້, ແຕ່ຈົ່ງຮູ້ວ່າພຽງແຕ່ຍ້ອນວ່າຕົວທ່ອງເວັບບອກວ່າມັນໃຫ້ການສະ ໜັບ ສະ ໜູນ, ມັນບໍ່ໄດ້ ໝາຍ ຄວາມວ່າຈະໃຫ້ການສະ ໜັບ ສະ ໜູນ ເຕັມທີ່ຕະຫຼອດເວລາ.

ເຕັກນິກ ໜຶ່ງ ຄືການຍຶດເອົາບາງສິ່ງບາງຢ່າງຈົນຜູ້ໃຊ້ສະແດງຄວາມຕັ້ງໃຈທີ່ຈະໃຊ້ຄຸນສົມບັດນັ້ນ. ນີ້ຈະຖືກຖືວ່າເປັນເງື່ອນໄຂ. ທ່ານສາມາດປິດການໂຫຼດໃນໄອຄອນສັງຄົມຈົນກວ່າຜູ້ໃຊ້ຈະໄປເບິ່ງຫລືແຕະຮູບສັນຍາລັກ, ຫຼືທ່ານສາມາດຫລີກລ້ຽງການໂຫລດ iframe ຂອງ Google Map ໃນມຸມເບິ່ງທີ່ນ້ອຍກວ່າບ່ອນທີ່ຜູ້ໃຊ້ມັກຈະເຊື່ອມໂຍງກັບໂປແກຼມສ້າງແຜນທີ່ທີ່ອຸທິດຕົນ. ອີກວິທີການ ໜຶ່ງ ແມ່ນ 'ຕັດ mustard' - ເບິ່ງກ່ອງດ້ານເທິງ ສຳ ລັບລາຍລະອຽດກ່ຽວກັບເລື່ອງນີ້.

ການໂຫຼດທີ່ຂີ້ຕົວະແມ່ນຖືກ ກຳ ນົດວ່າແມ່ນສິ່ງທີ່ທ່ານຕັ້ງໃຈຈະໂຫຼດຢູ່ ໜ້າ ເວບໄຊທ໌ - ຮູບພາບທີ່ເປັນສ່ວນ ໜຶ່ງ ຂອງບົດຄວາມ, ຄຳ ເຫັນຫຼືບົດອື່ນໆທີ່ກ່ຽວຂ້ອງ - ແຕ່ວ່າມັນບໍ່ ຈຳ ເປັນຕ້ອງຢູ່ທີ່ນັ້ນເພື່ອໃຫ້ຜູ້ໃຊ້ເລີ່ມບໍລິໂພກເນື້ອຫາ.

ພື້ນຖານ

• ເປີດໃຊ້ gzipping ສຳ ລັບແຟ້ມແລະ ກຳ ນົດ headers ໝົດ ອາຍຸ ສຳ ລັບເນື້ອຫາທີ່ສະຖິດທັງ ໝົດ (netm.ag/expire-260)
• ໃຊ້ປັpluginກອິນ Lazy Load jQuery. ສິ່ງດັ່ງກ່າວຈະໂຫລດຮູບພາບໃນເວລາທີ່ເຂົ້າໄປເບິ່ງບ່ອນທ່ອງທ່ຽວ, ຫຼືຫຼັງຈາກໄລຍະເວລາໃດ ໜຶ່ງ

ຂັ້ນສູງ

• ຕັ້ງຄ່າຢ່າງໄວວາຫລື CloudFlare. ເຄືອຂ່າຍການຈັດສົ່ງເນື້ອຫາ (CDNs) ສົ່ງເນື້ອຫາທີ່ສະຖິດຂອງທ່ານໃຫ້ກັບຜູ້ໃຊ້ໄວກ່ວາເຄື່ອງແມ່ຂ່າຍຂອງທ່ານເອງ, ແລະມີບາງອັນດັບຟຣີ
• ເປີດໃຊ້ SPDY ສຳ ລັບໂປຣແກຣມທ່ອງເວັບທີ່ໃຊ້ http2 ເພື່ອໃຊ້ປະໂຫຍດຈາກຄຸນລັກສະນະຕ່າງໆຂອງ http2 ຄືກັບການຮ້ອງຂໍແບບ http ຂະຫນານ
• ການນັບສັງຄົມຊ່ວຍໃຫ້ສາມາດໂຫລດໄອຄອນສັງຄົມຂອງທ່ານໂດຍມີເງື່ອນໄຂ
• ການໃຊ້ Static Maps API ຈະຊ່ວຍໃຫ້ທ່ານສາມາດປ່ຽນແຜນທີ່ Google ແບບໂຕ້ຕອບ ສຳ ລັບຮູບພາບ. ເບິ່ງທີ່ຕົວຢ່າງຂອງ Brad Frost ທີ່ netm.ag/static-260
• Ajax Include Pattern ຈະໂຫລດຊຸດຂໍ້ມູນເນື້ອຫາຈາກທັງຄຸນລັກສະນະຂອງຂໍ້ມູນກ່ອນ ໜ້າ, ຫຼັງຈາກຂໍ້ມູນຫຼືແທນຂໍ້ມູນ

ປະເພດການຕອບຮັບ

Typography ແມ່ນກ່ຽວກັບການເຮັດໃຫ້ເນື້ອຫາຂອງທ່ານຍ່ອຍງ່າຍ. ປະເພດຄວາມຮັບຜິດຊອບຂະຫຍາຍສິ່ງນີ້ເພື່ອຮັບປະກັນຄວາມສາມາດອ່ານໄດ້ຜ່ານອຸປະກອນແລະມຸມມອງທີ່ຫລາກຫລາຍ. ທ່ານ Jordan Moore ຍອມຮັບວ່າປະເພດນີ້ແມ່ນສິ່ງ ໜຶ່ງ ທີ່ລາວບໍ່ເຕັມໃຈທີ່ຈະກ້າວໄປ ໜ້າ. ວາງຮູບຫຼືສອງຖ້າທ່ານຕ້ອງການ, ແຕ່ໃຫ້ແນ່ໃຈວ່າທ່ານມີປະເພດທີ່ດີ.

Stephen Hay ແນະ ນຳ ໃຫ້ຕັ້ງຄ່າຂະ ໜາດ ຕົວອັກສອນ HTML ລົງເຖິງ 100 ເປີເຊັນ (ອ່ານ: ພຽງແຕ່ປ່ອຍໃຫ້ມັນເປັນ) ເພາະວ່າແຕ່ລະ browser ຫຼືຜູ້ຜະລິດອຸປະກອນເຮັດໃຫ້ຄ່າເລີ່ມຕົ້ນທີ່ສາມາດອ່ານໄດ້ຢ່າງສົມເຫດສົມຜົນ ສຳ ລັບການແກ້ໄຂບັນຫາຫຼືອຸປະກອນໃດ ໜຶ່ງ. ສຳ ລັບໂປຣແກຣມທ່ອງເວັບທີ່ໃຊ້ໃນ desktop ສ່ວນໃຫຍ່ແມ່ນ 16px.

ໃນທາງກົງກັນຂ້າມ, Moore ໃຊ້ຫົວ ໜ່ວຍ REM ແລະຂະ ໜາດ ຕົວອັກສອນ HTML ເພື່ອ ກຳ ນົດຂະ ໜາດ ຕົວອັກສອນຂັ້ນຕ່ ຳ ສຳ ລັບອົງປະກອບເນື້ອຫາທີ່ແນ່ນອນ. ຕົວຢ່າງ: ຖ້າທ່ານຕ້ອງການເສັ້ນທາງຂອງບົດຄວາມໃຫ້ສູງສຸດ 14px, ສະນັ້ນໃຫ້ຕັ້ງຄ່າດັ່ງກ່າວເປັນຂະ ໜາດ ຕົວອັກສອນພື້ນຖານໃນສ່ວນຂອງ HTML ແລະຕັ້ງ .byline {font-size: 1rem;}. ຂະນະທີ່ທ່ານຂະຫຍາຍຮ່າງກາຍ: font-size: ໃຫ້ ເໝາະ ສົມກັບມຸມມອງຂອງ ໜ້າ ຈໍທ່ານຈະບໍ່ມີຜົນກະທົບຕໍ່ຮູບແບບ .by-line.

ຄວາມຍາວຂອງການອ່ານທີ່ດີຍັງມີຄວາມ ສຳ ຄັນເຊັ່ນກັນ - ມີຈຸດ ໝາຍ ເຖິງ 45 ເຖິງ 65 ໂຕອັກສອນ. ມີປື້ມຄູ່ມືທີ່ທ່ານສາມາດໃຊ້ເພື່ອກວດສອບເນື້ອຫາຂອງທ່ານ. ຖ້າທ່ານ ກຳ ລັງສະ ໜັບ ສະ ໜູນ ຫລາຍພາສາດ້ວຍການອອກແບບຂອງທ່ານ, ຄວາມຍາວຂອງເສັ້ນອາດແຕກຕ່າງກັນ. Moore ແນະນໍາໃຫ້ໃຊ້: lang (de) ບົດຄວາມ {max-width: 30em} ເພື່ອປົກປິດບັນຫາໃດໆຢູ່ທີ່ນັ້ນ.

ເພື່ອຮັກສາຈັງຫວະແນວຕັ້ງ, ຕັ້ງຂອບດ້ານລຸ່ມທຽບໃສ່ທ່ອນໄມ້ເນື້ອຫາ, ul>, ol>, blockquote>, ຕາຕະລາງ>, blockquote> ແລະອື່ນໆ, ໃຫ້ເທົ່າກັບລະດັບຄວາມສູງຂອງເສັ້ນຂອງທ່ານ. ຖ້າຈັງຫວະຖືກຂັດຂວາງດ້ວຍການແນະ ນຳ ຮູບພາບຕ່າງໆທີ່ທ່ານສາມາດແກ້ໄຂໄດ້ໂດຍການເພີ່ມ Baseline.js ຫຼື BaselineAlign.js.

ພື້ນຖານ

• ວາງຕົວ ໜັງ ສືຂອງທ່ານໃສ່ຮ່າງກາຍ 100 ເປີເຊັນ
• ເຮັດວຽກຢູ່ໃນ ໜ່ວຍ em em
• ຕັ້ງຂອບຂອງທ່ານໃຫ້ສູງຄວາມສູງຂອງເສັ້ນຂອງທ່ານເພື່ອຮັກສາຈັງຫວະແນວຕັ້ງໃນການອອກແບບຂອງທ່ານ

ຂັ້ນສູງ

• ປັບປຸງການປະຕິບັດການໂຫຼດແບບອັກສອນດ້ວຍ Enhance.js ຫຼືການໂຫລດແບບຟອນທີ່ມີ ກຳ ນົດ
• ໃຊ້ Sass @incclus ສຳ ລັບຫົວຂໍ້ semantic.
• ໂດຍທົ່ວໄປພວກເຮົາຕ້ອງການໃຊ້ແບບ h5 ໃນແຖບເຄື່ອງມືດ້ານຂ້າງເຊິ່ງຮຽກຮ້ອງໃຫ້ມີເຄື່ອງ ໝາຍ h2. ໃຊ້ Mixded Typographic Mixins ເພື່ອຄວບຄຸມຂະ ໜາດ ແລະຍັງຄົງຢູ່ກັບລະຫັດຂ້າງລຸ່ມນີ້:

.sidebar h2 {@ ລວມຫົວຂໍ້ -5}

ການສອບຖາມສື່ໃນ JavaScript

ນັບຕັ້ງແຕ່ພວກເຮົາສາມາດຄວບຄຸມຮູບແບບໃນຫຼາຍມຸມມອງໂດຍຜ່ານການສອບຖາມກ່ຽວກັບສື່ຕ່າງໆ, ພວກເຮົາໄດ້ຊອກຫາວິທີທີ່ຈະ ນຳ ໄປໃຊ້ກັບ JavaScript ຂອງພວກເຮົາເຊັ່ນກັນ. ມີສອງສາມວິທີທີ່ຈະເຮັດໃຫ້ໄຟ JavaScript ໃນຄວາມກວ້າງຂອງມຸມມອງ, ຄວາມສູງແລະທິດທາງທີ່ແນ່ນອນ, ແລະບາງຄົນທີ່ສະຫຼາດໄດ້ຂຽນບາງໂປແກມ JS ທີ່ໃຊ້ງ່າຍເຊັ່ນ: Enquire.js ແລະຜູ້ຈັດການລັດງ່າຍໆ. ທ່ານຍັງສາມາດສ້າງສິ່ງນີ້ດ້ວຍຕົວເອງໂດຍໃຊ້ matchMedia. ເຖິງຢ່າງໃດກໍ່ຕາມ, ທ່ານມີບັນຫາທີ່ທ່ານຕ້ອງການເຮັດແບບສອບຖາມສື່ຂອງທ່ານໃນ CSS ແລະ JavaScript ຂອງທ່ານ.

Aaron Gustafson ມີເຄັດລັບທີ່ດີເຊິ່ງ ໝາຍ ຄວາມວ່າທ່ານບໍ່ ຈຳ ເປັນຕ້ອງຈັດການແລະກົງກັບການສອບຖາມສື່ຂອງທ່ານໃນ CSS ແລະ JS ຂອງທ່ານ. ຄວາມຄິດເດີມມາຈາກ Jeremy Keith ແລະໃນຕົວຢ່າງນີ້ Gustafson ໄດ້ ນຳ ເອົາມັນໄປສູ່ການຈັດຕັ້ງປະຕິບັດຢ່າງເຕັມທີ່.

ການໃຊ້ getActiveMQ (netm.ag/media-260), ສັກ div # getActiveMQ-watcher ໃນຕອນທ້າຍຂອງອົງປະກອບຂອງຮ່າງກາຍແລະເຊື່ອງມັນໄວ້. ຫຼັງຈາກນັ້ນພາຍໃນ CSS ກຳ ນົດ # getActiveMQ-watcher {font-family: break-0;} ໃສ່ ຄຳ ຖາມສື່ ທຳ ອິດ, font-family: break-1; ກັບທີສອງ, font-family: break-2; ເຖິງທີສາມແລະອື່ນໆ.

ສະຄິບໃຊ້ watchResize () (netm.ag/resize-260) ເພື່ອກວດເບິ່ງວ່າຂະ ໜາດ ຂອງມຸມມອງຂອງ ໜ້າ ຈໍໄດ້ມີການປ່ຽນແປງແລະຫຼັງຈາກນັ້ນອ່ານຕົວອັກສອນຕົວອັກສອນທີ່ໃຊ້ວຽກຢູ່ -. ຕອນນີ້ທ່ານສາມາດໃຊ້ສິ່ງນີ້ເພື່ອຕິດຕັ້ງການເພີ່ມປະສິດທິພາບຂອງ JS ເຊັ່ນການເພີ່ມອິນເຕີເຟດແຖບເຂົ້າກັບ dl> ເມື່ອເວບໄຊທ໌ເປີດເບິ່ງ, ອະນຸຍາດໃຫ້ປ່ຽນແປງພຶດຕິ ກຳ ຂອງກ່ອງແສງ, ຫຼືປັບປຸງຮູບແບບຂອງຕາຕະລາງຂໍ້ມູນ. ກວດເບິ່ງ getActiveMQ Codepen ທີ່ netm.ag/active-260.

ພື້ນຖານ

• ລືມກ່ຽວກັບ JavaScript ສຳ ລັບມຸມມອງທີ່ແຕກຕ່າງກັນ. ສະ ໜອງ ເນື້ອຫາແລະ ໜ້າ ທີ່ຂອງເວບໄຊທ໌ໃຫ້ກັບຜູ້ໃຊ້ໃນແບບທີ່ພວກເຂົາສາມາດເຂົ້າເບິ່ງຜ່ານທຸກມຸມມອງ. ພວກເຮົາບໍ່ ຈຳ ເປັນຕ້ອງໃຊ້ JavaScript

ຂັ້ນສູງ

• ຂະຫຍາຍວິທີການຂອງ Gustafson ໂດຍການໃຊ້ Breakup ເປັນລາຍຊື່ການສອບຖາມສື່ທີ່ໄດ້ ກຳ ນົດໄວ້ໂດຍອັດຕະໂນມັດແລະການສ້າງລາຍຊື່ຄອບຄົວຕົວອັກສອນ ສຳ ລັບ getActiveMQ-watcher

ການປັບປຸງແບບກ້າວ ໜ້າ

ຄວາມເຂົ້າໃຈຜິດທົ່ວໄປກ່ຽວກັບການເພີ່ມປະສິດທິພາບທີ່ກ້າວ ໜ້າ ແມ່ນປະຊາຊົນຄິດວ່າ, "ໂອ້ຂ້ອຍຂ້ອຍບໍ່ສາມາດໃຊ້ຄຸນລັກສະນະ ໃໝ່ ນີ້ໄດ້," ແຕ່ມັນກໍ່ກົງກັນຂ້າມ. ການເພີ່ມປະສິດທິພາບໃຫ້ດີຂື້ນ ໝາຍ ຄວາມວ່າທ່ານສາມາດ ນຳ ສະ ເໜີ ຄຸນລັກສະນະໃດ ໜຶ່ງ ໄດ້ຖ້າມັນສະ ໜັບ ສະ ໜູນ ໃນ ໜຶ່ງ ຫລືບໍ່ມີຕົວທ່ອງເວັບແລະໃນໄລຍະເວລາຄົນຈະໄດ້ຮັບປະສົບການທີ່ດີຂື້ນເມື່ອມີລຸ້ນ ໃໝ່ ມາຮອດ.

ຖ້າທ່ານເບິ່ງ ໜ້າ ທີ່ຫຼັກຂອງເວັບໄຊທ໌ໃດກໍ່ຕາມ, ທ່ານສາມາດສົ່ງສິ່ງນັ້ນເປັນ HTML ແລະໃຫ້ຝ່າຍ server ເຮັດວຽກທັງ ໝົດ. ການ ຊຳ ລະເງິນ, ແບບຟອມ, ຄວາມມັກ, ການແລກປ່ຽນ, ອີເມວ, ກະດານຂ່າວ - ມັນສາມາດເຮັດໄດ້ທັງ ໝົດ. ເມື່ອວຽກງານຂັ້ນພື້ນຖານຖືກສ້າງຂຶ້ນແລ້ວພວກເຮົາສາມາດວາງເຕັກໂນໂລຢີທີ່ ໜ້າ ເກງຂາມຢູ່ເທິງສຸດຂອງສິ່ງນັ້ນ, ເພາະວ່າພວກເຮົາມີຕາ ໜ່າງ ຄວາມປອດໄພໃນການຈັບສິ່ງທີ່ລົ້ມເຫລວ. ເກືອບທັງ ໝົດ ວິທີການທີ່ກ້າວ ໜ້າ ທີ່ພວກເຮົາໄດ້ກ່າວເຖິງນີ້ແມ່ນອີງໃສ່ການປັບປຸງທີ່ກ້າວ ໜ້າ.

ຮູບແບບ

ຮູບແບບທີ່ຍືດຫຍຸ່ນແມ່ນເວົ້າງ່າຍດາຍ, ແຕ່ມັນມີຫລາຍວິທີການທີ່ແຕກຕ່າງກັນ. ສ້າງແຜນຜັງຕາຂ່າຍໄຟຟ້າແບບງ່າຍດາຍໂດຍມີເຄື່ອງ ໝາຍ ນ້ອຍລົງໂດຍໃຊ້: ຕົວເລືອກເລືອກ nth-child ().

/ * ປະກາດຄວາມກວ້າງຂອງມືຖື ທຳ ອິດ ສຳ ລັບຕາຂ່າຍໄຟຟ້າ * / .grid-1-4 {ເລື່ອນ: ຊ້າຍ; ຄວາມກວ້າງ: 100%; } / * ເມື່ອເວບໄຊທ໌ເບິ່ງຢ່າງ ໜ້ອຍ 37.5em ແລ້ວຕັ້ງຕາຂ່າຍໄຟຟ້າເຖິງ 50% ຕໍ່ອົງປະກອບ * / @media (min-width: 37.5em) {.grid-1-4 {width: 50%; } / * ລ້າງຟົດລອຍທຸກໆອົງປະກອບທີສອງຫຼັງຈາກ ທຳ ອິດ. ນີ້ເປົ້າ ໝາຍ ຈຸດທີ 3, 5, 7, 9 ... ໃນຕາຂ່າຍໄຟຟ້າ. * / .grid-1-4: nth-of-type (2n + 1) {ຈະແຈ້ງ: ເບື້ອງຊ້າຍ; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * ລົບລ້າງຂໍ້ມູນທີ່ຈະແຈ້ງກ່ອນ ໜ້າ ນີ້ * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * ລ້າງພື້ນທີ່ທຸກ 4 ອົງປະກອບຫລັງຈາກ ທຳ ອິດ. ນີ້ເປົ້າ ໝາຍ ຈຸດທີ 5, 9 ... ໃນຕາຂ່າຍໄຟຟ້າ. * / .grid-1-4: nth-of-type (4n + 1) {ຈະແຈ້ງ: ຊ້າຍ; }}

Wave goodbye ກັບການ ນຳ ໃຊ້ ຕຳ ແໜ່ງ ແລະເລື່ອນ ສຳ ລັບການຈັດວາງຂອງທ່ານ. ໃນຂະນະທີ່ພວກເຂົາໄດ້ໃຫ້ບໍລິການກັບພວກເຮົາຈົນເຖິງປະຈຸບັນ, ການ ນຳ ໃຊ້ຮູບແບບຂອງພວກເຂົາແມ່ນການ hack ທີ່ ຈຳ ເປັນ. ດຽວນີ້ພວກເຮົາມີລູກ ໃໝ່ ສອງຄົນຢູ່ເທິງທ່ອນໄມ້ເຊິ່ງຈະຊ່ວຍແກ້ໄຂບັນຫາການຈັດການຂອງພວກເຮົາທັງ ໝົດ - Flexbox ແລະ Grids.

Flexbox ແມ່ນດີເລີດ ສຳ ລັບໂມດູນສ່ວນບຸກຄົນ, ຄວບຄຸມການຈັດວາງຂອງຕ່ອນຂອງເນື້ອໃນພາຍໃນແຕ່ລະໂມດູນ. ມີຮູບແບບຕ່າງໆທີ່ພວກເຮົາພະຍາຍາມຈັດສົ່ງໃຫ້ສາມາດປະສົບຜົນ ສຳ ເລັດໄດ້ງ່າຍຂື້ນໂດຍໃຊ້ Flexbox, ແລະນີ້ກໍ່ຍິ່ງເປັນຄວາມຈິງກັບເວັບໄຊທ໌ຕອບສະ ໜອງ. ສຳ ລັບຂໍ້ມູນເພີ່ມເຕີມ, ໃຫ້ກວດເບິ່ງຄູ່ມືກ່ຽວກັບ CSS Tricks ຂອງ Flexbox ຫຼື Flexbox Polyfill.

ຮູບແບບຕາຂ່າຍໄຟຟ້າ CSS

ຕາຂ່າຍໄຟຟ້າແມ່ນມີຫຼາຍ ສຳ ລັບການຈັດວາງລະດັບມະຫາພາກ. ໂມດູນການຈັດຮູບແບບ Grid ຊ່ວຍໃຫ້ທ່ານມີວິທີທີ່ດີໃນການອະທິບາຍຮູບແບບຂອງທ່ານພາຍໃນ CSS ຂອງທ່ານ. ໃນຂະນະທີ່ມັນຍັງຢູ່ໃນຂັ້ນຕອນຮ່າງຢູ່ໃນເວລານີ້, ຂ້າພະເຈົ້າຂໍແນະ ນຳ ບົດຄວາມນີ້ກ່ຽວກັບຮູບແບບ CSS Grid ໂດຍ Rachel Andrew.

ສຸດທ້າຍ

ນີ້ແມ່ນພຽງແຕ່ ຄຳ ແນະ ນຳ ຈຳ ນວນ ໜຶ່ງ ເພື່ອຂະຫຍາຍການປະຕິບັດທີ່ຕອບສະ ໜອງ ຂອງທ່ານ. ເມື່ອເຂົ້າຫາວຽກງານ ໃໝ່ ທີ່ຕອບສະ ໜອງ ໃໝ່, ໃຫ້ກັບຄືນບາດກ້າວແລະຮັບປະກັນວ່າທ່ານໄດ້ຮັບພື້ນຖານທີ່ຖືກຕ້ອງ. ເລີ່ມຕົ້ນດ້ວຍເນື້ອຫາຂອງທ່ານ, HTML ແລະຊັ້ນປັບປຸງປະສົບການໃຫ້ພວກເຂົາແລະມັນຈະບໍ່ມີຂອບເຂດ ຈຳ ກັດທີ່ທ່ານສາມາດອອກແບບຂອງທ່ານໄດ້.

ບົດຂຽນນີ້ປະກົດຂື້ນໃນສະບັບທີ 260 ຂອງ ວາລະສານສຸດທິ.