W3C home > Mailing lists > Public > www-style@w3.org > April 2013

Re: [css4-background] use cases for 'border-corner-shape'?

From: Lea Verou <lea@w3.org>
Date: Fri, 5 Apr 2013 05:42:52 +0300
Cc: Liam R E Quin <liam@w3.org>, www-style@w3.org
Message-Id: <56BCE6B1-8654-4810-B0D7-0750D2A6FAD1@w3.org>
To: L. David Baron <dbaron@dbaron.org>
Here are a few more use cases, provided by the community:

http://battle.net/
https://dl.dropbox.com/u/1077344/Screenshots/katushkin.png
https://dl.dropbox.com/u/1077344/Screenshots/yandexcom.png
https://dl.dropbox.com/u/1077344/Screenshots/auto.png
https://dl.dropbox.com/u/1077344/Screenshots/apple-store.png
https://dl.dropbox.com/u/1077344/Screenshots/branded2.png
https://dl.dropbox.com/u/1077344/Screenshots/branded-3.png
https://dl.dropbox.com/u/1077344/Screenshots/mono.png
http://joepaulsonmusic.com/
https://securecdn.disqus.com/uploads/mediaembed/images/463/3685/original.jpg
https://dl.dropbox.com/u/21513714/border.png *
https://www.dropbox.com/sh/72jn0mif59hbmlh/XVp6-p5IJ1 *
http://html5please.com/ for https://securecdn.disqus.com/uploads/mediaembed/images/466/1735/original.jpg
https://securecdn.disqus.com/uploads/mediaembed/images/464/6513/original.jpg
https://securecdn.disqus.com/uploads/mediaembed/images/463/3692/original.jpg
http://www.fuenfbisneun.de/
http://css-tricks.com/triangle-breadcrumbs/
http://sidepodcast.com/post/australia-2013-predict-qualifying
https://github-notifications.herokuapp.com/

* Not all of those would be solved, but many would be solved or simplified

Also, here are a few comments from authors:

Tim Hettler: seems like a chicken-egg problem. New CSS features create design opportunities.

Gareth Allison: Wow Lea, really excited about what border-corner-shape could do. Awesome!

Roman Komarov: Actually, if you'd go by any large portfolio of almost any design studio, you could find something a lot of examples where the border-corner-shape could be used (or, at least, make thing so much easier)

The most often example is arrows of any kind. Right now there are a lot of hacks and tricks to make them work, but if you'd need one with gradient, border and box-shadows — it would become really cumbersome to emulate. [...] Another thing are negative border-radiuses near tabs. Yes, with the current spec they couldn't be done with border-corner-shape alone, but — come on! — it would make things a lot easier, so you could use pseudo-elements with clear code for them instead of ugly hacks with box-shadows, clip etc. Actually, with corner-shape you could use gradients and images there, that is not possible right now without proper masking. [...] A lot of web-designers today design with CSS actually. And as they don't have those tools of border-corner-shape, they need to limit themselves when they need to do something unusual — they often want to use only things that could be made by CSS, and not by hacks. So, it's a bit of a chicken-egg problem — until there won't be a plain way to use this stuff, people wouldn't be use it often.

Nikos Zinas: On another note, I really like the whole point behind David Baron's post. Before agreeing on a feature, make sure that it solves a real world problem and not just adding it because it is cool. But yes, I agree that in this specific case, it's a feature that we need.

Jordan Pittman: I don't think I can give any websites for this type of thing but it could even be extremely useful in online magazine print-style design. We already have regions and exclusions in the works, this would be just another excellent addition that could make CSS much more powerful and give designers more variety in their designs.

Max West: The only way to do this, without adding extra images (and their http requests) is to have the border-corner-shape method available in CSS. [...] Why do so many web sites use simple rectangular and round-cornered backgrounds for logos now? Simple, because we don't have CSS border-corner-shape as a standardized alternative. It's kind of like asking "why invent the ball-point-pen, quill pens already let us write"?

Joao Beno: [...] this the right step in the direction of allowing designers to focus more on designing and less on learning how to hack css to do what they have in mind. How many times i saw designers sad over some of their ideas being "too hard to implement", or designing some diselegant css to do the trick, or even doing the project in Adobe Flash just because it was easier. [...] Designers want to spend time drawing, not typing... Choose between this and other options is like choose between draw an wikipedia svg map in Illustrator/inkscape or in notepad. Go to wikipedia and see what people choose...

Lea Verou
W3C developer relations
http://w3.org/people/all#leahttp://lea.verou.me ✿ @leaverou






On Mar 25, 2013, at 08:19, L. David Baron wrote:

> On Monday 2013-03-25 01:58 -0400, Liam R E Quin wrote:
>> On Sun, 2013-03-24 at 12:14 -0700, L. David Baron wrote:
>>> So before agreeing to accept
>>> this new feature, I'd like to see examples of Web sites that are
>>> doing what these values would do. 
>> 
>> I don't buy this argument - "before building a bridge I want to see
>> people who jump or swim across the river".
>> 
>> Adding complexity is to be avoided, but the question isn't, "is this new
>> feature something people already do without the new feature?" but, "what
>> can people do with this new feature?"
> 
> If it were truly a new feature, sure.  But it's not.  It's an easier
> shortcut for doing something that's already possible using more
> general mechanisms.  Authors can already do this in a number of
> ways:  using border-image (preferably), or using images (the way
> authors used to simulate rounded corners before border-radius).
> 
> My argument is that if there were enough demand to make this feature
> worth adding to implementations, we'd be seeing significant numbers
> of such pages in the wild.
> 
> Otherwise, authors should use existing, more general, features that
> we've added that can address these use cases along with many others
> (border-image, probably using SVG images).
> 
> -David
> 
> -- 
> 𝄞   L. David Baron                         http://dbaron.org/   𝄂
> 𝄢   Mozilla                           http://www.mozilla.org/   𝄂
> 
Received on Friday, 5 April 2013 02:43:06 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:10 UTC