ตั้งแต่ยุคสมัยการทำเว็บไซต์เปลี่ยนไป จากสมัยก่อนต้องทำด้วย table และกำหนด สไตล์ลงไปในนั้น ก็เปลี่ยนมาสู่การใช้ CSS (Cascading Style Sheets) เหมือนในปัจจุบัน

ผมจำได้ว่า รู้จักเจ้า CSS ครั้งแรกเมื่อประมาณปี 2001 ตอนนั้น แชมป์ ผู้ก่อตั้ง Exteen ได้เอาเทคโนโลยีนี้มาใช้ แล้วทำให้ผมตะลึงว่า มันดีไซน์เว็บทั้งเว็บโดยไม่มี table สักตัว! ประกอบกับแก้ไขหน้าเว็บด้วยไฟล์เพียงไฟล์เดียวอีกต่างหาก.. ตั้งแต่นั้นมาก็ตั้งหน้าตั้งตาหัด css กับเขาบ้าง

 

แต่นั่นก็หลายปีผ่านมาแล้ว จนมาถึงตอนนี้ ยุคที่คนทั่วไปเรียกกันว่าเป็นยุค Web 2.0 ที่อะไรๆ ก็ต้องใช้ CSS ต้อง Ajax จนเกร่อเต็มบ้าเต็มเมือง ไม่ว่าจะไปงานเสวนาตระกูลแคมป์ๆทั้งหลายก็หนีไม่พ้น BarCamp Bangkok 1, BarCamp Bangkok 2 (เพิ่งนึกได้ว่าลืมเขียนถึง), TNWA2008, WordCamp

จริงๆ ไม่ว่าจะตอนโน้น หรือตอนนี้ ผมก็ยังมองว่า CSS เป็นอะไรที่ซับซ้อน เพราะจะดีไซน์และทำให้เว็บเบราเซอร์แสดงผลให้ถูกต้องทุกตัว เป็นอะไรที่ละเอียดอ่อนมาก ทุกวันนี้โปรแกรมเมอร์ทั่วไปก็มักจะทำให้รองรับ แค่ IE, Firefox, Opera ถ้าสามตัวนี้ได้ ก็แทบจะ 95% ที่คนทั่วโลกเปิดได้แน่นอน (ตอนนี้ก็มี Google Chrome อีกตัว แต่ผมคิดว่าคงไม่ค่อยมีใครใส่ใจกับมันมากนัก หากสามตัวที่กล่าวมาทำงานได้)

ที่กล่าวมา พูดในเชิงโปรแกรมเมอร์นะครับ แต่ในบทความนี้ ผมจะกล่าวถึงผู้ใช้งานทั่วไป ที่เรียนรู้ CSS แบบโดยไม่รู้ตัว

ตอน Exteen เปิดใหม่ๆ ผมเคยถามกับแชมป์ว่า ผู้ใช้จะแก้ CSS เป็นหรอวะ? เพราะตั้งแต่ Exteen เปิดตัวมาจนถึงวันนี้ Exteen ก็มี theme ให้ผู้ใช้เลือกไม่เกิน 5 แบบเหมือนเดิม และถ้าอยากได้แปลกๆ เอ็งต้องไปแกะ CSS ทำเอง แถม คู่มือก็ไม่มีด้วย!!!! (ตั้งแต่ไหนแต่ไร)

จนมาตอนนี้ครับ… Exteen มี Bloger แก้ไข Theme มากมายจนแปลกตา เข้ามาแทบจะคิดว่าเป็นเว็บอื่น หากไม่เป็นเมนูบาร์ด้านบนของ Exteen.. เช่น

ilumin.exteen.com ไอ้นี่คนใกล้ตัวครับ เปรี้ยวมาก ว่างจัด นั่งทำ theme และแจกชาวบ้านให้ไปใช้กันฟรีๆ ด้วย

phuphu.exteen.com นี่ของตาภูภู่ บล็อกอลังการงานสร้าง มาแต่ไหนแต่ไร เปลี่ยน theme แต่ละที หลุดโลกแทบทุกครั้ง

champ.exteen.com อันนี้ของตาแชมป์ เจ้าของ Exteen รูปแบบง่ายๆ ไม่แก้ไขมาก แต่แปลกตา

 

