CSS Turing完成了吗？

297

就我所知，CSS并不是图灵完整的。但是我对CSS的了解非常有限。

  • CSS Turing完成了吗？
  • 现有的任何草案或委员会是否正在考虑可能使Turing完整性成为可能的语言功能？
css  turing-complete 
— 亚当·戴维斯（Adam Davis）
source
28
如果使用ie6，它已经完成了。它们被称为CSS表达式，共识是它们非常糟糕且危险。嵌入CSS的JS ...
— kibibu 2010年
13
@Kibibu-耶克斯！请先将这个想法从我的大脑中清除掉，然后再将其折叠起来！
— DVK 2010年
CSS怎么可能是图灵完备的？
— Slaks
1
@DVK：实际上，您可以对它们做一些很酷的事情-特别是与分辨率无关的布局-在CSS中仍然棘手或古怪而无需借助表。我认为，如果他们将其严格地限制为无副作用的声明式表达语言，而不是允许完全访问脚本引擎，那它会更好（并且也许如果Webkit首先提出它的话）
— kibibu
5
@SLaks：请不要小看HTML5 / CSS3的功能：）
— Niklas B.

Answers:

385

您可以在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; }
<p><a href="http://en.wikipedia.org/wiki/Rule_110">Rule 110</a> in (webkit) CSS, proving Turing-completeness.</p>

<!-- A total of 900 checkboxes required -->
<input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/><input type="checkbox"/>
展开摘要

— Adam Davis
source
2
Turing Machine的正式定义（最简单的定义）只是状态集，符号集，初始状态，接受状态集和转换函数的元组。没有曲柄。通过计算，我们的意思是有人需要在磁带上忠实地应用转换函数，就像在这种情况下的单击一样。更正式地讲，计算模型可以看作是执行计算所需遵循的一组规则。从这个意义上讲，我认为CSS是图灵完成的。
— 约翰·约翰（John
2
该代码段似乎不起作用（Firefox 61）。我看到一个空复选框的网格-如果您选中它们，则什么也不会发生。
— OrangeDog
2
@John“ CSS巡演已经完成”使我感到不安，但是“ CSS巡演已经完成了，就像沙滩上的几块石头一样 ”。后一种说法正确吗？
— 拉斐尔·施米兹
1
@ R.Schmitz不，在那种情况下，人类正在选择将岩石放置在哪里，因此，完整的人类与岩石的组合系统才是理想的选择。在上面的CSS示例中，Tab +空格键是一个简单的重复过程，类似于反馈电路。因此，如果C ++正在使用计算机硬件执行指令来完成任务，那么可以说CSS正在通过重复按键执行指令来完成任务
— woojoo666
这是使用相同解决方案的规则110的CodePen，外加注释和一些Sass来帮助解决DRY的问题：codepen.io/laras126/pen/OYvGZj我写了一篇随附的博客文章，解释了此处的概念：notlaura.com/is-css -turing-complete
— notlaura
89

图灵完整性的一个方面是暂停问题。

这意味着，如果CSS是Turing完整的，那么就没有通用的算法来确定CSS程序将永远结束运行还是循环。

但是我们可以为CSS推导这样的算法！这里是：

  • 如果样式表未声明任何动画，则它将停止。

  • 如果确实有动画，则：

    • 如果任何一个animation-iteration-count为infinite，并且包含的​​选择器在HTML中匹配，则它将不会停止。

    • 否则，它将停止。

而已。由于我们刚刚解决了CSS的暂停问题，因此可以得出结论，CSS 并不是 Turing complete。

（其他人提到了IE 6，它允许在CSS中嵌入任意JavaScript表达式；这显然会增加Turing的完整性。但是该功能是非标准的，反正没有人使用它。）

Daniel Wagner提出了我在原始答案中没有提到的观点。他指出，虽然我已经介绍了动画，但是样式引擎的其他部分（例如选择器匹配或布局）也可以导致图灵完整性。尽管很难对此进行正式辩论，但我将尝试概述为什么仍不太可能实现图灵完整性。

