Detect CSS3 compatability and display message if not compatable.

[daba]

I’ve created a site using html5 standards (sections, articles, header & footer) and css3 (box-shadow, border-radius, pure css nav bar using ul list, ect).

Older browsers that do not support css3 ruin the page layout, but as this is not a company page, and therefore I’m not willing to spend time adapting for these users, but wish to instead display a message to either update their browsers or continue to what looks like madness on a old browser.

I have tried using tags to display a bar across the top of the page, but this means that other browser that don’t support css3 still get through.

I’m guessing that a PHP script is required to check CSS3 compatibility (check if box-shadow works for example) and then return a true or false answer. If the answer is false and the user hasn’t visited this domain in the last hour, redirect the user to a warning page.

Anyone have any code that they’re willing to share for this non-profit site?

[daba]

@kgscott284
Thanks, yes, I’ve seen this code before, and it does find which properties work, but I need to redirect these users to a different page or display a horizontal header image.
How do I rewrite

for (t in Detect) {

document.write(

"CSS " + t + " support? " +

(Detect[t] ? "YES" : "NO") +

"
"

);

}

to perform this task?

[daba]

Looks great! Should I put this within the html page head to stop flashing?
Also will googlebot, ect index the stuff within the span? I guess I could just add a single image and then block that said image in the robots.txt file.
Thanks!

[daba]

thanks

[Author]

Posts