-
200916 Oct
The CSS Working Group just published a Last Call for Comments Working Draft of CSS Backgrounds and Borders Level 3. Please review the draft and send your feedback. We’ll be accepting comments through 17 November 2009. (Note that feature requests are likely to be deferred to CSS4.) The best place for feedback is the CSSWG’s official mailing list [email protected], but we’ll also look at any comments posted (or linked to) here on CSS3.info.
There are a couple issues we’re specifically looking for feedback on:
Rounding vs. Scaling Down
The
roundoption forbackground-repeatandborder-image-repeatresizes images to fit the nearest whole number of tiles, rather than always scaling up or always scaling down. Rounding keeps closer to the intended size and, in the case where one dimension is fixed (e.g. in ‘border-image’), keeps the image closer to the intended aspect ratio. This is almost certainly the best solution for vector images and high-resolution raster images. However, if the given image is a low-resolution raster image, it will require interpolating pixels, which can look bad. See Rounding Extremes for illustrations.The workaround is to specify a higher-resolution image (e.g. by shrinking from the original with
background-sizeorborder-image-width). Possible spec solutions include introducing a separate keyword that always scales down, and changing the algorithm so that we force scaling down whenever interpolation would be required for scaling up. So the options here are- Leave the spec as-is (always round to nearest): the workaround is good enough for me.
- Trigger forced downscaling when interpolation is needed: avoiding interpolation is important to me and I don’t mind that the exact number of tiles is unpredictable and the resulting aspect ratio might skewed a little extra.
- Default to rounding for
round, but I want an extra keyword to force downscaling in all cases (including vector images) because […]. - Something else?
Please comment on what you prefer and why. (The more specific you can be “for example, this image that I would want to use […]”, the easier it will be for us to understand your point.)
box-break naming
The previous draft included two properties for controlling behavior at box breaks (line breaks / column breaks / page breaks):
border-breakfor controlling whether the border is drawn at the break, andbackground-breakfor controlling whether the background is drawn for each box individually or for the whole element as if it were broken after painting.Hyatt suggested merging the two, so the current draft has a single
box-breakproperty instead. The two values mean, basically, “render backgrounds and borders for this box, and then slice it up” and “break the box and then render backgrounds and borders for each box individually”. The value names aren’t particularly clear, however, so we were wondering if anyone has better ideas.Conclusion
So take a look at the new draft and send us your comments! This is your last chance to give feedback on this module: if all goes well, we’ll be publishing the Candidate Recommendation in time for Christmas, and given the state of experimental implementations right now, I expect things to move rapidly from there.
You can skip to the end and leave a response.
-
Comments
-
01.
Ant says:Comment » October 17th, 2009 at 12:36 am
My suggestions:
Background-opacity, so transparency might be used for jpeg.Raster-mask and raster-mask-position (to move alpha opacity
independant of image; this is to create fancy animations).Blending-mode (like in Photoshop).
Gradients, shadows and animation for border.
-
02.
@Ant: Did you notice the “Note that feature requests are likely to be deferred to CSS4.” part?
For the round issue: I’d suggest to either leave it as is or introduce the extra keyword. The other solutions seem way too unpredictable for the designer.
I think box-break is a great idea. It takes away some of the flexibility, but very few people would utilize that flexibility anyway. The value names however are really bad indeed. Not only their meaning is a bit obscure but I also suspect ‘continuous’ will be easily misspelled by some people. What about something like break/no-break (kinda like repeat/no-repeat in background-repeat)? It’s really obvious, simple and not prone to misspellings.
-
03.
Instead of rounding image we can round box itself. For example make it narrower and higher (content must fit within it). Current solutions follow something like this way. Authors expect images to show fully without any distortions and a box with corresponding size.
-
04.
Lea Verou’s proposal of BREAK and NO-BREAK seems a very good candidate for the keywords – clear and unambiguous.
-
05.
Rounding vs. Scaling Down
– Rounding does seem to result in the best image in all of the example cases, I think this is an excellent default.
– The work around feels like just that, at work around, not a solution. From experience with automatic behaviours in the past I’m willing to bet it will eventually drive us all nuts if we don’t have a way to control this manually so I’m in favour of a keyword.
– Example: Looking at your example with the red circles, imagine the original has egg shaped dots instead of circles and that the page they’re one belongs to a company with an egg shaped logo, their designer might always want to floor the image so all the design elements are egg shaped instead of a mix of eggs and watermelons.
– If we have a key word for always rounding down I think we should have a keyword for always rounding up.
– I’d support round, round-up, and round-down before round, ceiling, and floor ;)Box-Break Naming
Is it too late to ask why the properties were split up? The header of http://forabeautifulweb.com/ seems like a case were it would be useful to have them separate (assuming, of course, the effect was achieved with columns and a darker background image in the header instead of just an opacity on the background…).As for names:
– inside and outside? ** I like this best of my ideas
– single-box and multiple-box?
– one and many?I haven’t got time to look at the draft, I really appreciate you singling out places that need a little more attention! It motivates me ;)
-
06.
The 9-Box-Scaling Method already implemented in the boder-image property would sometimes be handy for ragular background-images.
-
07.
Regarding “Rounding vs. Scaling Down”
I would prefer having “round” as default and extra keywords to force the behavior.
I believe that the “round”, as default, will be good enough in most cases, but leaving the specific cases left with unpredictable scaling and specially pixels interpolation sounds pretty bad to me.
Therefore I would enjoy having extra keywords to force the behavior, and as mentioned by Stephanie I would prefer round-up / round-down than ceiling / floor
Thanks for your excellent work,
-
08.
Ant’s first suggestion is exactly what I tried to get included in CSS for years. Many comments on the Web argue in the same way. We already have the opacity property but it’s almost useless because it fades away the content along with the background.
background-opacity and background-image-opacity are the most needed features for CSS3. These simple properties have the potential to bring Web design to a whole new level. If CSS3 misses this oportunity, then CSS3 will have failed it’s mission.
-
09.
Emil Ivanov says:Comment » October 20th, 2009 at 4:03 pm
I would like to see another method for transparency like rgba/hsla but for using the existing hex colors, html color names and background images.
Something like that:
background-color:#483D8B opacity(0.5);
background-color:DarkSlateBlue opacity(0.5);
background-image:url(image) opacity(0.5),
url(another_image) opacity(0.3),
url(another_image) opacity(0.5); -
10.
I would like the following enhancement:
The ability to use at-rules inside the image url to indicate the location of a data URI in a TXT or HTML file as in MHTML, like this:
/* CSS3 Data URI*/
div { background-image: @import url(http://s3.com/data_uris.txt#flower.png); }/* MHTML URI */
div { background-image: url(mhtml:http://s3.com/data_uris.mht!flower.png); }The delimiter in the text file could be anchor name or an HTML anchor tag followed by a newline and the Data URI (data:image/png;base64,R0lGODl…)
-
11.
@Lea But in either case, the box will break. It’s not like white-space where nobreak prohibits breaking…
-
12.
For box-break, maybe something like “flow” and “seperate” ?
-
13.
@fantasai: Yeah, I guess you’re right, with (no-)break people could think that this works like page-break-inside is supposed to :-(
Hmmm, perhaps box-split as the property name and split/no-split as the values? I mean, the box breaks in both cases, but it doesn’t get split into 2 separate boxes in both of them… I think something like box-XXXX as the name and XXXX/no-XXXX as the values will work best, we just have to find XXXX :p -
14.
For box-break, what do people think of ‘slice’ and ‘separate’?
box-break: slice;
/* Draw backgrounds and borders as if box was not broken, then slice it into pieces */
box-break: separate;
/* Draw backgrounds and borders separately for each box: separate, then draw */ -
15.
Rounding vs. Scaling Down: Leave the spec as-is (always round to nearest): the workaround is good enough for me.
It seems like the additional workaround of adjusting your box width and/or height in order to effectively force a scale UP or DOWN is sufficient.
-
16.
box-break: broken;
box-break: unbroken;box-break: interrupt;
box-break: no-interrupt;box-break: carve;
box-break: no-carve;box-break: divide;
box-break: no-divide;box-break: slice;
box-break: no-slice;box-break: extend;
box-break: no-extend;background-opacity would be a nice addition to the spec, as others have expressed.
-
17.
[…] Borders Module Level 3 working draft. A recent CSS3.info post did a nice job of pointing out the specific sections of the spec they’d like feedback on, and provide you with a spot to leave that feedback. You have until November 17th, 2009 to share […]
-
18.
@Emil: I think background-image-opacity would be a better integration. I suggest something like urla(url, alpha) similar to hsla and rgba but that force using quotes for urls…
about bgs: I am not a big fan of workarounds like the one described in the article. I believe the best solution is to add a new keyword to force downscaling.
about breaks: I believe Bill is naming them right, but thats not my forte.
-
19.
Ant said: “Background-opacity, so transparency might be used for jpeg.”
THIS. Yes. THIS. It’s certainly time!
-
20.
The 9-Box-Scaling Method already implemented in the boder-image property would sometimes be handy for ragular background-images.
-
21.
Hi Fantasai,
Nice article, May be I might be asking something off-topic but
If the border is having radius such that the border is round may be a disc shape and if I need to apply border image to the circle is it possible as the border image is coming as square.Thanks & Regards,
Sagar S. Ranpise -
22.
@Sangar
Yes — the border-radius property does not affect how border-image is applied to the box in any way. -
23.
patrick says:Comment » February 17th, 2010 at 12:31 pm
im most worried about because still IE is not getting edge with css3. but css3 is damn good for web designer if css3 gets good browser compatibility there is massive change in website im sure more over css programmer good reward.
-
24.
Ken says:Comment » February 22nd, 2010 at 8:24 pm
Crap, missed last call… background-position-y and background-position-x should've been added to a spec.
-
25.
Venk says:Comment » June 10th, 2010 at 2:31 pm
Border-radius: create rounded corners with CSS!
I am really happy about this code but main purpose of IE8 not support this css so kindly feed the solution.
-
26.
CSS WG Blog – CSS3 Backgrounds and Borders Last Call for Comments says:Comment » September 23rd, 2011 at 1:32 am
[…] The CSS Working Group just published a Last Call for Comments Working Draft of CSS Backgrounds and Borders Level 3. Please review the draft and send your feedback. We’ll be accepting comments through 17 November 2009. (Note that feature requests are likely to be deferred to CSS4.) The best place for feedback is the CSSWG’s official mailing list [email protected], but we’ll also look at any comments posted (or linked to) from the cross-post on CSS3.info. […]
-
27.
@Lea But in either case, the box will break. It’s not like white-space where nobreak prohibits breaking…
-
28.
-
01.
