随着前端技术的快速发展和不断更新,我们经常需要碰到的问题之一就是浏览器兼容性。为了解决这个问题,我们常常需要在项目中引用“初始化样式”的文件夹,来保证在不同的浏览器中,页面呈现的效果基本一致。其中的“初始化样式”文件,也称为“归一化CSS”文件。
初始化 CSS 的主要任务是避免默认样式带来的不一致,并且解决了一些常见的浏览器兼容性问题和 bug。Bootstrap,Foundation 这样的 CSS 框架都包含下面的初始化 Style 文件:
/*! * Bootstrap v5.1.3 (https://getbootstrap.com/) * Copyright (c) 2021 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ :root { --bs-blue: #0d6efd; --bs-indigo: #6610f2; --bs-purple: #6f42c1; --bs-pink: #d63384; --bs-red: #dc3545; --bs-orange: #fd7e14; --bs-yellow: #ffc107; --bs-green: #198754; --bs-teal: #20c997; --bs-cyan: #0dcaf0; --bs-white: #fff; --bs-gray: #6c757d; --bs-gray-dark: #343a40; --bs-primary: #0d6efd; --bs-secondary: #6c757d; --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-font-sans-serif: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif; --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }
对于初学者来说,从头开始写一个归一化 CSS 文件比较困难,并且容易出现问题。建议大家可以使用 Bootstrap 这样成熟的 CSS 框架。如果你需要定制自己的 CSS 或者使用其他框架,可以在网上搜索到开源的归一化 CSS 文件,也可以通过一些工具如 Normalize.CSS 来生成一个适合自己项目的初始化样式。