ปี 2015, เรียนรู้ CSS Layout อย่างละเอียดรอบคอบ

 (book.mixu.net)
6 คะแนน โดย GN⁺ 2024-03-01 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • เป็นสื่อการเรียนรู้แบบแบ่งเป็นบทที่ออกแบบมาสำหรับผู้อ่านที่เคยใช้ CSS layout มาแล้ว ให้เข้าใจ อัลกอริทึมของ layout ไปจนถึงกฎย่อยอย่างละเอียด
  • อธิบาย inline, block, z-index, และ box model ใหม่ ไม่ใช่ในฐานะเพียงวิธีใช้งาน แต่ในฐานะกฎการตัดสินใจอย่าง formatting context และ stacking context
  • ตำแหน่งสัมพัทธ์ขององค์ประกอบ block และ inline ใน normal flow ไม่ได้ถูกกำหนดด้วย display เพียงอย่างเดียว แต่ยังได้รับอิทธิพลร่วมจาก sibling element และ context
  • การคำนวณขนาดของ box model และ margin: auto แตกต่างกันตาม วิธีการจัดวางตำแหน่ง จึงยากที่จะท่องจำเป็นกฎเดียว
  • ครอบคลุมตั้งแต่ normal flow, float, absolute positioning, margin collapsing, overflow, z-index, pseudo-element, Flexbox ไปจนถึงปัญหา layout ในงานจริงอย่างการจัดกึ่งกลางและ grid framework

ทำความเข้าใจ CSS Layout ผ่านกฎ

  • เอกสารนี้มอง CSS layout ไม่ใช่เป็นชุดทิป แต่เป็น ระบบที่ขับเคลื่อนด้วยกฎ และอธิบายแต่ละกฎอย่างต่อเนื่องไปตามแต่ละบทในสื่อการเรียนรู้ขนาดยาวนี้
  • ใช้แนวทางแบบที่คำว่า “pedantic” สื่อถึง คือใส่ใจแม้แต่รายละเอียดที่ดูเล็กน้อยและกฎเชิงรูปแบบอย่างเคร่งครัด
  • กลุ่มผู้อ่านเป้าหมายไม่ใช่ผู้เริ่มต้นเรียน CSS แต่เป็นคนที่ใช้งาน CSS อยู่แล้วและต้องการเข้าใจการทำงานของ layout อย่างแม่นยำยิ่งขึ้น
  • เว็บไซต์มักพัฒนาแบบค่อยเป็นค่อยไป จึงง่ายที่จะเรียนรู้ layout ผ่านเพียงทิปและเทคนิคเล็ก ๆ และในกระบวนการนั้นอาจพลาดตัว อัลกอริทึมของ layout เองไป
  • เนื้อหาครอบคลุมแนวคิดสำคัญตามลำดับ พร้อมตัวอย่างการใช้งานที่ช่วยตรวจสอบความเข้าใจของแต่ละแนวคิด

