Làm cách nào để sử dụng đặt lại CSS?

Tôi đã thấy trong một bài viết của Nicholas Cerminara vào một ngày khác (cẩn thận khi truy cập vào liên kết đó, có vẻ như họ có một số tập lệnh theo dõi đang chạy lung tung) rằng Bootstrap 4 có một thiết lập lại CSS mới được đưa vào mà họ đang gọi Khởi động lại

Khởi động lại, một tập hợp các thay đổi CSS dành riêng cho từng phần tử trong một tệp duy nhất, khởi động Bootstrap để cung cấp một đường cơ sở thanh lịch, nhất quán và đơn giản để xây dựng dựa trên

Nếu bạn chưa quen với việc phát triển CSS, toàn bộ ý tưởng thiết lập lại CSS là để xử lý sự không nhất quán về kiểu dáng trên các trình duyệt. Ví dụ, ngay bây giờ tôi đã đặt một

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

6 lên một trang mà không có kiểu dáng nào khác. Chrome áp dụng

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

7 – Firefox áp dụng

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

8. Đặt lại CSS sẽ áp dụng

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

0 mới cho phần tử đó để tất cả các trình duyệt nhất quán về những gì chúng áp dụng. Có rất nhiều ví dụ như vậy

Bằng cách của một chút lịch sử…

Vào năm 2007, Jeff Starr đã tổng hợp một loạt các thiết lập lại CSS khác nhau. Ngày cũ nhất là html hoàn tác của Tantek Çelik. css (đó là một liên kết trực tiếp đến nguồn). Chúng ta có thể thấy rằng mục đích đằng sau nó là loại bỏ kiểu dáng mặc định

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

Cho đến nay, thiết lập lại phổ biến nhất xuất hiện ngay sau. thiết lập lại Meyer. Nó có những thứ khác với Tantek đã làm (thậm chí nó đã được cập nhật với một số yếu tố HTML5) nhưng tinh thần thì giống nhau. xóa kiểu dáng mặc định. Bạn có thể sẽ nhận ra khối mã nổi tiếng này, tìm đường vào bảng kiểu DevTools của bạn ở mọi nơi

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

Bắt đầu với thiết lập lại như thế này (ở đầu biểu định kiểu sản xuất của bạn) và các kiểu bạn viết lời bạt sẽ có nền tảng vững chắc

Nhiều năm sau, khi HTML5 trở nên thực tế hơn, các thiết lập lại như Đặt lại HTML5 của Richard Clark đã trở nên phổ biến. Nó vẫn là một phiên bản sửa đổi của thiết lập lại Meyer và giữ lại tinh thần đó

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

Rải rác trong suốt quá trình này, có rất nhiều nhà phát triển đã giảm thiểu tối đa bằng cách chỉ hạ thấp lề và đệm từ mọi thứ và để nguyên như vậy

* {
  padding: 0;
  margin: 0;
}

câu đố ngớ ngẩn. biểu trưng CSS-Tricks được lấy cảm hứng từ bộ chọn phổ quát và ý tưởng đó

Cùng đến Bình thường hóa. css…

bình thường hóa. css đại diện cho sự thay đổi có ý nghĩa đầu tiên về tinh thần mà thiết lập lại CSS nên làm. Đây là những gì dường như rất khác nhau về nó với tôi

• Đó là một đánh giá mới về mọi thứ có thể được tạo kiểu khác nhau trên các trình duyệt và nó giải quyết tất cả. Trong trường hợp các lần đặt lại CSS cũ hơn là một số ít dòng mã, chuẩn hóa không nén và được ghi lại là 447
• Nó không xóa bất kỳ kiểu dáng nào khỏi các phần tử đã nhất quán trên các trình duyệt (phần lớn). Ví dụ: không có bất cứ điều gì trong Chuẩn hóa cho các phần tử h2-h6, chỉ là một bản sửa lỗi cho h1 điều kỳ lạ. Điều đó có nghĩa là bạn không loại bỏ hệ thống phân cấp tiêu đề, kiểu dáng mặc định đó vẫn còn
• Nó phù hợp hơn với ý tưởng thay đổi nó, thay vì chỉ bao gồm nó. Ví dụ: có một phần chỉ dành cho thẻ

  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
  	margin: 0;
  	padding: 0;
  	border: 0;
  	font-size: 100%;
  	font: inherit;
  	vertical-align: baseline;
  }

  1 và một dòng trong số đó đặt

  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
  	margin: 0;
  	padding: 0;
  	border: 0;
  	font-size: 100%;
  	font: inherit;
  	vertical-align: baseline;
  }

  2. Bạn có thể thay đổi nó thành họ phông chữ bạn muốn và nó sẽ hiệu quả như việc đặt lại

Mã này rất dễ đọc, vì nó giải thích những gì nó đang làm mà không đi sâu vào các chi tiết cụ thể

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

Hôm nay Bình thường hóa là 7. 0. 0 và đã đạt 30.000 sao GitHub. Nó rất phổ biến

Vì vậy, thiết lập lại có thể được ý kiến?

Chúng tôi đã thấy rất nhiều cách khác nhau đối với việc đặt lại CSS và chúng tôi đã thấy những thay đổi cơ bản trong cách tiếp cận, vì vậy tôi nghĩ thật công bằng khi nói rằng việc đặt lại CSS có thể có quan điểm cứng rắn

Hãy xem xét một số cách…

