CSS Turing è completo?

297

CSS non lo è, per quanto ne so, Turing completo. Ma la mia conoscenza dei CSS è molto limitata.

CSS Turing è completo?
Qualcuno dei progetti o dei comitati esistenti sta prendendo in considerazione funzionalità linguistiche che potrebbero consentire la completezza di Turing se non lo è in questo momento?

css turing-complete

— Adam Davis
fonte

28

È già stato fatto, se usi ie6. Si chiamano espressioni CSS e il consenso è che sono orribilmente spezzati e pericolosi. JS incorporato nei CSS ...

— kibibu,

13

@Kibibu - Yikes! Per favore, cancella quell'idea dal mio cervello prima che si ripieghi su se stessa!

— DVK

Come potrebbe CSS possibilmente essere Turing-complete?

— SLaks

1

@DVK: potresti effettivamente fare alcune cose interessanti con loro - in particolare per quanto riguarda il layout indipendente dalla risoluzione - che sono ancora difficili o bizzarri nei CSS senza ricorrere alle tabelle. Penso che se lo avessero limitato per essere un linguaggio di espressione dichiarativo senza effetti collaterali invece di consentire il pieno accesso al motore di script sarebbe stato meglio ricevuto (e forse anche se Webkit lo avesse

— inventato per

5

@SLaks: non sottovalutare la potenza di HTML5 / CSS3 :)

— Niklas B.

385

Puoi codificare la Regola 110 in CSS3, quindi è Turing completo fintanto che consideri un file HTML di accompagnamento appropriato e le interazioni dell'utente come parte dell'esecuzione del CSS. È disponibile un'implementazione piuttosto buona e un'altra implementazione è inclusa qui:

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

Espandi frammento

— Adam Davis
fonte

2

La definizione formale (più semplice) di Turing Machine è semplicemente una tupla di set di stati, set di simboli, stato iniziale, set di stati di accettazione e una funzione di transizione. Non c'è manovella in esso. Per calcolo intendiamo che qualcuno deve applicare fedelmente la funzione di transizione sul nastro, che è esattamente come il clic in questo caso. Più formalmente, un modello di calcolo può essere visto come un insieme di regole che qualcuno deve seguire per eseguire il calcolo. In tal senso, penso che CSS sia Turing-Complete.

— John,

2

Questo frammento non sembra funzionare (Firefox 61). Vedo una griglia di caselle vuote - non succede nulla se le controlli.

— OrangeDog,

2

@John "Il CSS sta diventando completo" mi mette a disagio, ma non ho alcun problema con "Il CSS è completo come un paio di rocce sulla spiaggia ". Quest'ultima affermazione sarebbe corretta?

— Raphael Schmitz,

1

@ R.Schmitz no, in quel caso l'umano sta scegliendo dove posizionare le rocce, quindi è il sistema combinato di umano + rocce che sta completando. Nell'esempio CSS sopra, i tasti tab + spazio sono un semplice processo ripetuto, simile a dire, un circuito di feedback. Quindi se il C ++ sta diventando completo usando l'hardware del computer per eseguire le istruzioni, allora non è una cosa tesa dire che il CSS sta diventando completo usando la pressione ripetuta dei tasti per eseguire le istruzioni

— woojoo666

Ecco una CodePen della Regola 110 che utilizza la stessa soluzione, oltre ad annotazioni e alcuni Sass per aiutare le cose a SECCO: codepen.io/laras126/pen/OYvGZj Ho scritto un post sul blog che spiega i concetti qui: notlaura.com/is-css -turing-complete

— notlaura,

89

Un aspetto della completezza di Turing è l' arresto del problema .

Ciò significa che, se CSS è Turing completo, allora non esiste un algoritmo generale per determinare se un programma CSS finirà per funzionare o eseguire il ciclo per sempre.

Ma possiamo derivare un tale algoritmo per CSS! Ecco qui:

Se il foglio di stile non dichiara alcuna animazione , si interromperà.
Se ha animazioni, allora:
- Se una animation-iteration-countè infinite, e il selettore contenente è abbinato nel codice HTML, allora sarà non fermarsi.
- Altrimenti, si fermerà.

