ฉันควรใช้ HTML5 และ / หรือ CSS3 เพื่อสร้างเว็บไซต์ของฉันหรือไม่

16

สิ่งใหม่ HTML5 / CSS3 (Web8!) ฟังดูเจ๋ง! ฉันควรเริ่มใช้ทันทีหรือใช้ css / xhtml รอจนกว่าเบราว์เซอร์เพิ่มเติมสามารถใช้ได้หรือไม่

— เจสัน
แหล่งที่มา

คุณหมายถึงอะไรกับ Web8

— แอรอน

3

html5 + css3 = web8!

— Jason

HTTP 1.0 และ ECMAScript 5.0 เกี่ยวกับอะไร

13

เบราว์เซอร์ทั้งหมดรองรับ HTML5 แล้วแม้แต่ IE5! (หากคุณใช้สคริปต์ html5shiv) ฉันขอแนะนำให้อ่านhttp://diveintohtml5.orgเป็นหนึ่งในแหล่งข้อมูล HTML5 ที่ดีที่สุด

สำหรับ CSS3 ถ้าคุณใช้ต้องแน่ใจว่าใช้ผู้ขายส่วนเสริมเช่นกันด้านบนของไวยากรณ์ปกติ เช่น

border-radius

-moz-border-radius

-webkit-border-radius

ฉันเชื่อในการเพิ่มความก้าวหน้า การสนับสนุน css3 ของ IE9 ฟังดูมีแนวโน้มดีมาก

— จิน
แหล่งที่มา

2

ฉันคิดว่าคุณหมายถึงการใส่รัศมีเส้นขอบไว้ที่ด้านล่างใช่มั้ย

— Grant Palin

1

อนึ่งเว็บไซต์ Dive Into HTML5 ดั้งเดิมได้หายไปแล้ว มีกระจกมากมาย นี่คือหนึ่ง: diveintohtml5.info

— M. Dudley

12

อาจ.

มีบางส่วนของ HTML5 ที่คุณสามารถใช้ได้ในวันนี้ แบบฟอร์มตัวอย่าง ถ้าคุณมี<input type="email">ในเบราว์เซอร์ที่ไม่สนับสนุน HTML5 (yes แม้ IE6) <input type="text">คุณก็จะเห็นสิ่งเดียวกันที่คุณต้องการดูว่าคุณใช้ แต่ในเบราว์เซอร์ที่รองรับองค์ประกอบแบบฟอร์ม HTML5 คุณจะได้รับประโยชน์จากemailประเภทนี้: ลูกค้าจะเกิดข้อผิดพลาดในการตรวจสอบค่าโดยไม่จำเป็นต้องใช้ JS เพิ่มเติม ในขณะที่ใช่คุณจะต้องใช้ JS สำหรับเบราว์เซอร์ที่ไม่ใช่ HTML5 แต่คุณจะมีการตรวจสอบอีกชั้นหนึ่งในเบราว์เซอร์ที่สนับสนุน

อื่น คำถามในเว็บไซต์นี้ให้ภาพรวมที่ดีของคุณสมบัติใหม่ที่มีให้คุณผ่าน HTML5 และ CSS3 มีข้อมูลที่ดีมากมายในแบบฟอร์มในคำถามนั้นด้วย

เนื่องจาก Internet Explorer (และรุ่นเก่ากว่าของ Safari และ Firefox แต่อาจเป็นของหายาก) จึงไม่สนับสนุนคุณสมบัติเหล่านี้มากมายที่คุณเหลืออยู่กับไลบรารี JavaScript เพื่อเติมเต็มช่องว่าง สิ่งเหล่านี้รวมถึงประสิทธิภาพที่ได้รับความนิยม (แม้ว่าจะเป็นเพียงเบราว์เซอร์ที่จำเป็นต้องใช้งานเท่านั้น) ดังนั้นโปรดคำนึงถึงผู้ใช้ของคุณเมื่อใช้งาน

หากต้องการลดปัญหาที่เกิดจากการขาดการสนับสนุนคุณสมบัติคุณควรตัดสินใจว่าคุณลักษณะใหม่เหล่านี้มีค่าควรใช้ทรัพยากรต่อไปนี้:

