Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kyrylo Zvyagintsev
3,640 Pointscross-browser ::befor and ::after
I'm sorry about my question. but anyway:
in the great lesson (https://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
15,710 PointsIt 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/
Ryan Carson
23,287 PointsThere's a great site which explains browser support called caniuse.com
Kyrylo Zvyagintsev
3,640 PointsThanks to your link found another one: http://quirksmode.org/css/selectors/ it looks like more complete :-)
Thank you!
Kyrylo Zvyagintsev
3,640 PointsKyrylo Zvyagintsev
3,640 Pointsso, 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
15,710 PointsSebastian Wilson
15,710 Points1.) 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
3,640 PointsKyrylo Zvyagintsev
3,640 PointsThank you very much, Sebastian Wilson! Now i have a lot what think about...:) one more time thanx for interesting and useful information!