Firefox 62 wird am 5. September aus der Beta-Phase veröffentlicht. Für CSS-Entwickler ist die wichtigste Neuerung die Unterstützung der Eigenschaft shape-outside mit polygon(), circle() und ellipse(). Damit ziehen sie mit Chrome und Safari gleich.
Das Schöne an der Firefox-Version (nun ja, eigentlich ist sie schon jetzt schön, wenn man etwas wie Firefox Developer Edition verwendet, das bereits auf Version 62 läuft) ist, dass sie einen Shape-Editor direkt in den DevTools integriert hat.
Auch Chrome unterstützt shape-outside, aber es gibt keine native DevTools-Hilfe für die Arbeit damit. Glücklicherweise hat Razvan Caliman ein Chrome-Plugin, das gute Arbeit leistet. (Ich höre, Razvan hat auch zur Firefox-Version beigetragen.)
Ich nutze shape-outside gerne, da es einer Seite echtes visuelles Interesse verleihen kann, das noch nicht übermäßig verwendet oder zu trendy ist. Außerdem ist es in vielen Fällen egal, ob es unterstützt wird, da der Float sich wie ein Rechteck verhält. Wenn es größere Probleme verursacht, kann man die Dinge in einen @supports-Block packen und etwas anderes tun.
@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%;
}
}Ich habe jedoch ein paar Beschwerden bezüglich sowohl der Firefox DevTools als auch des Chrome-Plugins…
- Ich wünschte, es wäre einfacher,
shape-outsidezu einem vorhandenen Element *hinzuzufügen*. Man kann es tun, aber man muss manuell etwas wieshape-outside: polygon(0 0, 10px 0, 20px 0);oder Ähnliches zum Element hinzufügen, um das Werkzeug zu starten und es dann zu verwenden. - Ich wünschte, sie würden standardmäßig mit
%anstatt mitpx-Einheiten arbeiten.
Besonders die zweite Sache. Es ist heutzutage so üblich, Dinge flexibel zu dimensionieren, dass harte Pixelwerte manchmal nutzlos und schwer in flexible Prozente umzuwandeln sind.
Wahrscheinlich ist es besser, mit Bennett Feelys Clippy zu beginnen (es ist technisch für clip-path gedacht, aber es enthält polygon() und funktioniert für beides. Es funktioniert mit Prozentangaben, also großartig, weiter geht's von dort.
„Die Frustrationen bei der Verwendung von CSS Shapes und CSS Exclusions“
Das hat Ben Frain kürzlich bloggt und es enthält einige gute Punkte zu all dem. Ein wichtiger Punkt ist, dass die Verwendung von shape-outside nicht unbedingt bedeutet, dass der Hintergrund beschnitten wird. Persönlich finde ich, dass ich auf Hintergründen, die sowieso transparent sind, eine Form ausschneide, aber ich verstehe den Punkt.
clip-path.Das andere große Problem ist, dass es keine shape-inside()-Eigenschaft gibt (noch). Wenn Sie also hoffen, Text innerhalb einer Form zu platzieren, anstatt ihn um die Außenseite einer Form herum fließen zu lassen, haben Sie bisher Pech.
Ist das also ein Plugin, das Bilder in SVG konvertiert?
Es wird tatsächlich eine native Funktion in Firefox sein, die CSS-Shapes unterstützt – so wird sie die Werte der Eigenschaft
shape-outsiderendern können, wie z. B.circle,polygonundellipse.Chrome hat eine Erweiterung, die dies auch zu seinen DevTools hinzufügt. :)
Ich finde, ein großer Nachteil von shape-outside ist, dass es nur mit Floats funktioniert und somit jegliche Flex- oder Grid-Items bricht, was derzeit ein ziemlicher Standard im Layout ist. Wenn man zum Beispiel Text am unteren Rand eines Containers ausrichten und gleichzeitig mit shape-outside formen möchte, wird dies mit reinem CSS fast unmöglich.
„Das andere große Problem ist, dass es keine
shape-inside()-Eigenschaft gibt (noch nicht), also wenn Sie hoffen, Text innerhalb einer Form zu platzieren, anstatt ihn um die Außenseite einer Form herum fließen zu lassen, haben Sie bisher kein Glück.“Ein möglicher (und vorerst umständlicher) Workaround wäre es, ein paar von mir als „shaping divs“ bezeichnete Elemente links und rechts neben unseren Text zu setzen.
Vielen Dank für die netten Worte über die Editoren und für die Funktionsvorschläge!
Eine kleine Anmerkung: Wenn Sie in den Firefox Shape Path Editor auf eine Polygonkante doppelklicken, verwendet der neu eingefügte Punkt standardmäßig Prozenteinheiten. Sie haben Recht, dass die CSS Shapes Editor-Erweiterung für Chrome standardmäßig Pixel verwendet. Wir haben über eine robuste Lösung nachgedacht, bei der die Standardeinheiten für neue Punkte von den bereits in der Form definierten geerbt würden, aber das haben wir noch nicht implementiert.
Eine großartige Anregung, die integrierte Möglichkeit zu haben, von einer einfachen Form aus zu beginnen. Die Chrome-Erweiterung hat dies: Es ist das „Plus“-Symbol neben dem „Zeiger“-Symbol, das zum Auslösen des Pfad-Editors verwendet wird. Der Firefox Shape Path Editor hat diese Funktion noch nicht, aber wir planen, sie bald hinzuzufügen.