Questo è tutto. Dato che abbiamo appena risolto il problema di arresto per CSS, ne consegue che CSS non è completo di Turing .

(Altre persone hanno menzionato IE 6, che consente di incorporare espressioni JavaScript arbitrarie nei CSS; questo ovviamente aggiungerà completezza a Turing. Ma quella funzionalità non è standard e nessuno nella loro mente corretta la usa comunque.)

Daniel Wagner ha sollevato un punto che mi mancava nella risposta originale. Nota che mentre ho coperto le animazioni , anche altre parti del motore di stile come la corrispondenza dei selettori o il layout possono portare alla completezza di Turing. Sebbene sia difficile formulare un'argomentazione formale in merito, cercherò di spiegare perché è improbabile che la completezza di Turing accada.

Primo: le lingue complete di Turing hanno un modo per reinserire i dati in se stessi , sia attraverso la ricorsione che il looping. Ma il design del linguaggio CSS è ostile a questo feedback:

@mediale query possono controllare solo le proprietà del browser stesso, come le dimensioni della finestra o la risoluzione dei pixel. Queste proprietà possono cambiare tramite l'interazione dell'utente o il codice JavaScript (ad es. Ridimensionamento della finestra del browser), ma non solo tramite CSS.
::beforee gli ::afterpseudo-elementi non sono considerati parte del DOM e non possono essere abbinati in nessun altro modo.
I combinatori selettori possono solo ispezionare gli elementi sopra e prima dell'elemento corrente, quindi non possono essere utilizzati per creare cicli di dipendenza.
È possibile spostare un elemento quando ci si passa sopra , ma la posizione si aggiorna solo quando si sposta il mouse.

Ciò dovrebbe essere sufficiente per convincerti che la corrispondenza del selettore, da sola, non può essere Turing completa . Ma per quanto riguarda il layout?

Il moderno algoritmo di layout CSS è molto complesso, con funzionalità come Flexbox e Grid che confondono le acque. Ma anche se fosse possibile innescare un loop infinito con layout, sarebbe difficile sfruttarlo per eseguire utili calcoli. Questo perché i selettori CSS controllano solo la struttura interna del DOM, non il modo in cui questi elementi sono disposti sullo schermo. Pertanto, qualsiasi prova di completezza di Turing che utilizza il sistema di layout deve dipendere solo dal layout .

Infine - e questa è forse la ragione più importante - i venditori di browser hanno interesse a mantenere CSS non Turing completo . Limitando la lingua, i fornitori consentono ottimizzazioni intelligenti che rendono il Web più veloce per tutti. Inoltre, Google dedica un'intera server farm alla ricerca di bug in Chrome. Se ci fosse un modo per scrivere un ciclo infinito usando i CSS, probabilmente lo avrebbero già trovato 😉

— Fata Lambda
fonte

4

Quando la gente dice "CSS sta diventando completo" intendono "CSS, che supporta le animazioni è Turing completo". Puoi limitare i linguaggi di programmazione e concludere che non sono Turing Complete usando la tua logica, ma dovresti specificare le restrizioni.

— philix,

36

Penso che questa risposta stia usando una divertente definizione di "arresto" - certamente non quella che vorrei se mi fossi posto la domanda, almeno. Sembra che usi "halt" per indicare "c'è un momento in cui le proprietà calcolate per ciascun elemento smettono di cambiare"; ma vorrei "fermare" per dire "l'algoritmo che trasforma i CSS dichiarativi nelle proprietà calcolate di tutti gli elementi termina l'esecuzione". Con quest'ultima definizione, sembra che ci debba essere un argomento significativamente più di un semplice "non ci sono animazioni".

— Daniel Wagner,

4

La tua logica è al contrario qui. La completezza di Turing implica che l'arresto è indecidibile non significa che l'arresto sia indecidibile implica la completezza di Turing.

— asmeurer

3

