Note from 19 January 2021

Is there some sort of shape-outside: self; in CSS, to use an image as it's own shape? 🤔

I couldn't find it in any docs, but it would be really useful to not declare the same URL twice.

3 reactions

2 replies

Nicolas Hoizey
I guess an idea could be to use CSS3 `attr()` with the `url` type:
https://drafts.csswg.org/css-values-4/#valdef-attr-urlBut it's not supported anywhere… 😥
https://caniuse.com/css3-attr
CSS Values and Units Module Level 4
- 19 January 2021, 18:57
- Source
Nicolas Hoizey
BTW, in CSS Values and Units Module Level 4:
https://drafts.csswg.org/css-values-4/#valdef-attr-url:> Note: If `url()` was syntactically capable of containing functions, `attr(foo url)` would be identical to `url(attr(foo string))`.
CSS Values and Units Module Level 4
- 19 January 2021, 18:58
- Source

1 mention

Nicolas Hoizey
@css @chriscoyier this article date is May 2, 2019:
css-tricks.com/css-attr-funct…

But I see there are comments from 2017… so I guess there is something wrong with the publishing date… 😅

I was looking for ideas for
https://t.co/Hwcbl3VXUl
- 19 January 2021, 19:10
- Source

Patrick Brosset

Alignment in CSS Grid Lanes
- Nicolas Hoizey
- 13 October 2026
- CSS, Grid Lanes
[…] here is the really interesting part, aligning individual items along the stacking axis. At first sight, this might seem surprising. After all,…
Jake Archibald

Controlling when CSS custom property values are computed
- Nicolas Hoizey
- 15 September 2026
- CSS
- 2 reactions
When and how CSS custom property values are calculated might not be what you expect, and it has a big impact on your styles.
Josh W. Comeau

Scroll-Driven Animations
- Nicolas Hoizey
- 30 April 2026
- CSS, animations
- 4 reactions
The CSSWG deserves a lot of credit, in my opinion, for repurposing/extending CSS keyframe animations for scroll-driven animations. Rather than invent…
Francesco Schwarz

Overview of CSS-only scrolling shadows and content fading techniques
- Nicolas Hoizey
- 11 February 2026
- CSS
- 5 reactions
When content overflows and the scrollbar is insufficient or intentionally hidden, visual cues such as scroll shadows or fading effects signal that…
Josh Tumath

Try text scaling support in Chrome Canary
- Nicolas Hoizey
- 28 January 2026
- accessibility, em, rem, CSS
- 1 reaction
Just like how the tag tells the browser that your website is designed to work for small viewport sizes, the tells the browser, 'Hey, I've designed…