Saltar al contenido

¿CSS Turing está completo?

Solución:

Puede codificar la regla 110 en CSS3, por lo que es Turing completo siempre que considere un archivo HTML adjunto apropiado e interacciones del usuario para ser parte de la “ejecución” de CSS. Hay disponible una implementación bastante buena y aquí se incluye otra implementación:

body 
    -webkit-animation: bugfix infinite 1s;
    margin: 0.5em 1em;

@-webkit-keyframes bugfix  from  padding: 0;  to  padding: 0;  

/*
 * 111 110 101 100 011 010 001 000
 *  0   1   1   0   1   1   1   0
 */

body > input 
    -webkit-appearance: none;
    display: block;
    float: left;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 0px 3px;
    margin: 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 7pt;

body > input::before 
    content: "0";


p 
    font-family: Verdana, sans-serif;
    font-size: 9pt;
    margin-bottom: 0.5em;


body > input:nth-of-type(-n+30)  border-top: 1px solid #ddd; 
body > input:nth-of-type(30n+1)  border-left: 1px solid #ddd; clear: left; 

body > input::before  content: "0"; 

body > input:checked::before  content: "1"; 
body > input:checked  background: #afa !important; 


input:not(:checked) +
        *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
        input::before 
    content: "1";

input:not(:checked) +
        *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
        input 
    background: #fa0;



input:checked +
        *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
        input::before 
    content: "1";

input:checked +
        *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
        input 
    background: #fa0;



input:checked +
        *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
        input::before 
    content: "1";

input:checked +
        *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
        input 
    background: #fa0;


input:checked + input:checked + input:checked +
        *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
        input::before 
    content: "0";

input:checked + input:checked + input:checked +
        *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
        input 
    background: #fff;


input:not(:checked) + input:not(:checked) + input:not(:checked) +
        *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
        input::before 
    content: "0";

input:not(:checked) + input:not(:checked) + input:not(:checked) +
        *+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+*+
        input 
    background: #fff;


body > input:nth-child(30n)  display: none !important; 
body > input:nth-child(30n) + label  display: none !important; 

Rule 110 in (webkit) CSS, proving Turing-completeness.

Un aspecto de la completitud de Turing es la detener el problema.

Esto significa que, si CSS es Turing completo, entonces no hay general algoritmo para determinar si un programa CSS terminará de ejecutarse o se repetirá para siempre.

¡Pero podemos derivar un algoritmo de este tipo para CSS! Aquí está:

  • Si la hoja de estilo no declara ninguna animación, se detendrá.

  • Si tiene animaciones, entonces:

    • Si alguna animation-iteration-count es infinite, y el selector que lo contiene coincide en el HTML, entonces no detener.

    • De lo contrario, se detendrá.

Eso es todo. Dado que acabamos de resolver el problema de detención de CSS, se deduce que CSS es no Turing completo.

(Otras personas han mencionado IE 6, que permite incrustar expresiones JavaScript arbitrarias en CSS; eso obviamente agregará la completitud de Turing. Pero esa característica no es estándar y nadie en su sano juicio la usa de todos modos).


Daniel Wagner mencionó un punto que me perdí en la respuesta original. Él nota que mientras he cubierto animaciones, otras partes del motor de estilo como selector de coincidencia o diseño también puede conducir a la completitud de Turing. Si bien es difícil hacer un argumento formal sobre estos, intentaré esbozar por qué es poco probable que suceda la completitud de Turing.

Primero: los lenguajes completos de Turing tienen alguna forma de retroalimentando datos en sí mismo, ya sea mediante recursividad o bucle. Pero el diseño del lenguaje CSS es hostil a esta retroalimentación:

  • @media Las consultas solo pueden comprobar las propiedades del propio navegador, como el tamaño de la ventana gráfica o la resolución de píxeles. Estas propiedades pueden cambiar mediante la interacción del usuario o el código JavaScript (por ejemplo, cambiar el tamaño de la ventana del navegador), pero no solo a través de CSS.

  • ::before y ::after Los pseudoelementos no se consideran parte del DOM y no pueden combinarse de ninguna otra manera.

  • Los combinadores selectores solo pueden inspeccionar elementos encima y antes de el elemento actual, por lo que no se pueden utilizar para crear ciclos de dependencia.

  • Es posible alejar un elemento cuando pasa el mouse sobre él, pero la posición solo se actualiza cuando mueve el mouse.

Eso debería ser suficiente para convencerte de que la coincidencia del selector, por sí sola, no puede ser Turing completo. Pero, ¿qué pasa con el diseño?

El algoritmo de diseño de CSS moderno es muy complejo, con características como Flexbox y Grid enturbiando las aguas. Pero incluso si fuera posible activar un bucle infinito con diseño, sería difícil aprovechar esto para realizar cálculos útiles. Esto se debe a que los selectores de CSS inspeccionan solo la estructura interna del DOM, no cómo se presentan estos elementos en la pantalla. Entonces cualquier prueba de integridad de Turing que utilice el sistema de diseño debe depender solo del diseño.

Finalmente, y esta es quizás la razón más importante, los proveedores de navegadores tienen interés en mantener CSS no Turing completo. Al restringir el idioma, los proveedores permiten optimizaciones inteligentes que hacen que la web sea más rápida para todos. Además, Google dedica toda una granja de servidores a la búsqueda de errores en Chrome. Si hubiera una forma de escribir un bucle infinito usando CSS, probablemente ya lo habrían encontrado

Según este artículo, no lo es. El artículo también argumenta que no es una buena idea convertirlo en uno.

Para citar uno de los comentarios:

Por lo tanto, no creo que CSS se esté completando. No hay capacidad para definir una función en CSS. Para que un sistema sea turing-completo tiene que ser posible escribir un intérprete: una función que interprete expresiones que denoten programas a ejecutar. CSS no tiene variables que sean directamente accesibles para el usuario; por lo que ni siquiera puede modelar la estructura que representa el programa a interpretar en CSS.

Eres capaz de patrocinar nuestro quehacer añadiendo un comentario o dejando una puntuación te damos la bienvenida.

¡Haz clic para puntuar esta entrada!
(Votos: 1 Promedio: 5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *