La propiedad Css Display ahora es la forma acortada: display-inside / display-outside / display-list 5.10.14
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
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.
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.
 de display-inside / display-outside / display-list){kind=link}
Kseso
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
¡Me gusta más el nuevo diseño!. Sería genial si pones algunos ejemplos de: display-outside, display-inside y display-list.
ResponderEliminar¡Saludos y gracias por el aporte!
Hola Raylin
EliminarGracias.
El mejor ejemplo que se me ocurre para que comprendas los conceptos que explicitan las nuevas propiedades (conceptos ya existentes antes pero de forma implícita) es que pienses en el modelo de caja del flexbox o de las tablas.
Al declarar una caja con display: flex automáticamente se convierte en un elemento de bloque para sus hermanos y padre (display-outside) y a la vez sus hijos directos son flex ítems
O con un elemento con display: table: se comporta como un bloque en relación a sus hermanos y padre y a sus hijos los convierte en algún elemento propio de las tablas.
No me he molestado en montar ninguna demo para verificar su funcionamiento y cómo pues he supuesto que aún no estarán soportadas por ningún navegador.
Un saludo
Buen artículo.
ResponderEliminarMe quedé pensando en cómo queda el 'display:inline-block' , que es inline para afuera y block para adentro. Por no hablar de que es CSS 2.1; y no se puede eliminar.