จากความเดิมเมื่อสามปีที่ผ่านมา ผมได้เขียนบทความเรื่อง CSS Sticky เอาไว้ หลายคนอาจจะได้ลองเอาไปใช้ แต่บางคนอาจจะเจอว่าเอาไปใช้แล้วมันไม่ทำงาน หรือมันทำงานไม่ได้ มันอาจจะมีบางอย่างที่แอบซ่อนอยู่ในโค้ดของเรา นั่นก็คือ Overflow ถ้า parent หรือแม่ ปู่ ย่า ตา ยายของมันมี overflow เป็น hidden จะทำให้ sticky positioned ไม่ทำงานครับ จบ
วันนี้เรามีข่าวมาแจ้งว่าสำหรับการเขียนเว็บเพื่อให้ของติดห้อยอยู่บนขอบหน้าจอเมื่อเลื่อนเม้าส์ลงไปเรื่อยๆ เราไม่จำเป็นต้องใช้ความช่วยเหลือจาก Javascript อีกต่อไปแล้ว เมื่อ CSS มีความสามารถใหม่เพิ่มเข้ามา นั่นก็คือเราสามารถสั่งให้ Element ใดๆ สามารถเกาะติดอยู่ตรง View Port เมื่อเราเลื่อนหน้าจอไปถึงโดยคำสั่ง CSS Sticky
ช่วงนี้ผมได้กลับมาเขียน HTML, CSS ทำ Microdata และที่สำคัญหัดเรียน Javascript อีกรอบ เป็นการกลับมารื้อสมองครั้งใหญ่ Stack Overflow คือเพื่อนสนิทชิดข้างกายยามเหงา ด้วยอาการที่เลิกเขียนแบบจริงๆ จังๆ ไปนานมันก็เกิดอาการหลงๆ ลืมๆ ไปบ้าง ช้านิดช้าหน่อยตามประสา บ้างก็แอบมีสั่ง height ใน selector เดียวกันสองครั้ง อะไรแบบนั้น
CSS กากกากส์ วันนี้ขอนำเสนอการใช้ Distance Units ประเภท length โดยเจาะจงไปที่ Relative length แล้วแทงยาวไปที่ Viewport-percentage lengths ซื่งก็คือ VW (Viewport width) และ VH (Viewport height)
เราสามารถที่จะให้ของที่อยู่ในกล่องของเราทำการวิ่งตาม Veiwport ได้ทั้งสองทาง ไม่ว่าความกว้างหรือความสูง
คุณเคยเจอปัญหาแบบผมไหม ซาร่าห์ เวลาที่เราใช้โทรศัพท์แล้วต้องกรอกตัวเลขลงในช่องรับข้อมูล อย่างเช่น เลขบัตรเครดิตหรือว่าเบอร์โทรศัพท์ แต่ดันเจอคีบอร์ดที่เต็มไปด้วยตัวหนังสือเด้งขึ้นมา ต้องเสียเวลาขยับนิ้วไปสะกิดติ่งเปลี่ยนคีย์บอร์ดบนมือถือของเราเป็นตัวเลขอีกรอบ
แล้วอะไรคือ UX ที่ดีที่สุด ที่ดีที่สุดในที่นี้คือที่สุดของใคร ที่สุดของแจ้ หรือที่สุดของเรา ที่สุดของเขา ที่สุดของเธอ ใช้งานดีกับใช้งานได้มันต่างกันกับใช้งานได้ดีเลยทีเดียว ซึ่งนั่นก็จะไม่มีครั้งที่สองอีกเพราะมันดีทีเดียว อ่ะแฮ่มถุยส์
พูดง่ายๆ แบบตรงๆ คือมันไม่มีอะไร “ดีที่สุด” ให้เราได้เชยชมหรอก เขาบอกว่าอย่าเอาคำว่า “ดีที่สุด” มาปิดกั้นโอกาสที่จะดีขึ้นไปอีก