第一：图灵完整的语言有某种方式可以将数据反馈回自身，无论是通过递归还是循环。但是CSS语言的设计对此反馈意见表示反对：

  • @media查询只能检查浏览器本身的属性，例如视口大小或像素分辨率。这些属性可以通过用户交互或JavaScript代码（例如，调整浏览器窗口的大小）来更改，但不能仅通过CSS来更改。

  • ::before和::after伪元素不被视为DOM的一部分，并且不能以任何其他方式进行匹配。

  • 选择器组合器只能检查当前元素之上和之前的元素，因此不能用于创建依赖关系循环。

  • 当您将鼠标悬停在某个元素上时，可以将其移开，但是只有当您移动鼠标时，位置才会更新。

这足以说服您选择器匹配本身不能完成图灵完成。但是布局呢？

现代的CSS布局算法非常复杂，具有诸如Flexbox和Grid之类的功能。但是，即使有可能触发布局无限循环，也很难利用它来执行有用的计算。这是因为CSS选择器仅检查DOM的内部结构，而不检查这些元素在屏幕上的布局。因此，任何使用布局系统的图灵完整性证明都必须仅依赖于布局。

最后-这也许是最重要的原因- 浏览器供应商对保持CSS 不完整的Turing 感兴趣。通过限制语言，供应商可以进行巧妙的优化，使每个人都能更快地上网。此外，Google致力于将整个服务器场用于搜索Chrome中的错误。如果有一种使用CSS编写无限循环的方法，那么他们可能已经发现它了。

— 拉姆达童话
source
4
当人们说“ CSS正在完成”时，它们的意思是“支持动画的CSS是图灵完成的”。您可以使用逻辑来限制编程语言并得出结论，它们不是Turing Complete，但是您必须指定限制。
— philix
36
我认为这个答案使用了一个有趣的“停止”定义-至少在我问这个问题时，肯定不是我想要的。您似乎用“暂停”来表示“在某个时间，每个元素的计算属性停止改变”；但我希望“暂停”的意思是“将声明性CSS转换为所有元素的计算属性的算法完成运行”。对于后一个定义，似乎需要有更多的论据，而不仅仅是“没有动画”。
— 丹尼尔·瓦格纳
4
您的逻辑在这里是倒退的。图灵完整性意味着停止无法确定并不意味着停止不确定就意味着具有图灵完整性。
— asmeurer
3
@LambdaFairy CSS的暂停问题是什么？我不相信这样的事情存在。停止问题仅与机器有关。我们今天拥有的最强大的计算模型是图灵机。您的计算机与图灵机一样强大（没有无限内存）。不能仅将CSS定义为机器。也许您可以将浏览器的CSS引擎定义为一台机器，但是即使那样，它也只能像TM一样强大。除非CSS已经成为Chomsky层次结构中的一个新的自动机，否则“停止CSS的问题”的说法根本没有任何意义。
— Mike Shi
3
@LambdaFairy您误解了图灵不完整的证明是什么样子。我们知道，暂停问题是TM无法确定的。原始证据似乎可以证明这一点，因为CSS可以解决尚未完成的暂停问题。如果CSS能够真正解决暂停问题，那么CSS比图灵机更强大，因为它可以计算出TM不能实现的功能。我们（根据Church-Turing论文）知道，无法制造出比TM / Lambda微积分更强大的机器。因此，这是一个矛盾，您的原始说法不正确。
— 艾萨克·戴蒙德
32

根据这篇文章，不是。文章还指出，使其成为一个好主意。

引用其中一项评论：

因此，我不认为CSS即将完成。没有在CSS中定义函数的功能。为了使系统图灵完备，必须有可能编写一个解释器：一个解释表示要执行程序的表达式的函数。CSS没有用户可以直接访问的变量。因此，您甚至无法对表示要在CSS中解释的程序的结构进行建模。

