Jump to content


Photo

css3 and compatibility


  • Please log in to reply
14 replies to this topic

#1 jimfog

jimfog

    Dedicated Member

  • Members
  • PipPipPipPip
  • 1,390 posts
  • Gender:Male
  • Location:Athens, Greece
  • Interests:Computing, in any form of it, whether is web development, control theory or other, enjoy reading history books, especially WWII books, movies, fast cars(i do not have one, just a humble toyota yaris).
  • Languages:Englsh, Greek

Posted 06 March 2012 - 02:59 PM

CSS3 offers great features but what worries me is the compatibility issue. Some users will not be able to see css3 effects etc... cause of their older browsers.

So the question comes down to this:

css3 in favor of great effects or non-css3 coding in favor of greater compatibility?

What do you prefer?

#2 boen_robot

boen_robot

    XSLT senior

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,486 posts
  • Gender:Male
  • Location:europe://Bulgaria/Plovdiv
  • Interests:Everything having to do with computers... and science.
  • Languages:(X)HTML, CSS, XML, XSLT, Schema, PHP, JavaScript (a little), other XML based...

Posted 06 March 2012 - 03:17 PM

Depends... some CSS3 effects can easily be fallbacked, like rounded corners for example - if the user has an older browser, he simply would see corners as sharp ones.

As for those which can't be fallbacked... I put my bar on IE8, since it's the best you can expect from XP.
The greatest difficulty in programming is not in finding answers, but in asking yourself the right questions. -- If nobody has said it before, then I'd like to take credit of thinking this up (during summer of 2010).
"Complex problems often have the simplest solutions" -- Not sure who said that first.
=== My projects (all feedback welcomed) ===
XML_XSLT2Processor(0.5.3) - perform XSLT 2.0 transformations in PHP.
PEAR2_Net_Transmitter(1.0.0a4) - reliable sockets.
PEAR2_Cache_SHM(0.1.2) - persistent data storage wrapper.
=== Useful tools ===
NetBeans - full featured PHP IDE, as well as a decent code editor for other things.
Fiddler2 - The best free HTTP debugger. Performance tuning, security check, integrity check, custom requests and more, all made easy.
Gobby - That's NOT my Nickname! Look at the topic.

#3 ShadowMage

ShadowMage

    Faal Vokundovah

  • Members
  • PipPipPipPipPip
  • 3,395 posts
  • Gender:Male
  • Location:America's dairyland
  • Interests:I dabble in a little bit of everything. Gaming, programming, web development, fishing, paintballing, woodworking, farm equipment, reading, nature......
  • Languages:(X)HTML, CSS, JavaScript, PHP (though I still have much to learn)

Posted 06 March 2012 - 03:18 PM

Depends on your target audience and the purpose of your site. Although, I think by now most browsers are modern enough that they support a good chunk of CSS3. The only real exception is IE. Personally, I prefer to use modern coding practices and techniques with graceful degradation for older browsers. Most CSS3 properties degrade well. This site mentions a JavaScript library which detects browser support, and if the browser does not support CSS3, it uses jQuery.
In programming, failure is not an option. It's an inevitability...
Mosher's Law of Software Engineering: "Don't worry if it doesn't work right. If everything did, you'd be out of a job."

Call upon the FireBug and its swarm!
Darkness Falls - W3Schools Forum skin for Stylish

#4 jimfog

jimfog

    Dedicated Member

  • Members
  • PipPipPipPip
  • 1,390 posts
  • Gender:Male
  • Location:Athens, Greece
  • Interests:Computing, in any form of it, whether is web development, control theory or other, enjoy reading history books, especially WWII books, movies, fast cars(i do not have one, just a humble toyota yaris).
  • Languages:Englsh, Greek

Posted 07 March 2012 - 08:32 AM

Depends... some CSS3 effects can easily be fallbacked, like rounded corners for example - if the user has an older browser, he simply would see corners as sharp ones.


Yes but this might ruin the design of the site-so i would use "graceful degradation" so that round corners appear on both cases.

As for those which can't be fallbacked... I put my bar on IE8, since it's the best you can expect from XP.


What do you mean "put my bar in IE8"? I am not following you here


Depends on your target audience and the purpose of your site. Although, I think by now most browsers are modern enough that they support a good chunk of CSS3. The only real exception is IE. Personally, I prefer to use modern coding practices and techniques with graceful degradation for older browsers. Most CSS3 properties degrade well. This site mentions a JavaScript library which detects browser support, and if the browser does not support CSS3, it uses jQuery.


You say "they degrade well". Does that means what boen...robot means, for example,"see corners as sharp", or using css3 for modern browsers AND code also for older browsers which have though THE SAME OUTCOME EFFECT as css3.

The end result being round corners(taking as reference this example)for BOTH cases.

#5 dsonesuk

dsonesuk

    Sacred Member

  • Members
  • PipPipPipPipPipPip
  • 5,260 posts
  • Gender:Male

Posted 07 March 2012 - 10:04 AM

For round corners, box shadow, text shadow in IE7 - 8 I use ie-css3.htc (google), but you can't apply this to individual round corners, only to all four. with the other css3 styling for IE7-8 you can't do anything much to achieve the same effect, unless in some cases use css2 styling in such a way to get more or less the same result and using conditional comments to apply these for IE7-8.

'best viewed in all browsers other than IE, but! if you must! gees...use IE9' is a message you could use :)

#6 boen_robot

boen_robot

    XSLT senior

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,486 posts
  • Gender:Male
  • Location:europe://Bulgaria/Plovdiv
  • Interests:Everything having to do with computers... and science.
  • Languages:(X)HTML, CSS, XML, XSLT, Schema, PHP, JavaScript (a little), other XML based...

Posted 07 March 2012 - 12:42 PM

What do you mean "put my bar in IE8"? I am not following you here

I mean that if something is not working in IE8, I say to myself "fine, I'll fix it, so that it looks well even in IE8", but if it doesn't work in IE7 or IE6, I go "screw this! I'll just put a message telling people to upgrade or use another browser!".

But like I said, some features fall back easily. I'd use border-radius even though IE8 and below don't support it, because this is not a vital visual style (unlike, say, margins, "display:table;", etc.).
The greatest difficulty in programming is not in finding answers, but in asking yourself the right questions. -- If nobody has said it before, then I'd like to take credit of thinking this up (during summer of 2010).
"Complex problems often have the simplest solutions" -- Not sure who said that first.
=== My projects (all feedback welcomed) ===
XML_XSLT2Processor(0.5.3) - perform XSLT 2.0 transformations in PHP.
PEAR2_Net_Transmitter(1.0.0a4) - reliable sockets.
PEAR2_Cache_SHM(0.1.2) - persistent data storage wrapper.
=== Useful tools ===
NetBeans - full featured PHP IDE, as well as a decent code editor for other things.
Fiddler2 - The best free HTTP debugger. Performance tuning, security check, integrity check, custom requests and more, all made easy.
Gobby - That's NOT my Nickname! Look at the topic.

#7 ShadowMage

ShadowMage

    Faal Vokundovah

  • Members
  • PipPipPipPipPip
  • 3,395 posts
  • Gender:Male
  • Location:America's dairyland
  • Interests:I dabble in a little bit of everything. Gaming, programming, web development, fishing, paintballing, woodworking, farm equipment, reading, nature......
  • Languages:(X)HTML, CSS, JavaScript, PHP (though I still have much to learn)

Posted 07 March 2012 - 02:27 PM

You say "they degrade well". Does that means what boen...robot means, for example,"see corners as sharp", or using css3 for modern browsers AND code also for older browsers which have though THE SAME OUTCOME EFFECT as css3.

I was referring to the same sort of degradation that boen mentioned. As in, users with older browsers will not have round corners or they will not see transitions.
To have the same outcome as CSS3 requires a lot of extra code in many cases. Round corners is a good example. You would need to use images and divs, one for each side and each corner (a total of 8).
The link I posted in my previous reply mentions a JavaScript library that allows you to use CSS3 transitions (and possibly some other new properties) for supporting browsers and jQuery for non-supporting browsers.
In programming, failure is not an option. It's an inevitability...
Mosher's Law of Software Engineering: "Don't worry if it doesn't work right. If everything did, you'd be out of a job."

Call upon the FireBug and its swarm!
Darkness Falls - W3Schools Forum skin for Stylish

#8 jimfog

jimfog

    Dedicated Member

  • Members
  • PipPipPipPip
  • 1,390 posts
  • Gender:Male
  • Location:Athens, Greece
  • Interests:Computing, in any form of it, whether is web development, control theory or other, enjoy reading history books, especially WWII books, movies, fast cars(i do not have one, just a humble toyota yaris).
  • Languages:Englsh, Greek

Posted 08 March 2012 - 01:35 PM

Ok i got your point-what worries me though, is that if you have a bunch of css3 features and all these degrade(in case the browser does not support ) then the visual outcome will be far from what i want, so it seems to me, that resorting to js(jQuery) is the way to go if you want to close the holes .

Edited by jimfog, 08 March 2012 - 01:36 PM.


#9 thescientist

thescientist

    Likes gettin' it on!

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,052 posts
  • Gender:Male
  • Location:Rhode Island, USA
  • Interests:Music, programming, computers, web design, business, books, and politics.
  • Languages:HTML/CSS, JS, PHP/MySQL, XML, bash, SVN/Git, Java, Python

Posted 08 March 2012 - 05:06 PM

JS can be turned off, although not typically. However, going the JS route often involved DOM manipulation, which can be taxing on the browser in it's own right depending on the circumastances.

If it's vital the design, then images are the surefire way to go, although they require more load times initially. (sprites can be very helpful here).

If it's supported well in all the main browsers you care about, then try and use CSS first. There are also proprietary styles that you can use for individual browser vendors.

If you are comfortable with the JS route, then use that. Typically a developer would like to use a technique that is forwards compatible as much as it backwards compatible and that doesn't require a ton of extraneous code for something that will soon be standard/spec, given what we know about the fairly generous CSS3 support there is out there for the time being. Using a bunch of JS might seem superflous, because really, eventually it will just be able to be done with CSS fairly soon.
myTunes: www.analogstudios.net

my {...} code {...} works in all the decent browsers. This of course means that it does not work in IE.


#10 jimfog

jimfog

    Dedicated Member

  • Members
  • PipPipPipPip
  • 1,390 posts
  • Gender:Male
  • Location:Athens, Greece
  • Interests:Computing, in any form of it, whether is web development, control theory or other, enjoy reading history books, especially WWII books, movies, fast cars(i do not have one, just a humble toyota yaris).
  • Languages:Englsh, Greek

Posted 09 March 2012 - 10:07 AM

And something else. You told me for example what is the case with rounded corners(fallbacks in square ones)

But what about gradients. I want to aply css3 gradient. Do these degrade also gracefully?

Basically, i must have told this from the beginning-sorry for that.

Edited by jimfog, 09 March 2012 - 10:23 AM.


#11 thescientist

thescientist

    Likes gettin' it on!

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,052 posts
  • Gender:Male
  • Location:Rhode Island, USA
  • Interests:Music, programming, computers, web design, business, books, and politics.
  • Languages:HTML/CSS, JS, PHP/MySQL, XML, bash, SVN/Git, Java, Python

Posted 09 March 2012 - 01:43 PM

what about just trying it in a browser that supports, or one that doesn't?

you could always google...
https://www.google.c...iw=1440&bih=779

and find something like this (first link)
http://jonraasch.com...ation-with-css3

Fortunately, most CSS3 properties degrade fairly nicely on their own. Rounded corners become square, gradients become flat colors, and transitions become hard changes.


myTunes: www.analogstudios.net

my {...} code {...} works in all the decent browsers. This of course means that it does not work in IE.


#12 boen_robot

boen_robot

    XSLT senior

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,486 posts
  • Gender:Male
  • Location:europe://Bulgaria/Plovdiv
  • Interests:Everything having to do with computers... and science.
  • Languages:(X)HTML, CSS, XML, XSLT, Schema, PHP, JavaScript (a little), other XML based...

Posted 10 March 2012 - 04:10 PM

In general, any unsupported CSS property is ignored. You can specify a property multiple times, and when you do that, the last supported one will be in effect.

So, in the case of gradients, you can simply specify a solid color to be used as a fallback, e.g.
.fancy {
background-color: #F07575; /*Fallback for browsers not supporting gradients or SVG backgrounds*/
background-image: url("bg.svg"); /*Fallback for browsers not supproting gradients, but supporting SVG backgrounds. The image is expected to completely overlap the color.*/
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #BADA55);
}