@LambdaFairy qual è il problema di arresto per CSS ? Non credo che esista una cosa del genere. Il problema di arresto è rilevante solo per le macchine. Il modello computazionale più potente che abbiamo oggi sono Turing Machines. Il tuo computer è potente come una Turing Machine (senza memoria infinita). Il CSS da solo non può essere definito come una macchina. Forse puoi definire il motore CSS di un browser come una macchina, ma anche in questo caso può essere potente solo come una TM. L'affermazione "fermare il problema per i CSS " semplicemente non ha alcun senso, a meno che i CSS non siano diventati un nuovo automa nella gerarchia di Chomsky.

— Mike Shi,

3

@LambdaFairy Stai fraintendendo come sarebbe una prova di incompletezza turing. Sappiamo che il problema dell'arresto è indecidibile da una TM. La prova originale sembra fare la richiesta perché CSS può risolvere il problema di arresto che non sta completando. Se i CSS potessero davvero risolvere il problema dell'arresto, allora i CSS sarebbero più forti di una macchina di Turing perché potrebbero calcolare qualcosa che una TM non può. Sappiamo (secondo la tesi di Church-Turing) che non è possibile costruire una macchina più forte di un TM / The Lambda Calculus. Pertanto, questa è una contraddizione e la tua affermazione originale non è corretta.

— Isaac Diamond,

32

Secondo questo articolo, non lo è . L'articolo sostiene anche che non è una buona idea farne uno.

Per citare da uno dei commenti:

Quindi, non credo che il CSS stia diventando completo. Non è possibile definire una funzione nei CSS. Affinché un sistema sia completo, deve essere possibile scrivere un interprete: una funzione che interpreta espressioni che denotano programmi da eseguire. CSS non ha variabili direttamente accessibili all'utente; quindi non puoi nemmeno modellare la struttura che rappresenta il programma da interpretare nei CSS.

— DVK
fonte

4

CSS non è eseguibile in alcun modo. La persona che ha scritto il commento citato non sembra capirlo. : - \

— Ryan prima del

33

CSS è un insieme di istruzioni per un processore (motore di layout). Cosa c'è di così non "eseguibile" al riguardo?

— DVK

47

La completezza di Turing non riguarda solo la possibilità di scrivere programmi nel modo desiderato o in una convinzione. È una proprietà matematica sulla calcolabilità. Quindi non puoi credere o meno che il CSS sia completo di Turing, hai bisogno di una prova. In questo caso, a causa della regola 110, CSS è Turing-complete.

— Mikaël Mayer,

15

@ MikaëlMayer - come indicato in molti commenti nella risposta "110", che richiede all'utente di eseguire un'azione. Se le azioni dell'utente vengono richieste, il CSS senza l'utente NON viene completato

— DVK

1

@DVK i tasti ripetuti richiesti dall'esempio CSS 110 non sono proprio una "azione" dell'utente, ma possono essere eseguiti da un circuito digitale ripetuto. Le macchine di turing attuali richiedono una sorta di hardware elettrico per guidare l'esecuzione, quindi non vedo come sia diverso

— woojoo666

6

La completezza di Turing non riguarda solo la "definizione di funzioni" o "have ifs / loops / etc". Ad esempio, Haskell non ha "loop", lambda-calculus non ha "ifs", ecc ...

Ad esempio, questo sito: http://experthuman.com/programming-with-nothing . L'autore usa Ruby e crea un programma "FizzBuzz" con solo chiusure (senza stringhe, numeri o simili) ...

Ci sono esempi in cui le persone calcolano alcune funzioni aritmetiche su Scala usando solo il sistema dei tipi

Quindi, sì, a mio avviso, CSS3 + HTML è completamente completo (anche se non puoi esattamente fare un vero calcolo con allora senza diventare pazzo)

— Maurício Szabo
fonte

11

Haskell e lambda-caclculus hanno ricorsione. CSS? Devi essere pazzo per fare qualsiasi vero calcolo in Malbolge; nel CSS, non importa quanto tu sia pazzo: non funzionerà, il CSS non è completo, e non è una questione di opinione.

— JMCF125,

11

Spiacenti, non sono riuscito a trovare altri tuoi commenti in questa pagina. Ma come indicato nella risposta accettata, Turing è completo "(...) purché si consideri (...) le interazioni dell'utente come parte dell'esecuzione del CSS". E io no.

