CSS externo

CSS externo es una acción que te permite añadir reglas CSS desde un archivo.

Estructura del CSS de Webforms

La estructura básica de un formulario de Webforms se puede ver en el siguiente diagrama:

Este elemento raíz puede verse fácilmente usando el inspector directamente desde el navegador, que al usar el modo Vista Previa ya se renderiza como lo haría en producción.

Ejecución del CSS

A nivel interno, cuando se sube un CSS, a todas las propiedades se le añade el selector #visualizer-container, por lo que va a ser "la raíz" de todo el CSS que se añada.

Así, por ejemplo, si se sube el siguiente archivo:

@import url('https://fonts.googleapis.com/css?family=Montserrat');

h1{
	font-size: 6rem;
	color: white;
}

A nivel interno, Webforms entendería lo siguiente:

#visualizer-container {
	@import url('https://fonts.googleapis.com/css?family=Montserrat');
}

#visualizer-container h1 {
	font-size: 6rem;
	color: white;
}

Esto quiere decir que, automáticamente, todas las reglas @ quedan descartadas, como se comentará en Limitaciones.

De nuevo, nótese como webforms prefija todas las reglas con #visualizer-container , necesario para evitar que estilos añadidos mediante esta funcionalidad afecten a la página donde Webforms es integrado. Una consecuencia de esto es que, por ejemplo, reglas CSS asociadas a body no tendrán efecto. El elemento HTML más genérico al que podemos apuntar es #visualizer-main

Teniendo en cuenta este funcionamiento, cualquier selector es posible, siendo los más comunes:

• aside | Estilo para el índice que se muestra a la izquierda de los formularios. Ver Enlace en el menú en los elementos de tipo Texto.
• .form-row | Cada fila del formulario.
• .webform-fragment | Cada sección.
• h1, h2, h3, h4, h5, h6, p, div | Los elementos Texto.
• input[type="X"] | Elementos de tipo input como Checkbox, Radio o Input. Ver más en HTML Input Types.

Funcionamiento interno

Dado que las reglas CSS tienen un funcionamiento bastante laxo en cuanto a cuándo se ejecutan, todo código cuyas reglas apliquen debería verse inmediatamente en la Vista Previa.

A nivel interno el funcionamiento es el siguiente:

1. Se selecciona o se arrastra un archivo CSS.
2. Las reglas se añaden a las presentes en la versión web del formulario.
3. Posteriormente se analizan las reglas CSS presentes en cada elemento dentro del formulario. Por tanto, dándoles más prioridad.

Limitaciones

Debido al funcionamiento interno mostrado en la Ejecución del CSS, la opción de CSS externo tiene ciertas limitaciones.

Reglas @

No se pueden usar reglas que comiencen por el símbolo @. Son las siguientes:

• @charset — Define el conjunto de caracteres usado por la hoja de estilos.
• @import — Indica al motor de CSS que incluya una hoja de estilos externa.
• @namespace — Indica al motor de CSS que todo el contenido usa como prefijo un espacio de nombres XML.
• @media — Un grupo de reglas condicional que aplicará su contenido si el dispositivo cumple los criterios de las condiciones definidas usando un media query.
• @supports — Un grupo de reglas condicional que aplicará su contenido si el navegador cumple los criterios de la condición dada.
• @document — Un grupo de reglas condicionadas que aplicará su contenido si el documento donde se aplica la hoja de estilos cumple los criterios de la condición dada. (diferida al Nivel 4 de la Especificación CSS)
• @page — Describe los cambios en la disposición de la página que serán aplicados al imprimir el documento.
• @font-face — Describe la configuración de fuentes externas que se descargarán.
• @keyframes — Describe la configuración de pasos intermedios en una secuencia de animación CSS.
• @viewport — Describe los aspectos del viewport para dispositivos de pantalla pequeña. (actualmente en Borrador).
• @counter-style — Define estilos de contador específicos que no son parte de los conjuntos de estilos predeterminados. (en estado de Recomendación Candidata, pero sólo implementada en Gekko al momento de esta publicación).
• @font-feature-values (junto con @swash, @ornaments, @annotation, @stylistic, @styleset y @character-variant)
  — Define nombres comunes para la propiedad font-variant-alternates. (en estado de Recomendación Candidata, pero sólo implementada en Gekko al momento de esta publicación)

Las más relevantes al editar CSS son las subrayadas, que impiden importar CSS externo y realizar cambios en el estilo en función del dispositivo desde el que se visualice, dejándolo todo a cargo de los estilos internos de Webforms.

Fuentes externas

Al haberse establecido que no se pueden utilizar @imports, no es posible agregar fuentes externas como, por ejemplo, las ofrecidas por Google Fonts.

Si fuera necesario, existe la posibilidad de introducir HTML mediante un elemento de tipo Texto, pero es una práctica no recomendada.

Estilos de impresión

Del mismo modo que las fuentes internas, al no poder utilizarse reglas que comiencen por "@", no se pueden aplicar reglas de impresión como se muestra a continuación.

@media print {
	...
}

Si lo que necesitamos es aplicar estilos únicamente en la impresión pdf de los formularios, lo haremos mediante el estilo .visualizer-pdf . A continuación, un ejemplo de archivo CSS externo:

 .visualizer-pdf {
	font-size: 16px;
}