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

xPor 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

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 Don Kseso Kseso

Comentarios: 3

  1. ¡Me gusta más el nuevo diseño!. Sería genial si pones algunos ejemplos de: display-outside, display-inside y display-list.

    ¡Saludos y gracias por el aporte!

    ResponderEliminar
    Respuestas
    1. Hola Raylin
      Gracias.

      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

      Eliminar
  2. Buen artículo.
    Me 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.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap