คุณสมบัติใหม่ของเบราว์เซอร์ Safari 4

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

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

html 5

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

CSS

Safari4 ได้ทำการปรับปรุงการสนับสนุน CSS มากมายดังนี้:

ซูม

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

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

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

-webkit-animation

มีชุดของ properties:

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

-webkit-mask

เอฟเฟกต์หน้ากาก/หน้ากาก CSS

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

การปรับปรุงอื่น ๆ

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

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

ตัวละคร Wai-aria

ฉันเชื่อว่ามีคนไม่มากนักเกี่ยวกับ Wai-Aria WAI-ARIA หมายถึง W3C Web Accessibility Initiative แอปพลิเคชั่นอินเทอร์เน็ตที่สมบูรณ์ซึ่งแปลว่าเป็นแอปพลิเคชั่นอินเทอร์เน็ตที่สมบูรณ์แบบที่ปราศจากอุปสรรคในภาษาจีน ในเวลาเดียวกันมาตรฐานบทบาทของ Wai-aria Wai-aria Google ประกาศเมื่อไม่นานมานี้ว่าจะสนับสนุน Wai-Aria อย่างยิ่งและฟังก์ชั่นการอ่านหน้าจอของ Google Reader นั้นถูกนำไปใช้ผ่าน Wai-Aria ในปัจจุบัน Firefox ได้เริ่มสนับสนุน Wai-Aria และ IE8 สนับสนุนบางส่วน Safari 4 ก็เริ่มสนับสนุนบทบาทของ Wai-Aria ตรวจสอบการสนับสนุนของ Safari 4 สำหรับ wai-aria >>

เป็นที่น่าสังเกตว่า Wai-Aria ดูเหมือนจะสนับสนุน Div และ Span Tags เท่านั้น เพื่อให้ความร่วมมือกับ Wai-Aria Safari ยังเพิ่มคุณลักษณะที่สนับสนุนของ HTML เช่น Aria-Checked/Aria-level/Aria-Valuemax/Aria-Valuemin ฯลฯ

ดาวน์โหลด Safari:

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