¿No sería más rápido usar una propiedad más corta para el ancho y alto de un elemento al codificar en CSS?
A partir de ahora tengo que escribir:

selector {width: 100px; height: 250px;}

Lo que es rápido como es, pero creo que esto sería más rápido:

selector {dimension: 100px 250px;}

¿Existe ya un preprocesador CSS que pueda lograr esto? Parece que ahorraría un poco de tiempo al hacer muchos anchos y altos.


Un buen ejemplo podrían ser las propiedades de CSS Grid:

grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;  

Sería la misma que:

grid-template: 100px 100px / 100px 100px;
0
Oscar 12 nov. 2017 a las 19:15

2 respuestas

La mejor respuesta

Respuesta corta: El CSSWG aún no pudo ponerse de acuerdo sobre un nombre para la propiedad abreviada.


La idea no es nueva y mucha gente la sugirió de vez en cuando a lo largo de los años. Sin embargo, existe una propuesta actual [css-sizing] Añadiendo una abreviatura de 'tamaño' para 'ancho '/' height ' del CSSWG ( Grupo de trabajo CSS ) .

Ya se han discutido muchas cosas, pero algunas aún están sin resolver. Aquí hay unos ejemplos:

¿Cuál es el nombre correcto?

Algunos de los nombres que se sugirieron:

  • size: choca con la propiedad size de @page
  • dimensions: probablemente demasiado larga o difícil de deletrear
  • box-size: probablemente demasiado cerca de box-sizing

¿Cómo funcionará?

Deberia ser:

<box-size>: <width> <height>?

… O más relacionado con otras propiedades como padding o margin:

<box-size>: <height> <width>?

Además: ¿Debería admitir un parámetro adicional que mantendrá la relación de aspecto?

¿Quién la apoyará?

  • ¿Qué proveedores apoyarán la propuesta y la sintaxis en sí?
  • ¿Mejorará la experiencia del autor para que la gente realmente lo use?

Como puede ver, podría haber una notación abreviada en el futuro, como dijo recientemente el CSSWG en su Minutes Telecon del 16-08-2017:

El grupo acordó que una abreviatura de "ancho" / "alto" sería bueno, pero no debería llamarse "tamaño". Sin embargo, no hubo tiempo para pensar en un nombre diferente.


Dicho esto, por supuesto, puede utilizar un preprocesador de CSS para facilitar su vida. Por ejemplo, tengo un mixin en MENOS, que se ve así:

.size(@a: null, @b: null) {
    & when not (null = @a) {
        width: @a;
    }

    & when (null = @b) {
        height: @a;
    }

    & when not (null = @b) {
        height: @b;
    }
}

Que es tan simple como esto:

.size(100%, 50%);

width: 100%;
height: 50%;

... y también admite elementos cuadrados:

.size(100%);

width: 100%;
height: 100%;
2
insertusernamehere 22 nov. 2017 a las 20:27

Es una buena idea pero en este momento las especificaciones oficiales no lo permiten.

Eso es todo.

0
Nick 12 nov. 2017 a las 16:18