Adam Davis Adam Davis - 5 months ago 38
CSS Question

Is CSS turing complete?

CSS isn't, insofar as I know, Turing complete. But my knowledge of CSS is very limited.


  • Is CSS Turing complete?

  • Are any of the existing draft or committees considering language features that might enable Turing completeness if it isn't right now?


Answer

You can encode Rule 110 in CSS3, so it's Turing-complete so long as you consider an appropriate accompanying HTML file and user interactions to be part of the “execution” of CSS. A pretty good implementation is available, and another implementation is included here (JsFiddle version):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Rule 110</title>
        <style type="text/css" media="screen">
            body {
                -webkit-animation: bugfix infinite 1s;
                font-family: "Courier New";
                font-size: 28px;
            }
            @-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: 5px 12px;
                margin: 0;
            }
            body > input::before {
                content: "0";
            }

            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; }

        </style>
    </head>

    <body>
        <input type="checkbox" />
        <input type="checkbox" />

        /* A total of 900 checkboxes required */

        <input type="checkbox" />
        <input type="checkbox" />

    </body>
</html>
Comments