CSS3 Corners

Freeway
1

I have been using CSS3 corners for a while now to create rounded
corners on HTML boxes. The effect is lost on IE, like so many other
things are, but I feel that rounded corners are a nice-to-have that
decorates things and makes them more friendly, rather than an absolute
requirement, so I don’t feel bad about excluding the unwashed masses
in this regard.

Here’s a new Action to automate this construction in Freeway.

http://www.actionsforge.com/projects/view/78-css3-corners

Draw an HTML box, give it a background color of some type, and apply
the Action. Enter a corner radius and preview. Magic. It even works
with borders on the box, although Firefox’s curved borders are
“rougher” in appearance than Safari’s.

In future versions, I might expose the ability to set each corner as a
different radius, but for now, quick and simple rules the day.

Please let me know what you think, and naturally if you have any
problems using it.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Cool beans Walt. Just out of curiosity, where does it put the styling on publication?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

on 17/02/2009 16:56, Walter Lee Davis at email@hidden wrote:

I have been using CSS3 corners for a while now to create rounded
corners on HTML boxes.

Thanks Walter, you’ve just saved that last strand ;~}}

Best wishes Peter

–

================================
Peter Tucker, Oxford UK email@hidden

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

It’s not working for me. Drew an html box. Background: black; border:
blue. Applied the action and set the radius and previewed. Just a
square.

FW Pro 5

Todd

On Feb 17, 2009, at 10:56 AM, Walter Lee Davis wrote:

Please let me know what you think, and naturally if you have any
problems using it.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Check that. Was using it on a page with other actions applied. Cleared
the page and it’s ok now.

On Feb 17, 2009, at 11:25 AM, Todd wrote:

It’s not working for me. Drew an html box. Background: black;
border: blue. Applied the action and set the radius and previewed.
Just a square.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

In the head of the current page.

Walter

On Feb 17, 2009, at 12:08 PM, chuckamuck wrote:

where does it put the styling on publication?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Walter, that Action was updated last month (June 2012) to fix a FireFox problem:
http://actionsforge.com/actions/view/120-css3-corners

It’s a great Action, but alas it has one major flaw: older browser compatibility. And I’m not talking just IE6 either. It doesn’t work in any Explorer version except for IE9. But considering there are still a lot of people using WinXP, they can only use up to IE8. And IE8 is not compatible with CSS3 rounded corners.

As such, since the world so stupidly still relies on MS IE as their beloved browser, for this Action to be practical, it needs to add a fall-back to PNGs.

Even without the Action, Freeway allows me to sketch an HTML box and round the corners, whether it be a layered box or not. But the problem with that approach is that it always forces the use of PNGs. The benefit of this CSS3 Action is that it doesn’t use PNGs by default. However, like I said, the problem is that it won’t use PNGs at all. So in both cases you have a problem.

I want a complete, easy solution that defaults to the display of CSS3 rounded corners, but it should cough up PNG corners for any browser that doesn’t support the CSS3 rounding. Wouldn’t it be possible to improve the Action to accomplish this? (I want the Action to generate the PNGs and fall-back code.)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

I must add that CSS3 Corners doesn’t work right when used in conjunction with CSS3 Gradients in IE9 (Win7):

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Anything that would do this would break the principle of progressive enhancement. The basic idea here is that the round-ness of the corners does not remove or add any functionality to the page, so don’t worry about IE<9 users seeing the same Web as modern browsers. Modern browsers see a modern Web, with all the gloss and beauty you can muster. Old browsers see a functional-but-less-pretty Web.

I’m not saying this is impossible, but I am saying that it’s really not worth the effort.

Walter

On Jul 20, 2012, at 12:58 AM, JDW wrote:

I want a complete, easy solution that defaults to the display of CSS3 rounded corners, but it should cough up PNG corners for any browser that doesn’t support the CSS3 rounding. Wouldn’t it be possible to improve the Action to accomplish this? (I want the Action to generate the PNGs and fall-back code.)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

How much would you be willing to pay for such an action? How much would you
be willing to pay someone else to implement your fallback strategy?

But then, why should we care about whether older browsers see rounded
corners or gradients? It doesn’t interfere with the delivery of content…
Besides, I think companies see such slavish attention to outdated browsers
as reason not to evolve and incorporate standards.

–
Ernie Simpson

On Fri, Jul 20, 2012 at 12:58 AM, JDW email@hidden wrote:

Walter, that Action was updated last month (June 2012) to fix a FireFox
problem:
CSS3 Corners - ActionsForge

