Índice de contenidos

Información del post ⇣

"Follow up", seguimiento de nuevas caracteristicas en css y html

Los posts dentro de la categoría nuevo en css describen funcionalidades que aún no están disponibles en todos los navegadores o su soporte es muy reciente. Es conveniente asegurarse antes de usarlo en producción o apliciar los fallbacks necesarios.

Nuevas características de html y css a las que hay que seguir la pista.

font-size-adjust

The font-size-adjust CSS property provides a way to modify the size of lowercase letters relative to the size of uppercase letters, which defines the overall font-size. This property is useful for situations where font fallback can occur.

Data on support for the font-size-adjust feature across the major browsers from caniuse.com

nth-of-type(of)

The newest versions of :nth-child() and :nth-last-child() accept an optional of S clause which filters the children to only those which match the selector list S. For example, :nth-child(1 of .foo) selects the first child among the children that have the foo class (ignoring any non-foo children which precede that child). Similar to :nth-of-type, but for arbitrary selectors instead of only type selectors.

Data on support for the mdn-css__selectors__nth-of-type feature across the major browsers from caniuse.com

color-mix()

The color-mix() functional notation takes two colors values and returns the result of mixing them in a given colorspace by a given amount.

media queries: range syntax

Mejoras en la sintaxis para que las media queries puedan usar las características de rango (como ancho o alto) más fácil de entender. Se podrán usar con operadores matemáticos comunes <, >, >=, o <=.

Data on support for the css-media-range-syntax feature across the major browsers from caniuse.com

light-dark()

The light-dark() CSS color function enables setting two colors for a property - returning one of the two colors options by detecting if the developer has set a light or dark color scheme or the user has requested light or dark color theme

field-sizing

@scope

Data on support for the css-cascade-scope feature across the major browsers from caniuse.com

Container queries

Data on support for the css-container-queries feature across the major browsers from caniuse.com

:modal

@layer

Data on support for the css-cascade-layers feature across the major browsers from caniuse.com

Css nesting

Data on support for the css-nesting feature across the major browsers from caniuse.com

Scroll driven animations

text-wrap:balance

Data on support for the css-text-wrap-balance feature across the major browsers from caniuse.com

text-box-trim & text-box-edge

Data on support for the css-text-box-trim feature across the major browsers from caniuse.com

view transitions

Data on support for the view-transitions feature across the major browsers from caniuse.com