CSS: lowest common denominator question?

HTML & CSS
1

My question is as follows. How do you decide your coding strategy. What I mean is, CSS2 techniques may require different markup strategy ( more mark up, different source order… stuff like that) but provides “tried and true” solutions. In other words it’s clumsy, but it WORKS. On the other hand CSS3 is beautifully clean and separates content from style… etc… but only works well in the latest browsers. Both solutions cannot be used, or is just merely redundant to use both.

for the sake of argument let say you wanted to create a box with rounded corners:
CSS3
Minimal Markup needed:
<div class=“box”></div>
Images needed :none;

CSS 2
Minimal Markup needed:
<div class=“box”>
<span class=“top”><span></span></span>
<span class=“bottom”><span></span></span>
</div>
Images needed :at least one sprite, but potentially 6 ;

So the rub is that the minute an older browser is invoked in the conversation the mark up is defined and thus CSS2 becomes the ONLY viable option. one negates the other .By extension, since we all code for older browsers… what is the benefit of the newer browsers’ CSS3 support?

how you you professionals handle this conundrum so that it doesn’t drive you to drink?

2

Only problem with that (it works in Chrome) is I can’t turn it off. So I have to hold my mouse there until the submenu finally gets its butt over there and shows up. I’d almost rather that were done in Javascript!

Charging extra to support the more ancient of older browsers is a good idea… though there are those who charge extra to get the page working in IE6, where the client can possibly find other developers who just include it.

am back to the same dilemma which is having to code as if CSS3 never existed.

I don’t see any dilemma. Once support is required for older browsers, you cannot use CSS3. Not if all browser must have the rounded corners and the semi-opque stuff and whatever. If the client needs you to build (perfectly) for cave-man-era browsers, you’ll have to code with sticks and rocks anyway.

3

Then ask them to view the site without electricity.:slight_smile:

what happens when a client asks for Safar1 and FF1 support?

I usually catch this right at the start and when I quote a job I state which browsers are to be supported. I will support older browsers but at a significant cost difference.

Previously for clients that wanted IE5 mac support I would triple the cost. Coding for older and broken browsers takes a lot of time and time is money. If in the end the client is willing to pay the extra then I will eventually give in and code as long as it’s worth my while.:slight_smile:

These things really have to be said upfront otherwise the client will keep coming back and say “but it isn’t working in ie3” !

4

For rounded corners, I only use CSS3 these days. All IE users are served CSS3pie, which works very well and allows to use quite a few CSS3 features for IE.

5

Ask them to drive over to your place in their T-Model Ford so you can discuss it further.

6

PAUL

A while ago on this forum you mentioned a JS script that you use to create rounded corners in IE.

I’ve searched for that thread on this forum and can’t find it.

What’s the script you use.

Thanks in advance

7

Yep I’ve made the move from image based roundies to CSS3, IE users will get square corners, everyone else roundy ones. Quite frankly i think few site visitors care whether a box corner is round or not :slight_smile:

8

PAUL… THATS F!!! brilliant. I actually don’t know why I didn’t think of that before… if nothing else but because you should get paid extra if you do extra work.

Still I have to admit that even if the client offers to pay 10x for ALL browser support ( lets throw in Netscape… for fun)… am back to the same dilemma which is having to code as if CSS3 never existed.

9

Yes I suppose that is the real problem. That has always been the case previously but things are changing slowly.

Ten years ago IE was the only browser that mattered and it was of no consequence to a client if the site worked elsewhere and indeed they would never check because they likely only had ie6 installed.

However these days some clients (not all) are more educated about the web and can see the benefits of progressive enhancement. I think
it is also our duty as developers to try and guide our clients in the right direction because it makes sense on all sorts of levels. Minimal markup, better seo, better user experience etc. If the site is well designed there will be little loss of aesthetics so I’m not saying give those other vistors a boring black and white site - you can still make it interesting.

There’s always a middle common ground but as you quite rightly say some clients will always want the same experience in all browsers and if you can’t educate them then you have to code the way they want so that you can get paid (or don’t take the work on).

The other thing to remember is that IE9 is due for release next year and will have many of these advanced features working so now is the time to be building for the future an not the past. Even though a site may not look quite so good in IE8 it will look better in IE9.

Of course you can build everything that the client wants but I wouldn’t tell a mechanic how to fix my car, yet many clients who nothing about the web push developers into doing things that they would never do normally.

