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?


16

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ó?


Bạn có ý nghĩa gì với Web8?
Aaron

3
html5 + css3 = web8!
Jason

Còn HTTP 1.0 và ECMAScript 5.0 thì sao?

Câu trả lời:


13

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, bên trên 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.


2
Tôi nghĩ bạn có nghĩa là đặt bán kính đường viền ở dưới cùng, phải không?
Cấp Palin

1
Than ôi, trang web lặn vào HTML5 ban đầu đã biến mất. Có rất nhiều gương có sẵn. Đây là một: diveintohtml5.info
M. Dudley

12

Có lẽ.

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 một 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 một 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 emailloại: 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 khác trên trang web này cung cấp một cái nhìn 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 để IE nhận biết và định kiểu các phần tử HTML5.
  • CSS3 Pie: một hành vi đính kèm IE (một.htctệp) làm cho 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 áp dụng cho một phần tử, nó cho phép IE để nhận ra và hiển thịborder-radius,box-shadow,border-image, nhiều hình ảnh nền, vàlinear-gradientnhư hình nền.
  • Modernizr: thư viện Javascript sử dụng tính năng phát hiện tính năng để 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 phần mềm đượ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,truenếu được hỗ trợ vàfalsenế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><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àsrcmột<img />yếu tố hoặc là mộtbackground-imagetài sản trong CSS. Không giống nhưAlphaImageLoader,background-positionbackground-repeathoạt động như dự định, và các phần tử sẽ đáp ứng với lớpa:hovergiả.
  • TwinHelix IE PNG Fix: một hành vi đính kèm IE (một.htctệ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 (bao gồm) bổ sung.
  • Dù thế nào: hover: một hành vi đính kèm IE (một.htctệp) tự động vá: hover ,: active và: tập trung cho 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 hỗ trợ AJAX, có nghĩa là bất kỳ html mà được chèn vào tài liệu qua javascript cũng sẽ kích hoạt:hover,:active:focusphong cách 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à Twin PNGel của TwinHelix sử dụng kết hợp các hành vi đính kèm JavaScript và IE ( .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 bình luận có điều kiện IE (có nghĩa là tất cả các trình duyệt sẽ nhận được nó trừ khi bạn đưa nó vào 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 hiệu suất rất nhiều 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.)


Xin lỗi Bryson nhưng những điều bổ sung hỗ trợ HTML5 cho Internet Explorer là những cơn ác mộng hoàn toàn cho các mục đích thực tế.

1
Tôi đã cập nhật bài đăng của mình với một vài thông tin nữa và thừa nhận các lần truy cập hiệu năng khi sử dụng các thư viện JS này. Tuy nhiên, tôi không đồng ý với bạn rằng việc sử dụng chúng là một cơn ác mộng. Tôi đã sử dụng tất cả những thứ này ít nhất một lần, và tất cả chúng đều phục vụ một mục đích. Họ cũng không gây thêm đau đầu cho tôi. Điều gì khiến bạn nói rằng họ là những cơn ác mộng?
Bryson

OK, "những cơn ác mộng hoàn toàn" có thể là một cách quá mạnh để diễn đạt mọi thứ nhưng hiệu suất thường bị ảnh hưởng đến mức khiến trang trở nên không thể sử dụng được, vì vậy tôi nghĩ rằng bạn đang nói quá.

5

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 cho các quy tắc CSS không bị 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.


2

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 được hỗ trợ bởi nền tảng nào cho các kiểu dáng thường được yêu cầu, như góc tròn, nền gradient, Vân vân.)


1

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, loại công cụ đó). 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

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.


0

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

Nếu trang web của bạn là 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 công nghệ mới.

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.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.