Tại sao cần sử dụng normalize css hoặc reset css
CSS Reset là danh sách các quy tắc ‘Reset’ tất cả các style trình duyệt mặc định.
Show Chúng ta Reset CSS trình duyệt vì hai lý do chính:
Có rất style CSS Resets khác nhau mà chúng ta có thể sử dụng trong website. Bạn thậm chí có thể tạo của riêng bạn. Một trong hai cách Reset mà chúng tôi sẽ sử dụng này là reset của Eric Meyer, được tạo bởi chuyên gia CSS Eric Meyer. Các bài viết liên quan: Đây là mã trong Thiết lập lại của Meyer: http://web.simmons.edu/~grovesd/comm244/notes/week4/reset-included.css
Bao gồm Reset CSSChúng ta có thể bao gồm biểu định kiểu Reset bằng một số phương pháp khác nhau. External Style SheetChúng ta có thể sử dụng bảng định kiểu Reset như một biểu định kiểu bên ngoài giống như chúng ta làm với các kiểu thông thường. Chỉ cần đảm bảo thêm nó trước, vì thứ tự quan trọng.
Hãy nhớ rằng, bảng định kiểu CSS Reset luôn phải xuất hiện trước. Sao chép và dán vào trang CSS riêngBạn cũng có thể chỉ cần sao chép tất cả các quy tắc từ biểu định kiểu Reset và dán chúng vào của riêng bạn. Đảm bảo rằng bạn đặt chúng ở trên cùng để chúng không ghi đè lên bất kỳ quy tắc nào của bạn. Nếu bạn sử dụng phương pháp này, hãy nhớ đánh dấu rõ ràng phần Reset của biểu định kiểu và ghi công cho tác giả bằng cách sử dụng nhận xét CSS. Mặc dù tác giả đã cung cấp bảng định kiểu này cho mọi người sử dụng. Reset trong ActionHiện tại, trang đang sử dụng các kiểu trình duyệt mặc định vì chúng tôi không xác định bất kỳ kiểu nào khác. Sau khi chúng tôi áp dụng biểu định kiểu Reset CSS. Trang Kiểm tra HTML có Reset Điều này cung cấp cho chúng tôi một phương tiện rõ ràng để làm việc. Những điều cần lưu ý:
Tại saoĐiều này có vẻ như rất nhiều công việc. Tại sao bạn muốn làm điều này? Hai lý do:
Normalize CSS Nếu thiết lập lại của Meyer có vẻ hơi quá, có một phiên bản mới hơn có cách tiếp cận hơi khác: normalize.css. Thay vì cố gắng loại bỏ các kiểu trình duyệt mặc định, normalize.css sẽ cố gắng chuẩn hóa chúng thành các giá trị tiêu chuẩn trên các trình duyệt. Điều này loại bỏ một số nhược điểm của thiết lập lại Meyer. Nó cũng là một biểu định kiểu mới hơn và được phát triển tích cực, vì vậy nó bao gồm các phần tử HTML hiện đại hơn. Các bài viết khác: Vài lời của người dịch: tôi bắt đầu chú ý đến file reset.css khi tham khảo một số nhóm hội về front-end trên FB. Rồi thì khi thấy sự khác biệt của các trình duyệt về cách render nội dung qua phần kiểm tra đa trình duyệt (cross browser testing / nhiều nơi dịch là kiểm tra chéo trình duyệt), tôi nghĩ là mình sẽ phải tìm hiểu sâu hơn về chủ đề này. Mục đích chính của file reset.css là tạo ra được định kiểu thống nhất trên càng nhiều trình duyệt khác nhau càng tốt, tính cả phiên bản, lẫn OS mà nó đang vận hành qua đó. Chỉ có thế chúng ta mới nắm chắc được người dùng trải nghiệm như thế nào trên các nền tảng khác nhau ấy. Ý niệm về reset.css thay đổi qua năm tháng, có những người sử dụng 3 dòng mã rất đơn giản dùng selector * cho tất cả các phần tử để thiết lập lại, có những người khác lại thiết kế tỷ mỉ hơn, chỉ chọn những phần tử có sự khác biệt thật sự, và chỉ chú trọng vào các thuộc tính khác biệt của phần tử đó mà thôi, kết hợp với các thay đổi, phát triển của HTML và CSS trong giai đoạn gần đây. Những người khác thậm chí đi xa hơn, không chỉ reset, họ còn bổ sung thêm các style ưa thích của riêng mình, hoặc các style mà họ cho là tốt hơn style mặc định. OK, giờ đã đến lúc chúng ta vào bài rồi! Mấy ngày hôm trước, tôi có thấy một bài viết của Nicholas Cerminara nói rằng Bootstrap 4 đã có file reset CSS mới mà họ gọi là Reboot.
Nếu bạn là một người mới trong lĩnh vực phát triển CSS, thì toàn bộ ý tưởng của CSS reset đó là xử lý các mâu thuẫn trong chuyện
thiết lập style giữa các trình duyệt. Lấy ví dụ, nếu tôi đưa một button vào trang và không thiết lập style nào cụ thể liên quan đến padding thì theo mặc định trình duyệt Chrome sẽ áp dụng câu lệnh PS từ người dịch: Hệ quả là chúng ta sẽ có 2 giao diện khác nhau! Và khó lường trước được các rắc rối có thể xảy ra khi người dùng trải nghiệm. CSS reset sẽ áp dụng padding mới lên phần tử này, vì thế tất cả các trình duyệt sẽ có kết quả render nhất quán, và buộc chúng ta phải tự chủ động điều chỉnh (trong trường hợp này là padding của button), chứ không bị sao nhãng theo mặc định, dẫn đến hệ quả từng trình duyệt sẽ hiển thị khác nhau. Chúng ta sẽ xem xét một vài ví dụ như thế.
Nhìn lại một chút lịch sử nào…Vào năm 2007, Jeff Starr đã tổng hợp một loạt các thiết lập CSS khác nhau. Phiên bản cũ nhất là của Tantek Çelik, nó đây: undohtml.css (link dẫn trực tiếp đến file). Chúng ta có thể thấy rằng mục đích đằng sau nó là loại bỏ đi các thuộc tính mặc định:
Ở thời điểm hiện tại, một trong các thiết lập reset phổ biến nhất là của Meyer. Nó có những thứ khác so với những cái mà Tantek đã làm (nó thậm chí cập nhật một số phần tử HTML5), nhưng ý tưởng căn cốt thì vẫn thế thôi: loại bỏ các thiết lập style mặc định. Bạn có thể sẽ để ý đến khối mã nổi tiếng này, tìm thấy nó thông qua DevTools ở khắp mọi nơi:
Khi bạn bắt đầu với đoạn mã CSS reset như vậy (tức là tại vị trí trên cùng của file CSS), rồi sau đó bạn viết các đoạn CSS của riêng mình, thế thì bạn sẽ có được các chỉ thị CSS vững chắc, ổn định qua nhiều trình duyệt khác nhau. Các năm sau đó, khi HTML5 trở thành hiện thực và phổ biến hơn, đoạn mã reset dành cho HTML5 của Richard Clark được biết đến rất nhiều. Nó vẫn là phiên bản điều chỉnh của Meyer, và vẫn giữ nguyên ý tưởng.
Trong suốt quá trình trình thay đổi này, có khá nhiều lập trình viên, nhà thiết kế đã tối thiểu hóa công việc trên bằng cách đơn giản chỉ là loại bỏ margin và padding ra khỏi mọi phần tử, và dùng đoạn mã đơn giản thế này thôi:
Tiếp đến là Normalize.cssNormalize.css là đại diện đầu tiên thực hiện bước chuyển trong ý nghĩa của việc file CSS reset nên làm điều gì. Điều này dường như đã tạo ra sự khác biệt rất lớn đối với tôi:
Đoạn mã cũng dễ đọc, vì nó giải thích mục đích của từng dòng mà không quá đi sâu vào chi tiết:
Ở thời điểm hiện tại Normalize đang ở phiên bản 7.0.0 và nhận được 30 ngàn sao trên GitHub. Nó quả thực rất phổ biến. Vì vậy, … chúng ta có thể chọn lựa kiểu reset đúng không?Chúng ta đã thấy rất nhiều cách khác nhau để reset CSS, và chúng ta cũng thấy những thay đổi nền tảng trong cách tiếp cận, vì thế tôi nghĩ sẽ công bằng khi nói rằng reset CSS có thể có các tùy chọn riêng. Hãy xem xét một số định hướng nhé…
Giờ chúng ta hãy nhìn vào Vanilla CSS Un-Reset. Có rất nhiều tùy chọn ở đây, nó bắt đầu với ý tưởng là thiết lập lại style cho phần tử sau khi bạn loại bỏ style của nó thông qua reset. Nó thiết lập font chữ body ở kích cỡ pt, thiết lập ngăn xếp font chữ monospaces rất cụ thể, bao gồm selector ol, một clearfix, và các lớp trợ giúp căn chỉnh. Tôi không phán xét. Mọi người tạo ra cái gì đó để khắc phục các rắc rối cho chính mình, và tôi tin chắc rằng điều này có ích cho sáng tạo. Chúng ta có thể thấy các tùy chọn có vẻ đẹp của riêng nó. Bây giờ hãy nhìn vào file MiniReset.css. Rất khác nhau! Các ý kiến hoàn toàn khác nhau như vậy đấy. Jonathan Neal đã tạo một file reset có tên santize.css rất rõ ràng về các tùy chọn của nó. Tìm kiếm từ “opinionated” trong mã nguồn và bạn sẽ thấy nó đến 19 lần. Tất cả các lựa chọn mà Jonathan đưa ra dựa trên nghiên cứu, và điều này dường như là cách thực hành tốt nhất trong thế giới hiện đại. Và không nghi ngờ gì nữa, chúng phản ảnh những gì mà anh ấy cần và muốn reset lại.
Cá nhân tôi nghĩ rằng sẽ 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ề lý luận. Tuy nhiên, Normalize cố ý tách chính nó ra:
Sanizing tự gọi bản thân là một thư viện CSS và không sử dụng từ “reset” ở bất kỳ đâu ngoại trừ phần trích dẫn lại từ Meyer. RebootReboot rất thú vị, có lẽ là vì nó là tay chơi mới nhất trong lĩnh vực này. Lịch sử của nó bắt đầu từ năm 2015, có thể liên quan đến việc Bootstrap 4 suy giảm sau Bootstrap 3. Reboot 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ị:
Bài Viết Liên QuanQuảng CáoCó thể bạn quan tâmToplist được quan tâm#1
#2
Top 7 số 20 gồm 2 và 0 đúng hay sai 20236 tháng trước#3
#4
#5
Top 6 on tập tiếng việt lớp 7 học kĩ 2 violet 20236 tháng trước#7
Top 8 mơ thấy có người to tình với mình 20236 tháng trước#8
Top 6 nước yến cao cấp yến sào thiên hoàng 20236 tháng trước#9
Top 7 ví dụ về quyết định hành chính nhà nước 20236 tháng trướcQuảng cáoXem NhiềuQuảng cáoChúng tôiTrợ giúpBản quyền © 2021 Hỏi Đáp Inc.
|