html5shiv: JavaScript shiv สำหรับ IE เพื่อให้รู้จักและกำหนดองค์ประกอบ HTML5
CSS3 Pie:พฤติกรรมที่แนบมากับ IE (.htcไฟล์) ที่ทำให้ Internet Explorer 6-8 สามารถแสดงผลคุณสมบัติการตกแต่ง CSS3 ที่มีประโยชน์ที่สุดได้หลายอย่าง เมื่อนำไปใช้องค์ประกอบจะช่วยให้ IE ที่จะรับรู้และการแสดงborder-radius,box-shadow,border-image, ภาพพื้นหลังหลายและlinear-gradientเป็นภาพพื้นหลัง
Modernizr:ไลบรารี Javascript ที่ใช้การตรวจจับคุณสมบัติเพื่อทดสอบเบราว์เซอร์ปัจจุบันกับคุณสมบัติ CSS3 / HTML5 ที่กำลังจะมาถึงการเพิ่มคลาสให้กับองค์ประกอบ <html> สำหรับผู้ที่ได้รับการสนับสนุน นอกจากนี้ยังสร้างวัตถุ JavaScript ส่วนกลางแบบชื่อตัวเองซึ่งมีคุณสมบัติบูลีนสำหรับแต่ละคุณสมบัติtrueหากรองรับและfalseหากไม่รองรับ เพิ่มการสนับสนุนสำหรับจัดแต่งทรงผมและการพิมพ์องค์ประกอบ HTML5 เพื่อให้คุณสามารถใช้องค์ประกอบต่างๆเช่น<section>,และ<header><nav>
เช่น-css3.js:อนุญาตให้ Internet Explorer ระบุตัวเลือก pseudo-class CSS3 และสร้างกฎสไตล์ใด ๆ ที่กำหนดไว้กับพวกเขา รองรับตัวเลือก CSS3 ที่แตกต่างกันตามไลบรารี JavaScript ที่ไซต์ของคุณใช้
DD_belatedPNG:ไลบรารี Javascript ที่เพิ่มรูปภาพ PNG รองรับ IE6 คุณสามารถใช้ PNGs เป็นsrcของ<img />องค์ประกอบหรือเป็นbackground-imageคุณสมบัติใน CSS ซึ่งแตกต่างจากAlphaImageLoader,background-positionและbackground-repeatทำงานตามที่ตั้งใจไว้และองค์ประกอบจะตอบสนองต่อการa:hoverหลอกชั้น
TwinHelix IE PNG Fix:พฤติกรรมที่แนบมากับ IE (.htcไฟล์) ที่เพิ่มการสนับสนุน PNG ด้วย alpha opacity ให้กับ IE 6 การวางตำแหน่งพื้นหลัง CSS แบบเต็มและการทำซ้ำได้รับการสนับสนุน (รวมถึง CSS Sprites) พร้อม JavaScript เพิ่มเติม
อะไรก็ตาม: โฮเวอร์:พฤติกรรม IE ที่แนบมา (.htcไฟล์) ที่แพทช์โดยอัตโนมัติ: โฮเวอร์,: แอ็คทีฟและ: โฟกัสสำหรับ IE6, IE7 และ IE8 นิสัยใจคอช่วยให้คุณใช้พวกเขาเหมือนที่คุณต้องการในเบราว์เซอร์อื่น ๆ รวมถึงการสนับสนุน AJAX, หมายความว่า HTML ใด ๆ ที่ได้รับการแทรกลงในเอกสารผ่านทางจาวาสคริปต์ยังจะทริกเกอร์:hover,:activeและ:focusรูปแบบใน IE

สิ่งที่น่าสนใจที่จะทราบว่า DD_belatedPNG แก้ปัญหาทั้งสองที่แก้ไขโดยอะไรก็ตาม: โฮเวอร์และ IE PNG Fix ของโฮเวอร์ของ TwinHelix ด้วย JavaScript ที่บริสุทธิ์ขณะที่อะไรก็ตาม: โฮเวอร์และ IE PNG Fix ของโฮเวอร์ของ TwinHelix ใช้การรวม JavaScript กับ IE.htc files )

โดยทั่วไปคนที่ใช้เบราว์เซอร์ที่ไม่ใช่ IE จะอัพเกรดพวกเขาเมื่อถูกถามดังนั้น IE ก็แสดงความหนักแน่นของ "แต่เบราว์เซอร์บางตัวไม่รองรับคุณสมบัตินี้!" ร้องเรียน. Modernizr จะเพิ่มความสามารถในการใช้ HTML5 / CSS3 ในเบราว์เซอร์ใด ๆ ที่คุณเห็นและไม่ใช่ IE ie-css3.js จะทำสิ่งเดียวกันคุณเพียง แต่ต้องนำไปใช้โดยไม่มีความคิดเห็นตามเงื่อนไขของ IE (ซึ่งหมายความว่าเบราว์เซอร์ทั้งหมดจะได้รับมันเว้นแต่คุณจะใส่ไว้ในการตรวจสอบผู้ใช้ - ฝั่งเซิร์ฟเวอร์ - สิ่งนี้จะลดประสิทธิภาพลงอย่างมาก สำหรับผู้เยี่ยมชมทั้งหมดไม่ใช่แค่ผู้ใช้ IE ของคุณ)

