#фишка дня от Гарри Робертса aka csswizardry.com

Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь: shape-outside.

Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.

Тем не менее, иногда надо. И поэтому, спешу напомнить: shape-outside нынче очень хорошо поддерживается и если вам нужно оформлять тексты, книги и статьи — самое время!

Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!

Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.

Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.

Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae

Важный момент, это правило shape-margin, без него текст начинает прилипать к объекту.

Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/

Весьма интересный обзор проблем протокола HTTP/2, если что.

#css #shape #img #бородач

Будни разработчика

#фишка дня от Гарри Робертса aka csswizardry.com

Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь: shape-outside.

Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.

Тем не менее, иногда надо. И поэтому, спешу напомнить: shape-outside нынче очень хорошо поддерживается и если вам нужно оформлять тексты, книги и статьи — самое время!

Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!

Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.

Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.

Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae

Важный момент, это правило shape-margin, без него текст начинает прилипать к объекту.

Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/

Весьма интересный обзор проблем протокола HTTP/2, если что.

#css #shape #img #бородач

hottg.com/htmlshit/3596

3.4K viewsSergey Bekharsky, edited  Apr 30 at 06:18