CSS3 Corners

JDW wrote:

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.
James, I’m really quite surprised by this. What you’re you’re willing to
sacrifice in terms of accessibility, SEO and general ease of maintenance
far outweighs the little gain in aesthetic consistency. You might be
surprised by just how close you can get to your ideal with a solid
understanding of CSS, but that requires stepping out of the
let-FW-think-for-me bubble.

Well, I can’t get my head around your decision to do so, and I’m as
persnickety about the visual aspect as anyone. It doesn’t seem a
sustainable, scalable or pragmatic approach to web design but hey, to
each their own.

I wish you luck.

Todd


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

Walter, I follow you, but since we’re talking about “web design” and “Apple” here, consider well how much code Apple injects into Apple.com to make it look consistent across most browsers.

Todd, my approach is indeed sustainable as I’ve been doing it for several years now. And I alone design our company websites, including shooting product photos, authoring all the text content on our English sites, translating that into Japanese for our Japanese site, creating all the graphics, design layout, and even setting up many of the PDFs and other downloads, which is all secondary to the other jobs I do in Customer Support (telephone & email), product repair, product advertising, product catalog design (print), product R&D (electronics design), on-site training, and dialog with our overseas factories. I simply feel it’s time to move to a CSS3 approach by default, but with a compatibility fall-back for some browsers that are still in major use. No manner of arguing with me on that point will ever magically change the fact that 90% of my web visitors (here in Japan) use Explorer, the biggest two versions of which are IE 8 & 9.

I am not trying to maintain support for “all browsers.” My sites are designed to look decent even in IE6 right now, but for the past 8 months I’ve set up a browser-triggered banner atop my pages that tells my web visitors that their IE6 & 7 browsers are out of date and in need of an upgrade. WinXP users still dominate Japan, so most of those users merely upgrade to IE 8. As such, I need to design my sites, not with ancient IE 6 or 7 compatibility in mind, but IE 8 & 9. I don’t think too much about IE 10 now because it is not officially released and almost no one here in Japan is using it.

I fully understand the resistance I’m getting from Action authors and programmers on this topic though, since you folks despise old browsers, particularly IE, and you think any effort spent on them is wasted time. I concur with your hate for those browsers, but your and my hatred for those wicked browsers cannot magically alter the minds of people who foolishly continue to use them, nor is it within my power to control who flocks to my sites in Japan. All I can do is consider how best to implement my design philosophy within the browsers constraints given to me, as dictated by the majority of my web visitors.

For the past two years, I have been watching the slow progression away from IE 6 & 7. About 20% of my web visitors still use those browsers (combined), but in my eye that 20% is now low enough so I can focus on the rest who use IE 8 & 9. And since I can just tell IE 6 & 7 users to “upgrade to IE 8 if you have XP” or “IE 9 or 10, if you have Win7,” I really don’t need to worry about IE 6 or 7 anymore. And that is why all my posts in this thread have focused on problems inherent to those to “modern” browsers, not ancient browsers. And even if one argues that they too are broken, again, there’s nothing I can do about the fact that 70% of my Japanese web visitors use them, and will likely do so for the next two or three years.

So all I’ve been saying is that I think it is worth the effort to code some fall-back compatibility for those browsers, since they have a little trouble with CSS3. And over the next few years, the number of people who use those browsers will decrease, which will diminish the importance of the fall-back. So yes, you would be coding something that will be irrelevant in a few years, but (1) it is relevant and important now, and (2) what software code doesn’t age and become irrelevant over time!? As such, I think it is worth the effort to add some fall-back. And the main reason I mentioned this being built into Freeway is because Softpress has always understood the need for fall-back, and as a result they more than anyone should appreciate my the logic and reason I presented in this thread.

I look forward to the day when fall-back us no longer needed. But we are not there yet.


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

I know this probably sounds odd but the problem is not the css3 radius corners its the css3 gradient background. IE 9 doesn’t support css3 gradients. (ie8 and below don’t support css3 rounded corners or css3 gradients). Its Microsoft biggest omission to leave out gradients in the css3 visual effects library for ie9. The standard recognised method to produce non image based gradients is by using the ‘Microsoft only’ filters. This has nothing to do with css3 and if you were to look at the css written when the filters were used you would notice that it looks completely different.

The result is no compatibility whats so ever when trying to combine Microsoft filters with css3 its just pure luck if you use filters and css3 and you get the visual result you want.
The second problem with filters is the performance hit that these filters have on the browser so they have to be used sparingly, and finally the third problem the filter gradient has specificaly is with text smoothness… it really can make text look terrible, so again filters need to be used with caution.

The only routes I can think of to accomplish a gradient with rounded corners in ie9 is by applying javascript library like: pie, or by using images. Alternatively drop IE’s gradient compatibility and just have a solid css background.

