Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Kyrylo Zvyagintsev
Kyrylo Zvyagintsev
3,640 Points

cross-browser ::befor and ::after

I'm sorry about my question. but anyway:

in the great lesson (http://teamtreehouse.com/library/css-foundations/advanced-selectors/pseudoelements-before-and-after) there was css code:

 .phone::before{content:"\2706";}

does it work on old browsers? (especialy "The Great" IE)

Thanx a lot for any help

2 Answers

Sebastian Wilson
Sebastian Wilson
15,710 Points

It looks like it works for IE 8 "In Windows Internet Explorer 8, as well as later versions of Windows Internet Explorer in IE8 Standards mode, only the one-colon form of this pseudo-element is recognized—that is, :before." http://msdn.microsoft.com/en-gb/library/ie/cc304078(v=vs.85).aspx

Older Internet Explorer versions are a real pain, in IE you can press F12 which will get you into developer mode. Once your in there you can change document mode to target the IE version you wish e.g. IE7!!! And see how your page is getting on.

There are different ways to get your work to look right in different browsers-

http://css-tricks.com/snippets/css/browser-specific-hacks/

And to target different style sheets for browsers I use the following example for IE 7 and lower

<!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]-->

Reference - http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Kyrylo Zvyagintsev
Kyrylo Zvyagintsev
3,640 Points

so, if i will get in trouble with IE, i need: 1.open F12 and change document till i will have that i need 2.i need to create special .css document with those additions i've done in step 1 3.i need to put in my html document link on that .css document i've created in step 2

am I right?

p.s. sorry if my questions are silly...i'm just beginner with not good level of English...:)

Sebastian Wilson
Sebastian Wilson
15,710 Points

1.) In internet Explorer 11 by press F12 you should get the developer tools this can help you with development

Here is a link to for an Introduction to F12 Developer Tools

2.) You do not have to create a new style sheet depends on how you wish to progress

For example linkedin does the following

<!--[if lt IE 7]> <html lang="en" class="ie ie6 lte9 lte8 lte7 os-win"> <![endif]--> <!--[if IE 7]> <html lang="en" class="ie ie7 lte9 lte8 lte7 os-win"> <![endif]--> <!--[if IE 8]> <html lang="en" class="ie ie8 lte9 lte8 os-win"> <![endif]--> <!--[if IE 9]> <html lang="en" class="ie ie9 lte9 os-win"> <![endif]--> <!--[if gt IE 9]> <html lang="en" class="os-win"> <![endif]--> <!--[if !IE]><!--> <html lang="en" class="os-win"> <!--<![endif]-->

and their site looks ok in IE 7

I can't tell what teamtreehouse does but if you change your mode to IE 7 https://teamtreehouse.com/ it looks broken ...

3.) Yes you would need to add your css to every page of your site. You can always create master pages and include your header/footer/styles

for more details on including

http://css-tricks.com/forums/topic/how-to-include-php-headers-and-footers-on-html-site/

Kyrylo Zvyagintsev
Kyrylo Zvyagintsev
3,640 Points

Thank you very much, Sebastian Wilson! Now i have a lot what think about...:) one more time thanx for interesting and useful information!

There's a great site which explains browser support called caniuse.com

Kyrylo Zvyagintsev
Kyrylo Zvyagintsev
3,640 Points

Thanks to your link found another one: http://quirksmode.org/css/selectors/ it looks like more complete :-)

Thank you!