最新版本的css是多少,CSS3未完成制订标准 下一个版本CSS4是否还存在?

最近,在社区中引发了关于是否应该定义“下一个版本”CSS4的讨论问题。

目前CSS最新版本是CSS2.1,为W3C的推荐标准。虽然CSS3现在已被大部分现代浏览器支持,CSS3标准已部分公布,但仍未全部制订完毕,而下一版的CSS4仍在研发中。

但是目前很多web开发者并不喜欢CSS4存在,因为在CSS3之后,我们看到了很多学习CSS带来的阻力,CSS3使用过程让开发者感到疲惫不堪,他们觉得自己永远学不会,也很难去研究或追赶新技术。

如果下一个没有CSS4,我们首先简单看一下Web平台发展中CSS的历史,或许可以理解为什么?

CSS的初始版本是一个单一的整体规范,这些规范包含所有可能的CSS属性和值。因为没有太多CSS要详细说明,CSS1主要涵盖用于格式化文本文档的功能,CSS2和CSS2.1中添加了其他功能和说明,但是CSS仍然是一个相对较小的规范。

当CSS开发者开始研究CSS3时,决定将大型规范拆分为模块,这些模块每个都覆盖CSS的一部分。并非所有CSS都会立即放入新模块中,CSS2.1中仍然定义了许多东西,因为它们没有更改或添加。

6c2a812731bf1f53f5c489b2ed91199d.png

因此,如果仍在CSS2中定义所引用的内容,我们仍会在现代模块中找到指向CSS2规范的链接。但是,任何新的CSS都是在单独的模块中创建的。随着新CSS的创建,这种模块化一直持续到今天。例如,构成Box Alignment规范的几种功能最初在Flexbox规范中开始使用,一旦很明显它们可以应用于其他布局方法(例如Grid Layout),它们就被移到一个新模块中,也要为该其他方法定义。

很多开发者认为不再将新规范称为CSS3规范,部分原因是它没有多大意义,对模块进行版本控制的方式是,CSS2的升级模块(例如Selectors)成为了3级模块。全新的CSS(例如CSS网格布局)在CSS2中根本不存在,因此可以从1级模块开始编程,这些初始模块中的一些模块现在处于4级甚至5级。因此,调用所有新的CSS CSS3不再映射到这些级别编号,并且可能会造成混乱。

除了规范级别,每个单独的级别都经过从初始草案到成为W3C建议书的分阶段过程,该过程中的步骤称为“ 成熟度级别”。我们可能会认为W3C建议是一个“网络标准”,但是我们在工作中每天使用的许多东西都是在尚未达到该成熟度级别的规范中定义的。

我们看到许多人看到了许多关于CSS3的困惑与CSS4明显缺乏进步的情况,就是说,对于Web开发人员而言,规范的级别或内部的W3C规范成熟度,远不如浏览器中可以实际使用CSS的重要性重要。

举报/反馈

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的示例代码,展示如何使用CSS创建已完成完成百分比的进度条: ```html <div class="progress-bar"> <div class="progress"></div> <div class="remaining"></div> </div> ``` ```css .progress-bar { width: 200px; height: 20px; background-color: #ddd; position: relative; } .progress { height: 100%; background-color: #4CAF50; position: absolute; top: 0; left: 0; } .remaining { height: 100%; background-color: #f44336; position: absolute; top: 0; right: 0; } /* 根据完成百分比设置进度条的宽度 */ .progress-bar[data-progress] .progress { width: calc(var(--progress) * 100%); } /* 根据完成百分比设置进度条的宽度 */ .progress-bar[data-progress] .remaining { width: calc((1 - var(--progress)) * 100%); } ``` 在这个例子中,我们创建了一个进度条容器 `.progress-bar`,并在其中包含一个 `.progress` 元素和一个 `.remaining` 元素,分别表示已完成完成的进度条部分。我们使用 `--progress` CSS变量来控制已完成百分比,并使用 `calc()` 函数来计算完成部分的宽度。 要动态地更改百分比,您可以使用JavaScript来设置 `--progress` 变量的值。例如,如果您想将进度条设置为50%已完成和50%完成,可以使用以下代码: ```javascript var progressBar = document.querySelector('.progress-bar'); progressBar.style.setProperty('--progress', '0.5'); progressBar.setAttribute('data-progress', ''); ``` 这将设置 `--progress` 变量的值为0.5,并将 `data-progress` 属性设置为任意值,以触发CSS样式。完成后,进度条将显示为50%已完成和50%完成的状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值