The good news is IE 10 is going to support css3 gradients, but ie9 and below will never be able to see them and they will always have to have a ‘work arounds’ to make them visually work.

All the best Max


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

Max, thank you for the input.

For the record, I can get IE9 (Win7) to display CSS3 gradients. It’s just that the corners of the said gradients in IE9 won’t round via CSS3 corner rounding. This is shown in the screen shots I made here:

I do agree that some decisions need to be made about how best to handle fall-back. For rounded corners, the decision is pretty easy – use PNGs. But for CSS3 gradient fall-back, it’s probably best to go with a simulated gradient in PNG form, or if that cannot be done then a solid color, chosen by the Freeway user.


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

Hi JDW
how are you getting IE9 to recognise css3 gradients? are you actualy using css3 because I didn’t think it was supported. I just checked and I can’t find anything about ie9 and css3 gradients. So I would be interested to know how you have done it
speak soon max.


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

This article is informative:
http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

The most important thing that stood out to me:

It takes a good deal of extra work… it maybe wiser just to… simply use
flat colors if rounded corners are required.


Ernie Simpson

On Tue, Jul 24, 2012 at 10:40 AM, max email@hidden wrote:

Hi JDW
how are you getting IE9 to recognise css3 gradients? are you actualy using
css3 because I didn’t think it was supported. I just checked and I can’t
find anything about ie9 and css3 gradients. So I would be interested to
know how you have done it
speak soon max.


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

Hi Ernie
if this is how its being done then everything I said before is still valid, That work around is not really true i.e. 9 gradients and therefore can’t be relied upon to give constant results in every situation… in other words its a right dog’s dinner… :o)
I am not denying its clever but its not css3 gradients and css3 rounded corners and inevitably a dead end solution to something that IE can’t do very well.

So it all comes down to resources…
Do you plough in huge amounts of time into it to make it work correctly and consistently in most uses via an action. Especially as you won’t be able to see the results within a normal mac browser so testing wouldn’t be straightforward either. Or do you create your designs to gracefully fall back to something that IE can render properly.

In the end its a personal choice if people what to go down that route and try to achieve every possible design nuance consistently though out all browsers and all operating systems.

I, like all others would love to see perfection and consistency throughout browsers but it probably won’t happen.

Max


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

It looks like the CSS3 Gradients Action writes the IE-specific “filter” code to fall back for CSS3. From James’s perspective, he is using CSS3, but IE is actually using a browser-speciific fallback instead.

Walter

On Jul 24, 2012, at 10:40 AM, max wrote:

Hi JDW
how are you getting IE9 to recognise css3 gradients? are you actualy using css3 because I didn’t think it was supported. I just checked and I can’t find anything about ie9 and css3 gradients. So I would be interested to know how you have done it
speak soon max.


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

Max, give the two Actions a try yourself:

http://actionsforge.com/actions/view/120-css3-corners
http://actionsforge.com/actions/view/201-css3-gradients

Here’s just one page in my site where I use a lot of rounded corners, and you can also see at least one gradient I used in a rounded corner title bar:
http://www.kiramek.com/english/products/sciborg/TSL20.html

To get it to work in all browsers, I am forced to make most of the page graphics. In my recent edition if that page (Japanese version), I converted the table to selectable text, but the rest is still mostly graphic:

I’d like to redo the page with the rounded corners and gradients being CSS3, but with fall-back to retain that same look in “modern” versions of Explorer: IE8 & IE9. That is the basis for all I’ve written on this subject to date. The only caveat is that I am a creative designer, not a web programmer. As such I must rely on existing FW features or Actions like the CSS3 suite to accomplish my web design modernizations.


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

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

David, I am by no means a coder, but out of sheer desperation to conquer this “CSS3-but-with-fallback-for-IE” problem, I gave Selectivizr 1.0.3b a shot. You can see the code working in cooperation with MooTools 1.4.5 on my test page here:

I tested that page in IE6, IE7, IE8 and IE9, but there is absolutely no change whatsoever from what I reported before (namely, that the gradient fill spills outside the rounded corners in IE9, and all the corners are not rounded at all in IE8/IE7/IE6). I inserted the code into my page as directed, so I don’t think anything I did wrong is preventing the code from doing it’s job. It simply appears that Selectivizr doesn’t help CSS3 Gradients or CSS3 Rounded Corners.

Too bad. It had the potential to be an almost magical solution.

Regards,

James Wages


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

After my failure with the Selectivizr library, I did some Googling and found CSS3pie:
http://css3pie.com/

Walter, I see that you actually offered a glowing review of CSS3 pie back in 2010 and said you would even roll it into your CSS3 Actions when it was “fully baked”:
http://freewaytalk.net/thread/view/73697

