cssx

Referencia de API

Referencia completa para todas las propiedades, atributos y características de CSSX. Esta guía cubre todo lo que necesitas para construir con CSSX.

Variables de Root

Las variables de root se definen en el selector :root y controlan los metadatos y la configuración a nivel de documento. Estas propiedades afectan al documento HTML generado en su totalidad.

Propiedad Descripción Por defecto
--lang Lenguaje del documento es
--title Título del documento CSSX
--description Descripción del documento CSSX is compiler for CSS
--icon URL del icono favicon.svg
--generator Meta generator CSSX v0.0.0
--transition Añadir @view-transition false

Variables Reservadas

Las variables reservadas tienen un significado especial en CSSX y controlan la funcionalidad principal. Estas no pueden ser usadas para datos personalizados.

--content Establece el contenido de texto de un elemento. Soporta formato Markdown para la mayoría de los elementos (excepto code). Usa "Establece el contenido de texto de un elemento. Soporta formato Markdown para la mayoría de los elementos (excepto code). Usa var(--variable) para referenciar otras propiedades personalizadas." para referenciar otras propiedades personalizadas.
--import Importa e incluye otro archivo CSSX en esta ubicación. La ruta es relativa al directorio src/pages. Los componentes importados heredan las propiedades personalizadas del padre.

Ejemplo de Uso

CSSX

p {
    --content: "Hola **Mundo**";
}

header {
    --import: "../components/header.cssx";
}

Propiedades de Atributos HTML

Estas propiedades personalizadas se mapean directamente a atributos HTML. Cualquier propiedad que comience con -- (excepto las reservadas) se convierte en un atributo HTML con el prefijo -- eliminado.

--href Establece el atributo href, típicamente usado con elementos <a> para enlaces. Soporta URLs tanto relativas como absolutas.
--target Establece el atributo target para enlaces. Valores comunes: _blank (nueva pestaña), _self (mismo marco), _parent, _top.
--src Establece el atributo src, usado con <img>, <script>, <iframe> y otros elementos que cargan recursos externos.
--alt Establece el atributo alt para imágenes, proporcionando texto alternativo para accesibilidad y cuando las imágenes no cargan.
--onclick Establece el manejador de evento onclick. Contiene código JavaScript que se ejecuta cuando se hace clic en el elemento.
--id Establece el atributo id, proporcionando un identificador único para el elemento. Útil para targeting con JavaScript y enlaces de anclaje.
--class Añade clases CSS adicionales al elemento (además de la clase CSSX auto-generada). Separadas por espacios para múltiples clases.
--type Establece el atributo type, comúnmente usado con elementos <input>, <button> y <script>.
--placeholder Establece el atributo placeholder para campos de entrada, proporcionando texto de ayuda que aparece antes de la entrada del usuario.
--name Establece el atributo name para elementos de formulario, identificando el elemento al enviar datos del formulario.
--value Establece el atributo value para elementos de entrada, definiendo el valor inicial del campo.

Atributos Personalizados

Puedes crear cualquier atributo HTML agregándole el prefijo --. Por ejemplo:

CSSX

div {
    --data-value: "123";
    --aria-label: "Etiqueta descriptiva";
    --role: "button";
}

Referencias de Variables

Puedes referenciar otras propiedades personalizadas usando la sintaxis var() de CSS dentro de --content y otras propiedades:

CSSX

div {
    --user-name: "Juan Pérez";
    
    p {
        --content: "Bienvenido, var(--user-name)!";
    }
}

Propiedades CSS Estándar

Todas las propiedades CSS estándar funcionan como se espera. Puedes usar cualquier propiedad CSS válida junto con las características específicas de CSSX:

Mejores Prácticas