内容
我应该在什么地方使用 Material Design Lite (MDL)?
如果您对使用原生 Web 技术(如 CSS、JavaScript 和 HTML)的Material Design 体验感兴趣,MDL 可能是值得考虑的一个有用选项。我们针对内容丰富的网站进行了优化,例如营销页面、文章、博客和一般的网页内容,这些内容并非特别“应用化”。如果您只想选择一些颜色,自定义模板并交付 Material 体验,我们试图帮助简化此过程。
虽然社区为 Material Design 提供了许多选项,但我们的经验表明,在 Web 方面,Material 规范中存在一些差距。我们没有猜测应该如何填补这些差距(我们知道社区一直在为此而努力),而是选择与 Material Design 团队紧密合作,提供一个既符合当前规范,又对规范仍在发展中的方面提供指导的 Material 库。
MDL 使用什么 CSS 命名规范?
MDL 使用BEM编写。BEM 代表块 (Block)、元素 (Element) 和修饰符 (Modifier)。它是一种用于构建 CSS 类名的的方法,使其保持一致、隔离和表达力。一些学习更多关于 BEM 方法的好资源是
这些都是极好的资源,简化了理解 BEM 所需的数据。如果您想阅读发明者的方法论,Yandex 提供了资源。此参考远远超出了 CSS 本身,还包括他们使用的完整的 JavaScript 设置。
我们的wiki包含专门用于 MDL 的命名空间部分。
MDL 是否支持渐进增强?
MDL 的组件从一开始就考虑了渐进增强。我们尽可能地构建在原生 HTML 元素之上,只有在绝对必要时才依赖 JavaScript 进行“增强”。
一个例子是我们的“仅文本”Material Design 模板。在 Chrome DevTools 中关闭 JavaScript,页面仍然可以正常渲染 CSS。
这使我们能够首先渲染重要内容,然后使用 Material Design 按钮水波纹和弹出菜单组件等功能“增强”页面。
MDL 将在 IE9 上降级到无 JavaScript 体验,尽管您可以引入 polyfill 以获得增强的体验。如果组件需要 JavaScript 才能正常工作,例如布局,则需要在开发中进行计划。IE10+ 和 Evergreen 浏览器完全受支持。有关浏览器支持的更多详细信息,请参阅“MDL 支持哪些浏览器?”。
注意:MDL 网站本身尝试在可能的情况下使用渐进增强。但是,我们网站的某些方面(例如我们的组件页面)更依赖于 JS。MDL 模板和组件在 JS 关闭的情况下尝试尽可能好地呈现。
MDL 支持哪些浏览器?
完整的 MDL 体验应该可以在所有 Evergreen 浏览器的最后两个版本中正常工作,同时我们会在像 IE9 这样的未通过我们的达标测试的浏览器中优雅地降级到仅 CSS。
我们的浏览器兼容性矩阵包含我们正式支持的浏览器的最新信息。对于组件,至少我们需要支持querySelector、classList和addEventListener,这些可以通过polyfill根据需要进行填充。我们的模板将在 IE10+ 中工作,这主要是因为我们使用了 Flexbox。
我们目前用于 MDL 网站以改善旧版 IE 支持的 polyfill 如下
<!--[if IE]>
<script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.2.0/es5-shim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
<![endif]-->
IE10 标准模式删除了对条件注释的支持,因此上述内容只会由旧版本的 IE(例如 IE9)进行解释。
我们不正式支持 IE8。也就是说,某些组件在使用仅 CSS(或原生 HTML 元素)体验时会比其他组件更好地降级。例如
按钮
表格
滑块(降级为输入字段)
MDL 是否与 Polymer 兼容?它是否可以替代 Paper 元素?
MDL 专注于提供针对静态内容网站(如博客、营销页面和更传统的基于文本的网页)优化的体验。
使用Polymer构建的Paper元素是完全封装的组件,可以单独使用或组合在一起以创建材料设计风格的网站,并支持更高级的用户交互。
也就是说,MDL 可以与 Polymer 元素对应物一起使用。Polymer 利用 Web Components 的强大功能来封装用于这些组件的设计。MDL 不会影响自定义组件中的样式。
MDL 是否可以与 Bootstrap 相媲美?
如果我们用它代替 Bootstrap,我们能否期望获得相同级别的组件样式?
Material Design 可以替换 Bootstrap 的许多部分。但是,它并不打算与 Bootstrap 提供的所有功能相匹配。相反,MDL 旨在实现 Material Design 规范中指定的组件。这使它能够提供最全面和准确的解决方案。
它与现有的 Material CSS 实现相比如何?
Materialize、Material Bootstrap 等
我们认为社区在提供他们自己对如何为 CSS 库实现 Material Design 的看法方面做得非常出色。
也就是说,大量不同的可用实现通常对其对规范的解释非常宽松(这并非他们的错!),他们的观点并不总是反映 Material Design 团队认为“正确”的内容。MDL 是与 Material Design 和 Chrome UX 团队紧密合作开发的,并定期进行规范合规性审查。当我们遇到规范中尚未完全详细说明的领域时,MDL 能够提供经过审查的意见,说明如何以忠于 Material Design 的方式解决这些问题。
我应该使用 MDL 的压缩版、CDN 版还是 Sass 版?
我应该构建自己的版本还是下载压缩版本,或者简单地引用 CDN 对象?
**压缩版:**如果您第一次使用 MDL,我们建议您从“入门”页面下载默认软件包之一,其中包含 CSS/JS 的压缩版本以及可选的预制模板。
**CDN:**如果您只是进行原型设计或希望避免托管自己的 MDL CSS 和 JS 文件副本,您可以使用我们的 CDN 下载经过大量边缘缓存的版本。
**自定义工具:**如果您使用 MDL 创建新网站并使用自定义配色方案,我们建议您下载默认软件包,然后使用自定义工具生成自定义构建。您可以使用它来覆盖 material.min.css 文件以满足您自己的需求。
**Sass:**如果您更喜欢全力以赴,您可以获取 MDL 的 Sass 版本,其中包含我们的原始源代码、文档和模板。此版本允许使用 CSS 变量和您习惯的其他 Sass 功能进行最大程度的自定义。
官方 CDN 使用什么服务?
官方 CDN 托管在Google Cloud Storage上。
MDL 与 Web Starter Kit 有什么关系?
MDL 是 Web Starter Kit 中提供的样式指南的演变步骤。随着Web Starter Kit的使用越来越多,越来越明显的是,许多开发人员只是希望在他们的网站中使用 Material Design。
WSK 样式指南也没有完全符合 Material Design,它只是基于这个想法。MDL 正是从 WSK 项目中诞生,试图满足开发人员的这一需求。在此过程中,使实现尽可能忠实于规范。
Google 的任何产品在生产环境中使用 MDL 吗?
MDL 在 Google 的一些产品中得到生产环境使用。这些使用了较旧、不完整的版本,但展示了已部署体验可能是什么样子。示例包括
DoubleClick 的RichMediaGallery
并且正在被许多其他团队用于即将推出的项目,包括 Google Shopping。
是否有使用 MDL 的网站展示?
请参阅展示以获取 Google 网站在生产环境中使用 MDL 的早期列表。
要请求添加您的网站,请在我们的 GitHub 问题跟踪器上提交新问题。该问题应包含链接、网站描述和建议的屏幕截图。
我们希望在不久的将来为网站添加一个经过精心设计的展示。
我可以构建或使用单独的 MDL 组件(例如按钮)吗?
对于 MDL 的 V1,我们专注于可能需要在其页面上使用一些不同组件并希望包含大部分 MDL 库的用户用例。这意味着仅单独提取单个组件的支持和文档最少。
也就是说,如果您需要仅使用一个(或少量)组件来生成构建,则需要使用 Gulp 和我们的 Sass 构建。您可以注释掉material-design-lite.scss 中不需要的组件,注释掉Gulpfile 中不需要的脚本,然后运行gulp
以创建您的构建。
我们讨论过以更模块化的方式提供组件,但将在 V1 后时间线中探索这一点。
如何报告 MDL 的问题?
请通过在我们的GitHub 仓库上打开问题来告知我们任何问题。
在哪里可以获得有关使用 MDL 的问题的帮助?
我们鼓励 MDL 用户和开发人员社区在Stack Overflow上提问并帮助回答问题,使用Material-Design-Lite
标签。
是否有关于 MDL 的演示文稿或幻灯片?
我们在 2015 年 Google I/O 上对 MDL 进行了一次预览演讲,该演讲的幻灯片可在SpeakerDeck上找到。
我可以请求或贡献组件到 MDL 吗?
当然!您可能希望在 MDL 中看到一些我们尚未提供的组件或模板。请随时在问题跟踪器上提出建议。虽然我们不能保证能够实现所有建议,但我们会考虑请求并在定期间隔内对其进行审查。
MDL 是否会支持非 Sass 预处理器?
Stylus、Less、PostCSS 等
MDL 使用 Sass 实现,目前没有计划更改此方案。如果您希望将其移植到其他预处理器,我们非常欢迎。
如何关注我感兴趣的问题的更新?
关注整个代码库可能会在您的信息流中引入大量额外噪声。要仅关注您感兴趣的问题的更新,您只需订阅该问题即可。这可以通过在问题页面右侧边栏中点击“订阅”按钮来完成。