To Target Specific Browsers:

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

To Target Specific Browsers:

Post by Dr.CSS »

To Target Specific Browsers:

#ID or .class is like div#main or div.main

* html #ID or .class {
  ie6
}

NOTE: sometimes IE6 requires...

* html body #ID or .class {
   ie6
}

*:first-child+html #ID or .class {
  ie7
}

#ID or .class, x:-moz-any-link, x:default {
   FF3
}

body:nth-of-type( ) #ID or .class {
   OLDER versions of: chrome and safari
}
      OR

body:nth-of-type(1) #ID or .class {
  chrome and safari, this will just target the 1st one
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#ID or .class {
new versions of chrome and safari
}
}

First time ever I had to target Firefox only as all other browsers showed the same thing...

@-moz-document url-prefix() {
#ID or .class {
for latest firefox
}
}
Last edited by Dr.CSS on Sat Dec 24, 2011 3:51 am, edited 4 times in total.
Reason: New calls...
User avatar
CWebguy
Forum Members
Forum Members
Posts: 139
Joined: Thu Jul 24, 2008 3:31 am

Re: To Target Specific Browsers:

Post by CWebguy »

Thanks for this.
CMSMS Made
christiaans
Power Poster
Power Poster
Posts: 300
Joined: Tue Mar 04, 2008 10:37 am

Re: To Target Specific Browsers:

Post by christiaans »

Could come in handy, but the thing is that your css will not validate.

Another option would be a simple javascript detection browser, and then passing on a class for that specific browser. (fairly easy to do, but only for specific elements and such..)
hexdj
Power Poster
Power Poster
Posts: 415
Joined: Sat Mar 24, 2007 8:28 am

Re: To Target Specific Browsers:

Post by hexdj »

antosha wrote: If I understand correctly, the tags in the template won't work?
They will work, you just have to wrap them in the smarty {literal}{/literal} tags for example:

Code: Select all

{literal}
<!--[if IE 6]>
  <p>Your browser sucks</p>
<![endif]>
{/literal}
JeremyBASS

Re: To Target Specific Browsers:

Post by JeremyBASS »

Just figured I throw this here.. a handy tool I use alot for this.. browsertools Cheers -Jeremy
Inzman
New Member
New Member
Posts: 6
Joined: Sun Apr 26, 2009 8:01 am

Re: To Target Specific Browsers:

Post by Inzman »

There's also a way with javascript:
http://rafael.adm.br/css_browser_selector/

Very handy script, can target browsers and their different versions.
rooon
Forum Members
Forum Members
Posts: 113
Joined: Mon Dec 05, 2011 4:40 pm
Location: Nederland

Re: To Target Specific Browsers:

Post by rooon »

Or use browser detection
for example http://forum.cmsmadesimple.org/viewtopi ... =4&t=63334
Locked

Return to “Layout and Design (CSS & HTML)”