hey everybody welcome back to css3 in 30
days today is day 11 and all about
internet explorer unfortunately so now
before we go forward internet explorer
has taken a lot of liberty to try and
improve their software and they're on
like version 15 or something crazy right
now i don't really pay attention because
i don't really care but hopefully you're
watching this at some point in the
future where none of this is an issue
anymore however there are some people
who still use internet explorer 9 and
below which is crazy talk but
luckily in css 3 and css we can we can
kind of make some accommodations and
in my case i just like to remove the
styles for those browsers all together
so i'm going to show you how to do that
with something called conditional
comments jump over here and check this
out you can see here i'm going to show
you what a conditional comment looks
like and what it does
so basic conditional comment looks like
this if i e and it's wrapped in
basically an html comment and then you
can put any html in between including
links to css like a different ie style
sheet
and then you close it off like so
you could select different types of
browsers internet explorer versions
rather six seven eight nine by using the
following conditional comments
you can use a specific uh conditional
comment for
uh say a version of internet explorer or
lower so if
lte stands for less than or equal to ie
six seven eight or nine that styles
internet explorer six or less seven or
less eight or less nine or less or
rather those browsers register those
comments and then we have uh the
opposite of that which is greater than
or equal to so you could style greater
than or equal to ie six seven eight or
nine
or i just like to use the
uh the catch all if i e so that's
internet explorer six through nine
and that will be recognized and rendered
by those specific browsers
so jump over here in our code editor and
all we have in day 11 you can go ahead
and download that is
an index file and an ie.css file gonna
run through them show you what's going
on and then we can be on our merry way
and not think about ie anymore so
right here you can see in the head of
our html i have a conditional comment
that's selecting ie 6 through 9 and i'm
just adding
an ie style sheet
so only internet explorer 6 or 9 will
recognize and render that comment and
then we'll tie into our css file which
looks like this
basically i'm just
i did an asterisk selector which is a
catch-all everything i'm removing the
background color and line height
resetting that really aggressively
removing the course files button and the
level two heading uh tab that sits on
the side of of the container in the web
page that we have here
and then i found a complete css reset at
this link that's just an aggressive
reset just resets everything to just
basic black and white text and that's
all i want for ie six through nine
because i don't wanna have to
accommodate those browsers so i just
show them my markup which if it's
semantic they should be able to read it
and get the meaning of the website
anyway so
let me just go back to our browser or
index.html file here and i want to show
you one last thing i've done right under
the conditional comments i've put
conditional comments through from six
through nine and basically just some
text so if you're this is a test method
so if you're viewing it from ie 6 7 8 or
9 you'll see the proper the respective
comment for the browser that you are
using so why don't we test that i've
taken the liberty of uploading this to
my website on my domain
and uh there's a webpage website called
netrenderer.com
where you can basically get a screen
grab of
an ie browser of a live web page so if
you go to netrenderer and type in
bradhusty.ca dev u e w w
uh and choose internet explorer nine
because for some reason seven and eight
don't work on my website but nine does
and if i hit render
basically what's going to happen
is it's going to take a few seconds and
then it's going to give me a rendering
screenshot of what internet explorer 9
how it sees my website so here you go
it's just basic black and white it's got
the text you can read it
and then if you notice here you're
viewing with internet explorer 9. you
can't see that in my chrome browser
because obviously it's not ie but here
it is you're viewing with internet
explorer 9 and the styles are completely
wiped so that all they can do is read it
perfect that's all i really need so i
know that was kind of a quick lesson but
feel free if you really care to
utilize this strategy on your own blogs
and websites
if you just want to remove the styles
altogether you could do simply what i
did or if you want to take a little bit
more of an accommodating approach you
can do that as well play around there
are a number of different uh
browsing test browser testing tools such
as browser stack
but that's paid whereas netrender is
just a screen grab of what ie sees your
website uh how it sees your website
so really that's kind of all i didn't
want to spend a lot of time on this
because it's quite simple conditional
comment an ie css file and just remove
the styles pretty straightforward
uh i hope you're having a great day and
tomorrow i'll see you in day 12 which is
gonna be fun we're gonna be playing
around with some css3 variables
[Music]