• Việc thiết lập lại có chạm vào mọi yếu tố có thể không?
• Những thuộc tính nào được thay đổi?
• Bạn có cố gắng duy trì tinh thần của biểu định kiểu tác nhân người dùng không?
• Bạn có áp dụng bất kỳ thuộc tính nào không có vấn đề về trình duyệt chéo có thể được coi là hữu ích để "đặt lại", chẳng hạn như mặc định kiểu chữ hoặc kích thước hộp không?
• Bạn có bao gồm các lớp “hộp công cụ” cho các nhu cầu chung không?
• Bạn có lo lắng về kích thước của nó?
• Bạn có sử dụng bộ tiền xử lý hoặc bất kỳ công cụ nào khác không?

Hãy xem Vanilla CSS Un-Reset. Vô số ý kiến ​​ở đây, bắt đầu với ý tưởng rằng nó có nghĩa là tạo lại kiểu dáng cho các thành phần sau khi bạn hủy kiểu dáng sau đó đặt lại. Nó đặt kích thước phông chữ nội dung trong

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

3, đặt ngăn xếp phông chữ đơn cách rất cụ thể, bao gồm bộ chọn

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

4, phần rõ ràng và các lớp trợ giúp căn chỉnh. Không có phán xét ở đó. Mọi người tạo ra những thứ để giúp giải quyết vấn đề của chính họ và tôi chắc chắn rằng điều này hữu ích cho người sáng tạo. Nhưng chúng ta có thể thấy các ý kiến ​​​​tỏa sáng ở đó

Bây giờ hãy nhìn vào MiniReset. css. Rất khác nhau. Nó xóa sạch các kiểu kiểu “để việc sử dụng đánh dấu ngữ nghĩa không ảnh hưởng đến kiểu dáng”, nhưng để lại một số giá trị mặc định nhằm mục đích “để các nút và đầu vào giữ bố cục mặc định của chúng”, đặt một số thứ không có dấu chéo

ý kiến ​​hoàn toàn khác nhau ở đó

Jonathan Neal đã tạo một thiết lập lại có tên santize. css rất rõ ràng về ý kiến ​​​​của nó. Tìm kiếm từ "opinionated" trong mã nguồn và bạn sẽ thấy nó 19 lần. Tất cả những điều này là những lựa chọn mà Jonathan đưa ra dựa trên nghiên cứu và những gì có vẻ là những phương pháp hay nhất hiện đại, và chắc chắn là do nhu cầu và mong muốn của chính anh ấy về những gì nên thiết lập lại

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

1

Từ "thiết lập lại"

Cá nhân tôi nghĩ rằng thật hữu ích khi nghĩ về tất cả chúng dưới cùng một thuật ngữ chung và chỉ cần nhận thức được sự khác biệt về triết học. Nhưng, Bình thường hóa cố ý tách chính nó

Một giải pháp thay thế hiện đại, sẵn sàng cho HTML5 để đặt lại CSS

Sanitize tự gọi mình là một thư viện CSS và không sử dụng từ “đặt lại” ở bất cứ đâu ngoại trừ việc trích dẫn thiết lập lại Meyer

khởi động lại

Khởi động lại thật thú vị vì có lẽ đây là người chơi mới nhất trên thế giới này. Lịch sử tệp của nó bắt đầu từ năm 2015, điều này có thể liên quan đến Bootstrap 4 mất một thời gian để giảm sau Bootstrap 3. Khởi động lại không có repo riêng, nó là một phần của Bootstrap. Đây là tệp trực tiếp và tài liệu

Cách họ nghĩ về nó thật thú vị

Khởi động lại được xây dựng dựa trên Chuẩn hóa, cung cấp nhiều phần tử HTML với các kiểu hơi cố chấp chỉ sử dụng bộ chọn phần tử. Kiểu dáng bổ sung chỉ được thực hiện với các lớp. Ví dụ: chúng tôi khởi động lại một số kiểu

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

6 để có đường cơ sở đơn giản hơn và sau đó cung cấp

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

7,

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

8, v.v.

Bạn có thể có một lớp thực hiện tạo kiểu, nhưng nếu bạn sử dụng thiết lập lại, thì bạn không phải làm quá tải lớp đó với các kiểu thiết lập lại để xử lý các vấn đề về tính nhất quán của nhiều trình duyệt

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

5

Nó chắc chắn là cố chấp, nhưng theo cách phù hợp với Bootstrap. Thực tế là nó bị chôn vùi trong Bootstrap là tín hiệu khá tốt cho thấy điều này được thiết kế cho thế giới đó, không phải là một phần bổ sung cho bất kỳ dự án nào. Điều đó nói rằng, tôi đã cố gắng hết sức để biên dịch một phiên bản CSS trực tiếp của nó tại đây

Điều chỉnh thiết lập lại dựa trên sự hỗ trợ của trình duyệt

Miễn là chúng ta đang nói về quá khứ và tương lai của việc đặt lại, thì điều đáng nói là Danh sách trình duyệt một lần nữa, đây là định dạng được tiêu chuẩn hóa để khai báo những trình duyệt/phiên bản mà dự án hỗ trợ

Thiết lập lại có thể được xây dựng theo cách sao cho những thứ mà nó bao gồm biết tại sao chúng ở đó. Chính xác trình duyệt và phiên bản nào nó hỗ trợ. Sau đó, nếu cấu hình danh sách trình duyệt cho biết trình duyệt cụ thể đó không được dự án này hỗ trợ, thì CSS đó có thể bị xóa

Quy tắc kiểu Đặt lại CSS là gì?

Làm cách nào để cài đặt Đặt lại CSS?