— JMCF125,

20

Senza voler essere offensivi, la completezza turing non risponde all'opinione di nessuno.

— trisweb,

5

@ MaurícioSzabo No, CSS3 più HTML più un essere umano che fa continuamente un passo avanti nella simulazione è Turing completo.

— Lambda Fairy,

4

@LambdaFairy Questo è vero anche per ogni macchina da turismo fisica.

— Miles Rout

5

Il problema fondamentale qui è che qualsiasi macchina scritta in HTML + CSS non può valutare infinitamente molti passaggi (cioè non può esserci una ricorsione "reale") a meno che il codice non sia infinitamente lungo. E la domanda che questa macchina raggiungerà la configurazione Hin npassi o meno è sempre rispondibile se nè finita.

— Henrik Sommerland
fonte

1

Non vedo dove nei requisiti di Turing Machine sia specificata la capacità di elaborare infiniti loop. Il tuo secondo punto non sembra essere valido. Mentre Turing ha utilizzato la sua Turing Machine per dimostrare problemi di calcolabilità, queste regole, come il problema di arresto, non determinano se una macchina è o meno una macchina di turing. Se la Macchina di Turing includesse queste ipotesi come requisiti, non avrebbe potuto usare la Macchina di Turing per dimostrarle.

— Adam Davis,

4

@AdamDavis È un argomento totalmente valido: se esiste un algoritmo che risolve il problema di arresto per un formalismo completo di Turing, equivale a risolvere il problema di arresto in generale. Naturalmente, questo è stato dimostrato impossibile, il che significa che se il problema di arresto può essere risolto per un dato formalismo, allora quel formalismo non deve essere completo di Turing. Pertanto, tutti i formalismi che possono valutare solo un numero finito di passaggi non possono essere completi di Turing, incluso CSS.

— 00dani,

3

E ' Non se B allora A! Se non B allora non A ! Il primo sta affermando il conseguente , che sottolinea correttamente è sbagliato. Quest'ultimo, argomento contrapposto , è ciò che uso ed è valido. Nota l'uso attento della negazione nel mio ultimo commento: l'ho costruito appositamente per evitare quell'errore.

— Lambda Fairy,

1

@ woojoo666 No. Essere in grado di trasformare lo stato in base a un insieme di regole non è lo stesso di Turing completo. Nulla che può essere completato solo per un numero finito di passaggi. Se l'insieme delle regole di trasformazione può essere applicato solo un numero finito di volte la domanda "Il sistema raggiungerà mai lo stato H?" è sempre decidibile e quindi non è completo di Turing. L'implementazione di un automa cellulare in grado di eseguire solo un numero finito di iterazioni non può mai essere completata.

— Henrik Sommerland,

1

"E, sì, anche i CSS sono in fase di completamento" [citazione necessaria]

— Andrea Lazzarotto,

4

Questa risposta non è precisa perché mescola la descrizione di UTM e UTM stesso (Universal Turing Machine).

Abbiamo una buona risposta, ma da una prospettiva diversa e non mostrano direttamente i difetti nella risposta attuale.

Prima di tutto possiamo concordare sul fatto che l'umano può funzionare come UTM. Questo significa che se lo facciamo

CSS + Human == UTM

Quindi la CSSparte è inutile perché tutto il lavoro può essere svolto da Humanchi farà la parte UTM. L'atto di fare clic può essere UTM, perché non si fa clic in modo casuale ma solo in luoghi specifici.

Invece di CSS potrei usare questo testo ( articolo 110 del regolamento ):

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

Guidare le mie azioni e il risultato saranno gli stessi. Questo significa che questo testo UTM? No, questo è solo un input (descrizione) che altri UTM (umani o computer) possono leggere ed eseguire. Fare clic è sufficiente per eseguire qualsiasi UTM.

La parte critica che manca ai CSS è la capacità di cambiare il proprio stato in modo arbitrario, se i CSS potessero generare clic, sarebbe UTM. L'argomento secondo cui i tuoi clic sono "manovella" per CSS non è accurato perché la vera "manovella" per CSS è Layout Engine che lo esegue e dovrebbe essere sufficiente per dimostrare che CSS è UTM.

