Bạn sử dụng CSS đặt lại HTML5 nào và tại sao? Có một trong những bạn đã tìm thấy để bao gồm nhiều trường hợp?Bạn sử dụng CSS đặt lại HTML5 nào và tại sao?
Tôi đã bắt đầu sử dụng HTML5 Doctor: http://html5doctor.com/html-5-reset-stylesheet/ Có vẻ như hoạt động, nhưng tôi tự hỏi liệu có điều gì đó tốt hơn ngoài kia không.
* {
margin: 0;
padding: 0;
}
đơn giản nhưng hoàn toàn hiệu quả. có lẽ ném vào một:
body {
font-size: small;
}
để có biện pháp tốt.
Việc ghi lề và lề mặc định trên các điều khiển biểu mẫu có thể có các hiệu ứng không mong muốn và các từ khóa có kích thước phông chữ không có hành vi hoàn toàn nhất quán trên các trình duyệt. Điều này quá đơn giản. Nó cũng không thiết lập kiểu dáng cho các phần tử được giới thiệu trong HTML 5, vì vậy chúng vẫn là 'display: inline'. – Quentin
Tôi không đồng ý. Lề và đệm là các thuộc tính không thể đoán trước. Thuộc tính kích thước phông chữ sử dụng từ khóa được đặt tên để nhắm mục tiêu cụ thể các trình duyệt đọc những từ đó, điều này làm cho phông chữ YUI có hiệu quả trên mọi trình duyệt chính (http://developer.yahoo.com/yui/examples/fonts/fonts-size_source.html). Tôi cũng sẽ không bao giờ muốn áp đặt dòng chảy của các phần tử bình thường và vì vậy tôi sẽ để lại những phần tử HTML 5 một mình, chỉ thay đổi kiểu hiển thị hoặc vị trí của chúng khi cần thiết. Tôi nhận thấy lựa chọn của mình không được ưa chuộng, nhưng nó thanh lịch hơn nhiều so với các giải pháp khác và nó hoạt động. – kaikai
Không không không không không! Các phần tử HTML5 không có thuộc tính hiển thị được thiết lập, vì vậy chúng duyên dáng rơi trở lại mặc định 'display: inline'. Bạn đã bao giờ nhìn thấy sơ đồ trang web nơi đầu trang, chân trang, điều hướng, cột bên, thực tế mọi phần trang đều nằm trong dòng ??? Xin lỗi kaikai, nhưng điều này chỉ là không thể chấp nhận được! –
reset.css được sử dụng bởi Blueprint CSS khuôn khổ hoạt động tốt và bao gồm các yếu tố HTML5. Nó được đưa vào tệp screen.css của họ.
Kế hoạch chi tiết là một tài nguyên hữu ích để tạo mẫu nhanh các trang web mới và mã nguồn của chúng được tổ chức tốt và đáng học hỏi.
Thông số HTML5 bao gồm recommended CSS declarations cho các trình duyệt có khả năng CSS. Đối với những niềm vui của nó tôi lấy chúng và hoàn nguyên những người, nơi nó có ý nghĩa. Bạn có thể xem kết quả in this article.
Tuy nhiên, tôi không khuyên bạn sử dụng tính năng này trong sản xuất. Đó là một bằng chứng về khái niệm và tốt hơn có thể được sử dụng để đưa ra gợi ý hơn để phục vụ như là một bản định kiểu lại toàn bộ mục đích. Bất kỳ đề xuất nào khác trước đây có thể là lựa chọn tốt hơn.
Eric Meyer cũng phát hành phiên bản 2 của reset CSS của mình (và ông đã làm như vậy gần như một năm trước đây bây giờ):
Đơn giản nhưng hiệu quả và nhanh hơn các lần đặt lại dựa trên bộ chọn * phổ quát. – tomasz86
nói chuyện thật: Mặc dù markdowns kaikai là đúng, bạn chỉ cần reset * đệm & lề để 0.
Mặc dù không may 99% trong chúng ta không có tài nguyên hoặc điện người đàn ông để cập nhật hàng trăm phiên bản trình duyệt. Vì vậy, một tờ đặt lại là điều cần thiết cho trang web điển hình.
html5reset: (Nó quá can thiệp)
Tôi chỉ cần lấy một cái nhìn tại http://html5reset.org/
img,
object,
embed {max-width: 100%;}
Và:
html {overflow-y: scroll;}
Tôi hiểu nó có ý định tốt nhưng, đó không phải là công việc của một tờ đặt lại. Nó tạo ra quá nhiều giả định.
Blueprint Reset: (theo nghĩa đen một kế hoạch chi tiết)
body {
line-height: 1.5;
background: white;
}
Whats lên với 1,5. Và tại sao nền trắng (Tôi biết đó là cho sửa chữa nhưng vẫn không cần thiết)
Normalize.css: (Không bình thường)
https://github.com/necolas/normalize.css/blob/master/normalize.css
Nó bắt đầu tốt với một số webkit/ie hacks nhưng
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}
Mỗi thẻ tiêu đề được nhắm mục tiêu. & chúng không đặt lại chiều cao dòng của cơ thể.
Tôi chắc chắn tất cả những điều trên đều thực hiện tốt công việc dự định, nhưng có thể sẽ bị ghi đè nhiều hơn mức cần thiết.
Eric Meyer
YUI
HTML5Boilerplate
Trên đây là nhiều hơn cho ưu với Boilerplate nghiêng sang (trên thân thiện) bên tôi chắc chắn do sự phổ biến. Hiện tại, 80% số lần đặt lại tùy chỉnh của tôi là bản mẫu.
Tôi sẽ đi mặc dù tất cả ba bit một chút và làm của riêng tôi, nó không phải là khoa học tên lửa.
Lưu ý rằng normalize.css đã thay đổi ngay bây giờ; kích thước phông chữ của tiêu đề không còn được đặt. –
Tất cả điều đáng nói đến là Normalize.css không chỉ quản lý các trình duyệt trên máy tính mà còn cả các trình duyệt trên thiết bị di động như iOS Safari, Chrome dành cho Android, trình duyệt chứng khoán và các cộng sự khác biệt. Vì lý do này và những người khác bình thường hóa được nướng thành nhiều khuôn khổ phổ biến. –
Tôi từng sử dụng 'Eric Meyer' nhưng bây giờ sử dụng tờ kiểu đặt lại 'YUI' vì điều này: http://danielsokolowski.blogspot.ca/2012/11/a-tip-for-relatively-sized-html-input. html –
Normalize.css tuyệt vời cho cả trình duyệt trên máy tính để bàn và thiết bị di động và được sử dụng trong nhiều mẫu HTML phổ biến.
Nhưng điều gì về việc sử dụng thuộc tính CSS all để đặt lại thuộc tính CSS ngoại trừ direction và unicode-bidi? Bằng cách đó bạn không cần phải bao gồm bất kỳ tập tin bổ sung:
* { all: unset }
Nó đang được hỗ trợ trong Firefox và hy vọng những người khác sẽ làm theo phù hợp làm cho quá trình thiết lập lại rất đơn giản.
Thú vị nhưng nó có vẻ là giải pháp chậm nhất và chỉ hỗ trợ trong Firefox, do đó nó không có sử dụng thực sự (ít nhất là tại thời điểm này). – tomasz86
Đúng là chỉ có Firefox hỗ trợ nó ngay bây giờ nhưng tôi nghĩ rằng nó có một cơ hội tốt để kết thúc trong các giải pháp như Modernizr. https://github.com/Modernizr/Modernizr/issues/1219 –
Tôi sử dụng Normalize hoặc đặt lại từ bác sĩ HTML5 và tôi thay đổi nó để phù hợp với dự án tôi đang làm việc.
BTW chỉ là khái niệm về việc sử dụng đặt lại đã trở thành tiêu chuẩn ít nhiều.
Bạn có bất kỳ chi tiết bổ sung nào không? –
Tôi không để lại trong các yếu tố mà tôi không sử dụng ion một dự án cụ thể. Ví dụ: tôi xóa các phần tử biểu mẫu nếu tôi không sử dụng biểu mẫu. Tôi chắc chắn bạn sẽ có được ý tưởng. Không có điểm nào trong việc đặt lại các phần tử mà bạn không sử dụng. – cornishninja
Để sao lưu quan điểm của tôi về việc sửa đổi cài đặt lại cho phù hợp với nhu cầu của tôi: http://www.cssreset.com/which-css-reset-should-i-use/ – cornishninja
Tương tự như: http://stackoverflow.com/questions/3277671/css-reset-for-html5 –
Tương tự như vậy, nhưng tôi chỉ tìm cách sử dụng elses của ai đó thay vì sửa đổi một để làm cho nó hoạt động vào một ngày sau đó, nếu cần, tôi chỉ có thể sao chép một phiên bản mới hơn. –
HTML5! == CSS ... bao giờ hết. –