Safari 9 para OS X 10.11 El Capitan e iOS 9: mejoras para el diseño web

Estos cambios están relacionados con Javascript y el soporte para CSS.

Mejoras en ECMAScript 6

Se han añadido las siguientes mejoras al soporte de ECMAScript 6, el estándar que seguirá JavaScript a partir de junio de 2015:

  • Classes
  • Computed Properties
  • Weak Set
  • Number Object
  • Octal y Binary Literals
  • Symbol Objects
  • Template Literals

Soporte para las tipografías del sistema

Ahora, con la tipografía San Francisco que cambia de forma automática entre las dos versiones de pantalla para acomodar texto, es factible usar reglas CSS específicas para cambiar de forma inteligente entre estas tipografías.

La regla básica es:

font-family: -apple-system, sans-serif;

Y, adicionalmente, para los desarrolladores web y en el caso exclusivamente de iOS, se añaden estas propiedades:

font: -apple-system-body;

font: -apple-system-headline;

font: -apple-system-subheadline;

font: -apple-system-caption1;

font: -apple-system-caption2;

font: -apple-system-footnote;

font: -apple-system-short-body;

font: -apple-system-short-headline;

font: -apple-system-short-subheadline;

font: -apple-system-short-caption1;

font: -apple-system-short-footnote;

font: -apple-system-tall-body;

Safari, al respecto del uso de CSS, también añade soporte para primera letra capital, usando la propiedad acompañada de 2 cifras para determinar la cantidad de líneas al as que afecta:

initial-letter: 3 3;

Mejoras al uso de CSS

Los siguientes selectores de CSS4 ahora están soportados en su totalidad en Safari:

  • Case-insensitive attribute selectors,
  • :any-link,
  • :lang,
  • :matches,
  • :not,
  • :nth-child,
  • :placeholder-shown,

y además se elimina el prefijo -webkit- de las siguientes propiedades:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • animation
  • cursor: zoom-in
  • cursor: zoom-out
  • perspective
  • perspective-origin
  • transform
  • transform-origin
  • transform-style
  • @keyframes
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-play-state
  • animation-delay
  • animation-fill-mode
  • order
  • align-content
  • align-items
  • align-self
  • justify-content
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • break-after
  • break-before
  • break-inside
  • columns
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • alt

Deja una respuesta