The bottom line is that some times you just have to do what the client says or you don’t get paid - so if you think about it the whole mess is really our fault for giving in and doing it that way :slight_smile:

10

paul
I liked that safari demo.
But I think that’s the problems client see an effect done in ONE browser. And EXPECT IT in all. they then use industry buzz words like " UX" and " Cross browser" and “clean mark up for SEO” . What I mean is if they see that effect in safari, they wont be "entirely satisfied with the work " until they see the effect in all browsers ( sometimes in VERY old versions of all browsers).

now, it’s not like in most cases I cant achieve the effect using other method so that I can provide support as desired… but the point is because of the nature of HTML and CSS as i know it once you star coding for older browsers support, there is really no point in using modern CSS3…

Going off on a tangent, back when I first learned about CSS, when IE offered hover support only for anchor tags. Assume I am being a CSS purist. You could code thing so that LI div:hover or LI: hover was triggered… then realized you needed IE support. So you would put everything you needed in inline elements with display block, and wrap it all in an anchor tag… great it now worked cross-browser w/o JS. So what I am saying is if you scanned though the CSS you wouldn’t find any LI:hovers or DIV:Hovers… even though they were readily available and would have made the markup simpler. You could argue that this was more functionality based than appearance, but I will tell you even if it was just a simple inline menu and IE users got to see the text of the link underlined when hovered even if they didn’t see the nice fancy background graphic… they would not see it as being “cross browser friendly”

11

I , of course, agree with Paul about educating clients. I dont want to get "stuck on the issue of “rounding corners”; I am also thinking of multiple bgs, border images, etc… things that are making short work of extra elements as hooks unnecessary ( I, am not even going to go in to animations, and other more advanced teqniques )

I am also NOT talking about lack of IE support. Generally, it seemed easy for client to be satisfied with hearing “IE or Versions of IE earlier than X.0 will need to have js enabled”… I guess what I am talking about is … clients aren’t saying

Right, so now that we’ve seen how it looks in Firefox, let’s try it in IE6.

They are saying:
Right, so now that we’ve seen how it looks in Firefox3.6, let’s try it in FF1 or Safari1, but don’t change the mark up. after which they will throw in a “web developer buzzword”… or a mix of buzz words there of.

The bottom line is that some times you just have to do what the client says or you don’t get paid - so if you think about it the whole mess is really our fault for giving in and doing it that way

Oddly enough I dont see it so much as developers giving in, so much as introducing “partial” knowledge to clients that then get converted to conflicting requests.

12

It was probably something like nifty corners but I never actually used it because the site I was working in had millions of round corners and the page would just go blank until the js had applied all the corners. It would be fine on a relatively small number of corners.

13

Not for me, but a lot of client expect the see the same markup they would see if older browser weren’t supported.

Really? Who are you coding for?

My clients barely know what a browser is.

And still no dilemma: one cannot use space-age techniques with stone-age browsers. Nobody anywhere has done that, so any clients who expect modern markup with ancient browsers is dreaming, because they’ve never seen it.

It is our job as professionals to explain that to clients (if you somehow get one who can actually read HTML and CSS, lawlz).

On the other hand when clients make up what their expectations are for “satisfactory” work they invoke terms they heard from “being educated by other web developers/designers”,whose work they probably understand less than 3rd grade geometry.

You have to show them real examples on real browsers. I had a client who used IE7 and I had to show him exactly why the font he wanted could not go on his page (he had bought Humanist 251? for his logo print design) and showed him what the font stack looked like on Windows and on Linux, and told him Macs would look different as well.

Having some demo pages pre-prepared is a good idea, with browsershots for any OSes you don’t have. Then whip out your iWhatever (or your client’s iWhatever) and show how different the page looks there. Yeah, you can’t use print math, but showing is telling.

Possibly one technique you can use for stubborn dreamers is to take all those trendy web5.0 Designer sites (which are using all that HTML5 and CSS3 just everywhere for everything) and open them in Internet Exploder 5 and show them how horrible the death and destruction is.
Then tell them you’ll charge double to get that looking nice in IE5. (or whatever ancient browser you’re going for)

IE6 is still viable in some markets so this is why corporate sites are simply not going to be using fancy CSS3 or newer markup for a while yet. The fancy designers, they make a living by looking pretty, so they aren’t going to be coding for IE6 anyway unless they have to.

