5 ms·

First Look At The CSS object-view-box Property

26 points by shadeed9 4y ago

deleted 4y ago
[deleted]
test1235 4y ago
>Image how this will be useful for being able to zoom an image, OP: typo in the zoom section
- deleted 4y ago
  [deleted]
TekMol 4y ago
What's wrong with using an HTML element to crop an image? Why do we need a new proprty for this?
- tomschwiha 4y ago
  I mean in theory we don't need the color attribute either. We could place thousand little divs with a background color above our text to color it.. .. however the proposed property seems to solve a common use case so I guess it's good its there now.
  - jhgb 4y ago
    I can't help but feel that there's some redundancy between this and CSS transformations. This is basically some kind of affine transformation of the contents of an element with additionally clipping everything that falls outside of the original screen extent of that element. This shouldn't even need an additional element. Such a thing wasn't previously possible? I'm no HTML/CSS expert but I'd be disappointed if it weren't, seeing as clipping your drawing by a shape (commonly rectangular) has been a big thing in graphical programming for quite some time.
xcambar 4y ago
Can someone here help me find a proper use case for this? I mean, one beyond "I want to do everything in CSS and I don't care if I waste bandwidth and energy resources, let's crop this image a million times in every browser just because we can".
- TekMol 4y ago
  Go to AirBnB. On the homepage you will see a bunch of premises. Right click "Open image in a new tab". Boom, you see the full image. On the home page, you only saw a cutout of the image. Now imagine going to AirBnB and changing their workflow so that the server sends the right cutout. It would be a nightmare. As it is, a frontend guy can change the cutout, do a/b tests with different cutouts, change the cutout dynamically based on window size, change the cutout when the image is displayed on different pages etc etc. Try to set all of that up by talking to the frontend guys and the backend guys and try to get to a situation so that the frontend talks to the backend in a fashion that the frontend guys can easily do what they do now and the backend responds with the right images. Good luck :)
  - ThatMedicIsASpy 4y ago
    So its a 'I don't care about your traffic limit' kind of thing.
    - hombre_fatal 4y ago
      Well, let's dig into this. Serving N images all cropped slightly differently isn't going to save bandwidth over serving an image one time, caching it, and then doing slightly different cropping in the browser. Airbnb's homepage images only seem to be 50-90KB per image. And they already do some image resizing: https://a0.muscache.com/im/pictures/prohost-api/Hosting-48509375/original/0862735b-4abc-4d87-a8d1-f2fb6053adc8.jpeg?im_w=720 https://a0.muscache.com/im/pictures/prohost-api/Hosting-4850... vs. https://a0.muscache.com/im/pictures/prohost-api/Hosting-48509375/original/0862735b-4abc-4d87-a8d1-f2fb6053adc8.jpeg?im_w=1440 https://a0.muscache.com/im/pictures/prohost-api/Hosting-4850... If you compare the slightly cropped homepage images to their uncropped versions, you just aren't saving a bunch of bandwidth by serving static crops, especially since you need new crops once the user clicks in to property pages. Finally, images (1.3MB) only account for 10% of airbnb's homepage transfer in desktop Chrome (13MB total) and 2% in desktop Safari (60MB total... content blocker bug?). Images seem to be the least of their worries.
jjcm 4y ago
On one hand, this is something easily done with a parent div, some positioning, and overflow hidden. Probably not worth adding to the spec for such a specific use case. On the other hand, I do like that this unifies the functionality of svgs and other html elements more. We’ve been seeing svg-like additions to css for a while now, and they’ve been welcome. Overall I suppose I’m happy for more consistency even if I won’t be using this except in niche cases.
- dgb23 4y ago
  What you’re describing is one of the possible workarounds, yes. Veterans have become accustomed to doing these things over the years. But generally speaking I think that this kind of feature is very useful. It conveys intent, so browsers can optimise things if they choose, and developers get to have cleaner code for free. Secondly there’s plenty of devs and future devs out there who appreciate that there’s a clear way to do this. Workarounds always have caveats and don’t necessarily play nicely with other features.
blenderdt 4y ago
Some CMSs (ProcessWire) have an option to set a focus point on an image. This is very useful for responsive designs where images are cropped. With a focus point you can keep the important part of the image in view. So a pro tip for all CMS developers: make it possible for the user (or automate it with AI) to mark the important point of an image so it can be used in the object-view-box property.
- moribunda 4y ago
  This feature is also built in in the WordPress core editor.
baloki 4y ago
Although cool, it kind of ignores the responsive design-ness of modern websites if I’ve understood the implementation correctly? Everything seems based off knowing the exact size of the original and the new container, so if the proportions of the container change, so will the clipping? Could probably fix with a lot of breakpoints and the like, but it feels like it would be better generating a cropped version of the image beforehand instead of using this.
- dgb23 4y ago
  You typically don’t have a lot of breakpoints for image sizes. Maybe 2-4 is typical. But yes, since you already know the possible proportions and sizes you want to resize/crop/scale etc. on the server, and deliver the correct image via a picture element. The browser then fetches exactly what it needs. This css property is however useful if you want something more dynamic and you don’t know or don’t care to know beforehand how the image will be cropped.

