CSS Turing이 완료 되었습니까?


297

내가 아는 한, CSS는 Turing이 완전하지 않다. 그러나 CSS에 대한 나의 지식은 매우 제한적입니다.

  • CSS Turing이 완료 되었습니까?
  • 튜링의 완전성을 가능하게 할 수있는 언어 기능을 고려한 기존의 초안이나위원회가 있습니까?

28
ie6을 사용하면 이미 완료되었습니다. 그것들은 CSS 표현이라고 불리며, 합의는 엄청나게 부서지고 위험합니다. CSS에 포함 된 JS ...
kibibu

13
@ 키비 부-Yikes! 내 아이디어가 저절로 접 히기 전에 지워주세요!
DVK

어떻게 CSS는 수 가능성이 튜링 완료?
SLaks

1
@DVK : 실제로 테이블을 사용하지 않고 CSS에서 까다 롭거나 기발한 해상도 독립적 레이아웃과 관련하여 실제로 멋진 작업을 수행 할 수 있습니다. 나는 그들이 제한했던 경우가 엄격 대신 더 나은 수신 된 것이다 스크립트 엔진에 대한 전체 액세스 허용 전혀 부작용이있는 선언적 표현 언어로 생각 (그리고 어쩌면 또한 웹킷을 처음 마련했다 경우)
kibibu

5
@SLaks : HTML5 / CSS3의 성능을 과소 평가하지 마십시오 :)
Niklas B.

답변:


385

CSS3에서 Rule 110 을 인코딩 할 수 있으므로 적절한 HTML 파일 및 사용자 상호 작용 이 CSS의 "실행"의 일부로 간주되는 한 Turing-complete 입니다. 꽤 좋은 구현이 가능하며, 다른 구현은 여기에 포함됩니다 :

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"/>


2
Turing Machine의 공식 정의 (가장 단순한)는 단순히 상태 세트, 심볼 세트, 초기 상태, 수락 상태 세트 및 전환 함수의 튜플입니다. 크랭크가 없습니다. 계산을 통해 누군가가 테이프에 전환 기능을 충실히 적용해야한다는 것을 의미합니다.이 경우 클릭과 정확히 같습니다. 보다 공식적으로, 계산 모델은 계산을 수행하기 위해 따라야하는 일련의 규칙으로 볼 수 있습니다. 그런 의미에서 CSS는 Turing-Complete이라고 생각합니다.
John

2
이 스 니펫이 작동하지 않는 것 같습니다 (Firefox 61). 빈 확인란이 표시되어 있습니다. 확인하면 아무 일도 일어나지 않습니다.
OrangeDog

2
@John "CSS는 튜링이 완료되었습니다."라는 점이 불편하지만 "CSS는 해변에있는 두 개의 바위 만큼 튜링이 완료되었습니다"라는 문제가 없습니다 . 후자의 말이 맞습니까?
Raphael Schmitz

1
@ R.Schmitz 아니오,이 경우 인간은 바위를 놓을 위치를 선택하므로 인간 + 암석의 결합 시스템이 완전히 터져 나옵니다. 위의 CSS 예제에서 tab + space 키 누르기는 피드백 회로와 유사한 간단한 반복 프로세스입니다. 따라서 C ++이 컴퓨터 하드웨어를 사용하여 명령어를 실행하는 것이 완료된 경우 CSS가 반복적 인 키 누르기를 사용하여 명령어를 실행하여 완료되는 것을 말하는 것은
그리 쉬운

여기에 규칙 110 동일한 솔루션을 사용하여, 플러스 주석의 CodePen 밖으로 일부 말대꾸 도움에 DRY 것들이다 : codepen.io/laras126/pen/OYvGZj 여기 개념을 설명하는 첨부 된 블로그 포스트를 작성했습니다 : notlaura.com/is-css -turing-complete
notlaura

89

튜링 완성도의 한 측면은 정지 문제 입니다.

즉, CSS가 Turing complete이면 CSS 프로그램의 실행 완료 여부를 결정하는 일반적인 알고리즘 이 없습니다 .

그러나 우리는 CSS를위한 그런 알고리즘을 도출 할 수 있습니다! 여기있어:

  • 스타일 시트가 애니메이션을 선언하지 않으면 중지됩니다.

  • 애니메이션이있는 경우 :

    • 어떤 경우 animation-iteration-count이고 infinite, 그리고 포함 된 선택은 HTML에서 비교, 그것은 것입니다 하지 중지합니다.

    • 그렇지 않으면 중단됩니다.

그게 다야. CSS의 정지 문제를 방금 해결 했으므로 CSS가 Turing complete 가 아닙니다 .