"but why doesn’t it work on IE4 on a mac? I thought good developers considered ‘IE support’

You have to be clear at that first meeting with the client what you support and what that means. Paul O’B I believe actually has or had a client who needed pages working in IE/Mac. They’re still out there, like sparse survivors after the zombies took over the world.

14

Ok, i will rephrase my question.
If PIE exists to give “earlier versions of IE” ( seen as the Ie9 supposedly supports CSS3)… what happens when a client asks for Safar1 and FF1 support?

15

Yep, thanks for that.

I read about PIE a while ago on this forum and have just used it for the first time to get the rounded corners I need. It works perfectly.

Previously I wasted time with sprites and nested divs, and then wasted even more time whenever I wanted to change the background or border colour.

16

I don’t see any dilemma. Once support is required for older browsers, you cannot use CSS3.
Not for me, but a lot of client expect the see the same markup they would see if older browser weren’t supported.

The dilema is the clients are expecting the same mark up ( to the tag) for a page that supports ancient browsers and one that done assuming CSS3 support. I mean I suppose this is no different from print work when a client wants to include the text to War and Peace in a 8’x11’ advert, but doesn’t understand why the font has to be .0000006pt. The issue is that these clients are are quoting designers and tossing in misplaced “buzz phrases” like " the mark should not affect the design…" to support their argument. The difference is , in print I could refer them back to their 3rd grade geometry teacher “max font size=area of paper/ number of charters, and that’s w/o any aestheic considerations… and aesthetic consideration is what I am here for” . On the other hand when clients make up what their expectations are for “satisfactory” work they invoke terms they heard from “being educated by other web developers/designers”,whose work they probably understand less than 3rd grade geometry.

As far as IE support, I figured charging extra to include-support browsers that are more than 5-4 years old is reasonable… if the expectation was understood. But if the client thinks all IE is the same… then that’s why I will get someone saying… “but why doesn’t it work on IE4 on a mac? I thought good developers considered ‘IE support’”

17

So I have to hold my mouse there until the submenu finally gets its butt over there and shows up. I’d almost rather that were done in Javascript!

lol - I would have speeded that up if it was in a real site as I noticed that you had to wait also :slight_smile:

18

Ralph,

clients aside. that seems the ONLY working choice to me, since once you start coding for older browsers ( not cross compatibility… but just trying to make web 4.0 in a 1.0 browser)

I know (and love) the spirit of the web. Which is to make everything accessible to everyone ( apparently the same way). But the goal seems illogical, and no one is saying anything.

If programs could be made so that they ran THE SAME on a Mac Performa as they do on a QuadCore Intel Mac… why did anyone bother buying (or even making) the QuadCore Intels ??

As far as the JS, which is has been my fall back, well that was was the cause of of my question. I could justify JS to give IE support while quietly shaking my fist at MS’s internet user majority. It was in fact almost Karmic that MS has Conditional comment and HTCs. It’s like they WANTED JS instead of CSS, but I digress . Besides, I am talking about style(background, corners, border) rather than “functionality” ( hover, active)

Am talking about safari 3.o support vs safari 5.0 or FF 2 vs 3. If if you have to bloat the mark up to make it compatible, CSS3 becomes redundant. if you dont, then you might as well just have a JS write your mark up d"depending on the browser and version"… the latter, of course will have the SEO people up in arms

19

Those designers who are required to make the site look the same on all browsers stick with CSS2 or use a bit of JavaScript. Those designers who are more progressive and aren’t so pressured to make a page look the same in all browsers use CSS3 for those browsers that can handle it, and let the less capable browsers have a lesser experience. Generally I prefer the latter approach.

Some designers, like Dan Cederholm, make use of lots of CSS3 for browsers that can handle it—in other words, the latter option. I noticed recently that Cederholm’s site now feeds no styles at all to IE6. Ha ha! Now that’s a statement.

20

That’s a good comment and I understand exactly what you’re saying. But few of my clients would go along with it.

Example…

[I][B]Right, so now that we’ve seen how it looks in Firefox, let’s try it in IE6.

Now as you see, all the PNGs screw up, the floats don’t work and the overall layout is awful. But actually there’s really nothing to worry about since this horrible mess is a unique feature of IE6 and is the reason why many people stick with it.[/B][/I]

I do agree though with your comments re: CSS3 rounded corners, etc