ซาฟารี 4 คุณสมบัติใหม่

ที่ WWDC 2009 Apple ได้เปิดตัวเบราว์เซอร์ Safari 4 เวอร์ชันอย่างเป็นทางการ เวอร์ชันอย่างเป็นทางการของ Safari 4 เลิกใช้วิธีแท็บที่คล้ายกับ Chrome และกลับสู่อินเทอร์เฟซของเวอร์ชัน 3.0 ว่ากันว่าที่ WWDC นั้น Serlet BSed เบราว์เซอร์ IE8 ของ Microsoft อย่างจริงจัง โดยบอกว่าปัจจุบันกลไก JavaScript ของ Safari นั้นเร็วที่สุดในโลก จากข้อมูลการทดสอบที่เขาให้ไว้ Chrome 2 นั้นเร็วกว่า IE8 ถึง 5.3 เท่า และความเร็วของ Safari4 คือ 7.8 เท่า ของ IE8!

ข้อมูลเหล่านี้ส่วนใหญ่เป็นลูกเล่นอย่างเป็นทางการ ดังนั้นเราไม่ต้องสนใจมันในตอนนี้และดูว่า Safari 4 จะมีผลกระทบต่อการพัฒนาส่วนหน้าของเราอย่างไร:

รองรับแท็กเสียงและวิดีโอ

Safari4 มีการปรับปรุงมากมายในการรองรับ CSS ดังนี้:

Safari 4 เริ่มรองรับคุณสมบัติการซูม การใช้งานและเอฟเฟกต์นี้จะเหมือนกับการใช้งานเบราว์เซอร์ IE ข้อแตกต่างคือหากซูม Safari จะย่อขนาดแบบอักษรให้เล็กที่สุดที่เบราว์เซอร์รองรับ ในขณะที่ IE จะย่อขนาดโดยตรงตามขนาดที่ตั้งไว้ ตัวอย่างเช่น:

.zoomTest { ขนาดตัวอักษร : 12px ; ซูม : 0.1 }

Safari จะย่อขนาดตัวอักษรให้เหลือเพียง 9px เท่านั้น ในขณะที่ IE จะย่อเหลือขนาด 1.2px (ซึ่งไม่สามารถมองเห็นได้ด้วยตาเปล่าอีกต่อไป)

ประกอบด้วยชุดคุณสมบัติย่อย:

• -webkit-animation-name ระบุชื่อของภาพเคลื่อนไหว
• -webkit-animation-duration ระยะเวลาแอนิเมชั่น
• -webkit-animation-timing-function วิธีการสลับเฟรมแอนิเมชัน ซึ่งก็คือเอฟเฟกต์แอนิเมชัน อาจรวมถึงการทำให้ง่าย เชิงเส้น การค่อยๆ เข้า การค่อยๆ ออก การค่อยๆ เข้า-ออก
• -webkit-animation-delay กำหนดเวลาเริ่มต้นของภาพเคลื่อนไหว
• -webkit-animation-iteration-count จำนวนการทำซ้ำแอนิเมชั่น
• -webkit-animation-direction ทิศทางแอนิเมชั่นมีสองคุณสมบัติ: ปกติ, การเล่นไปข้างหน้า; สลับ, ทิศทางสลับ, การเล่นไปข้างหน้าด้วยเลขคู่, การเล่นย้อนกลับด้วยเลขคี่

CSS มาสก์/เอฟเฟกต์มาสก์

• -webkit-mask-attachment มีสองค่า: แก้ไขและเลื่อน;
• -webkit-mask-clip เอฟเฟกต์การตัดของเส้นขอบองค์ประกอบ
• -webkit-mask-position การใช้งานจะคล้ายกับแอตทริบิวต์ตำแหน่งพื้นหลัง
• -webkit-mask-origin ระบุจุดยึดของแอตทริบิวต์ -webkit-mask-position มีแอตทริบิวต์สามประการ: เส้นขอบ เนื้อหา และช่องว่างภายใน
• รูปภาพมาสก์ขององค์ประกอบ -webkit-mask-image ค่าคือเส้นทางรูปภาพ
• -webkit-mask-repeat การตั้งค่าซ้ำ ๆ
• -webkit-mask-composite สไตล์ผสม ค่าเริ่มต้นคือเส้นขอบ ซึ่งหมายความว่าพื้นหลังจะขยายไปยังพื้นที่เส้นขอบ นอกจากนี้ยังสามารถตั้งค่าเป็นช่องว่างภายในได้

Safari 4 ยังเพิ่มหรือปรับปรุงการรองรับคุณสมบัติ CSS อื่นๆ บางอย่างด้วย ตัวอย่างเช่น ตำแหน่งพื้นหลังเริ่มรองรับเอฟเฟกต์ภาพเคลื่อนไหว ซึ่งจะไม่ได้อธิบายไว้ที่นี่

จะเห็นได้ว่าคุณสมบัติ CSS ใหม่ที่เพิ่มลงใน Safari ไม่ได้เป็นส่วนหนึ่งของมาตรฐาน W3C แต่คุณสมบัติส่วนตัวของ webkit ช่วยให้เราสามารถพัฒนาแอปพลิเคชันเครือข่ายที่ดีขึ้นได้

บทบาทไว-อาเรีย

คงจะไม่ค่อยมีใครรู้จัก WAI-ARIA WAI-ARIA ย่อมาจาก W3C Web Accessibility Initiative Access Rich Internet Applications ซึ่งแปลเป็นภาษาจีนว่า "Accessible Rich Internet Applications" ในเวลาเดียวกัน W3C ได้พัฒนามาตรฐานบทบาท WAI-ARIA Google เพิ่งประกาศว่าจะสนับสนุน WAI-ARIA อย่างยิ่ง และฟังก์ชันการอ่านหน้าจอของโปรแกรมอ่าน Google ก็ถูกนำมาใช้ผ่าน WAI-ARIA ปัจจุบัน Firefox ได้เริ่มรองรับ WAI-ARIA แล้ว และ IE8 ก็รองรับบางส่วนแล้ว Safari 4 ยังรองรับบทบาท WAI-ARIA อีกด้วย ตรวจสอบการสนับสนุนของ Safari 4 สำหรับ WAI-ARIA >>

เป็นที่น่าสังเกตว่า WAI-ARIA ดูเหมือนจะรองรับเฉพาะแท็ก div และ span เท่านั้น เพื่อให้ร่วมมือกับ WAI-ARIA นั้น Safari ยังเพิ่มคุณสมบัติที่รองรับบางอย่างของ HTML เช่น aria-checked/aria-level/aria-valuemax/aria -valuemin ฯลฯ

ดาวน์โหลดซาฟารี :

PS: ปุ่มดาวน์โหลดนี้มาจากหน้าดาวน์โหลดอย่างเป็นทางการของ Safari เด็ก ๆ ที่ต้องระวังจะพบว่าสไตล์ของปุ่มนี้ไม่ใช่สไตล์ของ Apple อย่างเห็นได้ชัด แต่เหมือนกับปุ่มสีเขียวบนหน้าดาวน์โหลดของ Firefox

ข้อความต้นฉบับ: http://www.qianduan.net/safari-4-new-features.html