It’s a great Action, but alas it has one major flaw: older browser
compatibility. And I’m not talking just IE6 either. It doesn’t work in
any Explorer version except for IE9. But considering there are still a lot
of people using WinXP, they can only use up to IE8. And IE8 is not
compatible with CSS3 rounded corners.

As such, since the world so stupidly still relies on MS IE as their
beloved browser, for this Action to be practical, it needs to add a
fall-back to PNGs.

Even without the Action, Freeway allows me to sketch an HTML box and round
the corners, whether it be a layered box or not. But the problem with that
approach is that it always forces the use of PNGs. The benefit of this
CSS3 Action is that it doesn’t use PNGs by default. However, like I said,
the problem is that it won’t use PNGs at all. So in both cases you have a
problem.

I want a complete, easy solution that defaults to the display of CSS3
rounded corners, but it should cough up PNG corners for any browser that
doesn’t support the CSS3 rounding. Wouldn’t it be possible to improve the
Action to accomplish this? (I want the Action to generate the PNGs and
fall-back code.)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Why not use some of the various JavaScript libraries that can make IE use CSS3 rather than force backward comparability in Freeway and into actions.

Have an action to load an appropriate library like http://selectivizr.com/ ?

David Owen

On 20 Jul 2012, at 05:58, “JDW” email@hidden wrote:

Walter, that Action was updated last month (June 2012) to fix a FireFox problem:
CSS3 Corners - ActionsForge

It’s a great Action, but alas it has one major flaw: older browser compatibility. And I’m not talking just IE6 either. It doesn’t work in any Explorer version except for IE9. But considering there are still a lot of people using WinXP, they can only use up to IE8. And IE8 is not compatible with CSS3 rounded corners.

As such, since the world so stupidly still relies on MS IE as their beloved browser, for this Action to be practical, it needs to add a fall-back to PNGs.

Even without the Action, Freeway allows me to sketch an HTML box and round the corners, whether it be a layered box or not. But the problem with that approach is that it always forces the use of PNGs. The benefit of this CSS3 Action is that it doesn’t use PNGs by default. However, like I said, the problem is that it won’t use PNGs at all. So in both cases you have a problem.

I want a complete, easy solution that defaults to the display of CSS3 rounded corners, but it should cough up PNG corners for any browser that doesn’t support the CSS3 rounding. Wouldn’t it be possible to improve the Action to accomplish this? (I want the Action to generate the PNGs and fall-back code.)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Walter & Ernie, thank you for your replies, but you both overlooked my second post which very clearly mentions a problem in IE9, which is by no means “an older browser.” And because so many silly folks in this planet still worship at the throne of Internet Explorer, especially here in Japan, turning up one’s nose at IE9 compatibility is something I don’t have the liberty to do.

Here it is again for you kind consideration:

CSS3 Corners doesn’t work right when used in conjunction with CSS3 Gradients in IE9 (Win7): The North Face - Locale Selector

Ernie, when it comes to payment, I think it would benefit the developer more in the long run if the Action was sold to the masses rather than just one individual being squeezed. For truly, how much can one person pay versus 50 people? But for the record, it’s not like I’ve not paid Action developers before. Paul Dunning offers some paid apps that I have purchased in the past. In most cases I need this functionality for company use, but my company won’t pay for my perfectionist quests, so I pay for those things out of my own pocket, despite the fact I have no personal use for it. But to keep a potential fee in perspective, all I am calling for is an improvement in current functionality. I consider “modern browser compatibility” a “fix” rather than “a new feature.” In other words, modern browser functionality should have been in there from the get-go, even if one strongly contends such would make the page code longer and/or be harder to develop.

But to be even more honest with you, Freeway should have this stuff built-in. What we’re really talking about here is sprucing up HTML boxes to make them look like what Steve Jobs wanted back in 1982 when the Mac was still in its conceptual stage — rounded corners, for crying out loud! Who doesn’t want that these days? And a gradient added to the mix makes it all the better. You can see just how much I like both on the following page in my company site, which current uses graphics I designed in Illustrator and then rasterized in Photoshop — much of which could stand to benefit from being converted into selectable text, if only I could get the CSS3 actions to play nice with IE:

http://www.kiramek.com/english/products/sciborg/TSL20.html

Like I said in my previous post, Freeway offers me a wonderfully convenient means of rounded corners on HTML boxes, making it beautifully compatible with all browsers via PNG graphics. But the serious downside is that it offers no CSS3 solution for modern browsers that support it. Conversely, these glorious CSS3 Actions offer modern browser functionality, but they seek to torch the past by refusing to offer any fall-back compatibility for browsers that don’t play well with CSS3.