26 points by shadeed9 4y ago

deleted 4y ago

[deleted]

test1235 4y ago

>Image how this will be useful for being able to zoom an image, OP: typo in the zoom section

deleted 4y ago
[deleted]

TekMol 4y ago

What's wrong with using an HTML element to crop an image? Why do we need a new proprty for this?

tomschwiha 4y ago
I mean in theory we don't need the color attribute either. We could place thousand little divs with a background color above our text to color it.. .. however the proposed property seems to solve a common use case so I guess it's good its there now.
- jhgb 4y ago
  I can't help but feel that there's some redundancy between this and CSS transformations. This is basically some kind of affine transformation of the contents of an element with additionally clipping everything that falls outside of the original screen extent of that element. This shouldn't even need an additional element. Such a thing wasn't previously possible? I'm no HTML/CSS expert but I'd be disappointed if it weren't, seeing as clipping your drawing by a shape (commonly rectangular) has been a big thing in graphical programming for quite some time.

xcambar 4y ago

Can someone here help me find a proper use case for this? I mean, one beyond "I want to do everything in CSS and I don't care if I waste bandwidth and energy resources, let's crop this image a million times in every browser just because we can".

TekMol 4y ago
Go to AirBnB. On the homepage you will see a bunch of premises. Right click "Open image in a new tab". Boom, you see the full image. On the home page, you only saw a cutout of the image. Now imagine going to AirBnB and changing their workflow so that the server sends the right cutout. It would be a nightmare. As it is, a frontend guy can change the cutout, do a/b tests with different cutouts, change the cutout dynamically based on window size, change the cutout when the image is displayed on different pages etc etc. Try to set all of that up by talking to the frontend guys and the backend guys and try to get to a situation so that the frontend talks to the backend in a fashion that the frontend guys can easily do what they do now and the backend responds with the right images. Good luck :)
- ThatMedicIsASpy 4y ago
  So its a 'I don't care about your traffic limit' kind of thing.
  - hombre_fatal 4y ago
    Well, let's dig into this. Serving N images all cropped slightly differently isn't going to save bandwidth over serving an image one time, caching it, and then doing slightly different cropping in the browser. Airbnb's homepage images only seem to be 50-90KB per image. And they already do some image resizing: https://a0.muscache.com/im/pictures/prohost-api/Hosting-48509375/original/0862735b-4abc-4d87-a8d1-f2fb6053adc8.jpeg?im_w=720 https://a0.muscache.com/im/pictures/prohost-api/Hosting-4850... vs. https://a0.muscache.com/im/pictures/prohost-api/Hosting-48509375/original/0862735b-4abc-4d87-a8d1-f2fb6053adc8.jpeg?im_w=1440 https://a0.muscache.com/im/pictures/prohost-api/Hosting-4850... If you compare the slightly cropped homepage images to their uncropped versions, you just aren't saving a bunch of bandwidth by serving static crops, especially since you need new crops once the user clicks in to property pages. Finally, images (1.3MB) only account for 10% of airbnb's homepage transfer in desktop Chrome (13MB total) and 2% in desktop Safari (60MB total... content blocker bug?). Images seem to be the least of their worries.

jjcm 4y ago

On one hand, this is something easily done with a parent div, some positioning, and overflow hidden. Probably not worth adding to the spec for such a specific use case. On the other hand, I do like that this unifies the functionality of svgs and other html elements more. We’ve been seeing svg-like additions to css for a while now, and they’ve been welcome. Overall I suppose I’m happy for more consistency even if I won’t be using this except in niche cases.

dgb23 4y ago
What you’re describing is one of the possible workarounds, yes. Veterans have become accustomed to doing these things over the years. But generally speaking I think that this kind of feature is very useful. It conveys intent, so browsers can optimise things if they choose, and developers get to have cleaner code for free. Secondly there’s plenty of devs and future devs out there who appreciate that there’s a clear way to do this. Workarounds always have caveats and don’t necessarily play nicely with other features.

blenderdt 4y ago

Some CMSs (ProcessWire) have an option to set a focus point on an image. This is very useful for responsive designs where images are cropped. With a focus point you can keep the important part of the image in view. So a pro tip for all CMS developers: make it possible for the user (or automate it with AI) to mark the important point of an image so it can be used in the object-view-box property.

moribunda 4y ago
This feature is also built in in the WordPress core editor.

baloki 4y ago

Although cool, it kind of ignores the responsive design-ness of modern websites if I’ve understood the implementation correctly? Everything seems based off knowing the exact size of the original and the new container, so if the proportions of the container change, so will the clipping? Could probably fix with a lot of breakpoints and the like, but it feels like it would be better generating a cropped version of the image beforehand instead of using this.

dgb23 4y ago
You typically don’t have a lot of breakpoints for image sizes. Maybe 2-4 is typical. But yes, since you already know the possible proportions and sizes you want to resize/crop/scale etc. on the server, and deliver the correct image via a picture element. The browser then fetches exactly what it needs. This css property is however useful if you want something more dynamic and you don’t know or don’t care to know beforehand how the image will be cropped.