it-swarm-vi.com

Tôi có nên sử dụng HTML5 và / hoặc CSS3 để xây dựng trang web của mình không?

Công cụ HTML5/CSS3 (Web8!) Mới nghe có vẻ hay! Tôi nên bắt đầu sử dụng nó ngay bây giờ hay gắn bó với css/xhtml cho đến khi nhiều trình duyệt có thể sử dụng nó?

16
Jason

HTML5 hiện được hỗ trợ bởi tất cả các trình duyệt, ngay cả IE5! (Nếu bạn sử dụng tập lệnh html5shiv). Tôi đặc biệt khuyên bạn nên đọc http://diveintohtml5.org Đây là một trong những tài nguyên HTML5 tốt nhất hiện có.

Đối với CSS3, nếu bạn sử dụng nó, hãy đảm bảo sử dụng tiền tố của nhà cung cấp, trên đầu cú pháp thông thường. ví dụ.

bán kính biên giới

-moz-biên giới-bán kính

-webkit-Border-radius

Tôi tin vào sự tăng cường tiến bộ. Hỗ trợ css3 của IE9 nghe có vẻ rất hứa hẹn.

13
Jin

Có thể.

Có những phần của HTML5 mà bạn có thể sử dụng ngay bây giờ, ngay hôm nay. Các hình thức ví dụ. Nếu bạn có _<input type="email">_ trong trình duyệt không hỗ trợ HTML5 (có, thậm chí IE6), bạn sẽ chỉ thấy điều tương tự bạn thấy nếu bạn đã sử dụng _<input type="text">_. Tuy nhiên, trên trình duyệt hỗ trợ các thành phần biểu mẫu HTML5, bạn có được các lợi thế của loại email: cụ thể là máy khách sẽ kiểm tra lỗi giá trị mà không cần thêm JS. Mặc dù có, bạn vẫn sẽ cần JS cho các trình duyệt không phải là HTML5, bạn sẽ có thêm một lớp xác thực trong các trình duyệt hỗ trợ.

Một câu hỏi trên trang web này cung cấp tổng quan tốt về các tính năng mới có sẵn cho bạn thông qua HTML5 và CSS3. Có rất nhiều dữ liệu tốt về các hình thức trong câu hỏi đó.

Bởi vì Internet Explorer (và các phiên bản cũ hơn của Safari và Firefox, tuy nhiên hiếm khi chúng có thể) không hỗ trợ nhiều tính năng trong số các tính năng mà bạn còn lại với các thư viện JavaScript để lấp đầy khoảng trống. Chúng bao gồm một cú đánh hiệu suất (mặc dù nó chỉ dành cho các trình duyệt cần sử dụng chúng), vì vậy hãy chú ý đến người dùng của bạn khi sử dụng chúng.

Để giảm thiểu các vấn đề thiếu hỗ trợ tính năng, bạn nên quyết định rằng các tính năng mới này có giá trị hay không, hãy sử dụng các tài nguyên sau:

  • html5shiv : một shiv JavaScript cho IE để nhận dạng và định kiểu các phần tử HTML5.
  • CSS3 Pie : an IE hành vi được đính kèm (tệp _.htc_) tạo Internet Explorer 6-8 có khả năng hiển thị một số tính năng trang trí CSS3 hữu ích nhất. Khi được áp dụng cho một phần tử, nó cho phép IE nhận dạng và hiển thị _border-radius_, _box-shadow_, _border-image_, nhiều hình nền và _linear-gradient_ làm hình nền .
  • Modernizr : thư viện Javascript sử dụng tính năng phát hiện để kiểm tra trình duyệt hiện tại với các tính năng CSS3/HTML5 sắp tới, thêm các lớp vào phần tử <html> cho những người được hỗ trợ. Đồng thời tạo một đối tượng JavaScript toàn cầu có tiêu đề chứa thuộc tính boolean cho mỗi tính năng, true nếu được hỗ trợ và false nếu không. Thêm hỗ trợ để tạo kiểu và in các phần tử HTML5 để bạn có thể sử dụng các phần tử như _<section>_, _<header>_ và _<nav>_.
  • eg-css3.js : cho phép Internet Explorer xác định các bộ chọn lớp giả CSS3 và hiển thị bất kỳ quy tắc kiểu nào được xác định với chúng. Hỗ trợ các bộ chọn CSS3 khác nhau dựa trên thư viện JavaScript mà trang web của bạn sử dụng.
  • DD_belatedPNG : thư viện Javascript có thêm hỗ trợ hình ảnh PNG cho IE6. Bạn có thể sử dụng PNG làm src của phần tử _<img />_ hoặc làm thuộc tính _background-image_ trong CSS. Không giống như AlphaImageLoader, _background-position_ và _background-repeat_ hoạt động như dự định và các phần tử sẽ phản hồi với lớp _a:hover_ giả.
  • TwinHelix IE PNG Fix : an IE hành vi được đính kèm (một _.htc_ tệp) có thêm hỗ trợ PNG với độ mờ alpha cho IE 6. Định vị và lặp lại nền CSS đầy đủ đang hỗ trợ (bao gồm cả các họa tiết CSS) với JavaScript bổ sung (bao gồm).
  • Dù thế nào: hover : an IE hành vi được đính kèm (một tệp _.htc_) tự động các bản vá: hover ,: active và: tập trung vào các quirks IE6, IE7 và IE8, cho phép bạn sử dụng chúng như bạn làm trong bất kỳ trình duyệt nào khác. Bao gồm AJAX hỗ trợ, nghĩa là mọi html được chèn vào tài liệu qua javascript cũng sẽ kích hoạt _:hover_, _:active_ và _:focus_ kiểu trong IE.