Paradise comes to creative designers such as myself when those two concepts are merged—when you offer a CSS3 solution by default, with PNGs reserved only as a compatibility fall-back. Doing it that way should insure the page loads faster on CSS3 browsers (since no PNGs would be needed), and although loading he PNGs would be on slower browsers, at least they would see the page “as the designer intended” rather than seeing something broken. (The CSS3 solution also looks far better on iPad browsers that Freeway’s default PNG approach because the iPad shows seam lines — at least, it does in mobile Safari and the Mercury browser on my iPad3.)

David, thanks for your suggestion. But honestly, I am a finicky creative designer type, not a web programmer. As such, if your suggestion works to solve the problems I’ve outlined above, you will need to take me by the hand and guide me on exactly what I need to do in Freeway to implement it. If the Actions cannot be updated with much needed PNG fall-back, then I would be willing to implement some programming hacks to solve the problem. I just need a lot of help to know exactly how to go about it.

Again the concept is so simple folks — rounded corner HTML boxes, occasionally with a 3-stop gradient, fully compatible with mainstream browsers.

Thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

This is a bug in IE9, to do with its ability to clip a gradient background to a rounded corner. It’s an acknowledged bug, hopefully they will fix it in some service pack or another. This is not the fault of the Actions in question. If it works in Firefox and Safari (possibly Opera) then you have standards-compliant browsers that work with the code as written to the standard.

Walter

On Jul 20, 2012, at 8:55 PM, JDW wrote:

CSS3 Corners doesn’t work right when used in conjunction with CSS3 Gradients in IE9 (Win7):http://visionsecurity.jp/test.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

No matter how many copies of IE < 10 are in use, they still don’t comply with the open standards, and so they don’t get to see as nice a Web as other browsers that bother to take the trouble. Get over the idea that everyone deserves to see the same Web. That way lies madness.

Walter

On Jul 20, 2012, at 8:55 PM, JDW wrote:

Again the concept is so simple folks — rounded corner HTML boxes, occasionally with a 3-stop gradient, fully compatible with mainstream browsers.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Thank you for the info, Walter. But in light of the fact IE10 is soon to be released, it casts doubt upon whether the IE9 bug will ever get fixed. That is something for the web designer to ponder considering how painful most windows drones are in their perpetual use of outdated IE browsers.

I can only add that the need for fall-back to PNGs still remains with regard to CSS3 Corners. It would be very useful and desirable.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

If I sound like an IE defender, I am not! It’s just an unfortunate fact that 90% of our web visitors are Japanese who use IE version 9 and lower. Most use IE 8 & 9.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

If you code to the standards, and ignore IE altogether with respect to eye-candy differences, then realize that the users who are stuck on IE < 10 will just never know the difference.

If you code a fall-back that uses JavaScript to inject PNG corners into every curved box on your page, then you will slow down their experience even more than usual.

Curved vs. square corners just doesn’t matter that much to them. If it did, they would upgrade. What they don’t know won’t hurt them. When they look at the site on their iPhone, they will think you have a special mobile site or something like that.

Walter

On Jul 20, 2012, at 9:39 PM, JDW wrote:

I can only add that the need for fall-back to PNGs still remains with regard to CSS3 Corners. It would be very useful and desirable.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

Walter, you and Steve Jobs certainly would have failed to see eye to eye, had you worked together! (You’ll recall the story about Steve going as far as making circuit boards look pretty to his eye, despite the fact the original Mac chassis was sealed and never to be opened by the customer.)

Sadly, I share the same disease that afflicted Steve. I couldn’t care less about what others think (mostly), but I don’t sleep well at night knowing something is considerably less than perfect. I want the same “look” to my site in the majority of browsers current in use by the majority if people. Sadly, because that rat-of-an-OS named Windows hasn’t yet fallen off the face of this earth, I must reflect on IE8 (the newest version of IE than can be used on the still wildly popular WinXP) and IE9 (because IE10 has not been officially released yet). And in light of the fact I use Google analytics to know that the majority of visitors to my site are Japanese and predominantly use IE8 & IE 9, I know that they only people who will see what I want them to see (rounded corners and gradients), are the handful of rare folk who don’t use IE. That group is far too small for me to exclusively cater to.

That is why the vast majority of my sites are mainly graphics, including the text. I want my sites to look a certain way, but I cannot achieve that to my satisfaction, so I use graphics everywhere. Your CSS3 actions have the “potential” to free me from those graphical chains of bondage, allow me to spread my creative wings and go back to selectable text once again, enhancing the SEO of my site.

