material-ui [RFC]何时开始采用新的CSS功能

8yoxcaq7  于 2022-10-29  发布在  其他
关注(0)|答案(2)|浏览(192)

有什么问题?🤔

CSS是支持Material UI和Joy UI的核心逻辑之一,并且随着时间的推移而不断发展。新的CSS特性,例如flexbox gap,可以降低代码和solve existing issues的复杂性。但是,我们从来没有讨论过何时开始使用它们。
本RFC旨在创建一个讨论,使机构群体更加清晰。

有什么要求?

  1. caniuse中的支持百分比(全局)。
    1.新功能将解决的特定问题。
    1.概念验证

建议的解决方案️

最终解决方案:待定

我认为,通过使用caniuse作为指标,可以将采用分为两个阶段(如果可能):

  • 90%,创建一个选择加入版本(可以是一个新的道具,也可以是一个新的组件):
    *prop例如,<Stack useFlexGap>会将实作从margin切换到gap,可从主题预设props启用gap,以影响Stack的所有实体。
    *组件示例<Unstable_CssGrid >,它实现CSS网格功能作为现有Grid的替代。
  • 94%(约1- 2年,90%),使API基于功能保持稳定。
  • 对于Stackgap可以是默认实现,因为它涵盖了margin的所有用例
  • 对于组件,例如CssGrid,使其成为稳定版本,但仍保留Grid组件,因为它们可能用于不同的方案。

资源和基准测试🔗

  • 没有回应 *
0vvn1miw

0vvn1miw2#

正如会议中所讨论的,我们可以概括这个RFC来考虑一般的浏览器支持。同时,我们可以决定是否/何时删除代码中特定于浏览器的黑客攻击和变通方法。
以下是我目前为止找到的解决方法列表(我会在发现其他问题时不断更新):

  • useSlider中的触摸操作支持检测:

材料-ui/软件包/mui-base/src/滑块无样式/使用滑块.ts
a7a2901中的第159至179行
| | // TODO:移除Safari〈13的支援。|
| | https://caniuse.com/#search=touch-action下载|
| | //页|
| | //iOS上的Safari自v13起支持触摸操作。|
| | //兼容80%以上的iOS手机|
| | //2020年8月。|
| | //利用CSS.supports方法检查是否支持触摸操作。|
| | //由于除Edge@12、IE和触控操作之外的所有操作都支持CSS.supports|
| | //在Edge@12和IE上都受支持,如果CSS。支持不可用,这意味着|
| | //将支持触摸操作|
| | letcached支持触摸操作无:任何;|
| | 函数不支持触摸操作无(){|
| | 如果(缓存支持触摸操作无===未定义){|
| | 如果(CSS类型!=='未定义'&& CSS类型.支持==='函数'){|
| | 如果您有任何问题,请与我们联系。|
| | }否则{|
| | 缓存支持触摸操作无=真;|
| | 上)|
| | 上)|
| | 返回缓存的支持触摸操作无;|
| | 上)|

材料-ui/软件包/mui-base/src/零食条无样式/useSnackbar.ts
a7a2901中的第40行
| | 如果(本机事件.键===='退出'||本机事件.键====='退出'){|

  • FocusTrap中的IE特定支持:

material-ui/packages/mui-base/src/FocusTrap/FocusTrap.js
a7a2901中的第180至189行
| | //在IE11中,document.activeElement可能会为null,结果|
| | //当前为空|
| | //并非IE11中的所有元素都有焦点方法。|
| | //一旦IE11支持被删除,focus()调用就可以是无条件的。|
| | 如果(要恢复节点.当前&&要恢复的节点.当前.焦点){|
| | 当前=真;|
| | focus()函数的一个示例;|
| | 上)|
| | |
| | 要还原的节点。当前=空;|

  • 处理useInput中禁用元素的焦点:

资料-ui/软件包/mui-base/源/输入未样式化/使用输入.ts
a7a2901中的第97至102行
| | //修复IE11中触发焦点/模糊事件的错误|
| | //当元件停用时。|
| | if(表单控件上下文?.已禁用){|
| | ();|
| | 返回;|
| | 上)|

相关问题