Thật thú vị khi lưu ý rằng DD_belatedPNG giải quyết cả hai vấn đề được giải quyết bằng Any: hover và TwinHelix's IE PNG Fix với JavaScript thuần túy, trong khi Any: hover và TwinHelix's IE PNG Fix sử dụng kết hợp JavaScript và IE các hành vi được đính kèm (_.htc files_).

Nói chung, những người sử dụng trình duyệt không phải IE nâng cấp chúng khi được yêu cầu và vì vậy IE chịu trách nhiệm "Nhưng một số trình duyệt không hỗ trợ tính năng này!" khiếu nại. Modernizr sẽ thêm khả năng sử dụng HTML5/CSS3 cho bất kỳ trình duyệt nào bạn có thể thấy và không chỉ IE. tức là-css3.js sẽ làm điều tương tự, bạn chỉ cần thực hiện nó mà không cần IE nhận xét có điều kiện (có nghĩa là tất cả trình duyệt sẽ kết thúc trừ khi bạn bao gồm nó với kiểm tra tác nhân người dùng phía máy chủ - điều này sẽ làm giảm đáng kể hiệu suất cho tất cả khách truy cập của bạn, thay vì chỉ người dùng IE của bạn.)

12
Bryson

Sử dụng bất cứ công nghệ nào phù hợp với nhu cầu của bạn nhất.

Eric Meyer đã viết một bài viết hay về lý do tại sao bắt đầu sử dụng tiền tố dành riêng cho nhà cung cấp trên các quy tắc CSS không khập khiễng như sử dụng các bộ lọc css được sử dụng.

Tôi nghĩ điều tương tự cũng áp dụng cho HTML5. Nếu bạn có thể kiểm tra hỗ trợ trình duyệt cho các tính năng khác nhau, tại sao không sử dụng nó. Miễn là trang web xuống cấp một cách duyên dáng, hãy sống hết mình.

5
jessegavin

Một số liên kết hữu ích khác, khi quyết định các tính năng CSS3 nào bạn có thể muốn sử dụng: http://caniuse.com/ (cung cấp phân tích tốt về các yếu tố và bộ chọn nào có thể sử dụng trên các nền tảng nào)

http://css3please.com/ (một sân chơi có thể chỉnh sửa trong trang để gây rối với các tính năng CSS3, điều này cũng đưa ra một số lời khuyên về các kỹ thuật và tính năng nào được hỗ trợ bởi các nền tảng cho kiểu dáng thường được yêu cầu, như các góc tròn, nền gradient, v.v.)

2
Jason M. Batchelor

Tôi sử dụng nó để nâng cao trải nghiệm trên các trình duyệt hiện đại để người dùng có trình duyệt tốt sẽ được "thưởng" với giao diện người dùng đẹp hơn (Các góc tròn, bóng tối, đó là những thứ tương tự). Tôi đoán bạn không nên sử dụng nó như một sự thay thế cho giả sử xác thực mẫu khách hàng hiện tại của bạn, trừ khi bạn có một loại dự phòng JS cho nó.

1
D4V360

Nếu bạn đang bắt đầu một dự án mới bằng HTML5, cũng nên được hỗ trợ trong các trình duyệt cũ hơn, tùy chọn tốt nhất là sử dụng Initializr -

http://www.initializr.com/

Nó sử dụng HTML5 Boilerplate ở phần phụ trợ và thêm một vài tùy chọn của riêng nó để cung cấp cho bạn một mẫu mà bạn có thể triển khai trên trang web của riêng mình. Nó bao gồm các thư viện Javascript (như HTML Shiv hoặc Modernizr), sẽ làm cho trang web của bạn tương thích với các trình duyệt cũ hơn.

1
Mozan Sykol

Phụ thuộc vào đối tượng là gì và những tính năng bạn muốn sử dụng. Tôi hy vọng sẽ còn vài năm nữa trước khi dự án trung bình có thể giảm hỗ trợ cho eg6 :(

0
theotherreceive

Nếu trang web của bạn là một mạng nội bộ riêng tư và bạn có thể kiểm soát trình duyệt hoặc có một phạm vi trình duyệt hạn chế để xử lý, thì hãy thoải mái làm việc trên Edge công nghệ đang chảy máu.

Nếu không, bất kể bạn sử dụng cái gì, bạn sẽ luôn phải tính đến mẫu số chung thấp nhất. Trong trường hợp này, nó có thể là sự kết hợp của IE 6 và một loạt các trình duyệt di động. Vì vậy, nếu bạn tiến lên với HTML 5, bạn có thêm vấn đề về việc đảm bảo trang web của bạn 'xuống cấp' độc đáo.

0
Gary.Ray