Sure I could wait another 5 years for a majority of those silly Windows users to finally update to IE10 (or higher). But I can’t help but drool over the potential solution you have right now, if only there was fall-back to PNGs.

Sure it would be slower on older browsers when they fell back to PNGs. But I put priority on “the look.” Furthermore, I know that with each passing year such slowness becomes a moot point as more people transition to IE10 and beyond.

“Fall-back” is really an ideal solution for the creative designer, but I will admit it is also a pain in the donkey to the Action writer. That’s why I still think it should be built into Freeway, rather than be done by Actions. Freeway should default to CSS3 now, but with a fall-back to PNGs (if we set the page’s browser compatibility level to do so). But that may take years to happen in Freeway, so for now I must evaluate the only realistic options available to me — the CSS3 Actions.

Thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

I think I understand his philosophy pretty well, actually. Steve was about elegance, and about taking things to the next level without that being strictly necessary to be good enough. He did launch Safari for Windows because he was so disgusted with the state of the art in Windows browsers. But he was extremely strategic about what he chose to do well, too.

I’m not proposing that you un-round all your corners because IE is dull. But I am pointing out that you cannot tilt at all the windmills, and you need to pick your battles. Whether or not a corner is rounded for ALL people is something that I feel comfortable setting aside, because the whole battle royale of the Web Standards Project was an answer to the cry of pain from having to code the same site three different ways – one for each of the major, and incompatible, browsers of the late '90s.

When you introduce shims and hacks to your production process, you introduce new and painful modes of failure, raise your testing cost exponentially, and make your job more difficult. There are places where this is required, to be sure, but knowing where that line is – what parts you can set aside – is part of the art of Web design.

We are truly spoiled by Freeway, in that we are able to code a page once and pretty much guarantee that it will look the same on every browser. Freeway does this neat trick, however, by only exposing tools to create a “lowest-common-denominator” site. Where it provides a tool to round the corners of a box, it does so with tables and foreground images, not with background images or CSS3. Very old-school, but guaranteed to work everywhere. Code once, view anywhere.

This ignores the reason why CSS (not just CSS3) exists, though. By putting the look of the thing into the HTML, you drive a wedge between your site and those who view it on non-visual platforms like screen readers or analytical engines like Google. You introduce pages of markup with

just to create a visual effect that has no bearing at all on the true meaning of the page.

When you get into a technique that requires an Action to implement, realize that the reason it isn’t in core isn’t out of sloth or lack of vision, more likely it’s because the trade-offs of getting it to work on all of the target browsers in a consistent manner are too great (or the support cost is too high) for Softpress to consider making it ‘core’.

As SJ was fond of saying, Design is not just how it looks – it’s how it works. Semantic design starts with the meaning of the page, and seeks to encode that meaning as simply and hierarchically as possible, so that the organization of information is implicit in the structure itself. Then, because you also want to create a visual hierarchy to complement and enhance the understanding of the information hierarchy, you use CSS to arrange and decorate the page for your visual browsers. And you recognize that some of your users have invested in the finest browsers and computers, and you reward them for their investment with that little bit extra “one more thing…”.

Now before you ask, no, I don’t think that Freeway even approaches the semantic design ideal at this point. I hope it’s heading in that direction, but it’s a massively difficult problem to solve when you are also aiming for the first-time Web designer with the same tool. Artificial Intelligence has not yet evolved to the point where a semantic tree can be inferred from your visual design, and Freeway still puts a lot of layout code in the HTML. But if you start from a semantic outline, and develop your page structure to mirror that information structure, you can get a good start with Freeway. Funny enough, following these principles also improves your SEO ranking, because you structure your information to be visible to the blind – in this case the robots that crawl and index the Web.

I mentioned this a while back in a discussion of SEO: “View source of your page. Ignore anything that is inside of angle brackets (an actual tag or code element) or the head of the page, and just read aloud each word that you see in the clear in the body of the page. Does what you read make sense to you?” That’s the level where design with a capital D begins. It ends where you finish the last wipe of French polish on the hand-carved walnut burl that you decorate it with.

Walter

On Jul 20, 2012, at 11:37 PM, JDW wrote:

Walter, you and Steve Jobs certainly would have failed to see eye to eye, had you worked together! (You’ll recall the story about Steve going as far as making circuit boards look pretty to his eye, despite the fact the original Mac chassis was sealed and never to be opened by the customer.)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

Well said, Walter. I’d check the like button on that. :slight_smile:

–
Ernie Simpson

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options