— ไบ
แหล่งที่มา

ขออภัย Bryson แต่สิ่งที่เพิ่มการสนับสนุน HTML5 ให้กับ Internet Explorer นั้นเป็นฝันร้ายที่สุดสำหรับการใช้งานจริง

1

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

— Bryson

ตกลง "ฝันร้ายที่สุด" อาจเป็นวิธีที่ใช้ถ้อยคำรุนแรงเกินไป แต่ประสิทธิภาพมักจะแย่พอที่หน้าจะไม่สามารถใช้งานได้ดังนั้นฉันคิดว่าคุณพูดเกินจริงไป

5

ใช้เทคโนโลยีที่เหมาะสมกับความต้องการของคุณมากที่สุด

Eric Meyer เขียนบทความที่ดีเกี่ยวกับสาเหตุที่เริ่มใช้คำนำหน้าเฉพาะของผู้ขายในกฎ CSS นั้นไม่ได้เลวร้ายเหมือนการใช้ hacks ตัวกรอง css ที่เคยเป็น

ฉันคิดว่าเหมือนกันกับ HTML5 หากคุณสามารถตรวจสอบการสนับสนุนเบราว์เซอร์สำหรับคุณสมบัติที่แตกต่างกันทำไมไม่ใช้มัน ตราบใดที่ไซต์ลดระดับลงอย่างสง่างามจงดำเนินชีวิตให้ดีขึ้น

— jessegavin
แหล่งที่มา

2

ลิงก์ที่มีประโยชน์อื่น ๆ เมื่อตัดสินใจว่าจะใช้ฟีเจอร์ CSS3 ใด: http://caniuse.com/ (ให้รายละเอียดที่ดีเกี่ยวกับองค์ประกอบและตัวเลือกที่ใช้งานได้บนแพลตฟอร์มใด)

http://css3please.com/ (สนามเด็กเล่นในหน้าแก้ไขได้เพื่อยุ่งกับคุณสมบัติ CSS3 นี้ยังให้คำแนะนำเกี่ยวกับเทคนิคและคุณสมบัติที่สนับสนุนโดยแพลตฟอร์มใดสำหรับ stylings ที่ร้องขอทั่วไปเช่นมุมโค้งมนพื้นหลังไล่ระดับ ฯลฯ )

— Jason M. Batchelor
แหล่งที่มา

1

ฉันใช้มันเพื่อปรับปรุงประสบการณ์บนเบราว์เซอร์ที่ทันสมัยเพื่อให้ผู้ใช้ที่มีเบราว์เซอร์ที่ดีได้รับ "รางวัล" ด้วย nicer มอง UI ของ (มุมโค้งมน, เงา, สิ่งที่ชนิด) ฉันเดาว่าคุณไม่ควรใช้มันแทนการสมมติว่าการตรวจสอบรูปแบบไคลเอนต์ปัจจุบันของคุณเว้นแต่ว่าคุณมี JS fallback สำหรับมัน

— D4V360
แหล่งที่มา

1

หากคุณกำลังเริ่มโครงการใหม่โดยใช้ HTML5 ซึ่งควรได้รับการสนับสนุนในเบราว์เซอร์รุ่นเก่าตัวเลือกที่ดีที่สุดคือการใช้ Initializr -

http://www.initializr.com/

มันใช้หม้อไอน้ำ HTML5 ที่แบ็กเอนด์และเพิ่มตัวเลือกไม่กี่ตัวเพื่อให้แม่แบบที่คุณสามารถปรับใช้ในเว็บไซต์ของคุณเอง มันมีห้องสมุด Javascript (เช่น HTML Shiv หรือ Modernizr) ซึ่งจะทำให้เว็บไซต์ของคุณเข้ากันได้กับเบราว์เซอร์รุ่นเก่า

— Mozan Sykol
แหล่งที่มา

0

ขึ้นอยู่กับกลุ่มเป้าหมายและคุณสมบัติที่คุณต้องการใช้ ฉันคาดว่าจะใช้เวลาอีกหลายปีกว่าที่โครงการโดยเฉลี่ยจะหยุดการสนับสนุนสำหรับ ie6 :(

— theotherreceive
แหล่งที่มา

0

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

ถ้าไม่ว่าคุณจะใช้อะไรคุณจะต้องคำนึงถึงตัวหารร่วมที่ต่ำที่สุดเสมอ ในกรณีนี้อาจเป็นการรวมกันของ IE 6 และเบราว์เซอร์มือถือบางช่วง ดังนั้นหากคุณก้าวไปข้างหน้าด้วย HTML 5 คุณจะมีปัญหาเพิ่มเติมในการทำให้ไซต์ของคุณ 'เสื่อมโทรม' อย่างสวยงาม

— Gary.Ray
แหล่งที่มา