โครงสร้างรายบท

  • Chapter 1: Box positioning in CSS ว่าด้วยการจัดวาง box ที่เกิดจากองค์ประกอบ HTML ว่าอยู่สัมพันธ์กันอย่างไร
    • วิธีการจัดวางตำแหน่งหลัก 3 แบบของ CSS: normal flow, float, และ absolute positioning
    • anonymous box generation, formatting context, line box, และการจัดแนวภายใน line box ของ normal flow
    • ลำดับของ float, clearfix, และปฏิสัมพันธ์ระหว่าง float กับความสูงของ parent
  • Chapter 2: Box sizing in CSS ว่าด้วย box model และความแตกต่างตามวิธีการจัดวางตำแหน่ง
    • การคำนวณ height, width, margin ใช้กลไกที่แตกต่างกัน
    • หากต้องการเข้าใจวิธีคำนวณ ต้องพิจารณาทั้ง วิธีการจัดวางตำแหน่ง ที่ใช้อยู่และกลไกการคำนวณร่วมกัน
  • Chapter 3: Additional properties that influence positioning สรุปคุณสมบัติเพิ่มเติมและกลไกที่มีผลต่อการจัดวาง box
    • margin collapsing, negative margins, overflow
    • max-width, max-height, min-width, min-height
    • stacking context และ z-index
    • ผลกระทบของ pseudo-element ต่อ layout
    • CSS3 property box-sizing
  • Chapter 4: Flexbox อธิบายโหมด layout แบบ Flexbox ของ CSS 3
  • Chapter 5: CSS layout - tricks and layout techniques นำเนื้อหาจากบทก่อนหน้าไปใช้กับปัญหาจริง
    • การจัดกึ่งกลางแนวนอน·แนวตั้ง
    • วิธีการทำงานของ CSS grid framework
    • multi-column layout
    • กับดักที่พบบ่อยและเทคนิค layout
  • reference index ใช้สำหรับค้นหาแนวคิดหรือ property เฉพาะ แล้วไปยังบทและส่วนที่เกี่ยวข้อง

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-03-01
ความคิดเห็นจาก Hacker News

  • สิ่งแรกที่ควรพูดเมื่ออธิบาย CSS layout คือมี ระบบเลย์เอาต์สี่แบบ ที่แตกต่างกัน: table ซึ่งเก่าแก่ที่สุดและยังใช้ในอีเมล, float สำหรับรูปภาพในเนื้อหา, flexbox ที่ใช้กันมากที่สุดในปัจจุบัน, และ grid ซึ่งเป็นทางเลือกสมัยใหม่ของ table
    การกำหนดตำแหน่งแบบ absolute และ fixed ก็สามารถใช้เหมือนแฮ็กเพื่อเลี่ยงระบบเลย์เอาต์ได้เช่นกัน

    • absolute และ fixed ไม่ใช่แฮ็ก และก็ไม่ได้ “เลี่ยง” เลย์เอาต์ด้วย
      ทั้งสองเป็นสองใน ห้าตัวเลือกการกำหนดตำแหน่ง ที่ระบุว่าองค์ประกอบจะถูกวางและทำงานอย่างไรภายใน document flow หรือภายในคอนเทนเนอร์เฉพาะ: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • สองอย่างแรกน่าจะใกล้เคียงกับ ระบบเลย์เอาต์ ทางเลือกที่ใช้ก่อน flexbox และ grid
      พร็อพเพอร์ตี float ยังใช้ร่วมกับ Grid ได้ด้วย ระบบเลย์เอาต์ที่ง่ายและพื้นฐานที่สุดคือ normal flow กลับขาดไป: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...
    • คำว่า “table เป็นระบบเลย์เอาต์ CSS ที่เก่าแก่ที่สุดและยังใช้ในอีเมล” ไม่ค่อยถูกต้องนัก
      markup ของ HTML table จริง ๆ เป็นหนึ่งในวิธีเก่าแก่ที่สุดในการวางบางส่วนของเว็บเพจไว้ข้าง ๆ กัน และก็ใช้ในอีเมลด้วย แต่นั่นเป็นคนละเรื่องกับ CSS
      ใน CSS มี display: table และค่าที่เกี่ยวข้อง แต่เท่าที่จำได้ ใน IE รุ่นเก่า มันใช้ยากกว่า float และการใช้งานก็จำกัด ในเว็บสมัยใหม่ก็แทบไม่เคยเห็นใช้กันมากนัก อาจเป็นเพราะข้อกำหนดของ markup รอบ ๆ เข้มงวดเกินไป เช่น ไม่มีวิธีเปลี่ยนลำดับ และถ้าต้องการหลายแถว ก็ต้องใส่องค์ประกอบที่ทำหน้าที่นั้นไว้ใน HTML
    • เพิ่มเติมคือ Flexbox Froggy เป็นวิธีที่ดีที่สุดในการเรียน flex และก่อนเขียน CSS ควรนำกฎ css-reset ที่คนอื่นทำไว้มาใช้
      เพราะมันช่วยเปลี่ยนพฤติกรรมเก่า ๆ เพื่อความเข้ากันได้ย้อนหลังให้เป็นค่าเริ่มต้นที่สมเหตุสมผล ตัวอย่าง: https://www.joshwcomeau.com/css/custom-css-reset/#our-finish...
    • table ไม่ใช่ระบบเลย์เอาต์ CSS ที่เก่าแก่ที่สุด อันนั้นคือ flow layout และน่าแปลกที่มันหายไปจากรายการนี้โดยสิ้นเชิง

  • คำอธิบายว่า float “ใช้เพื่อวางกล่องไว้ที่ขอบซ้ายและขวาของกล่องคอนเทนเนอร์” นั้นไม่ถูกต้อง
    float ทำแบบนั้นได้ก็จริง แต่หลังจาก flexbox และ grid ออกมา ก็ไม่ได้ใช้แบบนั้นกันแล้ว เพราะองค์ประกอบหลุดออกจาก normal flow จึงเป็นวิธีที่ทำให้คนเรียน CSS สับสนในการสร้างเลย์เอาต์
    float ใกล้เคียงกับ เครื่องมือจัดวางตัวอักษร/หน้ากระดาษ มากกว่าเครื่องมือเลย์เอาต์ ถ้าบทความบอกว่าตัวเองละเอียดแบบ pedantic ก็ควรละเอียดกว่านี้

    • ในบทนำ HTML/CSS ควรอธิบายให้ชัดว่าเทคโนโลยีเหล่านี้ตอนแรกถูกสร้างขึ้นเพื่อ เรนเดอร์เอกสารออนไลน์ เท่านั้น
      โดยพื้นฐานแล้วมันถูกสร้างมาเหมือน Microsoft Word สำหรับไฟล์ที่อยู่บนคอมพิวเตอร์ของคนอื่น ดังนั้นพร็อพเพอร์ตียุคแรกส่วนใหญ่ เช่น float จึงมีไว้สำหรับเลย์เอาต์แบบการจัดหน้า/จัดตัวพิมพ์
    • องค์ประกอบทั้งหมดในคอนเทนเนอร์จะลอยขึ้นไปด้านบนของคอนเทนเนอร์ และไปทางขวาหรือซ้ายขององค์ประกอบก่อนหน้า ขึ้นอยู่กับทิศทางข้อความว่าเป็น ltr หรือ rtl
      หากไม่มีพื้นที่เหลือ ก็จะลงไปอยู่ใต้องค์ประกอบก่อนหน้า ถ้าองค์ประกอบเป็น display: block มันจะกินพื้นที่แนวนอนทั้งหมด ดังนั้นองค์ประกอบทั้งหมดที่ตามมาจะลอยลงไปอยู่ข้างใต้ นั่นจึงเป็นที่มาของชื่อ float และเป็นวิธีคำนวณตำแหน่งขององค์ประกอบ
      เมื่อใช้ float:left|right จะบังคับให้องค์ประกอบนั้นลอยไปทางซ้ายหรือขวาก่อนองค์ประกอบอื่นในคอนเทนเนอร์เดียวกัน แน่นอนว่าถ้าคอนเทนเนอร์ใช้ flex หรือ grid ก็จะไม่ทำงานแบบนี้อีกต่อไป
    • ส่วนใหญ่ของบทที่ 1 (https://book.mixu.net/css/1-positioning.html#float-positioni...) กล่าวถึงความซับซ้อนและ flow แบบพิเศษของ float และอธิบายวิธีนำพฤติกรรมนั้นไปใช้ซ้ำและประยุกต์กับวัตถุประสงค์อื่นอย่างระมัดระวัง
      โดยเฉพาะเมื่อคำนึงว่าตอนที่เขียนยังไม่มีเลย์เอาต์แบบ flexbox/grid ผมจึงมองว่าเป็น คำอธิบายที่ละเอียดรอบคอบ เพียงพอ
    • เลย์เอาต์แบบ flexbox เครื่องมือนี้ช่วยทำให้กระบวนการง่ายขึ้น
      ลดสิ่งที่ต้องคอยดูแลจากหลายพร็อพเพอร์ตี: https://flexboxcss.com
    • ผมยังไม่ค่อยแน่ใจว่าจะวาง sidenote หรือ marginal note โดยไม่ใช้ float ได้อย่างไร
      โดยเฉพาะเมื่อโน้ตต้องจัดแนวให้ตรงกับตำแหน่งอ้างอิงกลางย่อหน้า

  • บทความแบบนี้แม้จะเป็นบทความก่อนยุค CSS Grid ก็ยังรู้สึกหนักอยู่ดี พอ CSS Grid ออกมา เลย์เอาต์ CSS ก็ซับซ้อนขึ้น และแม้จะทำเว็บดีเวลลอปเมนต์มา 10 ปีแล้ว ก็ยังรู้สึกว่า CSS ลึกจนมองไม่เห็นก้นบึ้ง
    ทั้งวิธีการทำงาน เคสยกเว้นที่พบได้ยาก กลไกภายใน และจำนวนฟีเจอร์มหาศาลก็เป็นแบบนั้น และเมื่อไม่นานมานี้ก็เพิ่งเขียนบทความเกี่ยวกับเรื่องนี้ด้วย
    ยังไม่ทันตามรายละเอียดของ Grid Layouting ได้ครบ subgrid กับ container queries ก็ออกมาแล้ว คุณสมบัติใหม่หลายอย่างที่เพิ่มเข้ามาดูครอบคลุมกรณีที่เฉพาะเจาะจงมาก จนสงสัยว่าจะมีโอกาสได้ใช้ไหม (อย่าง hanging-punctuation, font-palette)
    แค่คุณสมบัติที่เกี่ยวกับการใส่ยัติภังค์ในย่อหน้าก็มีอย่างน้อยสามอย่างแล้ว และคุณอาจไม่รู้ว่า property filter ยังรองรับฟิลเตอร์อีกชนิดหนึ่งที่ต่างออกไปโดยสิ้นเชิงซึ่งใช้ SVG ด้วย ยังปรับอัลกอริทึมการสเกลภาพได้ และ border-radius ก็รองรับมุมแบบวงรีด้วย
    จะพูดแบบนี้กับเทคโนโลยีไหนก็ได้ แต่ CSS ต่างออกไป มันจัดการสิ่งต่าง ๆ มากเกินไป ด้วยวิธีที่มากเกินไป และเปลี่ยนแปลงมากเกินไป เร็วเกินไป: https://shubhamjain.co/2024/02/19/css-impossible-thats-okay/

    • สงสัยว่า “ทำเว็บดีเวลลอปเมนต์มา 10 ปีแล้ว แต่ CSS ก็ยังลึกจนมองไม่เห็นก้นบึ้ง” หมายความว่าอะไรกันแน่
      ใช้ CSS มานานกว่านั้นอีก แต่ก็ไม่เคยพยายามจำเลยว่าเป็น align-items หรือ justify-content เลยจำไม่ได้ พอใช้ flexbox เมื่อไหร่ก็เปิด https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ทันที
      Grid ยิ่งจำไม่ได้กว่าเดิม แต่พอบ่นสักสองสามครั้งแล้ว WTF ไปบ้าง ก็ทำสิ่งที่ต้องการออกมาได้ง่ายพอสมควร เลยไม่รู้สึกว่ามันลึกจนมองไม่เห็นก้นบึ้ง ได้ยินคนพูดแบบนี้เกี่ยวกับ CSS บ่อย แต่ส่วนใหญ่ผมรู้สึกว่าการทำเลย์เอาต์ที่ต้องการนั้นค่อนข้างง่ายโดยไม่ต้องลงแรงมาก เพียงแต่ไม่ได้จำ CSS แบบที่จำ JS เท่านั้นเอง
    • ถ้าสนใจเลย์เอาต์ CSS แนะนำให้เรียน Flexbox และ CSS Grid ก่อน
      ทั้งสองอย่างมีเอกสารดี ค่อนข้างเข้าใจง่าย และโดยเฉพาะ grid มีพฤติกรรมแปลก ๆ น้อย
      ทุกวันนี้แทบไม่จำเป็นต้องรู้ flow layout ลึกมาก และข้าม float กับ table layout ไปได้เลย ใช้เฉพาะกับภาพลอยในคอนเทนต์ข้อความซึ่งเป็นวัตถุประสงค์ดั้งเดิม และกับตารางจริง ๆ ก็พอ
    • ปัญหาที่เจอเสมอในงานฟรอนต์เอนด์คือ บทความทุกชิ้นตั้งสมมติฐานว่าผู้อ่านเป็นคนที่ติดตามกระแสล่าสุดมาตลอด 15 ปีที่ผ่านมา
      ตอนเริ่มทำงานฟรอนต์เอนด์จริง ๆ และได้รับเงินเป็นดอลลาร์ ผมยังสร้าง DHTML โดยตรงจาก perl อยู่เลย แค่พิมพ์ตัวย่อนั้น นิ้วก็ยังสะดุด เพราะมันหายไปไกลจากแคชความจำของกล้ามเนื้อมากแล้ว
      ความรู้ฟรอนต์เอนด์ของผมอยู่ระดับเด็กหกขวบที่รู้แคลคูลัส เลยรู้สึกเหมือนตอนนี้ไม่มีทางตามทันแล้ว
    • ผมก็คล้ายกัน แค่เริ่มใช้ grid ไปตรงโน้นตรงนี้ โดยรวมก็ทำงานได้ดี
      แต่ผมใช้ plain CSS และปกติก็ไม่มี global stylesheet ด้วย เลยช่วยได้ค่อนข้างมาก
    • มันอาจแย่กว่านี้ก็ได้ อาจเป็น LaTeX ก็ได้

  • ผมพัฒนาแอป UI มาเยอะ และส่วนใหญ่ใช้ Angular ช่วงนี้ก็ใช้ เฟรมเวิร์ก อย่าง Bootstrap หรือ Foundation ไปเลย
    ตัวเลือกเลย์เอาต์จำนวนมากของ CSS ล้วน ๆ นั้นท่วมท้นและปวดหัว โดยเฉพาะใน responsive design เคยลองใช้ CSS ล้วน ๆ แล้ว แต่สุดท้ายก็ใช้ boilerplate เยอะ และกลายเป็นสร้างอะไรคล้ายมินิเฟรมเวิร์กขึ้นมา
    ถ้าไม่ได้ทำเว็บไซต์ดีไซเนอร์แบบสั่งทำเฉพาะตัว ส่วนตัวไม่เห็นความจำเป็นที่จะต้องประดิษฐ์ล้อใหม่ไปเรื่อย ๆ

    • boilerplate ยังมีอยู่บ้าง แต่ชอบ Open Props เพราะเป็นแนวทางแบบไฮบริด
      CSS ไม่ได้หมายถึงการประดิษฐ์ล้อใหม่เสมอไป และช่วยให้ทำเลย์เอาต์ยาก ๆ หรืองานที่เดิมต้องใช้ JS ได้ง่ายและทรงพลังขึ้น
      Bootstrap ก็โอเค แต่ถ้าต้องแก้ปัญหาเลย์เอาต์ขั้นสูง ก็ต้อง inspect element บ่อย ๆ เพื่อดูว่าสไตล์อะไรถูกนำไปใช้จริง อย่างน้อยจากประสบการณ์ของผมเป็นแบบนั้น ดังนั้นส่วนตัวผมขอเดิมพันฝั่ง CSS
      ฟีเจอร์ใหม่ที่คาดหวังคือกฎ @scope ซึ่งน่าจะช่วยให้สร้างสไตล์ที่มีสโคปได้ง่ายขึ้นมาก
      https://open-props.style/
      https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
    • ฟีเจอร์ CSS สมัยใหม่อย่าง flexbox, grid, media query ถูกเพิ่มเข้ามาเพื่อลดความจำเป็นของ เฟรมเวิร์กอย่าง Bootstrap

  • บทความนี้เขียนก่อน CSS Grid กับ CSS columns หรือเปล่า?
    มีบทความเกี่ยวกับ z-index ด้วย: https://philipwalton.com/articles/what-no-one-told-you-about...

    • ใช่ ตาม https://book.mixu.net/ ระบุว่าเขียนในปี 2015 และถ้าเป็นบทความเก่า 9 ปี ก็อดกังวลไม่ได้ว่าจะยังมีประโยชน์มากกับ CSS สมัยใหม่หรือเปล่า

  • ดูจากการที่บทที่ 3 พูดถึง margin collapsing กับ negative margins บทความนี้ให้ความสำคัญกับการเข้าใจเทคนิคเลย์เอาต์แบบเก่า
    มีคุณค่าเมื่อต้องดูแลโค้ดเบสเลกาซี แต่สำหรับโปรเจกต์ใหม่ควรหลีกเลี่ยงจะดีกว่า

  • วิธีที่ดีที่สุดในการเรียน CSS ให้ลึกคืออะไร? เอกสารทางการให้ความรู้สึกแปลก ๆ ว่าอะไรยังใช้ได้ในปัจจุบันหรือไม่

    • การใช้ “actual” ในความหมายว่า “current” ออกนอกประเด็นไปหน่อย แต่เป็นหนึ่งใน สำนวนอังกฤษแบบ EU ที่ผมชอบ
      ถ้าคิดว่าในภาษาดัตช์ current คือ actueel และ actual แปลว่า daadwerkelijk ก็เข้าใจได้ดีพอ ถ้าเจ้าของภาษาเองสับสน เรื่องนี้อาจช่วยได้ด้วยซ้ำ
    • ผมคิดว่าวิธีที่ดีที่สุดคือทำอะไรสักอย่างซ้ำ ๆ
      อาจเป็นคำแนะนำที่เหมาะกับรูปแบบการเรียนรู้บางแบบ แต่ถ้าได้ลองปรับแต่งสไตล์และเลย์เอาต์จริง ๆ แง่มุมเชิงปฏิบัติของวิธีการทำงานจะติดตัวอย่างชัดเจน
      เวลาใช้ CSS ผมตั้งเป้าให้เขียนให้น้อยที่สุด ไม่ใช่เพราะเกลียด CSS ตรงกันข้าม ผมคิดว่ามันถูกวิจารณ์แย่เกินควร แต่เพราะเราจะได้เรียนรู้วิธีจัดสไตล์เลย์เอาต์ให้มีประสิทธิภาพขึ้นโดยไม่ซ้อนประกาศมากเกินไป
    • สัปดาห์นี้ผมกลับมาทบทวนเทคโนโลยีฝั่งฟรอนต์เอนด์และลองสำรวจตลาดเล็กน้อย
      แหล่งข้อมูลที่ดีที่สุดสำหรับพื้นฐาน CSS คือ https://web.dev/learn/css และมีทั้ง flexbox กับ grid ด้วย
      สำหรับแนวทางการออกแบบ ผมแนะนำ Refactoring UI มีคำแนะนำที่นำไปใช้ได้จริงจำนวนมาก ซึ่งหนังสืออย่าง The UX Book ยังขาดอยู่
      ในโปรเจกต์ของผม ผมใช้ TailwindCSS ของผู้เขียน Refactoring UI และคอมโพเนนต์ Daisy UI ดังนั้นในทางปฏิบัติแทบไม่ได้เขียน raw CSS เลย ตอนแรก TailwindCSS ให้ความรู้สึกเหมือนถอยกลับไปเป็น inline CSS แต่สุดท้ายมันก็ดีกว่าทางเลือกอื่น ๆ แนะนำให้ลองใช้ดู
    • อยากรู้ว่า “เอกสารทางการ” ในที่นี้หมายถึงอะไร สเปก[1] หรือ MDN[2]?
      [1] https://drafts.csswg.org/
      [2] https://developer.mozilla.org/en-US/docs/Web/CSS
      อย่างแรกไม่ใช่สื่อการเรียนรู้สำหรับนักพัฒนาเว็บมือใหม่ ส่วนอย่างหลังก็ไม่ใช่เอกสารทางการหรือเอกสารที่มีอำนาจรับรอง แต่โดยทั่วไปจะมีข้อมูลเกี่ยวกับ การรองรับ Baseline และตารางความเข้ากันได้ของเบราว์เซอร์
    • ควรเรียน flexbox เรียน box model และโดยเฉพาะอย่างยิ่งเรียนว่าเมื่อไรควรใช้ margin กับ padding
      ควรเรียนด้วยว่าการ cascade ของสไตล์ทำงานอย่างไร แล้วจะเข้าใจว่าทำไมจึงใช้ SCSS และการพัฒนาคอมโพเนนต์เพื่อทำให้ไม่ต้องกังวลเรื่องนั้นเป็นส่วนใหญ่
      จากนั้นเรียน media query และการกำหนดเป้าหมายตามขนาดหน้าจอ ที่สำคัญที่สุดคือไม่ต้องอายที่จะค้นเว็บว่า “วิธีทำ x ใน CSS” สเปกใหญ่มากและมีหลายอย่างที่ต้องจำ ถ้าไม่ได้ใช้บ่อย ๆ เป็นเวลานาน ก็จำทั้งหมดไม่ได้หรอก