Angular 11/Minificación CSS: Cómo evitar la conversión de rgba a código hexadecimal de 8 dígitos durante la minificación de CSS para respaldar versiones anteriores de Chrome.

Tenemos una aplicación web que está desarrollada en Angular 11(cli V11.2.14) y Asp.net core y que funciona bien, pero ahora necesita ser compatible con una versión anterior de Chrome (versión del navegador 60).

Me he encontrado con problemas de CSS principalmente relacionados con elementos con color y opacidad, como por ejemplo, la sombra del cuadro que se muestra a continuación no funciona:

box-shadow: 0px 4px 16px 4px rgba(255, 0, 0, 0,52);

He descubierto que durante el proceso de minificación del CSS de Angular (configuración predeterminada optimization=true en angular.json), el rgba se convierte en un código hexadecimal de 8 dígitos. Esto funciona con las versiones más recientes de Chrome (72 y posteriores). Pero, la versión antigua como Chrome 60 no admite el código hexadecimal de 8 dígitos, por lo que no estoy viendo que se aplique el CSS. Actualmente, solo puedo solucionar este problema deshabilitando la minificación de estilos con la configuración a continuación en angular.json.

"optimization": { "scripts": true, "styles": { "minify": false, "inlineCritical": true }, "fonts": true },

Estoy intentando ver si hay una manera de evitar la conversión de rgba a código hexadecimal de 8 dígitos sin tener que deshabilitar la minificación del CSS. He intentado usar una variable en styles.scss como se muestra a continuación, pero el proceso de minificación sigue convirtiendo rgba en código hexadecimal de 8 dígitos.

$my-shadow-red: #{'0px 4px 16px 4px rgba(255, 0, 0, 0.52)'}; box-shadow: $my-shadow-red;

Me he encontrado con un problema similar publicado aquí https://github.com/angular/angular-cli/issues/20869 que dice que el equipo de css nano debe abordar esto. No estoy seguro si hay alguna solución temporal actualmente dentro de angular cli.

davy.ai

June 17, 2023 at 8:03 pm

Problema con CSS en versiones antiguas de Chrome al minimizar estilos con Angular CLI

Problema

Tenemos una aplicación web desarrollada en Angular 11 (CLI v11.2.14) y ASP.NET Core, que funciona correctamente. Sin embargo, necesitamos dar soporte a una versión antigua de Chrome (versión del navegador 60). Nos encontramos con problemas de CSS relacionados principalmente con elementos de color y opacidad. Por ejemplo, box-shadow no funcionaba como se esperaba.

box-shadow: 0px 4px 16px 4px rgba(255, 0, 0, 0.52);

Descubrimos que durante el proceso de minificación de CSS de Angular (configuración predeterminada optimization=true en angular.json), los valores rgba se convierten en códigos hexadecimales de ocho dígitos. Esto funciona con versiones recientes de Chrome (72 o superior), pero versiones antiguas como Chrome 60 no admiten el código hex de 8 dígitos, y no estamos viendo que el CSS tenga efecto.

Solución

Actualmente, podemos solucionar este problema desactivando la minificación de estilos en angular.json.

"optimization": {
    "scripts": true,
    "styles": {
        "minify": false,
        "inlineCritical": true
    },
    "fonts": true
},

Sin embargo, queremos evitar la conversión de valores rgba a códigos hexadecimales de 8 dígitos sin desactivar la minificación de CSS. Intentamos usar una variable en styles.scss, pero el proceso de minificación todavía convierte rgba en el código hex de 8 dígitos.

$my-shadow-red: #{'0px 4px 16px 4px rgba(255, 0, 0, 0.52)'};
box-shadow: $my-shadow-red;

Encontramos un problema similar publicado en GitHub [aquí] (https://github.com/angular/angular-cli/issues/20869) que menciona que el equipo CSS nano debe abordar esto. No estamos seguros si hay alguna solución temporal actualmente dentro de Angular CLI.

Answer

davy.ai

June 17, 2023 at 8:03 pm
Problema con CSS en versiones antiguas de Chrome al minimizar estilos con Angular CLI

Problema

Tenemos una aplicación web desarrollada en Angular 11 (CLI v11.2.14) y ASP.NET Core, que funciona correctamente. Sin embargo, necesitamos dar soporte a una versión antigua de Chrome (versión del navegador 60). Nos encontramos con problemas de CSS relacionados principalmente con elementos de color y opacidad. Por ejemplo, box-shadow no funcionaba como se esperaba.
```
box-shadow: 0px 4px 16px 4px rgba(255, 0, 0, 0.52);
```
Descubrimos que durante el proceso de minificación de CSS de Angular (configuración predeterminada optimization=true en angular.json), los valores rgba se convierten en códigos hexadecimales de ocho dígitos. Esto funciona con versiones recientes de Chrome (72 o superior), pero versiones antiguas como Chrome 60 no admiten el código hex de 8 dígitos, y no estamos viendo que el CSS tenga efecto.

Solución

Actualmente, podemos solucionar este problema desactivando la minificación de estilos en angular.json.
```
"optimization": {
    "scripts": true,
    "styles": {
        "minify": false,
        "inlineCritical": true
    },
    "fonts": true
},
```
Sin embargo, queremos evitar la conversión de valores rgba a códigos hexadecimales de 8 dígitos sin desactivar la minificación de CSS. Intentamos usar una variable en styles.scss, pero el proceso de minificación todavía convierte rgba en el código hex de 8 dígitos.
```
$my-shadow-red: #{'0px 4px 16px 4px rgba(255, 0, 0, 0.52)'};
box-shadow: $my-shadow-red;
```
Encontramos un problema similar publicado en GitHub [aquí] (https://github.com/angular/angular-cli/issues/20869) que menciona que el equipo CSS nano debe abordar esto. No estamos seguros si hay alguna solución temporal actualmente dentro de Angular CLI.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?