Editores de formas CSS | Programar Plus

Firefox 62 saldrá de la versión beta el 5 de septiembre. Lo más notable para los desarrolladores de CSS es que ahora admitirá la propiedad shape-outside con polygon(), circle()y ellipse()uniéndose a Chrome y Safari.

Lo bueno de la versión de Firefox (bueno, ya es bueno si usa algo como Firefox Developer Edition, que ya está en la 62), es que tiene un editor de formas integrado en DevTools.

Soportes de Chrome shape-outside también, pero no existe un asistente de DevTools nativo para trabajar con ellos. Afortunadamente, Razvan Caliman tiene un complemento de Chrome que hace un gran trabajo. (Escuché que Razvan también contribuyó a la versión de Firefox).

Disfruto usando shape-outside ya que puede agregar un interés visual real a una página que aún no está exagerada ni está de moda. Además, en muchos casos, no importa si es compatible porque el flotador se comporta como un rectángulo. Si causa problemas importantes, puede envolver las cosas en un @supports bloquear y hacer algo diferente.

@supports (shape-outside: circle(50%)) {
  img {
    /* Only round the image if we can float around it too, otherwise leave it square. */
    shape-outside: circle(50%);
    border-radius: 50%;
  }
}

Sin embargo, tengo algunas quejas tanto con Firefox DevTools como con el complemento de Chrome …

  • Ojalá fuera más fácil agregar un nuevo shape-outside a un elemento existente. Puede hacerlo, pero debe agregar manualmente algo como shape-outside: polygon(0 0, 10px 0, 20px 0); o algo al elemento para iniciar la herramienta, luego comience a usarlo.
  • Desearía que trabajaran con % por defecto en lugar de px unidades.

Ese segundo en particular. Es tan común que dimensionemos las cosas de manera flexible en estos días que los valores de píxeles duros a veces son inútiles y difíciles de convertir en porcentajes flexibles.

Probablemente sea mejor comenzar con Clippy de Bennett Feely (técnicamente es para clip-pathpero incluye polygon() funciona funciona para cualquiera. Funciona con porcentajes, genial, avanzando desde allí.

“Las frustraciones de usar formas CSS y exclusiones CSS”

Eso es lo que recientemente escribió Ben Frain en su blog y tiene algunos puntos positivos sobre todo esto. Un punto clave es que usar shape-outside no significa necesariamente que esté recortando el fondo. Personalmente, encuentro que estoy cortando una forma en fondos que son transparentes de todos modos, pero entiendo el punto.

Para solucionar este problema, necesitará un clip-path también.

El otro grande es que no hay shape-inside() propiedad (todavía), por lo que si espera poner algo de texto dentro de una forma en lugar de que se ajuste al exterior de una forma, todavía no ha tenido suerte.

(Visited 6 times, 1 visits today)