Trabajar con archivos de anulaciones CSS

Artículo
03/08/2023

Este artículo describe por qué, cuándo y cómo usar las hojas de estilo en cascada (CSS) para archivos de anulación en Microsoft Dynamics 365 Commerce.

Los estilos de sitio permanentes generalmente se deben manejar a través del tema de un sitio. Los temas proporcionan lo fundamental para CSS y las configuraciones de estilo para los módulos en cualquier página de su sitio. Los temas se crean utilizando el kit de desarrollo de software en línea (SDK) de Dynamics 365 Commerce, y se implementan en sus sitios web a través de Microsoft Dynamics Lifecycle Services (LCS). Las capacidades de depuración de temas y las configuraciones de la interfaz del módulo en el SDK ayudan a los desarrolladores del sitio a crear paquetes de diseño del sitio personalizables y coherentes. Cuando estos paquetes de diseño se implementan en un sitio, los autores del sitio pueden centrarse en crear, editar y publicar contenido en lugar de desarrollar el sitio.

Dado el ciclo de vida habitual de un tema, la dependencia de los desarrolladores para realizar cambios de estilo a través de la canalización de implementación de SDK y LCS puede ser prohibitiva en algunos escenarios. Los prototipos o las revisiones del sitio pueden parecer engorrosos si el SDK no está configurado o si no tiene tiempo para esperar una implementación de LCS.

En estos escenarios, los archivos de anulación de CSS pueden ayudar. En las herramientas de autoría de Commerce, los usuarios autenticados pueden cargar un archivo CSS, ver una vista previa y luego activarlo para anular el tema de un sitio. No se requiere la sobrecarga de la implementación de SDK o LCS. Las anulaciones que se especifican en un archivo de anulación de CSS pueden ser tan pequeñas como un cambio en un estilo de texto único o tan amplio como una revisión completa de la marca.

Antes de usar los archivos de anulación de CSS, tenga en cuenta las siguientes limitaciones:

Solo un archivo de anulación de CSS puede estar activo en un sitio a la vez. Por lo tanto, todas las anulaciones activas deben estar presentes en un único archivo de anulación.
Aunque puede obtener una vista previa de las anulaciones en las herramientas de autoría de Commerce, no hay características de depuración dedicadas para ayudar a identificar los errores que introducen las anulaciones. En otras palabras, cuando usa archivos de anulación de CSS, no tiene el mismo conjunto de herramientas que el SDK proporciona para la validación de módulos y autoría.

Sin embargo, los archivos de anulación de CSS proporcionan una forma rápida de crear un prototipo de un diseño o implementar una revisión antes de desarrollar e implementar una actualización completa del tema.

Crear un archivo de anulación de CSS

Para crear un archivo de anulación de CSS, puede usar cualquier entorno de desarrollo integrado (IDE), editor de texto o editor de código fuente. Un enfoque típico es utilizar depuradores web estándar en su navegador para identificar selectores de estilo, propiedades y valores en su sitio existente. La mayoría de los navegadores le permiten cambiar valores y obtener una vista previa en el depurador. Después de identificar los cambios que desea realizar, puede guardarlos en su archivo CSS.

Cargar un archivo de anulación de CSS

Para subir un archivo de CSS a su sitio en Commerce, siga estos pasos.

En las herramientas de creación, vaya al sitio.
En el panel de navegación de la izquierda, seleccione Diseño.

Nota

Dependiendo de la versión de las herramientas de creación de Commerce que esté utilizando, es posible que deba expandir Configuraciones en el panel de navegación antes de que pueda seleccionar Diseño.
En la parte superior del panel de diseño principal, seleccione la pestaña anular CSS, si aún no está seleccionada.
En Anulaciones CSS disponibles, seleccione Cargar archivo CSS. Aparecerá una ventana del Explorador de archivos.
En el Explorador de archivos, busque y seleccione un archivo CSS y luego seleccione Abrir. El archivo subido CSS ahora aparece debajo de Anulaciones CSS disponibles.

Vista previa de un archivo de anulación de CSS

Para obtener una vista previa de un archivo de anulación de CSS antes de activarlo en su sitio activo, siga estos pasos.

En el panel de navegación a la izquierda, seleccione Diseño, y luego, en la pestaña Anulación CSS, en Anulaciones CSS disponibles, encuentre el archivo CSS del que desea obtener una vista previa.
Al lado del nombre del archivo CSS, seleccione Vista previa del sitio.
En el cuadro de diálogo Seleccione una URL, seleccione la URL del sitio en el que desea ver la anulación aplicada y luego seleccione Aceptar.
Si hay varias variantes para la URL seleccionada, seleccione la variante deseada en el cuadro de diálogo Vista previa de variaciones que aparece.

Se abre una nueva pestaña o ventana del navegador, donde puede validar sus anulaciones de estilo en su sitio. Luego puede compartir la URL con otros usuarios de Commerce autenticados para su revisión y comentarios.

Activar un archivo de anulación de CSS en su sitio en activo

Después de haber visto y aprobado el archivo de anulación de CSS, puede activarlo en su sitio en activo.

Nota

Solo un archivo de anulación de CSS puede estar activo en su sitio a la vez. Si activa un nuevo archivo de anulación, el archivo de anulación anterior se desactiva. Por lo tanto, asegúrese de que todas las anulaciones requeridas estén presentes en una solo archivo de anulación de CSS.

Para activar un archivo de anulación de CSS, siga estos pasos.

En el panel de navegación a la izquierda, seleccione Diseño, y luego, en la pestaña Anulación CSS, en Anulaciones CSS disponibles, encuentre el archivo CSS que desea activar.
En el nombre del archivo CSS, seleccione Activar. El archivo de anulación se activa inmediatamente en su sitio activo.

Desactivar un archivo de anulación de CSS en su sitio en activo

Para desactivar un archivo de anulación de CSS en su sitio, siga estos pasos.

En el panel de navegación a la izquierda, seleccione Diseño, y luego, en la pestaña Anulación CSS, en Anulaciones CSS disponibles, encuentre el archivo CSS que desea desactivar.
En el nombre del archivo CSS, seleccione Desactivar. El archivo de anulación se desactiva inmediatamente en su sitio activo.

Sugerencia

Para acceder a opciones adicionales para los archivos de anulación de CSS, seleccione los puntos suspensivos (...) al lado del nombre del archivo CSS. Las opciones Descargar, Renombrar y Reemplazar son útiles para realizar cambios rápidos en un archivo de anulación de CSS.