(다른 사람들은 CSS에 임의의 JavaScript 표현을 삽입 할 수있는 IE 6에 대해 언급했다. 이는 분명히 Turing 완성도를 추가 할 것이다.


Daniel Wagner는 원래 답변에서 놓친 점을 제기했습니다. 그는 애니메이션을 다루 면서 셀렉터 일치 또는 레이아웃 과 같은 스타일 엔진의 다른 부분이 튜링 완성도를 초래할 수 있다고 지적합니다 . 이것에 대해 공식적인 주장을하기는 어렵지만 튜링 완성도가 여전히 발생하지 않는 이유를 간략히 설명하겠습니다.

첫째, 튜링 완성 언어는 재귀 또는 루핑을 통해 데이터를 다시 공급할 수있는 방법이 있습니다. 그러나 CSS 언어의 디자인은이 피드백에 적대적입니다.

  • @media쿼리 는 뷰포트 크기 또는 픽셀 해상도와 같은 브라우저 자체의 속성 만 확인할 수 있습니다. 이러한 속성은 사용자 상호 작용 또는 JavaScript 코드 (예 : 브라우저 창의 크기 조정)를 통해 변경 될 수 있지만 CSS만으로는 변경 될 수 없습니다.

  • ::before::after유사 요소는 DOM에의 일부로 간주되지 및 다른 방법으로 일치 할 수 없다.

  • 선택기 콤비는 요소 만 검사 할 수 있습니다 이상전에 그들이 의존 사이클을 만드는 데 사용할 수 없습니다 수 있도록 현재의 요소입니다.

  • 그것은 할 수있어 때를 가져가 그 위에 떨어져 요소를 이동 ,하지만 당신은 마우스를 이동할 때 위치 만 업데이트합니다.

셀렉터 매칭만으로는 튜링을 완료 할 수 없다는 것을 확신하기에 충분합니다 . 그러나 레이아웃은 어떻습니까?

최신 CSS 레이아웃 알고리즘은 FlexboxGrid 와 같은 기능을 사용하여 매우 복잡 합니다. 그러나 레이아웃을 사용하여 무한 루프를 트리거 할 수 있어도 유용한 계산을 수행하기 위해이를 활용하기는 어렵습니다. CSS 선택기는 DOM의 내부 구조 만 검사하기 때문에 이러한 요소가 화면에 배치되는 방식은 아닙니다. 따라서 레이아웃 시스템을 사용하는 Turing 완전성 증명은 레이아웃에만 의존해야합니다 .

마지막으로, 아마도 이것이 가장 중요한 이유 일 것입니다. 브라우저 공급 업체는 CSS 튜링 (Turing)이 아닌 상태로 유지하는 데 관심이 있습니다. 공급 업체는 언어를 제한함으로써 모든 사람이 웹을 더 빠르게 만드는 영리한 최적화 를 허용합니다 . 또한 Google 은 전체 서버 팜 을 사용하여 Chrome에서 버그를 검색합니다. CSS를 사용하여 무한 루프를 작성하는 방법이 있다면 아마도 이미 그것을 발견했을 것입니다.


4
사람들이 "CSS가 튜링 완료"라고 말하면 "CSS는 애니메이션을 지원하는 튜링 완료"입니다. 프로그래밍 언어를 제한하고 논리를 사용하여 Turing Complete가 아니라고 결론을 내릴 수 있지만 제한을 지정해야합니다.
필릭스

36
나는이 답변이 "halt"라는 재미있는 정의를 사용하고 있다고 생각한다. 적어도 내가 질문을한다면 내가 원하는 것은 아니다. "halt"를 사용하여 "각 요소의 계산 된 속성 변경이 중지되는 시간이 있음"을 의미하는 것 같습니다. 그러나 "halt"는 "선언적 CSS를 모든 요소의 계산 된 속성으로 변환하는 알고리즘이 실행을 완료 함"을 의미하고자합니다. 후자의 정의에서는 "애니메이션이 없다"는 것보다 훨씬 더 많은 논쟁이 필요한 것 같습니다.
Daniel Wagner

4
당신의 논리는 거꾸로 있습니다. 튜링 완전성은 정지를 결정할 수 없다는 것을 의미한다고 멈춤이 결정 불가능하다는 것을 의미하지는 않습니다.
asmeurer

3
@LambdaFairy CSS 의 정지 문제는 무엇 입니까? 나는 그런 것이 존재한다고 생각하지 않습니다. 정지 문제는 기계에만 관련됩니다. 오늘날 가장 강력한 계산 모델은 Turing Machines입니다. 컴퓨터는 튜링 머신만큼 강력합니다 (무한 메모리 없음). CSS만으로는 기계로 정의 될 수 없습니다. 브라우저의 CSS 엔진을 머신으로 정의 할 수도 있지만 TM만큼 강력 할 수도 있습니다. CSS가 Chomsky의 계층 구조에서 새로운 자동 장치가되지 않는 한 " CSS에 대한 문제 해결 "이라는 말은 아무 의미가 없습니다.
Mike Shi

3
@LambdaFairy 당신은 튜링 불완전의 증거가 어떻게 생겼는지 오해하고 있습니다. 정지 문제는 TM에 의해 결정될 수 없음을 알고 있습니다. CSS가 멈춰 있지 않은 중단 문제를 해결할 수 있기 때문에 원래의 증거가 주장을하는 것처럼 보입니다. CSS가 진정으로 정지 문제를 해결할 수 있다면 CSS는 TM이 할 수없는 것을 계산할 수 있기 때문에 Turing Machine보다 강력합니다. 우리는 Church-Turing Thesis에 의해 TM / The Lambda Calculus보다 더 강한 기계를 만들 수 없다는 것을 알고 있습니다. 따라서 이것은 모순이며 원래의 진술은 정확하지 않습니다.
Isaac Diamond

32

이 기사에 따르면 그렇지 않습니다 . 이 기사는 또한 그것을 만드는 것이 좋지 않다고 주장합니다.

주석 중 하나에서 인용하려면 :

따라서 CSS가 완전히 완료되지 않았다고 생각합니다. CSS에서 함수를 정의하는 기능은 없습니다. 시스템이 튜링-완료되기 위해서는 인터프리터 (interpreter)를 작성할 수 있어야합니다. CSS에는 사용자가 직접 액세스 할 수있는 변수가 없습니다. 따라서 CSS로 해석 될 프로그램을 나타내는 구조를 모델링 할 수도 없습니다.


4
CSS는 어떤 식으로도 실행할 수 없습니다. 인용 된 의견을 쓴 사람은 이해하지 못하는 것 같습니다. :-\
Ryan Prior

33
CSS는 프로세서 (레이아웃 엔진)에 대한 일련의 명령입니다. 그것에 대해 "실행 가능"하지 않은 것은 무엇입니까?
DVK

47
튜링 완성도는 원하는 방식이나 신념으로 프로그램을 작성할 수있는 것만이 아닙니다. 계산 가능성에 대한 수학적 특성입니다. 따라서 CSS가 Turing-complete라고 믿거 나 말거나 증거가 필요합니다. 이 경우 규칙 110으로 인해 CSS는 Turing-complete입니다.
Mikaël Mayer 2018

15
@ MikaëlMayer- "110"답변의 많은 의견에서 언급했듯이 사용자는 조치를 수행해야합니다. 사용자 조치가 필요한 경우 사용자가없는 CSS는 튜링 완료가 아닙니다.
DVK

1
@DVK CSS 110 예제에 필요한 반복 키 누르기는 사용자 "동작"이 아니며 반복 디지털 회로에 의해 수행 될 수 있습니다. 나는 이것이 어떤 차이가 표시되지 않습니다 그래서 실제 튜링 기계, 드라이브 실행에 전기 하드웨어의 어떤 종류를 필요로
woojoo666가

6

튜링 완성도는 "함수 정의"또는 "ifs / loops / etc"에 관한 것이 아닙니다. 예를 들어, Haskell에는 "loop"가없고 lambda-calculus에는 "ifs"가 없습니다.

예를 들어이 사이트는 http://experthuman.com/programming-with-nothing 입니다. 저자는 Ruby를 사용하고 클로저 (문자열, 숫자 등)가없는 "FizzBuzz"프로그램을 만듭니다 ...

사람들이 유형 시스템만을 사용하여 Scala에서 일부 산술 함수를 계산하는 예가 있습니다.

그렇습니다. 제 생각에 CSS3 + HTML은 완전히 완성되지 않았습니다.


11
Haskell과 lambda-caclculus에는 재귀가 있습니다. CSS는? Malbolge에서 실제 계산을하려면 미쳐야합니다. CSS에서, 당신이 얼마나 미친지는 중요하지 않습니다. 작동하지 않으며, CSS는 완전하지 않으며, 그것은 의견의 문제가 아닙니다.
JMCF125 2009 년

11
죄송합니다.이 페이지에서 귀하의 다른 의견을 찾을 수 없습니다. 그러나 허용되는 답변에서 언급했듯이 사용자 상호 작용을 CSS의 "실행"의 일부로 간주하는 한 Turing-complete "(...)입니다. 그리고 나는하지 않습니다.
JMCF125

20
공격적인 태도를 취하지 않고 튜링 완성도는 다른 사람의 의견에 응답하지 않습니다.
trisweb

5
@ MaurícioSzabo 아니오, CSS3 + HTML + 인간은 지속적으로 시뮬레이션을 강화하고 있습니다.
람다 요정

4
@LambdaFairy 또한 모든 물리적 튜링 머신에서도 마찬가지입니다.
마일즈 루트

5

여기서 근본적인 문제는 코드가 무한히 길지 않으면 HTML + CSS로 작성된 모든 컴퓨터는 무한히 많은 단계를 평가할 수 없다는 것입니다 (즉, "실제"재귀는 없을 수 있음). 그리고이 기계 Hn단계 이하의 구성 에 도달한다는 질문 n은 유한 한 경우 항상 대답 할 수 있습니다.


1
Turing Machine 요구 사항에서 무한 루프를 처리하는 기능이 지정된 위치를 알 수 없습니다. 두 번째 요점이 유효하지 않은 것 같습니다. Turing은 컴퓨터 문제를 입증하기 위해 Turing Machine을 사용했지만 정지 문제와 같은 이러한 규칙은 기계가 Turing 기계인지 아닌지를 결정하지 않습니다. 튜링 머신에 이러한 가설이 요구 사항으로 포함되어 있으면 튜링 머신을 사용하여이를 입증 할 수 없었습니다.
Adam Davis

4
@AdamDavis 그것은 완전히 유효한 논증입니다. Turing-complete 형식주의에 대한 중단 문제를 해결하는 알고리즘이 존재한다면, 이는 일반적으로 중단 문제를 해결하는 것과 같습니다. 물론, 이것은 불가능한 것으로 판명되었는데, 이는 주어진 형식론에 대해 정지 문제가 해결 될 수 있다면, 그 형식주의는 튜링-완전 하지 않아야 한다는 것을 의미 한다. 따라서 유한 단계 수만 평가할 수있는 모든 형식은 CSS를 포함하여 Turing-complete 일 수 없습니다.
00dani

3
그건 하지 후 B A 경우! 경우입니다 B하지 다음 하지 ! 전자는 당신이 올바르게 지적한 결과를 확인하고 있습니다. 후자의 주장 은 내가 사용하고 유효한 것입니다. 마지막 의견에서 부정의주의를 사용하는 것에 주목하십시오. 나는 그 오류를 피하기 위해 구체적으로 구성했습니다.
Lambda Fairy

1
@ woojoo666 아니요. 규칙 세트에 따라 상태를 변환 할 수있는 것은 튜링 완료와 다릅니다. 유한 한 수의 스텝에 대해서만 할 수있는 것은 아무것도 없습니다. 변환 규칙 세트를 유한 한 횟수 만 적용 할 수있는 경우 "시스템이 상태에 도달 H합니까?" 항상 결정 가능하므로 튜링 완료가 아닙니다. 한정된 횟수의 반복 만 수행 할 수있는 셀룰러 오토 마톤의 구현은 절대 터링을 완료 할 수 없습니다.
Henrik Sommerland

1
"와, 그래, 또한 CSS 완료 튜링있다" [표창장은 필요로했다]
안드레아 Lazzarotto을

4

답변은 UTM과 UTM 자체 (Universal Turing Machine)에 대한 설명이 혼합되어 있으므로 정확하지 않습니다.

우리는 좋은 답변을 가지고 있지만 다른 관점에서 현재의 최고 답변에 직접 결함을 나타내지 않습니다.


우선 우리는 인간이 UTM으로 일할 수 있다는 데 동의 할 수 있습니다. 우리가 그렇게하면

CSS + Human == UTM

그런 다음 CSS모든 작업을 수행 할 수 있기 때문에 일부는 쓸모가 없습니다.Human UTM을 수행 할 사람이 . 무작위로 클릭하지 않고 특정 장소에서만 클릭하기 때문에 클릭 행위는 UTM이 될 수 있습니다.

CSS 대신이 텍스트를 사용할 수 있습니다 ( Rule 110 ).

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

내 행동과 결과를 안내하는 것은 동일합니다. 이것은이 텍스트가 UTM입니까? 이것은 다른 UTM (사람 또는 컴퓨터)이 읽고 실행할 수있는 입력 (설명) 일뿐입니다. 클릭하면 UTM을 실행할 수 있습니다.


CSS가 부족하다는 중요한 부분은 CSS가 클릭을 생성 할 수 있다면 임의의 방식으로 자체 상태를 변경할 수 있다는 것입니다. CSS에 대한 실제 "크랭크"는이를 실행하는 레이아웃 엔진이고 CSS가 UTM임을 증명하기에 충분해야하기 때문에 CSS에 대한 클릭이 "크랭크"라는 주장은 정확하지 않습니다.


규칙 110은 UTM입니다. 귀하의 텍스트는 규칙 110에 대한 (아마도 약간 부족한) 설명이므로 텍스트가 (TM을 나타내는) UTM입니다.
OrangeDog

"CSS가 클릭을 생성 할 수 있다면"프로젝트에서 많은 AVR 마이크로 컨트롤러를 사용합니다. 내부 클록을 사용할 수 있으며 8MHz로 제한됩니다. 또는 외부 크리스털을 연결하고 최대 20MHz까지 올라갈 수 있습니다. 또는 완전히 외부 클럭을 공급할 수도 있으므로 실제로 크리스탈을 구동하는 CPU 하드웨어도 아닙니다. 실제로 스위치와 회로를 연결하여 디 바운스 할 수 있으며 버튼을 누르면 시계로 사용할 수 있습니다. 내가 그렇게하면 튜링이 완전히 끝나는 것을 의미합니까?
Cedric Mamo

1
@CedricMamo 그러나 당신의 클릭은 상태를 변경하고, 당신은 그렇지 않으면 현명하지 않은 올바른 위치를 클릭해야합니다. eli.fox-epste.in/rule110-full.html을 정확히보십시오. 모든 셀을 클릭 할 수 있습니다. CSS가 비활성화되어 있으면 여전히 올바른 셀을 클릭하고 UTM이 있습니다. 하나의 버튼 "다음"을 클릭하면 실제로 CSS는 UTM이지만 버튼 클릭 당 호출되는 JS가 필요하며 JS IS UTM을 알고 있습니다. CSS의 경우 결과 및 업데이트 상태를 올바르게 해석하는 것이 필요합니다.
Yankes

1
@CedricMamo 그것에 링크가 있습니까? 지금 나는 거기에서 몇 가지 예를 보았지만 그것은 나에게 효과적이지 않습니다. 전반적으로 CSS의 일부 변경 사항의 CSS 변경 가시성을 이해하고 탭을 사용하여 다음 항목으로 이동하면 CSS가 아닌 UTM이 다시 숨겨져 있습니다. 탭하면 브라우저가 탐색 할 다음 유효한 위치를 계산하도록 요청하기 때문에 얇게하려면 많은 복잡한 코드를 수행해야하며 CSS를 사용하지만 훨씬 더 많이 사용합니다. 이는 브라우저가 CSS가 아닌 UTM임을 증명합니다.
Yankes

1
@CedricMamo 그러나 셀룰러 오토마타는 자체 정의에 루프가 있으며, 상태 전이가 완료되면 다시 실행되고 다시 반복됩니다. 우리가 제거하고이 상태 전이만 남겨두면이 오토마타는 더 이상 UTM이 아닙니다. 이것은 CSS와 정확히 같은 상황입니다. 우리는 CA에서 R읽기 상태와 W쓰기 상태의 두 단계를 정의 할 수 있습니다. RWRWRWRW...CSS는 CSS의 경우에만 일반적인 CA가 무한한 순서 를 수행 하며 R, W읽을 수없는 것을 수정하기 때문에 추가 하지 않는 한 수정 하지 않기 때문에 없습니다. B-브라우저 동작은 우리가 가질 수 RBRBRBR...있지만 BBBBBB자체 UTM에 있습니다.
Yankes

-28

CSS는 프로그래밍 언어가 아니므로 turing-completeness 문제는 의미가 없습니다. IE6의 경우와 같이 프로그래밍 확장이 CSS에 추가되면 새로운 합성은 완전히 다릅니다.

CSS는 스타일에 대한 설명 일뿐입니다. 논리가 없으며 구조가 평평합니다.


1
또한 (IIRC), 여러 충돌하는 (중복) 스타일이 사용될 때 어떤 스타일이 우선하는지에 대한 모호성이 있습니다. 그리고 다른 브라우저가 처리 할 마크 업 스타일을 구현 / 해석하는 약간 다른 방법이 있습니다.
David R Tribble

70
"CSS는 프로그래밍 언어가 아니므로 turing-completeness 문제는 의미가 없습니다." 팽팽한 문장은 팽팽한 문장입니다.
Adam Davis

3
답변이 왜 그렇게 많이 다운되었는지 궁금한 경우 프로그래밍 언어 인 Prolog를 살펴보십시오.
edwin
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.