— Yankes
fonte

La regola 110 è un UTM. Il tuo testo è una descrizione (probabilmente leggermente insufficiente) della regola 110, quindi sì che il testo è una (rappresentazione di a) UTM.

— OrangeDog,

"Se i CSS potessero generare clic" Uso molti microcontrollori AVR nei miei progetti. È possibile utilizzare un clock interno, che è limitato a 8 MHz. In alternativa, è possibile collegare un cristallo esterno e arrivare a 20 MHz. In alternativa, potrei anche fornire un orologio completamente esterno, quindi non è nemmeno l'hardware della cpu a guidare il cristallo. Ciò significa che posso effettivamente collegare un interruttore e un pezzo di circuito per rimbalzarlo, e letteralmente usarlo come un orologio con me premendo il pulsante. Significa che smette di essere completo se lo faccio?

— Cedric Mamo,

1

@CedricMamo Ma i tuoi clic cambiano stato e devi solo fare clic sui punti corretti, altrimenti non funzionerebbe. Guarda esattamente su eli.fox-epste.in/rule110-full.html Posso fare clic su QUALSIASI cella, se CSS è disabilitato continuo a fare clic su celle corrette e ho UTM. Se tutto ciò che fai fosse fare clic su un pulsante "successivo", in effetti CSS sarebbe UTM, ma per avere qualcosa del genere avresti bisogno di un JS che è un clic per pulsante, e come sappiamo JS IS UTM. Per CSS è necessario disporre di qualcosa che interpreterà correttamente il risultato e lo stato di aggiornamento.

— Yankes,

1

@CedricMamo qualche link ad esso? In questo momento guardo un paio di esempi da lì, ma non funziona per me. Nel complesso, se capisco correttamente, CSS modifica la visibilità di alcune caselle di controllo e si utilizzano le schede per passare al successivo, e qui abbiamo di nuovo UTM nascosto che non è CSS, perché quando si fa la scheda si chiede al browser di calcolare la posizione successiva valida per navigare, e a dirla tutta ne fanno MOLTO codice complesso, questo usa CSS ma è molto di più. Ciò significa che dimostri che il tuo browser è UTM non CSS.

— Yankes

1

@CedricMamo Ma gli automi cellulari hanno nella loro stessa definizione un ciclo, quando viene eseguita la transizione di stato, allora viene eseguito di nuovo, e ancora ecc. Se lo rimuoviamo e lasciamo solo questa transizione di stato, allora questi automi non saranno più UTM. Questa sarà esattamente la stessa situazione dei CSS. Possiamo definire due passaggi in CA, R- stato di lettura e W- stato di scrittura, la CA normale fa una sequenza infinita RWRWRWRW...nel caso di CSS che abbiamo solo Re non abbiamo Wperché modifica cose che non può leggere, solo se aggiungiamo B- l'azione del browser allora potremmo avere RBRBRBR...ma poi BBBBBBè sul suo UTM.

— Yankes

-28

CSS non è un linguaggio di programmazione, quindi la questione della completezza turing è insignificante. Se le estensioni di programmazione vengono aggiunte ai CSS come nel caso di IE6, la nuova sintesi è completamente diversa.

CSS è semplicemente una descrizione di stili; non ha alcuna logica e la sua struttura è piatta.

— Ryan Prior
fonte

1

Inoltre (IIRC), vi è una certa ambiguità su quali stili abbiano la precedenza quando vengono utilizzati più stili in conflitto (duplicati). E poi ci sono modi leggermente diversi con cui diversi browser implementano / interpretano gli stili di markup da affrontare.

— David R Tribble,

70

"Il CSS non è un linguaggio di programmazione, quindi la questione della completezza turing è insignificante." Le frasi tautologiche sono tautologiche.

— Adam Davis,

3

Dai un'occhiata al linguaggio di programmazione Prolog se ti chiedi perché la tua risposta sia stata così ridotta.

— edwin,