Apple กับหน้าพิเศษ HTML5 CSS3 ปัญหาที่ซ่อนความจริงไว้ข้างหลัง

จากข่าวสองมาตรฐานเรื่องล่าสุดที่ Apple ได้ออกตัวล้อฟรี เหม็นไหม้ยาง ในการสนับสนุน HTML5 CSS3 อย่างเต็มที่ พร้อมๆ กับทำ Micro site เพื่อแสดงความสามารถของ Safari ที่สามารถทำงานกับ คุณสมบัติใหม่ๆ ได้อย่างราบรื่นนั้น ไม่ว่าจะมองไปทางไหน ผมเห็น อาร์ทตัวพ่อ ทั้งไทยและเทศ ต่างวิพากย์ วิจารณ์ ในมุม Apple เลือกปฏิบัติ เพราะบังคับให้ดูเฉพาะใน Safari แถมยังพาดประโยคจิก กัด บราวเซอร์ ล้านปลั๊กอินเจ้าหนึ่งเอาไว้ด้วย

แม้แต่ Mozilla ก็ออกมาวิพากย์ บางอันกับเขาเหมือนกัน

จริงครับ Apple เลือกพูดเฉพาะส่วนที่ตัวเอง ถูก เท่านั้น เรื่องอย่างนี้เราคุ้นกันอยู่แล้วครับ เพราะไม่ใช่แค่ Apple หรอกครับผมว่า M$ เอง ก็เลือกหลับตาข้างหนึ่งเล่นบทนี้เหมือนกันในตอนที่สดสอบ IE9 พรีวิวล่าสุด ที่ออกมาบอกว่าตัวเองรองรับมาตรฐานได้สูงกว่าใครเพื่อน

ไม่ว่ายังไงก็ช่าง ผมขออย่างหนึ่งสำหรับคนทำงาน CSS HTML ที่รัก และชอบพัฒนาตัวเองอยู่เงียบๆ "อย่าหลงประเด็น" ในขณะที่คนอื่นต่างพากัน เฮโล เกทับ บัฟแหลก ด่า Apple อยู่นั้น ขอมองระหว่าง บรรทัด ของที่ซ่อนอยู่ข้างใน มีประโยชน์มหาศาล

CSS3 ที่มันขึ้นต้น ว่า -webkit- ทั้งหลายนั้น คืออนาคต ที่สามารถจับต้อง และนำมาผันเป็นเงินได้ไม่ยาก ถ้าท่านได้ลองเล่นหรือดูตัวอย่างทั้งหมดที่ Apple จัดมาให้แล้ว ท่านสามารถเอาไปพัฒนาต่อ หรือศึกษาเพื่อเตรียมการรับมืออนาคตที่สดใสก่อนใครได้ไม่ยาก

ไม่ว่าจะเป็นการตั้งค่า Keyframe สำหรับทำภาพเคลื่อนไหว การตั้งค่า Transition การตั้งองศาทำ Transform การใช้ RGBa มีทั้ง 2D หรือ 3D ให้เราได้ดู

ถึงแม้ว่าการจัดการรูปแบบ Code ตามตัวอย่างนั้น ยังดู แปลกๆ อยู่บ้าง แต่มันก็ยังมีประโยชน์

เราได้เห็นการเขียน CSS โดยตั้ง Class และแปลงมันเป็น Object แล้วดึงเอา ชุด Object นั้นมาวนใช้งานในหลายๆ ที่

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

ตัวอย่างบางอันที่เราเห็นในหน้าเว็บนั้นก็ เช่น (จาก http://www.apple.com/html5/styles/html5.css )

	

.fadedIn_pane {
	position:absolute;
	opacity: 0;
	-webkit-animation-duration: .735s;
	-webkit-animation-name: pane_scaleIn;
}

@-webkit-keyframes pane_scaleIn {
  0%   { -webkit-transform:scale3d(1,1,1); opacity:1; }
  50%  { -webkit-transform:scale3d(0.665,0.665,1); opacity:0; }
  100% { -webkit-transform:scale3d(0.33,0.33,1); opacity:0; }
}

จากโค้ดด้านบน class .fadedIn_pane จะถูกตั้ง animation-name ให้ชื่อว่า pane_scaleIn และ CSS Selector ถัดมา จึงสั่งการให้ pane_scaleIn นั่น ทำงานอย่างที่ต้องการอีกที

โดยส่วนตัวแล้วผมเชื่อว่า โค้ดต่างๆ เหล่านี้ต่างหาก ที่มันเป็นประโยชน์สำหรับคนทำงานด้าน CSS HTML อย่างแท้จริง เพราะว่า น้อยคนนักที่เจ้าเข้าไปยัง w3.org แล้วคร่ำอ่านเนื้อหาที่เป็นงานวิจัยทั้งหลาย และพยายามเอามาตีความ
แล้วสร้างความเข้าใจมันด้วยตนเอง

แม้กระทั่งเว็บชาวผมทองทั้งหลายเอาเอาเนื้อหาต่างๆ มาเล่าต่อ มันก็ยังไม่ได้ใจความทั้งหมดอยู่ดี หน้าที่ศึกษาและพัฒนา ก็ตกอยู่ที่ตัวคนทำวานอย่างเราเองว่าจะเลือกถูกจุดหรือไม่

ไม่ใช่หลงประเด็นตามข่าวแล้วเพิกเฉยต่อของดี ดี ที่ซ่อนอยู่ภายใน

ใน CSS4 เราอาจจะเจอ

	
    #container {
    	width: 90em;
    }
    article[class~="normal"] {
    	width: 50em;
    }
    article[class~="content"] {
    	width: 20em;
    }
    aside[class*="normal"] {
    	width: #container - (article[class~="normal"]+article[class~="content"]);
    }
    

จากตัวอย่างด้านบน เป็น CSS ที่เอาไว้คำนวณขนาดของ Box model ซึ่ง เป็นการอ้างอิงจากกรอบของ #container

หรือ แม้กระทั่งการเขียน Template Layout แบบใหม่ (อัพเดท W3C Working Draft 2 April 2009)

	
    #content {
     position: b;
     display: "c   .   d   .   e   "
              ".   .   .   .   .   "/1em
              ".   .   f   .   .   "
               *  1em  *  1em  *;
}
  
    
    @page :first {
  		display: "A  A  A  A  A  A  A  A  A" / 5cm
           ".  .  .  .  .  .  .  .  ." / 0.25cm
           "B  .  C  C  C  C  C  C  C" / *
           "B  .  C  C  C  C  C  C  C" / *
           "B  .  C  C  C  C  C  C  C" / *
           "B  .  C  C  C  C  C  C  C" / *
           "B  .  C  C  C  C  C  C  C" / *
           "B  .  D  D  D  D  D  D  D" / *
           "B  .  D  D  D  D  D  D  D" / *
           "B  .  E  E  E  .  F  F  F" / *
           "B  .  E  E  E  .  F  F  F" / *
           "B  .  E  E  E  .  F  F  F" / *
            * 3em * 3em * 3em * 3em *
}
    

    

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

มีความสุขกับการใช้ชีวิตครับ

ปล. ผมใช้ Mac ไม่เป็น

Back to Top

8 Responses to Apple กับหน้าพิเศษ HTML5 CSS3 ปัญหาที่ซ่อนความจริงไว้ข้างหลัง

Leave a Reply to finzaa Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top