The greatest difficulty in programming is not in finding answers, but in asking yourself the right questions. -- If nobody has said it before, then I'd like to take credit of thinking this up (during summer of 2010).
"Complex problems often have the simplest solutions" -- Not sure who said that first.
=== My projects (all feedback welcomed) ===
XML_XSLT2Processor(0.5.3) - perform XSLT 2.0 transformations in PHP.
PEAR2_Net_Transmitter(1.0.0a4) - reliable sockets.
PEAR2_Cache_SHM(0.1.2) - persistent data storage wrapper.
=== Useful tools ===
NetBeans - full featured PHP IDE, as well as a decent code editor for other things.
Fiddler2 - The best free HTTP debugger. Performance tuning, security check, integrity check, custom requests and more, all made easy.
Gobby - That's NOT my Nickname! Look at the topic.

#13 jimfog

jimfog

    Dedicated Member

  • Members
  • PipPipPipPip
  • 1,390 posts
  • Gender:Male
  • Location:Athens, Greece
  • Interests:Computing, in any form of it, whether is web development, control theory or other, enjoy reading history books, especially WWII books, movies, fast cars(i do not have one, just a humble toyota yaris).
  • Languages:Englsh, Greek

Posted 13 March 2012 - 11:10 AM

In general, any unsupported CSS property is ignored. You can specify a property multiple times, and when you do that, the last supported one will be in effect.

So, in the case of gradients, you can simply specify a solid color to be used as a fallback, e.g.

.fancy {
background-color: #F07575; /*Fallback for browsers not supporting gradients or SVG backgrounds*/
background-image: url("bg.svg"); /*Fallback for browsers not supproting gradients, but supporting SVG backgrounds. The image is expected to completely overlap the color.*/
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), #BADA55);
}


The above code is the way to go, but what i do not understand is this SVG format

What do you mean by saying "...SVG backgrounds", how SCG relates to PNG or JPEG.

I just need some clarification with the above.

#14 boen_robot

boen_robot

    XSLT senior

  • Moderator
  • PipPipPipPipPipPipPip
  • 8,486 posts
  • Gender:Male
  • Location:europe://Bulgaria/Plovdiv
  • Interests:Everything having to do with computers... and science.
  • Languages:(X)HTML, CSS, XML, XSLT, Schema, PHP, JavaScript (a little), other XML based...

Posted 13 March 2012 - 12:42 PM

SVG is another image format. Unlike PNG and JPEG, it's a vector format. Although you'd typically use image editors to edit it, SVG uses an XML syntax, so you can use a text editor or an XML API do edit it. There's a tutorial on W3Schools about its syntax.

By virtue of being a vector format, SVG images can be stretched without any quality loss. More importantly to the example above, SVG supports gradients.

Although SVG has been supported in browsers since Firefox 2, Opera 9 and Safari... 3 I believe... it's only in recent versions (Opera 9.5, Firefox 3.6, IE9, Safari... I think 4) that browsers support SVG images to be used as a value of background-image. Previously, they only supported SVG with <object>, or at best, with <img>.
The greatest difficulty in programming is not in finding answers, but in asking yourself the right questions. -- If nobody has said it before, then I'd like to take credit of thinking this up (during summer of 2010).
"Complex problems often have the simplest solutions" -- Not sure who said that first.
=== My projects (all feedback welcomed) ===
XML_XSLT2Processor(0.5.3) - perform XSLT 2.0 transformations in PHP.
PEAR2_Net_Transmitter(1.0.0a4) - reliable sockets.
PEAR2_Cache_SHM(0.1.2) - persistent data storage wrapper.
=== Useful tools ===
NetBeans - full featured PHP IDE, as well as a decent code editor for other things.
Fiddler2 - The best free HTTP debugger. Performance tuning, security check, integrity check, custom requests and more, all made easy.
Gobby - That's NOT my Nickname! Look at the topic.

#15 jimfog

jimfog

    Dedicated Member

  • Members
  • PipPipPipPip
  • 1,390 posts
  • Gender:Male
  • Location:Athens, Greece
  • Interests:Computing, in any form of it, whether is web development, control theory or other, enjoy reading history books, especially WWII books, movies, fast cars(i do not have one, just a humble toyota yaris).
  • Languages:Englsh, Greek

Posted 13 March 2012 - 04:07 PM

Well. i really did not know these facts you mention about SVG. As i understand it, PNG and JPEG(as opposed to SVG) degrade as they stretch-as they are bitmaps.

In fact ,i always wonder what is the image format which has to do with vectors, since all the formats I have deal so far are bitmaps.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users