ถ้าพูดแค่ Exteen คงจะไม่เท่าไร เพราะพวกนี้ ย่อมเป็น super user คร่ำหวอดโต้คลื่นในเน็ตแน่นอน
แต่ถ้าไม่ใช่พวก super user ล่ะ เป็นคนทั่วไป วัยรุ่นทั่วไป ต้องไปดูที่นี่ครับ “ฮิห้า” หรือ HI5 นั่นเอง….

ผมสังเกตุมานานแสนนาน ว่าพวกน้องๆ ที่นอกจากจะทำหน้าแอ๊บแบ๊วน่ารักให้น้ำลายไหลเล่น พวกหนูๆยังทำ skin กันได้สวยงามจนโปรแกรมเมอร์อายกันไปเลย มันเกิดความสงสัยมากๆ ว่าพวกหนูๆ ทำกันได้อย่างไงวะ นั่นมัน CSS ทั้งนั้นเลยนะ..!?!?!

ไปลองสืบเสาะดูข้อมูล ก็พบว่า มีทั้งเว็บไซต์แจก skin hi5 ฟรี, แจกโค้ด skin hi5 ฟรี, สอนทำ skin hi5, มีสังคมทำ skin hi5 มากมายก่ายกอง และตามเว็บบอร์ดเหล่านั้น ก็มีการตั้งคำถามคำตอบ เรื่องของ CSS

ถ้าไม่บอกว่า มันคือเว็บ thaihi5.com ผมคงคิดว่ามันเป็น thaicss.com, divland.com ไปเสียแล้ว..

ช่วงนี้คุยกับน้องคนหนึ่ง น้องเขาเป็นคนหนึ่งที่แก้ HI5 ด้วย CSS ซึ่งตอนแรกเขาไม่รู้หรอกว่ามันคืออะไร รู้แต่ว่า มันมีโค้ดแบบนี้ แก้แบบนี้ display:none ในไอดีนี้ สามารถซ่อนช่องนี้ได้ จนผมได้อธิบายให้ฟังน้องเขาถึงรู้ว่าจริงๆ มันคือ CSS ภาษาเขียนเว็บนั้นเอง
เลยลองให้เขาลง Firefox และติดตั้ง FireBug เพื่อลองเล่นดู แต่ก็ยังไม่ชำนาญนัก จนสองสามวันต่อมา น้องเขาก็สามารถแก้ไขสิ่งที่ต้องการได้เอง (เก่งมากๆ)

วันนี้ผมเลยลองให้น้องเขาสอนทำ customize profile เพื่อทำ CSS เอง และลองนั่งแกะให้เป้นแบบที่ตัวเองต้องการดู

โอ้ว! มันซับซ้อนมาก ถ้าหากไม่ใช่ firebug จิ้มดูว่าอะไรชื่ออะไร และคู่มือใน Hi5 ก็ไม่มีบอกอะไรมากนักนอกจากการเกริ่นนำว่า CSS มันคืออะไร และให้ไปศึกษาได้ที่เว็บไหน นอกนั้นไม่มีบอกเลยว่าตำแหน่งไหน กำหนดด้วยชื่ออะไร?!?!

ก็เลยลองๆทำ เป็นแนว Simplicity แบบ Web 2.0 ทั่วไป ตามภาพ (อยากทำอีก แต่ความขยันมีแค่นี้ ฮ่าๆๆๆ)

 

ลองดูตัวอย่าง skin ของน้องๆ ใน Hi5 บางคนดูนะครับ


อันนี้ถ้าเข้าไปเห็น ไม่ได้ทำกันง่ายๆ ครับ เหมือนจะมีซ้อนภาพเคลื่อนไหวด้วย


นี่ก็เปลี่ยนหัวซะแปลกไปเลย

ผมว่า คนไทย ตอนนี้ รู้อะไรมากกว่าที่โปรแกรมเมอร์ทั่วไปหรือคนในวงการคอมคิด
สามารถใช้งาน CSS ได้อย่างไม่รู้ตัว ถึงคราวนี้และในคราวอนาคต บางทีผมว่า เว็บไซต์ทั่วไป
คงไม่จำเป็นต้องมี theme ให้เลือกมากมาย แบบยุคก่อน เพียงแค่มี theme ต้นฉบับเริ่มต้นให้สักสี่ห้าตัว
และู่มือสอนแก้ไข CSS สักฉบับ เพื่อให้ผู้ใช้รังสรรค์เอง

