💻 Mis apuntes sobre las "Propiedades Abreviadas"

Definición:

  Las propiedades abreviadas son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.

La especificación de CSS define las propiedades abreviadas para agrupar la definición de propiedades en común para el mismo tema. Ejemplo: La propiedad background de CSS es una propiedad abreviada que puede definir el valor de background-color , background-image , background-repeat , y background-position . Similarmente, las propiedades más comúnes relacionadas con las fuentes se pueden definir usando la abreviación font , y los diferentes márgenes alrededor de una caja pueden ser definidos usando la abreviación margin .

Casos especiales delicados:

Incluso si son convenientes de utilizar, hay algunos casos especiales que mantener en mente al utilizarlos:

1: Si no se especifica un valor, se le asignará su valor inicial. Suena a algo anecdótico, pero significa que se sobreescribirán los valores previamente definidos. Por lo tanto:

          
background-color: red;
background: url(images/bg.gif) no-repeat top right;    

no pondrá el color en rojo sino al valor por defecto de background-color , transparent , puesto que la segunda regla tiene precedencia.

2: Solo los valores de las propiedades individuales pueden heredar. Dado que los valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave inherit puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro. Eso significa que la única manera de hacer que un valor específico sea heredado es usar la propiedad a mano con la palabra clave inherit .

3: Las propiedades abreviadas intentan no forzar un orden específico para los valores de las propiedades que reemplazan. Esto funciona bien cuando estas propiedades usan valores de diferentes tipos, ya que el orden no tiene importancia, pero no funciona tan fácilmente cuando varias propiedades pueden tener valores idénticos. El manejo de estos casos se agrupa en varias categorías:

i: Las propiedades de manejo abreviado relacionadas con los bordes de un cuadro, como border-style , margin o padding , siempre usan una sintaxis consistente de 1 a 4 valores que representan esos bordes:

1. Abreviaturas que manejan propiedades relacionadas con los bordes de una caja, como border-style, margin or padding, siempre usan una sintaxis consistente de 1 a 4 valores que represente esos bordes:

   Border 1	La sintaxis de 1 valor : border-width: 1em — El valor único representa todos los bordes
   Border 2	La sintaxis de 2 valores : border-width: 1em 2em — El primer valor representa los bordes verticales, es decir superior e inferior, el segundo los horizontales, es decir, los bordes izquierdo y derecho.
   Border 3	La sintaxis de 3 valores : border-width: 1em 2em 3em — El primer valor representa el borde superior, el segundo, el horizontal, es decir, izquierda y derecha, unos, y el tercer valor representa el borde inferior
   Border 4	La sintaxis de 4 valores : border-width: 1em 2em 3em 4em — Los cuatro valores representan los bordes superior, derecho, inferior e izquierdo respectivamente, siempre en ese orden, es decir, en el sentido de las agujas del reloj, comenzando por la parte superior (la letra inicial de Superior-Derecha-Inferior-Izquierda coincide con la orden de las consonantes de la palabra problema : TRBL)

ii: De manera similar, las abreviaturas que manejan las propiedades relacionadas con las esquinas de un cuadro, como border-radius (en-US) , siempre usan una sintaxis consistente de 1 a 4 valores que representan esas esquinas:

border-radius: 1em	La sintaxis de 1 valor : border-radius: 1em — El valor único representa todas las esquinas
border-radius: 2em	La sintaxis de 2 valores : border-radius: 1em 2em — El primer valor representa las esquinas superior izquierda e inferior derecha, el segundo las esquinas superior derecha e inferior izquierda.
border-radius: 3em	La sintaxis de 3 valores : border-radius: 1em 2em 3em — El primer valor representa la esquina superior izquierda, el segundo las esquinas superior derecha e inferior izquierda y el tercer valor la esquina inferior derecha
border-radius: 4em	La sintaxis de 4 valores : border-radius: 1em 2em 3em 4em — Los cuatro valores representan las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda respectivamente, siempre en ese orden, es decir, en el sentido de las agujas del reloj, comenzando por la parte superior izquierda.