— 数字电视
source
4
CSS不能以任何方式执行。引用的评论写的人似乎不明白。：-\
— 瑞安（Ryan）2010年
33
CSS是对处理器（布局引擎）的一组指令。什么是“可执行的”呢？
— DVK 2010年
47
图灵完整性不仅与您是否可以按照自己的意愿或信念编写程序有关。它是有关可计算性的数学属性。因此，您不能相信CSS是否是图灵完备的，您需要一个证明。在这种情况下，由于规则110，CSS是图灵完备的。
— 米卡·梅耶
15
@MikaëlMayer-正如“ 110”答案中的许多注释所指出的，要求用户执行操作。如果要求用户执行操作，则没有用户的CSS不会完成图灵化
— DVK 2014年
1
@DVK CSS 110示例所要求的重复按键并不是用户的“动作”，它们可以由重复的数字电路执行。实际的图灵机需要某种电气硬件来驱动执行，因此我看不出有什么不同
— woojoo666
6

图灵完整性不仅与“定义函数”或“具有ifs / loops / etc”有关。例如，Haskell没有“循环”，lambda微积分没有“ if”，等等。

例如，此站点：http : //experthuman.com/programming-with-nothing。作者使用Ruby并创建了仅包含闭包（没有字符串，数字或类似内容）的“ FizzBu​​zz”程序...

有一些例子，人们仅使用类型系统在Scala上计算一些算术函数

因此，是的，在我看来，CSS3 + HTML是图灵完备的（即使那时您不能完全做任何真正的计算而不会发疯）

— 莫里西奥·萨博（MaurícioSzabo）
source
11
Haskell和lambda-caclculus具有递归。请问CSS？您必须疯狂地在Malbolge中进行任何实际计算；在CSS中，您有多疯狂都没关系：它将无法正常工作，CSS并不是图灵完整的，这也不是什么见解。
— JMCF125 2013年
11
抱歉，在此页面中找不到您的任何其他评论。但是，正如接受的答案所述，只要您认为（...）用户交互是CSS“执行”的一部分，它就是图灵完成的（...）。我不知道
— JMCF125
20
在不打算冒犯他人的情况下，进行完整性浏览不会回应任何人的意见。
— trisweb 2014年
5
@MaurícioSzabo不，CSS3加上HTML，再加上一个不断步入模拟的人类，图灵完成了。
— Lambda Fairy
4
@LambdaFairy每台物理图腾机也是如此。
— Miles Rout
5

这里的根本问题是，除非代码是无限长的，否则任何用HTML + CSS编写的机器都无法评估无限多个步骤（即，不可能有“真实的”递归）。而这个问题将这款机器达到配置H的n步骤或更少的是，如果总是回答的n是有限的。

— 亨里克·索默兰
source
1
我没有看到在Turing Machine要求中指定了处理无限循环的能力。您的第二点似乎无效。当图灵使用他的图灵机来证明可计算性问题时，这些规则（如暂停问题）并不能确定一台机器是否是图灵机。如果图灵机将这些假设作为要求包括在内，他就不可能使用图灵机来证明它们。
— 亚当·戴维斯
4
@AdamDavis这是一个完全有效的论点：如果存在一种算法可以解决图灵完全形式主义的停顿问题，那通常就等于解决停顿问题。当然，这已被证明是不可能的，这意味着如果可以针对给定的形式主义解决停顿问题，那么形式主义一定不能是图灵完备的。因此，所有只能评估有限数量步骤的形式主义都不能是图灵完备的，包括CSS。
— 2013年
3
这不是当B则A！如果不是B则不是A！前者是肯定的，因此您正确指出是错误的。后者，通过对立论证，是我使用的并且是有效的。请注意，我在上一条评论中对否定进行了仔细的使用-我专门构造了它来避免这种谬误。
— Lambda Fairy，
1
@ woojoo666不。能够根据一组规则转换状态与图灵完成不一样。只有有限数量的步骤才能完成。如果一组转换规则只能应用有限次数，则问题“系统是否会达到状态H？” 总是可以决定的，因此图灵还不完整。只能执行有限数量的迭代的元胞自动机的实现永远不可能完成。
— 亨里克·索默兰
1
“而且，是的，CSS也正在完善中” [需要引用]
— Andrea Lazzarotto
4

该答案不准确，因为它混合了对UTM和UTM本身（通用图灵机）的描述。

我们有很好的答案，但是从不同的角度来看，它并没有直接显示当前最佳答案中的缺陷。

