CSS发展浅谈

不要放弃治疗啊

已于 2022-10-18 17:56:52 修改

阅读量446

点赞数 2

文章标签： css 前端 html

于 2022-10-18 17:56:21 首次发布

本文链接：https://blog.csdn.net/loveye_131/article/details/127213488

版权

本文探讨了CSS从诞生到发展，再到Sass、Less等预处理器的兴起，以及Houdini API的出现。CSS从简单的HTML样式扩展到复杂的样式表语言，经历了多个版本的迭代，提高了开发效率和页面性能。然而，Houdini尽管提供了更强大的样式控制，但因浏览器支持度低和实际应用有限，尚未广泛流行。文章还分析了CSS未来可能的进化方向。

摘要由CSDN通过智能技术生成

任何技术的发展，其生命周期无外乎是：诞生——发展——消亡。我们带着以下几个问题来看待整个css生命周期。
想解决什么问题——怎么解决的——现在结果怎么样。
一.诞生
1.html的兴起
早期的web（90-93年）HTML是一个很有限的语言，它几乎完全由描述段落、超链接、列表和标题的结构化元素组成。原本是要作为结构化标记语言类似于XML来使用的。
但是随着万维网（Web）以及电脑的普及，网站开始到处涌现，期刊网站、大学网站、公司网站等应运而生。原有的HTML已经不满足需求了，于是出现了早期的标记元素。例如：<font> <big><u>等。
在这里插入图片描述

2.CSS应运而生
所以“救星”CSS出现了。与html比支持更丰富的文档外观能够修改更多的效果。
例如 <font size=“6” face=“Helvetica” color=“red”>标题</font> 每个需要样式的地方都要单独写font，可访问性降低不易于维护等
用css可以改成
可以改成 <div>this is Title </div> 然后统一处理h1样式
div {
font-size: 2em;
font-family: Helvetica;
color: red;
}
修改更加方便能够统一修改多个页面使用同一套样式缩减文件大小
在这里插入图片描述

二.发展
1.css版本
95年 w3c开始发布css（可以当做是css1），96年比较成熟了一些（一小部分进行有标准化） 98年大量标准化出了完整版（css2）。
CSS3于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，草案中制定了CSS3发展路线图，详细列出了所有模块，并计划在未来将逐步进行规范；主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效，多栏布局等等模块。
下面是网上找的一张css3各版本发布时间图
引用网上的一张图片

部分官网版本查看：
官网地址
在这里插入图片描述

我们现在和早些年说的css 其实基本都是css3，相对于css2来说 css3的好处有这2点
①减少开发和维护成本
CSS3 还能让我们远离一大堆的 JavaScript 脚本代码或者 Flash。
有些 CSS3 技术还能帮助简化页面，让结构更加清晰。
②提高页面性能
减少多余的标签嵌套和图片的使用数量，页面加载也会更快。
使用 CSS3 制作图形化网站无须任何图片，能极大地减少 HTTP 的请求数量，并且提升页面的加载速度。
2.css的学习
关于css的学习随便百度一下就很多了。
在这里插入图片描述

三.进化
就目前而言 css还在发展进化中，并没有消亡的迹象。
1.进化的原因
①css是层级是平铺的，所有样式都在一个层级，遇到项目体量大时，不易维护，容易冲突，范围不好界定等。
②css没有继承无法复用
③可读性差
2.进化的结果：sass scss less 的兴起
sass、scss、less都是对css的一种扩展提升。都有变量、计算、嵌套等，它可以理解为使用 JavaScript 的方式书写，最后编译成Css来控制网页样式。
sass和scss区别
sass增加了变量、计算、嵌套、继承、函数、注释等等特性。SASS 和 SCSS 在语法方面的唯一区别是缩进 { } 的使用。换句话说，SCSS 只不过是带有缩进的 SASS。
sass和less区别
①.安装依赖：sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。
less 可以运行在node环境下，在服务器端最容易的安装方式就是通过 npm
②变量 less是@ ，sss是$
④继承写法不同 less是$:extend(.demo) scss是@extend .demo
⑤作用域 sass 就近原则 less逐层往上
⑥混合写法不同
3.Houdini的出现（16年）
①出现原因：
·js通过dom操作样式，对浏览器性能会有影响。
·CSS效果不够丰富，自由度不高。无法支持一些复杂的效果。例如：多块不同的背景色块。星空效果等
Houdini API是一套功能强大，暴露CSS引擎能力的方案；
优势明显，比如：更友好的API、轻松突破以往CSS有限的能力范围、性能提升；
github上的资料
 官网上一些api信息
Houdini的几个api支持度如下（其实支持度都不高）
在这里插入图片描述

3个高级api介绍如下
在这里插入图片描述

几个底层方api如下
在这里插入图片描述

自己写了个例子，发现只有Paint Api 勉强可用。
百度了1个例子：
js

class CheckerboardPainter {
    paint(ctx, geom, properties) {
      const colors = ['red', 'green', 'blue'];
      const size = 32;
      for(let y = 0; y < geom.height/size; y++) {
        for(let x = 0; x < geom.width/size; x++) {
          const color = colors[(x + y) % colors.length];
          ctx.beginPath();
          ctx.fillStyle = color;
          ctx.rect(x * size, y * size, size, size);
          ctx.fill();
        }
      }
    }
 }
 // 注册checkerboard
 registerPaint('checkerboard', CheckerboardPainter);

复制代码
html

<body>
    <textarea></textarea>
</body>
<script>
    if (!CSS in window || !CSS.paintWorklet) {
        document.write('不支持 Houdini paintWorklet</br>');
    }
    if (!CSS in window || !CSS.animationWorklet) {
        document.write('不支持 Houdini animationWorklet</br>');
    }
    if (!CSS in window || !CSS.layoutWorklet) {
        document.write('不支持 Houdini layoutWorklet</br>');
    }
    CSS.paintWorklet.addModule('./demo1.js')
</script>
<style>
    textarea {
        height: 200px;
        background-image: paint(checkerboard);  /* 使用paint()方法调用checkboard绘制背景*/
    }
</style>