Una implementación inicial de clip-path: path();

Una cosa que me ha sorprendido (y entristecido) durante mucho tiempo es que la clip-pathpropiedad, por increíble que sea, solo requiere unos pocos valores. Las funciones circle()son ellipse()buenas, pero ocultar desbordamientos y redondear border-radiusgeneralmente ya ayuda. Quizás el valor más útil es polygon()que nos permite dibujar una forma a partir de líneas rectas en puntos arbitrarios.

Actualización : los tres motores de navegación ahora tienen clip-path: path(). ¡Genial!

Aquí hay una demostración de cada valor:

La parte triste viene cuando descubres que clip-pathno aceptas path(). ¡Vamos, tiene un camino en el nombre! La sintaxis de ruta, que proviene de SVG, es la sintaxis definitiva. Nos permite dibujar literalmente cualquier forma.

Lo que resulta más confuso es que ya existe una path()función, que es la que toman propiedades como offset-path.

Una vez quedé tan sorprendido por todo esto que lo convertí en una charla completa en una conferencia.

Se habla de la shape-outsidepropiedad y de cómo no se puede utilizar path(). También entra en juego el hecho de que podemos cambiar la dpropiedad de un literal path.

Aunque realmente no culpo a nadie. Esto es algo extraño y lo están implementando diferentes equipos, lo que inevitablemente produce resultados diferentes. Incluso el hecho de que SVG utilice valores sin unidades en la path d=""sintaxis es un poco extraño y una anomalía en CSS-land. Cómo se comporta eso, cómo se comportan los valores con unidades, qué sintaxis de coma está permitida y no permitida, y qué devuelve el DOM cuando se le pregunta es suficiente para hacerle girar la cabeza.

¡De todos modos! ¡Llega Firefox con una implementación!

¿Alguien sabe si clip-path: path() está detrás de una bandera en Chrome o algo así? Parece que no puedo encontrarlo, pero admito offset-path: path(), por lo que pensé que admitirían ambos.

Gracias amigos de @CSS y @ChromiumDev. https://t.co/YTmwcnilRB trabaja detrás de una bandera en FF. ¿Cromo?

– Estelle Weyl (@estellevw) 13 de septiembre de 2018

Apoyo

Aquí está esa bandera en Firefox ( layout.css.clip-path-path.enabled):

¡Actualizar!

Y aquí hay una demostración…

Verá un cuadrado en los navegadores no compatibles y un corazón en los que sí lo son clip-path: path();, que es solo Firefox Nightly con la bandera activada en el momento de escribir este artículo.

Ahora todo lo que necesitamos es:

• clip-pathpara poder apuntar a la URL de a pathen SVG, comourl("#clip-path");
• shape-outsidepara poder utilizarpath()
• shape-outsidepara poder señalar unpath
• offset-pathpara tomar todas las demás funciones de forma
• probablemente un montón de especificaciones para asegurarnos de que todo esto se maneje de manera limpia (¡Buena suerte, equipo!)
• Navegadores para implementarlo todo