渐进增强与优雅降级

渐进增强（Progressive Enhancement）和优雅降级（Graceful Degradation）是 Web 开发中的两个重要概念，它们强调了网站或应用在不同环境和设备上的适应性。渐进增强：定义：指的是从最基本的、可访问的版本开始构建网站或应用，然后逐渐添加更高级的功能和效果，以提供更好的用户体验。确保网站或应用在各种设备和浏览器上都能正常运行，同时为高级用户或支持更高级特性的设备提供更好的体验。实现方式：可以通过使用HTML和CSS。

CSS的渐进增强和优雅降级

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。设计和开发人员首先关注基本的HTML和CSS，确保网站在所有浏览器和设备上都能正确显示和访问。然后，他们会逐步添加JavaScript和其他高级技术，以增强网站的功能和设计。优点：网站在所有浏览器和设备上都能够提供基本的功能和可访问性。

渐进增强和优雅降级的目标都是确保网站或应用在各种环境下都能提供可用的、可访问的体验，同时尽可能地利用更高级的特性来提供更好的用户体验。这两种策略可以帮助开发人员构建更具适应性和兼容性的网站或应用。

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、 交互等改进和追加功能达到更好的用户体验。一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

渐进增强和优雅降级是在css3出现之后才火起来的。比如IE6等，不支持css3，但是css3的样式又特别优秀，所以在高级浏览器中应用css3样式，在低版本中保持基本功能。渐进增强和优雅降级也是一种程序开发思想，比如在vue源码中，数据更新和渲染就有运用优雅降级这一思想。

优雅降级是指先构建一个功能完整、体验丰富的网站，然后针对那些不支持某些高级特性的浏览器和设备，逐步降低功能和体验的标准，但仍然保证基本的可用性。它更侧重于在高级浏览器中提供最佳的用户体验，然后处理低版本浏览器的兼容性问题。渐进增强是一种从最基础的功能开始构建网站，然后逐步为支持更高级特性的浏览器和设备添加额外功能和样式的设计理念。它强调先确保所有用户都能访问到核心内容和基本功能，然后再针对具备更强大能力的设备和浏览器提供增强的体验。

渐进增强和优雅降级是常用的两种策略，它们主要关注于如何在不同环境和条件下为用户提供最佳体验。一起看下两者之间的主要区别吧！

优雅降级”观点 “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。 “渐进增强”观点 “渐

Q：回流和重绘回流reflow：计算元素的几何，引发layout重绘repaint：更新元素可见样式，引发paint回流的成本比重绘高得多，因为它涉及重新计算元素的几何属性和页面布局。Q：transform、opacity、filter、will-change创建动画A：既不会触发reflow也不会repaint，当使用transform或opacity时，跳过layout和paint阶段，直接在GPU中处理变换，浏览器只需要composite已有图层而非render页面。

这篇文章介绍了一个纯CSS实现的3x3彩色格子网格交互效果。当鼠标悬停任意格子时，所在行和列会放大显示。主要技术点包括：CSS Grid布局构建基础网格，SASS循环生成9种不同颜色，利用:has()选择器监听悬停状态，结合SASS数学模块和列表操作动态调整行列比例。整个效果仅需少量HTML和SASS代码，无需JavaScript，但需注意:has()在Firefox的兼容性问题。该方案展示了现代CSS结合预处理器的强大表现力。

添加了 <global-loading> 自定义元素。 引入了 global-loading.js 文件以支持组件功能。 创建了一个新的 Web Component GlobalLoading。 在组件中定义了 loading 动画的 HTML 和 CSS。 实现了 init 方法，监听 window 的 load 事件并在页面加载完成后隐藏 loading 动画。 将 loading 动画的样式封装在组件内部，避免污染全局样式。

类选择器（同一个类可以被多个元素使用，用于标识一组相似的元素）# ID选择器（一个页面只能有一个相同的ID）无前缀 元素选择器* 通用选择器[ ] 属性选择器（比如 <divclass="not box"> 会被 div[class~="box"] 选中，因为后面的选择器是匹配 class属性 中含有box单词的 div元素。

使用WebSpeech API在基于Kooboo平台的AI对话框中集成语音识别功能。主要内容包括：1）通过SpeechRecognition API实现语音转文本；2）使用TailwindCSS优化界面布局，包括麦克风按钮样式和输入框设计...

z-index在css 3d变换中失效原因