Como funcionan las Nuevas Propiedades Lógicas CSS

Las propiedades de estilos CSS son una parte importante en los proyectos que usan este lenguaje para el diseño y desarrollo de las vistas que pueden terminar siendo agradables, no agradables, perfectas, usables, etc. Sea cual sea el resultado, siempre debe haber una  vista realizada con CSS, pero se ha lanzado nuevas propiedades lógicas que cambiarán la manera en como se debe maquetar en un futuro, en este artículo queremos compartir contigo todo lo referente a las nuevas propiedades CSS.

Comúnmente se solía aplicar propiedades como margin-left, padding-right, border-top, margin-bottom, etc. pero estas propiedades pueden tener los días contados, ya que la organización W3.org ha lanzado una manera diferente de trabajar con estas propiedades, puedes ver el borrador en este enlace.

Si lo queremos ver de manera visual, sería de esta manera la forma clásica como se aplicaban las propiedades lógicas en CSS

Para trabajar con las Nuevas Propiedades Lógicas CSS debemos de cambiar la forma de pensar, sería en términos de izquierda / derecha o arriba / abajo y cambiarlos o reemplazarlos por inline-start / inline-end y block-start / block-end, visualmente sería así

Como funcionan las Nuevas Propiedades Lógicas

Las propiedades tienen un orden de lectura que empieza desde el lado izquierdo, luego pasa a la parte superior, luego al lado derecho, luego al lado inferior y termina en el lado izquierdo que fue el punto de inicio.

La nueva forma de trabajar tiene una serie de nombres diferentes, esto tiene una razón específica, podemos definirlo técnicamente de la siguiente manera en cuanto a las propiedades margin, padding y borde

Margin (Margen)

Padding (Relleno)

Border (Borde)

Conociendo la forma clásica de las propiedades lógicas CSS, en la nueva forma pasarán a ser reemplazadas por los siguientes términos

Margin (Margen)

Padding (Relleno)

Border (Borde)

Puedes ver que al lado izquierdo está la nueva forma o los nuevos términos con los que se trabajan las propiedades lógicas CSS y al lado derecho la forma clásica o el equivalente.

Si nos fijamos bien para las propiedades de arriba y abajo (top y bottom) se usa el termino block y para las propiedades del lado izquierdo y derecho se usan la etiqueta inline y para todos usamos la etiqueta de inicio y final start y end

También existen otras propiedades nuevas o términos nuevos como

Width Ancho / Height (Alto)

Min-Width / Min-Height  y Max-Width / Max-Height

Float (Flotar)

Text-align (Alinear Texto)

Existen otros términos nuevos que los iremos conociendo poco a poco.

Notas

• Puede que aún no exista compatibilidad de los Navegadores con estas nuevas propiedades lógicas, pero poco a poco deberán de irse implementando.
• Estas nuevas propiedades lógicas pueden ser implementadas oficialmente o no, esto no depende de nosotros si no de la organización que lleva a cabo el soporte de CSS.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.