Css3 Fallback for Older Browsers

CSS3 fallback for older browsers

Using the following will provide better support for a variety of browsers and will fallback to a solid colour when gradients are not supported, you could replace this solid colour with an image.

background: #0A284B;  /* for images use #0A284B url(image.jpg)*/
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

You will need to specify a height or zoom: 1 to apply hasLayout to the element for this to work in IE.

CSS variables with fallback for older browsers

If you're using Sass, you can automate fallbacks through a Sass mixin. Create a map of your CSS variable names and their values, and then you can look up those values in a mixin that outputs the fallback style and the preferred one

$vars: (
  primary: yellow,
);

:root {
  --primary: map-get($vars, primary);
}

@mixin var($property, $varName) {
  #{$property}: map-get($vars, $varName);
  #{$property}: var(--#{$varName});
}

The above mixin is used like so:

body {
  @include var(background-color, primary);
}

and outputs the following CSS:

:root {
  --primary: yellow;
}

body {
  background-color: yellow;
  background-color: var(--primary);
}

Et voilà :)

Does CSS var() fallback work in unsupported browsers?

Will it work in older browsers or no?

No it won't. If a browser doesn't recognize var() then there is no way to consider the fallback value you defined there. The whole value will be invalid.

You should stick to your first syntax if you want to consider old browsers.

Background fade in css - fallback for older browsers

Try this:

nav a{
    /* your other styles */
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}

nav a:hover, nav a:focus, nav a:active {
   background:url(../images/goldNavBG.png) repeat-x;
}

On non-CSS3 compatible browsers the background will just be replaced with no transition.

Here's a demonstration: http://jsfiddle.net/Vq34s/1/

Cross-browser compatibility HTML5 & CSS3

Sùmmary: it depends on your audience. There's no definitive answer to your concerns.

If your target is people who tend to own latest technologies, you can support browsers from 2 years onwards. In the other hand, if your target is people who love staying in old operating systems or you're talking about a large corporation/government, maybe you'll need to provide fallbacks or just skip using edge technologies in order to ensure a proper user experience across all target user devices and browsers.

OP said in some comment:

But I am not sure whether I have to completely scrap support to people
with old browsers and alternatively offer them with a mobile based
website for pc

If your target has latest tech, why you want to provide a mobile site for PC? You need to decide: if you think that you shouldn't support too old browsers and systems, you shouldn't try to maintain 2 sites when a great percentage of visitors will go to the "edge version". Otherwise, make your main site compatible with older browsers.

BTW, as I said before, there's no definitive answer to your concerns, because it's all about taking a decision and the time will tell you if it was right. Use analytics, check what are the most used Web browsers in your site and provide fallbacks when you detect that there's a high percentage of visitors using old browsers...

flexbox fallback to display table in older browsers

The long answer is complicated. The good thing is that IE10 and most older browsers in use today, support flexbox. But an old syntax with a quite different spec and behavior. See flexbox support table. I also suggest you have a look and/or use this tool with the Generate legacy flexbox styles checkbox enabled to get an idea of what's involved. It will give you a fairly cross compatible CSS syntax to use.

If you care about cross-compatiblity with older browsers as you should*, display:flex; alone is not recommended. You need to add those old flexbox prefixes. As for IE8 and 9, you can use a table fallback indeed targeting IE8 desktop browsers if you must. Which comes to the following rule set:

.flex-container {
  display: table;        /* IE < 10, Opera *Presto* Desktop (Now dead) */
  display: -webkit-box;  /* Safari 3.1 - 6, Chrome < 21 (2009 Spec), UCBrowser Android */
  display: -moz-box;     /* Firefox 2 - 27 (2009 Spec), UCMini Android */
  display: -ms-flexbox;  /* IE10 (2012 Syntax) */
  display: -webkit-flex; /* Safari 6.1 - 8, Android < 4.4, BB < 10, Chrome 21 - 28 */
  display: flex;         /* Edge 12+, Firefox 28+, Blink, Safari 9+, Opera Mini 8+ */
}

Noting that the main feature differences between new and old flexbox spec and support is the lack of flex-wrap. So besides the many ["flexbugs"] (https://github.com/philipwalton/flexbugs) and differences to watch for. Keep in mind that you cannot use flex-wrap if you want extensive backward compatibility beyond 2012 browsers or IE9.

*It's also worth noting that if your target users are in Asia or Africa, you will definitely need the -webkit-box model for the UCBrowser for Android, which currently still doesn't support the new syntax. (As of 2016, UCBrowser has over 10% of mobile browser usage worldwide and 25% in Asia). -moz-box is arguably also needed for UCMini which is based on older Firefox (usage data and whereabouts is publicly unknown however).

For the flex items table-cell or table-row fallbacks. It gets tricky, especially with flexbox nesting.

However, there are 3 options available:

1) Use feature detection with a script like Modernizr. And use the Modernizr CSS document styling to declare the IE8-9 fallback rules via JS feature detection. Like this:

html.no-flexbox .flex-item {
  display: table-cell;
}

2) Use IE CSS conditional styling:

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="ie-8-9-fallbacks.css" />
<![endif]-->

OR

3) The other no-JS way is using CSS hacks. With a display value which will ignored by other browsers, and only be parsed and applied by IE8-9.

With: a)

.flex-item {
  display: block;
  display: table-cell\0/; /*IE8-10 */
}

and/or:
b)

@media \0screen\,screen\9 { /* IE6-10 and exclude FF2 */
  .flex-item { display: table-cell; }
}

Is there any good fallbacks for HTML5 and CSS3?

When talking about HTML5 or CSS3, you should head over to:

When can I use...

As can be seen, we are still far far away from using that.

Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:

Progressive Enhancement and Graceful Degradation

Here are some resources also:

• Gallery of HTML5 Sites (You can learn and get the idea from them)
• Create modern Web sites using HTML5 and CSS3

---

Related Topics