Safari і Opera почали підтримку CSS Shapes слідом за Chrome

Останній місяць був хвилюючим для CSS форм. В кінці серпня почалася підтримка браузером Chrome 37, на початку вересня - Opera 24.

Що таке CSS форми? 

CSS фігури дозволяють створювати макети, подібні прикладу. Текст обтікає контур висячої лампи і стіни. Контур фігури визначається з допомогою CSS редактора форм. (Зауважте, що цей приклад використовує CSS Shapes Polyfill, тож працює працює у всіх браузерах.)

See the Pen CSS Shapes Hanging-Lamp by Adobe Web Platform (@adobe) on CodePen.

Чи є можливість користуватись вже зараз?

Так! Хоча Firefox і Internet Explorer не підтримують CSS форми, тим не менш, ви можете використовувати їх вже зараз. У браузерах, які не підтримують фігури, ви просто отримаєте стандартну поведінку.

See the Pen Monsters Intruder, no polyfill by Adobe Web Platform (@adobe) on CodePen.

Для випадків, коли використання форм є необхідним, ви можете використовувати CSS Shapes Polyfill, який підтримує безліч варіантів використання CSS форм. Цей інструмент досить розумний, щоб за потреби використовувати вбудовану функціональність форм у браузері. Ось, наприклад, попереднє демо з використанням поліфіла, з його допомогою, форми будуть виглядати однаково чудово в будь-якому браузері, підтримує він форми чи ні. Якщо порівняти демо, Ви помітите, що нічого не треба міняти, всього-навсього включити JavsScript.

See the Pen cbjsy by Adobe Web Platform (@adobe) on CodePen.

Також можна використовувати цей інструмент для чогось більш екзотичного, наприклад, імітування форм всередині зображення.

See the Pen Emulating Shape Inside with Shape Outside, with Modernizr fallback by Adobe Web Platform (@adobe) on CodePen.

Джерело