据我所知,CSS不是图灵完整的.但我对CSS的了解非常有限.
CSS图灵完成了吗?
现有的草案或委员会是否考虑过可能使图灵完整的语言特征,如果现在不是这样的话?
Jakob.. 374
您可以在CSS3中对规则110进行编码,因此只要您考虑将适当的伴随HTML文件和用户交互作为CSS"执行"的一部分,它就是图灵完备.可以使用相当不错的实现,此处包含另一个实现:
body {
-webkit-animation: bugfix infinite 1s;
margin: 0.5em 1em;
}
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
/*
* 111 110 101 100 011 010 001 000
* 0 1 1 0 1 1 1 0
*/
body > input {
-webkit-appearance: none;
display: block;
float: left;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 0px 3px;
margin: 0;
font-family: Consolas, "Courier New", monospace;
font-size: 7pt;
}
body > input::before {
content: "0";
}
p {
font-family: Verdana, sans-serif;
font-size: 9pt;
margin-bottom: 0.5em;
}
body > input:nth-of-type(-n+30) { border-top: 1px solid #ddd; }
body > input:nth-of-type(30n+1) { border-left: 1px solid #ddd; clear: left; }
body > input::before { content: "0"; }
body > input:checked::before { content: "1"; }
body > input:checked { background: #afa !important; }
input:not(:checked) +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input::before {
content: "1";
}
input:not(:checked) +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input {
background: #fa0;
}
input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input::before {
content: "1";
}
input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input {
background: #fa0;
}
input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input::before {
content: "1";
}
input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input {
background: #fa0;
}
input:checked + input:checked + input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input::before {
content: "0";
}
input:checked + input:checked + input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input {
background: #fff;
}
input:not(:checked) + input:not(:checked) + input:not(:checked) +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input::before {
content: "0";
}
input:not(:checked) + input:not(:checked) + input:not(:checked) +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input {
background: #fff;
}
body > input:nth-child(30n) { display: none !important; }
body > input:nth-child(30n) + label { display: none !important; }
Rule 110 in (webkit) CSS, proving Turing-completeness.
您可以在CSS3中对规则110进行编码,因此只要您考虑将适当的伴随HTML文件和用户交互作为CSS"执行"的一部分,它就是图灵完备.可以使用相当不错的实现,此处包含另一个实现:
body {
-webkit-animation: bugfix infinite 1s;
margin: 0.5em 1em;
}
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
/*
* 111 110 101 100 011 010 001 000
* 0 1 1 0 1 1 1 0
*/
body > input {
-webkit-appearance: none;
display: block;
float: left;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 0px 3px;
margin: 0;
font-family: Consolas, "Courier New", monospace;
font-size: 7pt;
}
body > input::before {
content: "0";
}
p {
font-family: Verdana, sans-serif;
font-size: 9pt;
margin-bottom: 0.5em;
}
body > input:nth-of-type(-n+30) { border-top: 1px solid #ddd; }
body > input:nth-of-type(30n+1) { border-left: 1px solid #ddd; clear: left; }
body > input::before { content: "0"; }
body > input:checked::before { content: "1"; }
body > input:checked { background: #afa !important; }
input:not(:checked) +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input::before {
content: "1";
}
input:not(:checked) +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input {
background: #fa0;
}
input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input::before {
content: "1";
}
input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input {
background: #fa0;
}
input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input::before {
content: "1";
}
input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input {
background: #fa0;
}
input:checked + input:checked + input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input::before {
content: "0";
}
input:checked + input:checked + input:checked +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input {
background: #fff;
}
input:not(:checked) + input:not(:checked) + input:not(:checked) +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input::before {
content: "0";
}
input:not(:checked) + input:not(:checked) + input:not(:checked) +
*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
input {
background: #fff;
}
body > input:nth-child(30n) { display: none !important; }
body > input:nth-child(30n) + label { display: none !important; }
Rule 110 in (webkit) CSS, proving Turing-completeness.
图灵完整性的一个方面是它的停顿问题是不可判定的.
这意味着没有通用算法来确定CSS程序是完成运行还是永远循环.
但我们可以为CSS推导出这样的算法!这里是:
如果样式表没有声明任何动画,那么它将停止.
如果它确实有动画,那么:
如果有任何animation-iteration-count
的infinite
和含选择在HTML匹配,那么就不会停止.
否则,它将停止.
而已.由于我们只是表明停止问题对于CSS是可判定的,因此CSS 不是图灵完整的.
(其他人提到了IE 6,它允许在CSS中嵌入任意JavaScript表达式;这显然会增加图灵的完整性.但是这个功能是非标准的,无论如何,没有人在正确的思想中使用它.)
Daniel Wagner提出了我在原始答案中遗漏的一点.他指出,虽然我已经介绍了动画,但是样式引擎的其他部分(例如选择器匹配或布局)也可以导致图灵的完整性.虽然很难对这些做出正式的论证,但我会试着概述为什么图灵完整性仍然不太可能发生.
第一:图灵完整语言有一些方法可以将数据反馈回自身,无论是通过递归还是循环.但是CSS语言的设计对这种反馈很不利:
@media
查询只能检查浏览器本身的属性,例如视口大小或像素分辨率.这些属性可以通过用户交互或JavaScript代码(例如调整浏览器窗口大小)进行更改,但不能仅通过CSS进行更改.
::before
和::after
伪元素不被视为DOM的一部分,并且不能以任何其他方式匹配.
选择器组合器只能检查当前元素之上和之前的元素,因此它们不能用于创建依赖循环.
当您将鼠标悬停在其上时,可以将元素移开,但只有在移动鼠标时才会更新位置.
这应该足以说服你,选择器匹配本身不能完全图灵.但布局怎么样?
现代CSS布局算法非常复杂,Flexbox和Grid等功能使得水域变得混乱.但即使有可能触发布局的无限循环,也很难利用它来执行有用的计算.那是因为CSS选择器只检查DOM的内部结构,而不是如何在屏幕上布局这些元素.因此,使用布局系统的任何图灵完整性证明必须仅依赖于布局.
最后 - 这可能是最重要的原因 - 浏览器供应商有兴趣保持CSS 不是图灵完整.通过限制语言,供应商可以进行巧妙的优化,使每个人的网络更快.此外,Google将整个服务器场专门用于搜索Chrome中的错误.如果有一种方法可以使用CSS编写无限循环,那么他们可能已经找到了它
根据这篇文章,它不是.文章还认为,制作一个并不是一个好主意.
引用其中一条评论:
所以,我不相信CSS是完整的.没有能力在CSS中定义函数.为了使系统能够完成,必须能够编写一个解释器:一个解释表达程序来执行的函数.CSS没有可供用户直接访问的变量; 所以你甚至无法模拟表示要在CSS中解释的程序的结构.
图灵完整性不仅与"定义函数"或"具有ifs/loops/etc"有关.例如,Haskell没有"循环",lambda-calculus没有"ifs"等...
例如,这个网站:http://experthuman.com/programming-with-nothing.作者使用Ruby并创建一个只有闭包的"FizzBuzz"程序(没有字符串,数字或类似的东西)......
有些例子是人们只使用类型系统在Scala上计算一些算术函数
所以,是的,在我看来,CSS3 + HTML是图灵完备的(即使你不能完全做任何真正的计算而不会变得疯狂)
这里的根本问题是,除非代码是无限长的,否则任何用HTML + CSS编写的机器都无法评估无限多的步骤(即,不可能有“真实的”递归)。而这个问题将这款机器达到配置H
的n
步骤或更少的是,如果总是回答的n
是有限的。