หากมองในด้านการทำธุรกิจ ผู้ใช้ใช้งานไม่ได้ ก็สามารถรับจ้างทำ หรือออกหนังสือคู่มือขายก็ได้ ถ้าเว็บเรามีความต้องการสูงจริง
ได้ทั้งความยืดหยุ่น ได้ทั้งเงินทางอ้อมในการ Support ได้ทั้งความง่ายในการพัฒนา

แต่ทั้งนี้ทั้งนั้น ในการพัฒนาเว็บไซต์ คงต้องมีการวางแผนโครงสร้าง CSS ให้ดีที่สุด เพื่อผู้ใช้จะได้ยืนหยุ่นและสนุกสนานไปกับมันได้อย่างเต็มที่

แม้ขณะนี้ HI5 แก้ไขได้มากมาย แต่ก็ยังยืดหยุ่นน้อยกว่า Exteen และ Exteen เองก็ยังน้อยกว่า Blogger แต่จุดนี้คงต้องถามตัวเองก่อนหละครับ ว่าจะอนุญาติให้ลูกค้าแก้ไขได้มากแค่ไหน เพราะแค่ HI5 สาวๆแอ๊บแบ๊วทั้งหลาย ก็สนุกกับมันอย่างไม่มีวันจบแล้ว..

ที่มา Lab.TOSDNคนไทยรู้จัก CSS โดยไม่รู้ตัว

Comment



smilebig smileopen-mounthed smileconfused smilesad smileangry smiletonguequestionembarrassedsurprised smilewinkdouble winkcry

Tweet

โอว CSS~~

#1 By Aelita~[-X-]~ on 2008-11-03 00:33

confused smile รู้จักมันนานละ ในวิชา Practicum sad smile sad smile
สารภาพว่าตัวเองยังมึนไป 3 วัน 7 วันอยู่เลยครับ เลยไม่ได้มานั่งปล้ำ script กับเค้าสักที

#3 By nora on 2008-11-03 06:01

เห็นด้วยครับ user ใช้มันโดยที่ไม่รู้ตัว
แล้วก็ไม่รู้จริงๆด้วย ว่ามันทำงานยังไง
เจ้าของ theme สวยๆ อาจจะไม่รู้เลยด้วยซ้ำ ว่า code แต่ละอันคืออะไร

ใช้แค่การสังเกตนิดหน่อย บวกกับแหล่ง resource ดีๆ
user ธรรมดาก็สามารถแก้ไขเองได้แล้วครับ

การปล่อยให้ user แก้ css เองมันก็สามารถทได้หลากหลายมากกว่าการที่เราจัด theme ไว้ให้เลือกเหมือนในยุคก่อนจริง แต่เราก็ต้องไม่ลืมว่า ถ้าหากเราจะมีการปรับปรุงระบบที่เกี่ยวกับ theme แล้ว หากตอนแรกวางแผนไม่ดีพอ ก็อาจจะต้องมาปวดหัวกับการแก้ไขได้ฮ่าๆ ผมรู้ว่าคุณ champ ผ่านจุดนี้มาแล้วครั้งนึงนะ open-mounthed smile

#4 By book on 2008-11-03 10:19

ผมขี้เกียจศึกษา ป่านนี้เลยยังไม่เป็นเลยซักที

#5 By โก๋สิจ๊ะ on 2008-11-03 14:14

โฮะๆๆ ThaiHi5.com ...... ของเค้าดังจริง ๆ ;P อยากรู้ว่าเด็ก ๆ เค้ารู้ได้ไงว่า แต่ละ div มันชื่ออะไร เข้าไปได้ที่ http://www.thaihi5.com/board/index.php/topic,10370.0.html ;P

#6 By Ford AntiTrust (58.8.220.56) on 2008-11-03 18:40

รู้จักมานานเมื่อกว่า 5 ปีที่แล้วตอนเรียนเว็บโปรแกรมมิ่ง แต่ก็ไม่เคยศึกษาจริงจังซักที ทุกวันนี้ก็เลยไม่เป็น จะเขียนเว็บที ก็ยังใช้ตารางแบบโบราณสไตล์อยู่ question

#7 By Eddy on 2008-11-04 00:09