soy Kseso y esto EsCSS

La propiedad Css Display ahora es la forma acortada: display-inside / display-outside / display-list

Introducción al nuevo documento CSS Display Module Level 3 y la transformación de la propiedad Display en la forma acortada (shorthand) de display-inside / display-outside / display-list

La propiedad Css Display ahora es la forma acortada: display-inside / display-outside / display-list

·Por Kseso ✎ 3

La propiedad display, introducida en CSS 2.1, define qué tipo de caja genera un elemento (o si no las genera en absoluto), y cómo se conforma su contenido.

Estos dos conceptos en la actualidad se ven como independientes, pese a que en la propiedad display estén fusionados en uno solo.

El documento CSS Display Module Level 3 [11 Septiembre 2014] incluye la definición de la propiedad display de Css2.1 y además la reconvierte en la forma acortada (shorthand) de declarar un grupo de nuevas propiedades (longhands), cada una de las cuales controla un aspecto relacionado con la visualización o tipo de elemento.

 Street-railroads
Origen y crédito imagen: [1]

Este nuevo documento desglosa la propiedad display en tres nuevas. Cada una de ellas aplica y controla un aspecto concreto del tipo de caja generada por el elemento y sus contenidos.

Básicamente establece dos nuevas ideas o tipo de caja generada (box layout) por el mismo elemento: una exterior (o cómo es visto el elemento por sus hermanos y padre) y otra interior que afecta a su contenido.

La propiedad display-inside

La propiedad display-inside especifica el tipo de caja interior que genera el elemento. Esto afecta al tipo de caja exterior que son sus hijos directos.

Esto es más fácil de comprender que explicar al ver los valores (ya definidos en otros documentos de Css) que acepta la propiedad display-inside y pensando en los modelos de layout (nuevos o veteranos): como el flexbox o el table que llevan implícito el tipo de caja que son sus hijos

  • auto
  • block
  • table
  • flex
  • grid
  • ruby

Se puede declarar a todos los elementos en todos los media type, su valor inicial es auto y no se hereda.

Block
El elemento compone las "cajas exteriores" de sus hijos usando el block layout [CSS2.1]

Table
El elemento compone las "cajas exteriores" de sus hijos usando el table layout [CSS2.1]

Flex
El elemento compone las "cajas exteriores" de sus hijos usando el flex layout [CSS3-FLEXBOX]

Grid
El elemento compone las "cajas exteriores" de sus hijos usando el Grid layout [CSS3-GRID-LAYOUT]

Ruby
El elemento compone las "cajas exteriores" de sus hijos usando el Grid layout [CSS3-RUBY]

La propiedad display-outside

Define el tipo de display exterior o por fuera del elemento y por lo tanto controla la relación o efectos del elemento con su padre y/o hermanos.

Al igual que la anterior, se puede declarar a todos los elementos en todos los media type, su valor inicial es inline-level y no se hereda.

Los valores admitidos son:
block-level | inline-level | run-in | contents | none | table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container

La propiedad display-list

El elemento es un ítem de lista y genera el pseudoelemento ::marker

Los valores posibles son none (valor inicial) y list-item. Se puede declarar a todos los elementos y en todos los media. Tampoco se hereda.

Propiedad Display de forma acortada

Si se define de forma acortada la propiedad display su desglose por el navegaro u orden de las declaraciones es:
[ <‘display-inside’> || <‘display-outside’> || <‘display-list’> ]

En caso de faltar alguno, esta tabla muestra las relaciones y valores en función de qué valor se declare y/o se omita.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso