尧图网站建设 ss到ep：一位作者如何放弃伪元素、拥抱语义化progress的设计思考)
从progre(c)ss到ep一位作者如何放弃伪元素、拥抱语义化progress的设计思考【免费下载链接】epenhance your HTML5 progress bars with minimal effort!项目地址: https://gitcode.com/gh_mirrors/ep/epep是一个帮助你以最小代价增强 HTML5progress进度条的开源库一次跨浏览器样式重置、一组纯 CSS 助手类外加一个可选的 JS 控制器让原生进度条真正好用。本文将带你回顾作者 jh3y 从progre(c)ss到ep的设计转变——为什么放弃伪元素、又为什么拥抱语义化。伪元素的捷径与代价progre(c)ss 的局限作者的第一版方案progre(c)ss思路很讨巧给任意元素加一个类用:before伪元素画出一条 6px 高的进度条再用data-progrecss-value属性驱动伪元素宽度。核心实现甚至只用了几行 Sass.progrecss { :before { content: ; height: 6px; position: absolute; ... } for $percent from 1 through 100 { [data-progrecss-value#{$percent}] { :before { width: $percent * 1%; } } } }这段代码见 README.md 的 What happened to progrecss? 一节。它确实哪里都能贴但问题也随之而来不语义进度只是视觉装饰屏幕阅读器完全感知不到加载到 75%不可交互伪元素是绘制层概念无法被 JS 直接读写状态与标准脱节你是在模拟一个控件而不是使用一个控件。一次 revisit 时有用户提问为什么不用progress元素——这句话点醒了作者。拥抱原生ep 的核心设计思路ep的设计原则很克制不新增任何 DOM 节点直接增强原生progress元素。它的核心样式在src/styles/core.scss中做三件事appearance: none抹掉各浏览器的默认外观通过-webkit-progress-value、-moz-progress-bar、-ms-fill等厂商伪元素统一配色封装为color-barmixin见src/styles/_mixins.scss用 Sass 循环生成value1到value100的宽度规则配合width过渡实现平滑动画。所有可配置项集中在src/styles/_configuration.scss例如高度$ep-height: 6px、主色$ep-fg: #3498db、不透明度$ep-opacity: .6。它们全部使用 Sass 的!default标记意味着你在导入前定义同名变量即可覆盖零侵入地定制主题。跨浏览器一致一次重置处处统一原生progress的痛点恰恰是各浏览器表现不一Chrome 的圆角条、Safari 的细线、IE 的方块。ep通过一次 reset 让它们对齐成现代细条风格官方支持的浏览器覆盖 Chrome、Firefox、Safari、Opera、Edge 乃至 IE10。针对浏览器怪癖ep也给出了实用提醒见 README.md 的 Caveats 一节iOS Safari不喜欢 indeterminate 状态的progress解法是不设置 indeterminate改用助手类ep--indeterminate模拟IE中使用具体数值时必须设置max属性否则值超过1就不动了。这些坑被写进文档而非让用户踩正是成熟组件库的细节。纯 CSS 助手不写 JS 也能驱动进度条ep把常用行为拆成两套无 JS 的开关全部作用于progress元素本身外观助手类实现见src/styles/features/helpers.scss类名作用ep--top/ep--bottom绝对定位到顶部 / 底部ep--fixed固定定位跟随滚动ep--spread进度从中心向两侧扩散ep--indeterminate模拟 indeterminate 状态行为助手属性data-complete完成并隐藏、data-simulate30 秒内缓慢爬到 99%、data-mock秒数模拟进度、data-staggered-mock交错风格模拟、data-timer秒数把进度条当倒计时器、data-pause暂停动画。各行为的动画规则分布在src/styles/features/目录下mock.scss、staggered.scss、timer.scss、simulate.scss按需拆分的模块化组织让体积与可定制性兼得。progress value75 max100/progress progress classep--fixed ep--top value75 max100/progress progress>npm install jh3y/ep # 或 bower install ep也可以直接克隆源码git clone https://gitcode.com/gh_mirrors/ep/ep2. 只用样式引入编译后的ep.css现有progress元素无需任何改动即刻生效。3. 与你的 Sass 集成想换主题色导入前覆盖变量即可$ep-fg: purple; $ep-opacity: 1; import ~ep/core;若只想给某个元素上色而不引入完整 reset单独的color-barmixin 也可以独立使用见src/styles/_mixins.scss。设计启示语义化为什么值得回头路这次从progre(c)ss到ep的转变本质是一次**炫技 vs 标准的取舍**✅可访问性原生progress自带 ARIA 语义辅助技术能读到进度值✅零侵入不包裹、不克隆、不新增节点接入成本几乎为零✅可控可定制!default变量 mixin 模块化特征文件改一处影响全局✅渐进增强纯 CSS 即可用JS 助手按需加戏。对于正在纠结要不要用 div 模拟进度条的团队ep给出的答案很明确先尊重原生元素再用最小代码补齐它的短板。项目采用 MIT 协议更多细节可查阅仓库内 README.md 与各模块源码。【免费下载链接】epenhance your HTML5 progress bars with minimal effort!项目地址: https://gitcode.com/gh_mirrors/ep/ep创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 从progre(c)ss到ep：一位作者如何放弃伪元素、拥抱语义化progress的设计思考
从progre(c)ss到ep一位作者如何放弃伪元素、拥抱语义化progress的设计思考【免费下载链接】epenhance your HTML5 progress bars with minimal effort!项目地址: https://gitcode.com/gh_mirrors/ep/epep是一个帮助你以最小代价增强 HTML5progress进度条的开源库一次跨浏览器样式重置、一组纯 CSS 助手类外加一个可选的 JS 控制器让原生进度条真正好用。本文将带你回顾作者 jh3y 从progre(c)ss到ep的设计转变——为什么放弃伪元素、又为什么拥抱语义化。伪元素的捷径与代价progre(c)ss 的局限作者的第一版方案progre(c)ss思路很讨巧给任意元素加一个类用:before伪元素画出一条 6px 高的进度条再用data-progrecss-value属性驱动伪元素宽度。核心实现甚至只用了几行 Sass.progrecss { :before { content: ; height: 6px; position: absolute; ... } for $percent from 1 through 100 { [data-progrecss-value#{$percent}] { :before { width: $percent * 1%; } } } }这段代码见 README.md 的 What happened to progrecss? 一节。它确实哪里都能贴但问题也随之而来不语义进度只是视觉装饰屏幕阅读器完全感知不到加载到 75%不可交互伪元素是绘制层概念无法被 JS 直接读写状态与标准脱节你是在模拟一个控件而不是使用一个控件。一次 revisit 时有用户提问为什么不用progress元素——这句话点醒了作者。拥抱原生ep 的核心设计思路ep的设计原则很克制不新增任何 DOM 节点直接增强原生progress元素。它的核心样式在src/styles/core.scss中做三件事appearance: none抹掉各浏览器的默认外观通过-webkit-progress-value、-moz-progress-bar、-ms-fill等厂商伪元素统一配色封装为color-barmixin见src/styles/_mixins.scss用 Sass 循环生成value1到value100的宽度规则配合width过渡实现平滑动画。所有可配置项集中在src/styles/_configuration.scss例如高度$ep-height: 6px、主色$ep-fg: #3498db、不透明度$ep-opacity: .6。它们全部使用 Sass 的!default标记意味着你在导入前定义同名变量即可覆盖零侵入地定制主题。跨浏览器一致一次重置处处统一原生progress的痛点恰恰是各浏览器表现不一Chrome 的圆角条、Safari 的细线、IE 的方块。ep通过一次 reset 让它们对齐成现代细条风格官方支持的浏览器覆盖 Chrome、Firefox、Safari、Opera、Edge 乃至 IE10。针对浏览器怪癖ep也给出了实用提醒见 README.md 的 Caveats 一节iOS Safari不喜欢 indeterminate 状态的progress解法是不设置 indeterminate改用助手类ep--indeterminate模拟IE中使用具体数值时必须设置max属性否则值超过1就不动了。这些坑被写进文档而非让用户踩正是成熟组件库的细节。纯 CSS 助手不写 JS 也能驱动进度条ep把常用行为拆成两套无 JS 的开关全部作用于progress元素本身外观助手类实现见src/styles/features/helpers.scss类名作用ep--top/ep--bottom绝对定位到顶部 / 底部ep--fixed固定定位跟随滚动ep--spread进度从中心向两侧扩散ep--indeterminate模拟 indeterminate 状态行为助手属性data-complete完成并隐藏、data-simulate30 秒内缓慢爬到 99%、data-mock秒数模拟进度、data-staggered-mock交错风格模拟、data-timer秒数把进度条当倒计时器、data-pause暂停动画。各行为的动画规则分布在src/styles/features/目录下mock.scss、staggered.scss、timer.scss、simulate.scss按需拆分的模块化组织让体积与可定制性兼得。progress value75 max100/progress progress classep--fixed ep--top value75 max100/progress progress>npm install jh3y/ep # 或 bower install ep也可以直接克隆源码git clone https://gitcode.com/gh_mirrors/ep/ep2. 只用样式引入编译后的ep.css现有progress元素无需任何改动即刻生效。3. 与你的 Sass 集成想换主题色导入前覆盖变量即可$ep-fg: purple; $ep-opacity: 1; import ~ep/core;若只想给某个元素上色而不引入完整 reset单独的color-barmixin 也可以独立使用见src/styles/_mixins.scss。设计启示语义化为什么值得回头路这次从progre(c)ss到ep的转变本质是一次**炫技 vs 标准的取舍**✅可访问性原生progress自带 ARIA 语义辅助技术能读到进度值✅零侵入不包裹、不克隆、不新增节点接入成本几乎为零✅可控可定制!default变量 mixin 模块化特征文件改一处影响全局✅渐进增强纯 CSS 即可用JS 助手按需加戏。对于正在纠结要不要用 div 模拟进度条的团队ep给出的答案很明确先尊重原生元素再用最小代码补齐它的短板。项目采用 MIT 协议更多细节可查阅仓库内 README.md 与各模块源码。【免费下载链接】epenhance your HTML5 progress bars with minimal effort!项目地址: https://gitcode.com/gh_mirrors/ep/ep创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考