首先，我们可以同意人类可以作为UTM。这意味着如果我们这样做

CSS + Human == UTM

那CSS部分就没用了，因为所有工作都可以Human由谁来做UTM部分来完成。单击行为可以是UTM，因为您不是随机单击而是仅在特定位置单击。

我可以使用以下文本（规则110）代替CSS ：

000 -> 0
001 -> 1
010 -> 1
011 -> 1
100 -> 0
101 -> 1
110 -> 1
111 -> 0

指导我的行动和结果将是相同的。这表示此文字是UTM吗？不，这只是其他UTM（人或计算机）可以读取和运行的输入（说明）。单击足以运行任何UTM。

CSS缺乏的关键部分是能够以任意方式更改其自身状态，如果CSS可以产生点击，那么它将是UTM。关于CSS的单击“曲柄”的说法不准确，因为CSS的真正“曲柄”是运行它的Layout Engine，并且足以证明CSS是UTM。

— 扬克斯
source
规则110是UTM。您的文本是对规则110的描述（可能略有不足），因此，是的，文本是UTM（表示）。
— OrangeDog
“如果CSS可以产生点击”，我在项目中会使用很多AVR微控制器。您可以使用内部时钟（限于8MHz）。或者，您可以连接一个外部晶振并达到20MHz。另外，我也可以只提供一个完全外部的时钟，因此实际上并不是由cpu硬件驱动晶体。这意味着我实际上可以连接一个开关和一个电路以消除抖动，并在按下按钮时将其真正用作时钟。这是否意味着如果我这样做，它就会停止完整播放？
— 塞德里克·马莫
1
@CedricMamo但是您的点击会更改状态，您只需要单击正确的位置，否则将无法正常工作。确切地看eli.fox-epste.in/rule110-full.html我可以单击ANY单元格，如果CSS被禁用，我仍然单击正确的单元格并具有UTM。如果您要做的只是单击一个按钮“下一个”，那么CSS的确是UTM，但是要拥有类似的功能，您需要在每次按钮单击时调用一些JS，并且我们知道JS IS UTM。对于CSS，您需要具有可以正确解释结果和更新状态的内容。
— 洋基队
1
@CedricMamo有任何链接吗？现在，我从那里看几个例子，但这对我不起作用。总的来说，如果我正确理解CSS会更改某些复选框的可见性，并且使用选项卡导航到下一个复选框，那么在这里我们再次隐藏了非CSS的UTM，因为当您使用选项卡时，您要求浏览器计算下一个要导航的有效位置，并且od可以做很多复杂的代码，这使用CSS，但更多。这意味着您证明您的浏览器不是UTM而是CSS。
— 洋基队
1
@CedricMamo但是Cellular自动机在其自己的定义中有一个循环，当状态转换完成时，它会再次运行，然后再次运行，依此类推。如果删除它并仅保留此状态转换，则此自动机将不再是UTM。这将与CSS完全相同。我们可以在CA中定义两个步骤R--读取状态和W-写入状态，RWRWRWRW...在只有CSS的情况下，普通CA做无限序列R，而我们没有，W因为只有当我们添加CSS时，CA 才会修改它无法读取的内容B-我们可以采取的浏览器操作，RBRBRBR...但是随后BBBBBB要使用自己的UTM。
— 洋基队
-28

CSS不是一种编程语言，因此图灵完备性问题是毫无意义的。如果像IE6中那样将编程扩展添加到CSS，那么新的综合就是完全不同的事情。

CSS只是样式的描述；它没有任何逻辑，并且结构平坦。

— 瑞安·普里尔（Ryan Prior）
source
1
此外（IIRC），在使用多个冲突（重复）样式时，哪些样式具有优先权也存在一些歧义。然后，不同的浏览器实现/解释标记样式的方式稍有不同。
— David R Tribble 2010年
70
“ CSS不是一种编程语言，因此，图灵完整性的问题是毫无意义的。” 重言式句子是重言式的。
— 亚当·戴维斯
3
如果您想知道为什么答案这么低，请看一下编程语言Prolog。
— 埃德温
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.