Alright. In this video we're gonna look at ways  that we can help ourselves when we're building our  site after Photoshop. So in Photoshop we have an infinite amount  of things we could do. We could have a gradient with a drop shadow,  with unicorns flying out of it  and fire and all sorts of things. So we can do that in Photoshop, that's that kind of program. But when it comes to web design,  we're quite limited in terms of the types  of things you can put on a website down to its code.

And mainly it comes down to the browsers  and how old the browsers are, depending on  what they can and can't support. So flying unicorns, no, there's no CSS feature for that,  but there are features for gradients and drop shadows. So what we can do is we can use this website  called can I use.com. Now there are other sites like this one. I really like this site. Um,  so let's say we wanna work with gradients.

So if I type in gradient here, it tells me  that the CSS gradient, okay,  works on everything except Opera Mini. Now if you need to support Opera mini,  then you are gonna have  to think twice about using CSS gradients. Luckily gradients are out at the moment  and it's all about flat design. But say you knew you have to have a gradient  that if you have to support this opera mini,  then you are gonna have to not use CSS gradients. Another thing you might need to find out whether you have  to support some older browsers. So if you're building a website  and the rule is we have to support at least a minimum  of Internet Explorer nine,  you are not gonna be have CSS gradients.

Now it doesn't mean you can't use it,  it just means they're not gonna appear. So you might design it so that there is,  if the gradients not applied,  that there is just a flat background. Okay, flat background color. And that might be fine because it's in the background. It's not a huge important part of it. Let's say something like, let's look at shadows.

Okay, so shadows is a couple of different shadows. Box shadows. So box shadows, okay, the shadows  that hang off sides of diviv tags,  that works pretty consistently. Let's look at tech shadows. So it's not supported in IE nine again. Now this might be more important  because you might be deciding  that I'm gonna have this very light blue text on this white  background, but it's totally not readable  unless there's a drop shadow behind it.

Okay? So you're relying on  that drop shadow for the text to be read. And what that'll do is  that Internet Explorer nine is gonna be this really faded  out text on white background. So it's little bit more important. So just to have a look at this site. Sometimes you're thinking, I wonder if I can do  that on a website or not.

Okay, this can I use now  and I got a nice little extra for the site is here. It's detected that I'm an island. That's where I'm filming at the moment. If I click import, it gives me this nice stuff. So at the moment, by default it gave me the global stuff,  but now it gives me actually what's happening in Ireland. So you can see globally there's 90% supported,  but in Ireland it's 97% supported.

Okay? So global takes into all countries,  whereas Ireland technologically quite modern. So a lot more is gonna be supported. Quite modern browsers and modern computers. Now if you're doing a site that is specifically  for say a developing nation,  you're gonna have a a lot different ratio here. You're gonna have a lot lowest.

You're not gonna be able to use some of these features  as much as say we can here in Ireland. Alright? And that's the, can I use website.