It appears to be out of Beta now. It’s it baked enough for you? :slight_smile:

Paul Dunning appears to be using it with some of his Actions:
http://www.actionsworld.com/Actions/paulsbuttons/installingcss3pi.php

–James Wages


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

And how to implement

Sent from my iPhone

On Aug 8, 2012, at 0:24, JDW email@hidden wrote:

After my failure with the Selectivizr library, I did some Googling and found CSS3pie:
http://css3pie.com/

Walter, I see that you actually offered a glowing review of CSS3 pie back in 2010 and said you would even roll it into your CSS3 Actions when it was “fully baked”:
http://freewaytalk.net/thread/view/73697

It appears to be out of Beta now. It’s it baked enough for you? :slight_smile:

Paul Dunning appears to be using it with some of his Actions:
Installing CSS3 PIE

–James Wages


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

As to “how to implement” I am baffled by that as well. Here’s what the instructions say:
http://css3pie.com/documentation/getting-started/

Not knowing how to do that in Freeway, I uploaded my Test page, then edited it in Text Wranger, adding the PIE.htc lines in two places. I checked the page in IE7 but corners were still not being rounded. You can see the code yourself by searching for “PIE.htc” in my Test page SOURCE:

As you can see, I am using a “protocol relative” URL. Sadly, the code does not work in IE7 (didn’t try the other IE variants). I even tested it with an HTTP URL, but that didn’t work either.

I guess we need to wait for Walter to chime in on this one.

–James Wages


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

I just implemented all the recommendations here:

http://neilgirardi.com/blog/?p=695

Still doesn’t work!

Grrrr!


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

I have a Pie page at http://deltadesign.co/fw_examples/CSSstuff/another-pie.html

D


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

As do I, Dave:

Since PIE refuses to work on my pages with Walter’s CSS3 actions applied, I pulled up one of the PIE Demo sites, copied the page Source, replaced the URL to the HTC file with a URL to the HTC file hosted on my domain, then I uploaded that as “test1.html” to my server. View it in IE7 and you’ll see it works, proving that there is nothing wrong with the HTC file hosting on my server, and showing that the problem ith PIE on my other “test.html” page boils down to something that doesn’t play well with PIE and Walter’s CSS3 actions.

Walter, in light of your positive comments about PIE back in 2010, and seeing it’s been in the oven baking these last 2 years since, I’d love to hear your thoughts about integrating PIE into your CSS3 suite.

Thanks.


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

I posted a question to the PIE forum about HTML5 and PIE, we’ll see if there is any result. I am not able to fiddle with this today, but I have a plan to look at it and see if I can spot the issue.

Walter

On Aug 8, 2012, at 7:57 PM, JDW wrote:

As do I, Dave:
The North Face - Locale Selector

Since PIE refuses to work on my pages with Walter’s CSS3 actions applied, I pulled up one of the PIE Demo sites, copied the page Source, replaced the URL to the HTC file with a URL to the HTC file hosted on my domain, then I uploaded that as “test1.html” to my server. View it in IE7 and you’ll see it works, proving that there is nothing wrong with the HTC file hosting on my server, and showing that the problem ith PIE on my other “test.html” page boils down to something that doesn’t play well with PIE and Walter’s CSS3 actions.

Walter, in light of your positive comments about PIE back in 2010, and seeing it’s been in the oven baking these last 2 years since, I’d love to hear your thoughts about integrating PIE into your CSS3 suite.

Thanks.


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

Understood, Walter.

In the meantime, here’s a great site to “fiddle” with PIE:

–James Wages


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

Just remember - PIE won’t fix every problem in every browser. For example, CSS3 allows a lot of control over corner radii. You can get some nice effects and shapes with them, BUT PIE will never be able to convince older browsers to comply. You will get the best match possible, so it will, at least, degrade gracefully.


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

Paul, if you review some of our earlier discussion, you will see that I am most concerned about “the majority of people who visit my corporate sites.” Here in Japan, a large number of visitors to our sites still use WindowsXP. And we know that IE8 is the newest browser you can use on that OS. Hence, when I see a problem in IE8, I would like to solve it. Also, there’s a lot of chit-chat about IE10 solving problems (i.e., finally becoming more like Safari, FireFox, Chrome and the rest of the modern browser world). However, it has yet to be released, and no one knows if MS will foolishly restrict its use to Windows8-only. Hence, I play close attention to IE9 anomalies too.

All said, if I can get a rounded corner solution (and perhaps even a gradient solution) that works in IE8 and IE9, then I will be mostly satisfied. If it also happens to work in IE6 and IE7 too, then it would be the perfect all around solution (until such a time that people either dump Windows altogether, or they upgrade to something that can run IE10).


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